-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
175 lines (157 loc) · 9.27 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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="script.js"></script>
<title>Júlio Pinto</title>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#AFD0CE',
secondary: '#90CDC9',
background: '#FEFEFE',
text: '#28595A'
}
}
}
}
</script>
</head>
<body class="md:overflow-hidden" onload="loadPage()">
<div id="desktop" class="hidden md:block container mx-auto py-4 h-screen select-none overflow-y-auto">
<div class="flex flex-col lg:mx-16 h-full gap-6">
<div class="flex flex-row justify-center gap-6 items-center h-full">
<!-- Left Column -->
<div class="flex flex-col w-full h-full gap-6 overflow-y-auto">
<!-- Header Section -->
<div class="bg-secondary rounded-2xl p-4 lg:p-8">
<p class="text-2xl md:text-5xl xl:text-8xl font-semibold text-text my-1 kulim-park-bold">Júlio Pinto</p>
<p class="text-md md:text-xl xl:text-4xl font-regular text-text kulim-park-light">software engineering student</p>
<p class="text-md md:text-xl xl:text-4xl font-regular text-text kulim-park-light">@ u.minho</p>
</div>
<!-- Experience Section -->
<div class="bg-primary rounded-2xl p-4 lg:px-8 flex-grow min-h-0">
<p class="text-xl xl:text-4xl font-semibold text-text my-1 kulim-park-semibold">Experience</p>
<div class="mt-4">
<div id="timeline"></div>
</div>
</div>
<!-- Footer Section (Social Media Links) -->
<div class="hidden lg:block bg-secondary w-full rounded-2xl px-8 py-4 mt-auto">
<div class="flex justify-between items-center">
<!-- Email section aligned to the left -->
<div class="flex flex-row items-center transition duration-100 ease-in-out hover:scale-[1.1] ">
<i class="material-icons text-text text-xl mt-1">email</i>
<a href="mailto:[email protected]" class="text-xl text-text kulim-park-regular ml-2">[email protected]</a>
</div>
<!-- Links section aligned to the right -->
<div class="flex flex-row gap-6">
<a href="https://github.com/JulioJPinto/" class="kulim-park-regular text-xl text-text mx-1 transition duration-100 ease-in-out hover:scale-[1.1] ">GitHub</a>
<a href="https://www.linkedin.com/in/juliojpinto/" class="kulim-park-regular text-xl text-text mx-1 transition duration-100 ease-in-out hover:scale-[1.1]">LinkedIn</a>
</div>
</div>
</div>
</div>
<!-- Right Column -->
<div class="flex flex-col w-full h-full gap-6 overflow-y-auto">
<div class="text-lg bg-primary rounded-2xl p-4 lg:p-8">
<div class="flex flex-col 2xl:flex-row justify-between items-center gap-3 lg:gap-6">
<img id="photo" class="rounded-2xl 2xl:w-[550px] 2xl:h-[550px]" src="public/me.png">
<p id="caption" class="text-xl lg:text-3xl text-text long-cang-regular text-left place-self-start scale-[2] 2xl:place-self-end 2xl:-rotate-90 origin-left 2xl:mx-4 2xl:scale-[2.5]">SEI'23</p>
</div>
</div>
<div class="bg-primary rounded-2xl p-4 lg:px-8 flex-grow min-h-0 overflow-auto">
<p class="text-xl xl:text-4xl font-semibold text-text my-1 kulim-park-semibold">About me</p>
<div class="mt-2 md:mt-4">
<p class="text-sm lg:text-xl text-justify font-regular text-text kulim-park-light">
I'm a software engineering student at the University of Minho, currently in the 1st year of my Masters degree. I'm passionate about technology and software development, and I'm always looking for new challenges and opportunities to learn and grow.
</p>
</div>
</div>
</div>
</div>
<div class="lg:hidden bg-secondary w-full rounded-2xl px-8 py-4 mt-auto">
<div class="flex justify-between items-center">
<!-- Email section aligned to the left -->
<div class="flex flex-row items-center">
<i class="material-icons text-text text-xl mt-1">email</i>
<a href="mailto:[email protected]" class="hidden xl:block text-xl text-text kulim-park-regular ml-2">[email protected]</a>
</div>
<!-- Links section aligned to the right -->
<div class="flex flex-row gap-6">
<a href="https://github.com/JulioJPinto/" class="kulim-park-regular text-xl text-text mx-1">GitHub</a>
<a href="https://www.linkedin.com/in/juliojpinto/" class="kulim-park-regular text-xl text-text mx-1">LinkedIn</a>
</div>
</div>
</div>
</div>
</div>
<div id="mobile" class="block md:hidden container mx-auto py-4 px-4 h-screen select-none" onclick="void(0);">
<div class="flex flex-col gap-6 h-full">
<!-- Header Section -->
<div class="bg-secondary rounded-2xl p-4 lg:p-8">
<div class="flex flex-row justify-between items-center">
<p class="text-2xl md:text-5xl xl:text-8xl font-semibold text-text my-1 kulim-park-bold">Júlio Pinto</p>
<span id="menu-icon" class="material-icons text-text text-3xl select-none" onclick="controleToggleMenu()">
menu
</span>
</div>
<p class="text-md md:text-xl xl:text-4xl font-regular text-text kulim-park-light">software engineering student</p>
<p class="text-md md:text-xl xl:text-4xl font-regular text-text kulim-park-light">@ u.minho</p>
</div>
<!-- Menu Section -->
<div id="menu" class="hidden -my-2">
<div class="flex flex-col gap-2">
<a onclick="toggleAboutMe()" id='abtme-btn' class=" bg-primary hover:bg-secondary hover:font-semibold w-full py-2 rounded-2xl kulim-park-regular text-md text-text">About me</a>
<a onclick="toggleExperience()" id='exp-btn' class="bg-primary hover:bg-secondary hover:font-semibold w-full py-2 rounded-2xl kulim-park-regular text-md text-text">Experience</a>
</div>
</div>
<div id="mobile-content" class="block flex flex-col gap-6 h-full">
<!-- Experience Section -->
<div id="experience" class="hidden bg-primary rounded-2xl p-4 lg:px-8 flex-grow min-h-0">
<p class="text-xl xl:text-4xl font-semibold text-text my-1 kulim-park-semibold">Experience</p>
<div class="mt-4">
<div id="timeline-mobile"></div>
</div>
</div>
<!-- About Me -->
<div id="aboutme" class="block bg-primary rounded-2xl p-4 lg:px-8 flex-grow h-min-0">
<p class="text-xl xl:text-4xl font-semibold text-text my-1 kulim-park-semibold">About Me</p>
<p class="text-md lg:text-xl text-justify font-regular text-text kulim-park-light">
I'm a software engineering student at the University of Minho, currently in my 3rd year. I'm passionate about technology and software development, and I'm always looking for new challenges and opportunities to learn and grow.
</p>
<div class="w-full mt-8">
<div class="text-lg bg-primary rounded-2xl">
<div class="flex flex-col mb-4 2xl:flex-row justify-between items-center gap-3 lg:gap-6">
<img id="mobile-photo" class="object-contain object-center rounded-2xl" src="public/me.png">
<p id="mobile-caption" class="text-xl mx-2 text-text long-cang-regular text-left place-self-start scale-[2.5] mt-1 origin-left">SEI'23</p>
</div>
</div>
</div>
</div>
<!-- Footer Section -->
<div class="lg:hidden bg-secondary w-full rounded-2xl px-8 py-4 mt-auto">
<div class="flex justify-between items-center">
<!-- Email section aligned to the left -->
<div class="flex flex-row items-center">
<i class="material-icons text-text text-xl mt-1 select-none">email</i>
<a href="mailto:[email protected]" class="hidden xl:block text-md text-text kulim-park-regular ml-2">[email protected]</a>
</div>
<!-- Links section aligned to the right -->
<div class="flex flex-row gap-6">
<a href="https://github.com/JulioJPinto/" class="kulim-park-regular text-md text-text mx-1">GitHub</a>
<a href="https://www.linkedin.com/in/juliojpinto/" class="kulim-park-regular text-md text-text mx-1">LinkedIn</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>