-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
218 lines (204 loc) · 13.8 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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html lang="en" class="dark">
<!-- La idea es fer un botó que canviï la classe -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alejandro Cabrera Carrasco | Web Developer</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="./styles/style.css">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.4/lottie.min.js"></script>
<!-- Lottie library per les animacions JSON -->
</head>
<body>
<div class="containerBody" id="background-lottie">
<!-- Contenedor para la animación Lottie -->
<div id="lottie-container"></div>
</div>
<header>
<div class="card">
<p>
<span class="author-signature">Alejandro Cabrera
Carrasco</span>
<span class="day-text">Wednesday, June 15th</span>
<span class="time-text">11:11</span>
</p>
</div>
<nav>
<ul>
<li><button class="button-nav"
onclick="location.href='./index.html'">Home</button></li>
<li><button class="button-nav"
onclick="location.href='#about-me'">About
Me</button></li>
<li><button class="button-nav"
onclick="location.href='#projects'">Projects</button></li>
<li><button class="button-nav"
onclick="location.href='#contact'">Contact</button></li>
<li>
<div class="toggle-switch">
<label class="switch-label">
<input type="checkbox" class="checkbox"
onclick="toggleStyleButton()">
<span class="slider"></span>
</label>
</div>
</li>
</ul>
</nav>
</header>
<main>
<section id="about-me" onmouseleave="hideElement('grid-container')">
<article class="cardAboutMe">
<div class="temporary_text">
</div>
<div class="card_content">
<span class="card_title"></span>
<span class="card_subtitle">Web developer and IT Technician</span>
<p class="card_description">
Hi, I'm Alejandro Cabrera Carrasco, a 24-year-old IT enthusiast currently living in Barcelona.
My passion for technology began when I was 11, after my family’s laptop broke. Instead of replacing it, I decided to fix it myself by installing a new hard drive and setting up Mandriva Linux.
That experience sparked a lifelong interest in IT. Over the years, I’ve explored various aspects of technology, and now I’m about to complete my studies to become a web developer.
To showcase my skills, I’ve put together this portfolio—enjoy exploring it!
<h1>Technologies I Know</h1>
<br>
<label class="container-tech">
<input checked="checked" type="checkbox" onclick="showElement('grid-container')">
<svg viewBox="0 0 512 512" height="1em"
xmlns="http://www.w3.org/2000/svg"
class="chevron-down"><path
d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"></path></svg>
</label>
<div class="grid-container">
<div class="grid-item">
<h2>Markup Languages</h2>
<ul>
<li><img src="./media/Icons/html5.svg"
alt="HTML Icon"> HTML</li>
<li><img src="./media/Icons/css.svg" alt="CSS Icon">
CSS</li>
</ul>
</div>
<div class="grid-item">
<h2>Frameworks</h2>
<ul>
<li><img src="./media/Icons/laravel.svg"
alt="Laravel Icon"> Laravel</li>
<li><img src="./media/Icons/Bootstrap.png"
alt="Bootstrap Icon"> Bootstrap</li>
</ul>
</div>
<div class="grid-item">
<h2>Programming Languages</h2>
<ul>
<li><img src="./media/Icons/python.svg"
alt="Python Icon"> Python</li>
<li><img src="./media/Icons/java.svg"
alt="Java Icon"> Java</li>
<li><img src="./media/Icons/javascript.svg"
alt="JavaScript Icon"> JavaScript</li>
<li><img src="./media/Icons/phpdark.svg"
alt="PHP Icon"> PHP</li>
</ul>
</div>
<div class="grid-item">
<h2>IDEs</h2>
<ul>
<li><img src="./media/Icons/apache.svg"
alt="NetBeans Icon"> NetBeans</li>
<li><img src="./media/Icons/vscode.svg"
alt="VSCode Icon"> VSCode</li>
<li><img src="./media/Icons/pycharm.svg"
alt="PyCharm Icon"> PyCharm</li>
</ul>
</div>
</div>
</section>
</div>
</article>
</section>
<section id="projects">
<h1>Projects</h1>
<div class="cards">
<div class="card red">
<p class="tip">Hover Me</p>
<p class="second-text">Lorem Ipsum</p>
</div>
<div class="card blue">
<p class="tip">Hover Me</p>
<p class="second-text">Lorem Ipsum</p>
</div>
<div class="card green">
<p class="tip">Hover Me</p>
<p class="second-text">Lorem Ipsum</p>
</div>
</div>
</section>
<section id="contact">
<h1>Contact</h1>
<div class="contact-container">
<div class="contact-info">
<div class="cardSN">
<a class="socialContainer containerOne" href="https://github.com/Alexasto12" target="_blank" title="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 50 50">
<path d="M17.791,46.836C18.502,46.53,19,45.823,19,45v-5.4c0-0.197,0.016-0.402,0.041-0.61C19.027,38.994,19.014,38.997,19,39 c0,0-3,0-3.6,0c-1.5,0-2.8-0.6-3.4-1.8c-0.7-1.3-1-3.5-2.8-4.7C8.9,32.3,9.1,32,9.7,32c0.6,0.1,1.9,0.9,2.7,2c0.9,1.1,1.8,2,3.4,2 c2.487,0,3.82-0.125,4.622-0.555C21.356,34.056,22.649,33,24,33v-0.025c-5.668-0.182-9.289-2.066-10.975-4.975 c-3.665,0.042-6.856,0.405-8.677,0.707c-0.058-0.327-0.108-0.656-0.151-0.987c1.797-0.296,4.843-0.647,8.345-0.714 c-0.112-0.276-0.209-0.559-0.291-0.849c-3.511-0.178-6.541-0.039-8.187,0.097c-0.02-0.332-0.047-0.663-0.051-0.999 c1.649-0.135,4.597-0.27,8.018-0.111c-0.079-0.5-0.13-1.011-0.13-1.543c0-1.7,0.6-3.5,1.7-5c-0.5-1.7-1.2-5.3,0.2-6.6 c2.7,0,4.6,1.3,5.5,2.1C21,13.4,22.9,13,25,13s4,0.4,5.6,1.1c0.9-0.8,2.8-2.1,5.5-2.1c1.5,1.4,0.7,5,0.2,6.6c1.1,1.5,1.7,3.2,1.6,5 c0,0.484-0.045,0.951-0.11,1.409c3.499-0.172,6.527-0.034,8.204,0.102c-0.002,0.337-0.033,0.666-0.051,0.999 c-1.671-0.138-4.775-0.28-8.359-0.089c-0.089,0.336-0.197,0.663-0.325,0.98c3.546,0.046,6.665,0.389,8.548,0.689 c-0.043,0.332-0.093,0.661-0.151,0.987c-1.912-0.306-5.171-0.664-8.879-0.682C35.112,30.873,31.557,32.75,26,32.969V33 c2.6,0,5,3.9,5,6.6V45c0,0.823,0.498,1.53,1.209,1.836C41.37,43.804,48,35.164,48,25C48,12.318,37.683,2,25,2S2,12.318,2,25 C2,35.164,8.63,43.804,17.791,46.836z"></path>
</svg>
</a>
<a class="socialContainer containerThree" href="https://www.linkedin.com/in/ccalejandro/" target="_blank"title="Linkedin">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 30 30">
<path d="M24,4H6C4.895,4,4,4.895,4,6v18c0,1.105,0.895,2,2,2h18c1.105,0,2-0.895,2-2V6C26,4.895,25.105,4,24,4z M10.954,22h-2.95 v-9.492h2.95V22z M9.449,11.151c-0.951,0-1.72-0.771-1.72-1.72c0-0.949,0.77-1.719,1.72-1.719c0.948,0,1.719,0.771,1.719,1.719 C11.168,10.38,10.397,11.151,9.449,11.151z M22.004,22h-2.948v-4.616c0-1.101-0.02-2.517-1.533-2.517 c-1.535,0-1.771,1.199-1.771,2.437V22h-2.948v-9.492h2.83v1.297h0.04c0.394-0.746,1.356-1.533,2.791-1.533 c2.987,0,3.539,1.966,3.539,4.522V22z"></path>
</svg>
</a>
<a class="socialContainer containerTwo" href="https://drive.google.com/uc?export=download&id=1kv7Ahn6olTZAN89Ez4BIkvZrcWunwf1_" target="_blank" title="Download my CV">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M3 24h19v-23h-1v22h-18v1zm17-24h-18v22h18v-22zm-1 1h-16v20h16v-20zm-2 16h-12v1h12v-1zm0-3h-12v1h12v-1zm0-3h-12v1h12v-1zm-7.348-3.863l.948.3c-.145.529-.387.922-.725 1.178-.338.257-.767.385-1.287.385-.643 0-1.171-.22-1.585-.659-.414-.439-.621-1.04-.621-1.802 0-.806.208-1.432.624-1.878.416-.446.963-.669 1.642-.669.592 0 1.073.175 1.443.525.221.207.386.505.496.892l-.968.231c-.057-.251-.177-.449-.358-.594-.182-.146-.403-.218-.663-.218-.359 0-.65.129-.874.386-.223.258-.335.675-.335 1.252 0 .613.11 1.049.331 1.308.22.26.506.39.858.39.26 0 .484-.082.671-.248.187-.165.322-.425.403-.779zm3.023 1.78l-1.731-4.842h1.06l1.226 3.584 1.186-3.584h1.037l-1.734 4.842h-1.044z"/></svg>
</a>
<a class="socialContainer containerFour" href="./html/How has done.html" title="How has done this page">
<svg class="arrow" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z" fill-rule="nonzero"/></svg>
</a>
</div>
</div>
<div class="form-container">
<form class="form">
<div class="form-group">
<label for="email">Type your mail</label>
<input required="" name="email" id="email" type="text">
</div>
<div class="form-group">
<label for="textarea">Message</label>
<textarea required="" cols="50" rows="10" id="textarea" name="textarea"></textarea>
</div>
<button type="submit" class="form-submit-btn">Submit</button>
</form>
</div>
</div>
<footer>
<div class="footer">
<p>© 2024 by Alejandro Cabrera Carrasco. Proudly created with HTML, CSS, and JavaScript. <br>
Days since I started developing this page: <b><u><span id="daysPast"> </span> Days
</p>
</div>
</footer>
</section>
</main>
<button id="scrollToTopBtn" onclick="scrollToTop()">↑</button>
<script src="./js/FrontEndFunctions.js"></script>
<script src="./js/BackEndFunctions.js"></script>
<div class="nav-screen">
<i class="fa fa-times fa-3x"></i>
<div class="nav-container">
<div class="nav-links">
<ul id='myMenu'>
<li data-menuanchor="aboutPage"><a href="#about-me">•</a></li>
<li data-menuanchor="projectsPage"><a href="#projects">•</a></li>
<li data-menuanchor="contactPage"><a href="#contact">•</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>