-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
157 lines (153 loc) · 13.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daniel Boria | About me</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap" rel="stylesheet">
<script defer src="js/script.js"></script>
</head>
<body>
<div class="info">
<div class="info__upper">
<h1>Daniel Boria</h1>
<p>
IT Graduate by the <b><a href="http://www.upv.es" target="_blank" rel="noopener noreferrer" class="link_anim">UPV</a></b><br>
UX/UI & Frontend student at <b><a href="https://www.esat.es" target="_blank" rel="noopener noreferrer" class="link_anim">ESAT</a></b><br>
Discovering his love for interfaces
</p>
<div class="info__socials">
<a href="https://codepen.io/dabodia" target="_blank" rel="noopener noreferrer"><svg style="width:1.6rem;height:1.6rem" viewBox="0 0 24 24">
<path fill="currentColor" d="M8.21 12L6.88 12.89V11.11L8.21 12M11.47 9.82V7.34L7.31 10.12L9.16 11.36L11.47 9.82M16.7 10.12L12.53 7.34V9.82L14.84 11.36L16.7 10.12M7.31 13.88L11.47 16.66V14.18L9.16 12.64L7.31 13.88M12.53 14.18V16.66L16.7 13.88L14.84 12.64L12.53 14.18M12 10.74L10.12 12L12 13.26L13.88 12L12 10.74M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12M18.18 10.12C18.18 10.09 18.18 10.07 18.18 10.05L18.17 10L18.17 10L18.16 9.95C18.15 9.94 18.15 9.93 18.14 9.91L18.13 9.89L18.11 9.85L18.1 9.83L18.08 9.8L18.06 9.77L18.03 9.74L18 9.72L18 9.7L17.96 9.68L17.95 9.67L12.3 5.91C12.12 5.79 11.89 5.79 11.71 5.91L6.05 9.67L6.05 9.68L6 9.7C6 9.71 6 9.72 6 9.72L5.97 9.74L5.94 9.77L5.93 9.8L5.9 9.83L5.89 9.85L5.87 9.89L5.86 9.91L5.84 9.95L5.84 10L5.83 10L5.82 10.05C5.82 10.07 5.82 10.09 5.82 10.12V13.88C5.82 13.91 5.82 13.93 5.82 13.95L5.83 14L5.84 14L5.84 14.05C5.85 14.06 5.85 14.07 5.86 14.09L5.87 14.11L5.89 14.15L5.9 14.17L5.92 14.2L5.94 14.23C5.95 14.24 5.96 14.25 5.97 14.26L6 14.28L6 14.3L6.04 14.32L6.05 14.33L11.71 18.1C11.79 18.16 11.9 18.18 12 18.18C12.1 18.18 12.21 18.15 12.3 18.1L17.95 14.33L17.96 14.32L18 14.3L18 14.28L18.03 14.26L18.06 14.23L18.08 14.2L18.1 14.17L18.11 14.15L18.13 14.11L18.14 14.09L18.16 14.05L18.16 14L18.17 14L18.18 13.95C18.18 13.93 18.18 13.91 18.18 13.88V10.12M17.12 12.89V11.11L15.79 12L17.12 12.89Z" />
</svg></a>
<a href="https://github.com/dabodia" target="_blank" rel="noopener noreferrer"><svg style="width:1.6rem;height:1.6rem" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
</svg></a>
<a href="https://www.linkedin.com/in/dabodia/" target="_blank" rel="noopener noreferrer"><svg style="width:1.6rem;height:1.6rem" viewBox="0 0 24 24">
<path fill="currentColor" d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z" />
</svg></a>
</div>
</div>
<div class="info__image"></div>
<div class="contact mobiledisable">
<div class="subtitle">
<h3>Contact</h3>
<svg style="width:1.6rem;height:1.6rem" viewBox="0 0 24 24">
<path fill="currentColor" d="M21,8V7L18,9L15,7V8L18,10M22,3H2A2,2 0 0,0 0,5V19A2,2 0 0,0 2,21H22A2,2 0 0,0 24,19V5A2,2 0 0,0 22,3M8,6A3,3 0 0,1 11,9A3,3 0 0,1 8,12A3,3 0 0,1 5,9A3,3 0 0,1 8,6M14,18H2V17C2,15 6,13.9 8,13.9C10,13.9 14,15 14,17M22,12H14V6H22" />
</svg>
</div>
<p>
Want to ask me about something?<br>
Want to tell me a cool story?<br>
You can send an e-mail and do so.
</p>
<a href="mailto:[email protected]"><button>Send an e-mail!</button></a>
</div>
</div>
<main>
<div class="main__section">
<div class="subtitle">
<svg style="width:1.6rem;height:1.6rem" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
<h3>About me</h3>
</div>
<p>
Hi! As you may have already seen on the page, my name is Daniel or Dani. I am an IT graduate on his way to become a proper full-fledged Front-end Developer and/or UX/UI Designer.
<br><br>
I consider myself sincere, thorough and very demanding with myself. I am willing to learn about several different topics if I need to. Thanks to that, I am able to pick up things rapidly. Regarding teamwork, I am pretty good working in a group and communicating things to my coworkers (even though I am a bit shy).
<br><br>
If I have some free time, you will probably find me playing videogames. When I'm not playing them, I also enjoy playing the piano (quite poorly), doing exercise or googling about the latest tech releases (mostly hardware-related).
</p>
</div>
<div class="main__section">
<div class="subtitle">
<svg style="width:1.6rem;height:1.6rem" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z" />
</svg>
<h3>Studies</h3>
</div>
<p>
I’ve always been interested in a great variety of topics, and to be honest, I never knew what to study because I enjoy doing a lot of things. I ended up studying an IT degree in the UPV (Universitat Politècnica de València) and after finishing my degree I decided I wanted to learn more about UX/UI (and also a few tips and tricks about webdev) since I found it really interesting.
<br><br>
At present time, I am studying a postgraduate degree in UX/UI and I am quite happy with what I’m doing. However, because of my nature, I don’t discard wanting to learn something new in the future, may it be related to design and IT, or maybe something completely different.
</p>
</div>
<div class="main__section">
<div class="subtitle">
<svg style="width:1.6rem;height:1.6rem" viewBox="0 0 24 24">
<path fill="currentColor" d="M7,6H17A6,6 0 0,1 23,12A6,6 0 0,1 17,18C15.22,18 13.63,17.23 12.53,16H11.47C10.37,17.23 8.78,18 7,18A6,6 0 0,1 1,12A6,6 0 0,1 7,6M6,9V11H4V13H6V15H8V13H10V11H8V9H6M15.5,12A1.5,1.5 0 0,0 14,13.5A1.5,1.5 0 0,0 15.5,15A1.5,1.5 0 0,0 17,13.5A1.5,1.5 0 0,0 15.5,12M18.5,9A1.5,1.5 0 0,0 17,10.5A1.5,1.5 0 0,0 18.5,12A1.5,1.5 0 0,0 20,10.5A1.5,1.5 0 0,0 18.5,9Z" />
</svg>
<h3>Hobbies</h3>
</div>
<div class="hobbylist">
<div>
<svg style="width:4rem;height:4rem" viewBox="0 0 24 24">
<path fill="currentColor" d="M15.3 18.3L17 12.9L18.4 13.3L16.7 18.7L15.3 18.3M17.3 5.2C18.2 5.2 19 4.4 19 3.5S18.3 1.8 17.3 1.8C16.4 1.8 15.6 2.6 15.6 3.5S16.4 5.2 17.3 5.2M21.3 19.8C20.7 20.1 20.1 20.4 19.4 20.5C18.7 20.6 18 20.6 17.3 20.4L11 18.5L13.4 11.7L10.9 8.7L13.8 7.1C13.8 7.1 14.9 10 15 10.3S15.3 10.8 15.6 10.9L19.7 12.1L20.2 10.3L19.3 9.9L19.9 7.8L18.5 7.4L18 9.4L16.8 8.9L15.4 5C15 4.2 14 3.8 13.1 4.2L8.5 6.7C7.6 7.2 7.3 8.3 7.8 9.1C7.9 9.3 10.8 12.3 10.8 12.3L9.1 18L2.3 16L2 17.3L16.9 21.7C18.6 22.2 20.4 22 22 21.1L21.3 19.8Z" />
</svg>
<p>Skiing</p>
</div>
<div>
<svg style="width:4rem;height:4rem" viewBox="0 0 24 24">
<path fill="currentColor" d="M7 1C5.9 1 5 1.9 5 3V21C5 22.11 5.9 23 7 23H14C16.76 23 19 20.76 19 18V3C19 1.9 18.11 1 17 1H7M8 4H16V11H8V4M9 14H10V16H12V17H10V19H9V17H7V16H9V14M16 15C16.55 15 17 15.45 17 16C17 16.55 16.55 17 16 17C15.45 17 15 16.55 15 16C15 15.45 15.45 15 16 15M14 17C14.55 17 15 17.45 15 18C15 18.55 14.55 19 14 19C13.45 19 13 18.55 13 18C13 17.45 13.45 17 14 17Z" />
</svg>
<p>Games</p>
</div>
<div>
<svg style="width:4rem;height:4rem" viewBox="0 0 24 24">
<path fill="currentColor" d="M4,3H20A2,2 0 0,1 22,5V19A2,2 0 0,1 20,21H4A2,2 0 0,1 2,19V5A2,2 0 0,1 4,3M4,5V19H8V13H6.75V5H4M9,19H15V13H13.75V5H10.25V13H9V19M16,19H20V5H17.25V13H16V19Z" />
</svg>
<p>Piano</p>
</div>
<div>
<svg style="width:4rem;height:4rem" viewBox="0 0 24 24">
<path fill="currentColor" d="M17,17H7V7H17M21,11V9H19V7C19,5.89 18.1,5 17,5H15V3H13V5H11V3H9V5H7C5.89,5 5,5.89 5,7V9H3V11H5V13H3V15H5V17A2,2 0 0,0 7,19H9V21H11V19H13V21H15V19H17A2,2 0 0,0 19,17V15H21V13H19V11M13,13H11V11H13M15,9H9V15H15V9Z" />
</svg>
<p>Tech</p>
</div>
<div>
<svg style="width:4rem;height:4rem" viewBox="0 0 24 24">
<path fill="currentColor" d="M21,3V15.5A3.5,3.5 0 0,1 17.5,19A3.5,3.5 0 0,1 14,15.5A3.5,3.5 0 0,1 17.5,12C18.04,12 18.55,12.12 19,12.34V6.47L9,8.6V17.5A3.5,3.5 0 0,1 5.5,21A3.5,3.5 0 0,1 2,17.5A3.5,3.5 0 0,1 5.5,14C6.04,14 6.55,14.12 7,14.34V6L21,3Z" />
</svg>
<p>Music</p>
</div>
<div>
<svg style="width:4rem;height:4rem" viewBox="0 0 24 24">
<path fill="currentColor" d="M13.5,5.5C14.59,5.5 15.5,4.58 15.5,3.5C15.5,2.38 14.59,1.5 13.5,1.5C12.39,1.5 11.5,2.38 11.5,3.5C11.5,4.58 12.39,5.5 13.5,5.5M9.89,19.38L10.89,15L13,17V23H15V15.5L12.89,13.5L13.5,10.5C14.79,12 16.79,13 19,13V11C17.09,11 15.5,10 14.69,8.58L13.69,7C13.29,6.38 12.69,6 12,6C11.69,6 11.5,6.08 11.19,6.08L6,8.28V13H8V9.58L9.79,8.88L8.19,17L3.29,16L2.89,18L9.89,19.38Z" />
</svg>
<p>Sports</p>
</div>
</div>
</div>
</main>
<footer>
<div class="contact">
<div class="subtitle">
<svg style="width:1.6rem;height:1.6rem" viewBox="0 0 24 24">
<path fill="currentColor" d="M21,8V7L18,9L15,7V8L18,10M22,3H2A2,2 0 0,0 0,5V19A2,2 0 0,0 2,21H22A2,2 0 0,0 24,19V5A2,2 0 0,0 22,3M8,6A3,3 0 0,1 11,9A3,3 0 0,1 8,12A3,3 0 0,1 5,9A3,3 0 0,1 8,6M14,18H2V17C2,15 6,13.9 8,13.9C10,13.9 14,15 14,17M22,12H14V6H22" />
</svg>
<h3>Contact</h3>
</div>
<p>
Want to ask me about something?<br>
Want to tell me a cool story?<br>
You can send an e-mail and do so.
</p>
<a href="mailto:[email protected]"><button>Send an e-mail!</button></a>
</div>
</footer>
<div class="themebtn">
<button onclick="toggleTheme()">
<svg id="moon" style="width:1.25rem;height:1.25rem" viewBox="0 0 24 24">
<path fill="currentColor" d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" />
</svg>
<svg id="sun" style="width:1.25rem;height:1.25rem" viewBox="0 0 24 24">
<path fill="currentColor" d="M3.55,18.54L4.96,19.95L6.76,18.16L5.34,16.74M11,22.45C11.32,22.45 13,22.45 13,22.45V19.5H11M12,5.5A6,6 0 0,0 6,11.5A6,6 0 0,0 12,17.5A6,6 0 0,0 18,11.5C18,8.18 15.31,5.5 12,5.5M20,12.5H23V10.5H20M17.24,18.16L19.04,19.95L20.45,18.54L18.66,16.74M20.45,4.46L19.04,3.05L17.24,4.84L18.66,6.26M13,0.55H11V3.5H13M4,10.5H1V12.5H4M6.76,4.84L4.96,3.05L3.55,4.46L5.34,6.26L6.76,4.84Z" />
</svg>
</button>
</div>
</body>
</html>