-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
125 lines (123 loc) · 9.14 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juanjo's Portfolio</title>
<!-- Tailwind -->
<link href="src/output.css" rel="stylesheet">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="src/favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="src/favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="src/favicon_io/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
</head>
<body class="bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 min-h-screen flex items-center justify-center p-5">
<div class="space-y-4">
<div class="bg-white rounded-xl shadow-lg max-w-4xl w-full p-6 text-center">
<div class="flex items-center justify-center space-x-4">
<p>📄 You can download my <span class="font-semibold">Resume/CV</span> here!</p>
<a href="src/CV_Juan_José_Alonso.pdf"
download="Juan_Jose_Alonso's_Resume"
class="bg-gradient-to-r from-blue-500 via-purple-600 to-pink-500 text-white font-semibold w-10 h-10 flex justify-center items-center rounded-lg shadow-md hover:shadow-lg hover:scale-105 transition-all duration-300 ease-in-out">
<i class="fa-solid fa-file-arrow-down"></i>
</a>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg max-w-4xl w-full p-6">
<header class="m-3 p-5 text-2xl border border-gray-300 rounded">
<div class="flex justify-between items-center">
<h1 class="text-center"><span class="font-bold">Juanjo's</span> <span class="italic font-extralight">Portfolio</span></h1>
<div class="flex space-x-2">
<!-- GitHub Button -->
<a href="https://github.com/jalonsoluc"
class="bg-gradient-to-r from-gray-500 via-gray-700 to-black text-white font-semibold w-10 h-10 flex justify-center items-center rounded-lg shadow-md hover:shadow-lg hover:scale-105 transition-all duration-300 ease-in-out">
<i class="fa-brands fa-github"></i>
</a>
<!-- LinkedIn Button -->
<a href="https://www.linkedin.com/in/juan-jos%C3%A9-alonso-lecaros-a0168023a/"
class="bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 text-white font-semibold w-10 h-10 flex justify-center items-center rounded-lg shadow-md hover:shadow-lg hover:scale-105 transition-all duration-300 ease-in-out">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</div>
</div>
</header>
<div class="p-5">
<h2 class="text-xl font-semibold mb-3">👨🏽💻 Who is Juanjo?</h2>
<p>Juan José Alonso (a.k.a. Juanjo) is a 22 year-old, fifth-year <span class="font-semibold">Software Engineering student</span>
@ <em>Pontificia Universidad Católica de Chile</em> 🇨🇱.</p>
</div>
<div class="p-5">
<h2 class="text-xl font-semibold mb-3">📝 What keeps Juanjo busy?</h2>
<p>33.3% of the time: <span class="font-semibold">sleeping</span>. 😴
<br>
<br>
In all seriousness:</p>
<div class="m-6">
<p>🤖 <span class="font-semibold">Software Engineering for AI Applications Intern</span> @ <span class="italic">Cencosud</span>.</p>
<p>🔬 <span class="font-semibold">Researching Assistant</span> and <span class="font-bold">Co-Author</span> in multiple investigations.</p>
</div>
<p>He currently is <span class="italic">quite busy</span> with other stuff, but these are the <span class="underline">roles that stand out the most</span>.</p>
</div>
<div class="p-5">
<h2 class="text-xl font-semibold mb-3">🗂️ What has Juanjo done throughout his short-lived career?</h2>
<p>So far, he has:</p>
<div class="m-6">
<p>⛹🏽♂️ Been part of the <span class="font-semibold">Track and Field</span> and <span class="font-semibold">Basketball</span> teams at his school.</p>
<p>🥇 <span class="font-semibold">Won an Entrepreneurship Competition</span> in London at the age of 16.</p>
<p>📈 Achieved a <span class="font-semibold">score of 198 on the Cambridge C1 Advanced test</span>, certifying at C1 level in English.</p>
<p>🤝 Been a <span class="font-semibold">Member of the Innovation and Entrepreneurship Committee</span> of the <span class="italic">Engineering Student Council @ UC Chile</span>.</p>
<p>👨🏽🏫 Been a <span class="font-semibold">Teaching Assistant</span> @ <span class="italic">Engineering Challenges</span>, <span class="italic">Artificial Intelligence</span>.</p>
<p>💻 Been an <span class="font-semibold">Intern</span> at <span class="italic">Williamson Industrial S.A.</span></p>
</div>
<p>He has a <span class="font-semibold">passion for learning new things</span> and <span class="font-semibold">living enriching experiences</span>, so <span class="underline">this list will continue to grow</span>.</p>
</div>
<div class="p-5">
<h2 class="text-xl font-semibold mb-3">❤️ Which project best represents Juanjo?</h2>
<p>Has to be <span class="font-semibold italic">ChessRec</span>: a chess opening recommendation system ♟️. Developed alongside his fellow classmates Joaquín Domínguez and José Tomás Lledó, <span class="italic">ChessRec</span> combines multiple key aspects of his profile:
his interest in technology (artificial intelligence and data analysis), his passion for sports and strategy (chess), and his ability to apply advanced analytical methodologies in a practical context.
This project not only highlights his technical skills but also showcases his creativity and solution-oriented mindset, values that seem to define his approach to challenges.
<br>
<br>
<span class="underline">For further details</span>, feel free to explore the accompanying <a href="https://github.com/jalonsoluc/chessrec/blob/main/ChessRec__An_Embedding_Based_Recommender_System_for_Chess_Opening_Suggestions.pdf" class="text-blue-600 hover:underline">paper</a>. The source code is also available <a href="https://github.com/jalonsoluc/chessrec" class="text-blue-600 hover:underline">here</a>.
</p>
</div>
<div class="p-5">
<h2 class="text-xl font-semibold mb-3">😁 What are some of Juanjo's hobbies?</h2>
<p>Got loads of them! Here are the ones he loves the most:</p>
<div class="m-6">
<p>🎾 <span class="font-semibold">Playing tennis</span></p>
<p>🎮 <span class="font-semibold">Playing videogames</span></p>
<p>🐶 <span class="font-semibold">Playing with his faithful pet dog, Coco</span></p>
</div>
<p>As you can tell, he <span class="underline">loves playing around</span>. 😅</p>
</div>
<div class="p-5">
<h2 class="text-xl font-semibold mb-3">👋 How can I get in touch?</h2>
<p>Loads of ways! Here are some of them:</p>
<div class="m-6">
<p>📧 His <span class="font-semibold">email address</span> is <a href="mailto:[email protected]" class="text-blue-600 hover:underline">[email protected]</a></p>
<p>📞 His <span class="font-semibold">mobile phone </span> is
<a href="tel:+56968547247" class="text-blue-600 hover:underline">+(56 9) 6854 7247</a>
<span class="text-gray-300 italic">(although he does prefer text messages...)</span>
</p>
</div>
<p><span class="underline">For serious inquiries, an email is preferred</span>. Anything else, just shoot him a text. 😉</p>
<div class="mt-3">
<a href="https://wa.me/56968547247?text=Hi%20Juanjo!%20I%20went%20through%20your%20portfolio.%20Mind%20if%20we%20have%20a%20chat%3F"
class="bg-gradient-to-r from-green-400 via-green-500 to-green-600 text-white font-semibold py-3 px-6 rounded shadow-md flex items-center space-x-2 hover:shadow-lg hover:scale-105 transition-all duration-300 ease-in-out">
<i class="fa-brands fa-whatsapp"></i>
<span>Chat on WhatsApp</span>
</a>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg max-w-4xl w-full p-6 text-center">
<div class="flex items-center justify-center space-x-4">
<p>🗓️ <span class="font-semibold">Last updated on:</span> January 13th, 2025</p>
</div>
</div>
</body>
</html>