-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
303 lines (303 loc) · 20.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
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
<!DOCTYPE html>
<html dir="ltr" lang="es-ES">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1.0">
<meta name="description" content="LuVaAcAn Portfolio">
<meta name="keywords" content="HTML, CSS, JavaScript, Portfolio, Portafolio, Design, Web Design, Paginas Web, Programador, Web">
<meta name="author" content="Luciano Valentino Achin Angeles">
<title>Luciano Achin | Web Developer & Graphic Designer</title>
<link rel="stylesheet" type="text/css" href="/assets/cssminified/achinstyles.css">
<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=Chathura:wght@100;300;400;700;800&family=Dela+Gothic+One&display=swap" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="/assets/images/Birdibly.ico">
<script src="https://kit.fontawesome.com/f2e5a48364.js" crossorigin="anonymous"></script>
</head>
<body class="index loadmainpage">
<div id="wrapper">
<header class="header_nav" id="header_wrap">
<div class="nav_logo" id="nav__logo">
<a href="#"><img src="assets/images/lucianoachinnb.png"></a>
</div>
<nav class="nav">
<div class="nav_list">
<ul>
<li><a class="contentlist" href="#aboutitles">About</a></li>
<li><a class="contentlist" href="#sandptitle">Skills & Experience</a></li>
<li><a class="contentlist" href="#contactptitle">Contact</a></li>
<li><a id="nav_github" class="contentlist" target="_blank" href="https://github.com/LuVaAcAn" style="display:inline-flex; align-items: center;"><i class="fa-brands fa-github" style="margin-right: 10px;"></i><p>GITHUB</p></a></li>
</ul>
</div>
<div class="mobile-menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</nav>
</header>
<div class="cntwrp">
<div class="initialpart one">
<div class="ip_whatami">
<div class="ip_whatamiimg">
<img id="wbdev" class="hidden" src="/assets/images/wbdev.png">
</div>
<div class="ip_whatamiimg">
<img id="grapdes" class="hidden1" src="/assets/images/grapdes.png">
</div>
</div>
<div id="s_blob" class="s_blob">
<div class="lanameblob">
<img id="lamain" src="assets/images/lamain.png">
</div>
<div class="mblobani">
<svg id="mainblob" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" id="blobSvg">
<path id="mblob" fill="#F5BC1A">
<animate attributeName="d"
dur="10000ms"
repeatCount="indefinite"
values="M387,358.5Q321,467,186.5,430.5Q52,394,53,251Q54,108,183.5,83Q313,58,383,154Q453,250,387,358.5Z;
M395,352.5Q317,455,198.5,414Q80,373,79.5,249.5Q79,126,203,69.5Q327,13,400,131.5Q473,250,395,352.5Z;
M403.04985,345.45638Q311.96884,440.91276,198.5,405.44703Q85.03116,369.98131,78.49377,245.47507Q71.95638,120.96884,197.46573,73.02181Q322.97507,25.07478,408.55297,137.53739Q494.13086,250,403.04985,345.45638Z;
M387.5,353Q317,456,202,412.5Q87,369,78.5,244Q70,119,195.5,74.5Q321,30,389.5,140Q458,250,387.5,353Z;
M404.5,357Q319,464,189,426.5Q59,389,55.5,247.5Q52,106,185,74Q318,42,404,146Q490,250,404.5,357Z;
M387,358.5Q321,467,186.5,430.5Q52,394,53,251Q54,108,183.5,83Q313,58,383,154Q453,250,387,358.5Z;">
</animate>
</path>
</svg>
</div>
</div>
<div class="laperdiar unselectable">
<h1>
<span>DIGITAL</span>
<div class="messagelaper">
<div id="mesw1">ARTIST</div>
<div id="mesw1">CREATOR</div>
<div id="mesw1">DEVELOPER</div>
</div>
</h1>
</div>
<div class="bsdsocialmedia unselectable">
<div id="bsdperu">
<span id="bsdperuline"></span>
<p>based on Peru</p>
</div>
<div id="inisocialmedia">
<a class="smig smsm" target="_blank" href="https://www.instagram.com/luva_acan/">instagram</a>
<a class="smtwt smsm" target="_blank" href="https://twitter.com/luva_acan">twitter</a>
<a class="smgthb smsm" target="_blank" href="https://github.com/LuVaAcAn/">github</a>
</div>
</div>
</div>
<div class="phrasepart unselectable">
<div id="phraseyellow"></div>
<div id="phrasewrap">
<div id="phrasephrase">
<p id="phrasep1">EXPERIENCES<br>BEYOND THE SCREEN</p>
<p id="phrasep2">Because in a world saturated with <span class="wordcol">information</span>,
<br><span class="wordcol">authenticity</span> and <span class="wordcol">creativity</span><br>become the <span class="wordcol">key</span>.</p>
</div>
</div>
</div>
<div class="aboutpart two unselectable">
<div id="aboutitles">
<div class="abttitles">
<h1>Hello !<span> </span>I'm <span class="wordcol1">Luciano</span>.</h1>
<p>(Also LuVa)</p>
</div>
<div class="birdiblytitles">
<span id="birdiblytitlesline"></span>
<img class="birdiblypng" src="/assets/images/Birdibly.png">
</div>
</div>
<div id="abouttext">
<div class="abttext">
<p class="hidden">
Current Computer Science student.<br>
Self-taught in web and mobile application development,
with experience in designing new features from conception to production,
implementing wireframe and design flows in high-performance software applications.<br><br>
My focus is not limited only to aesthetics; I strive to create functional solutions
that are not only visually stunning, but also intuitive and effective.
</p>
</div>
</div>
<div class="aboutimgsep">
<div class="abtimgsep">
<div id="abtcircle"></div>
<img class="abtimgs abtbdb" id="bdbabt1" src="/assets/images/Birdibly.png">
<img class="abtimgs abtbdb" id="bdbabt2" src="/assets/images/Birdibly.png">
<img class="abtimgs abtbdb" id="bdbabt3" src="/assets/images/Birdibly.png">
<img class="abtimgs" id="mpabt" src="/assets/images/mp1.png">
</div>
</div>
<div id="aboutphrase">
<div class="abttitles" id="abtpharse">
<p class="hidden">Design expands beyond the screen, where authenticity and creativity are woven into the fabric of the visual experience.</p>
</div>
<div class="bdbphrase">
<span id="bdbphraseline"></span>
<img class="birdiblypng1" src="/assets/images/Birdibly.png">
</div>
</div>
</div>
<div class="skillandexp three unselectable">
<div class="sandpabove">
<div id="sandptitle">
<h1>SKILLS & EXPERIENCE</h1>
</div>
<div id="sandpphoto"><img src="/assets/images/s0qsf891tun6fqckm20230808195750.png"></div>
</div>
<div id="sandexp_skills">
<span class="lineskills linehorizontal l1 hiddenleft"></span>
<span class="lineskills linehorizontal l2 hiddenright"></span>
<div class="skillsgrid">
<div class="skillselem"><img src="/assets/images/webskills/aws.png"><span class="skillelemtxt">AWS</span></div>
<div class="skillselem"><img src="/assets/images/webskills/cpp.png"><span class="skillelemtxt">C++</span></div>
<div class="skillselem"><img src="/assets/images/webskills/csharp.png"><span class="skillelemtxt">C#</span></div>
<div class="skillselem"><img src="/assets/images/webskills/css.png"><span class="skillelemtxt">CSS</span></div>
<div class="skillselem"><img src="/assets/images/webskills/discord.png"><span class="skillelemtxt">DISCORD</span></div>
<div class="skillselem"><img src="/assets/images/webskills/docker.png"><span class="skillelemtxt">DOCKER</span></div>
<div class="skillselem"><img src="/assets/images/webskills/figma.png"><span class="skillelemtxt">FIGMA</span></div>
<div class="skillselem"><img src="/assets/images/webskills/firebase.png"><span class="skillelemtxt">FIREBASE</span></div>
<div class="skillselem"><img src="/assets/images/webskills/git.png"><span class="skillelemtxt">GIT</span></div>
<div class="skillselem"><img src="/assets/images/webskills/github.png"><span class="skillelemtxt">GITHUB</span></div>
<div class="skillselem"><img src="/assets/images/webskills/html.png"><span class="skillelemtxt">HTML</span></div>
<div class="skillselem"><img src="/assets/images/webskills/java.png"><span class="skillelemtxt">JAVA</span></div>
<div class="skillselem"><img src="/assets/images/webskills/javascript.png"><span class="skillelemtxt">JAVASCRIPT</span></div>
<div class="skillselem"><img src="/assets/images/webskills/linux.png"><span class="skillelemtxt">LINUX</span></div>
<div class="skillselem"><img src="/assets/images/webskills/markdown.png"><span class="skillelemtxt">MARKDOWN</span></div>
<div class="skillselem"><img src="/assets/images/webskills/mongodb.png"><span class="skillelemtxt">MONGODB</span></div>
<div class="skillselem"><img src="/assets/images/webskills/mysql.png"><span class="skillelemtxt">MYSQL</span></div>
<div class="skillselem"><img src="/assets/images/webskills/nextjs.png"><span class="skillelemtxt">NEXTJS</span></div>
<div class="skillselem"><img src="/assets/images/webskills/nodejs.png"><span class="skillelemtxt">NODEJS</span></div>
<div class="skillselem"><img src="/assets/images/webskills/notion.png"><span class="skillelemtxt">NOTION</span></div>
<div class="skillselem"><img src="/assets/images/webskills/postman.png"><span class="skillelemtxt">POSTMAN</span></div>
<div class="skillselem"><img src="/assets/images/webskills/pug.png"><span class="skillelemtxt">PUG</span></div>
<div class="skillselem"><img src="/assets/images/webskills/python.png"><span class="skillelemtxt">PYTHON</span></div>
<div class="skillselem"><img src="/assets/images/webskills/react.png"><span class="skillelemtxt">REACT</span></div>
<div class="skillselem"><img src="/assets/images/webskills/redux.png"><span class="skillelemtxt">REDUX</span></div>
<div class="skillselem"><img src="/assets/images/webskills/tailwind.png"><span class="skillelemtxt">TAILWIND</span></div>
<div class="skillselem"><img src="/assets/images/webskills/tensorflow.png"><span class="skillelemtxt">TENSORFLOW</span></div>
<div class="skillselem"><img src="/assets/images/webskills/typescript.png"><span class="skillelemtxt">TYPESCRIPT</span></div>
<div class="skillselem"><img src="/assets/images/webskills/vs.png"><span class="skillelemtxt">VISUAL STUDIO</span></div>
<div class="skillselem"><img src="/assets/images/webskills/vscode.png"><span class="skillelemtxt">VS CODE</span></div>
</div>
</div>
<div id="sandexp_exp">
<h1>PROJECTS</h1>
<p id="sandexp_exp_body">here are some of my projects, check them out!</p>
<div class="exp_container">
<div class="exp_card" style="--clr:#1a7a3d;">
<div class="exp_card__img"><img src="assets/images/AI SIGN LANGUAGE.jpg"></div>
<div class="exp_card__cont"><h2>SIGN LANGUAGE AI TRANSLATION</h2>
<p>AI to interpret sign language and convert it into a language understandable to all, for a more inclusive society.</p>
<a target="_blank" href="https://github.com/LuVaAcAn/AI-for-Sign-Language-Translation">GH Repository</a></div>
</div>
<div class="exp_card" style="--clr:#1a7a3d;">
<div class="exp_card__img"><img src="assets/images/Corptexar.jpg"></div>
<div class="exp_card__cont"><h2>WEB CORPTEXAR S.A.C.S</h2>
<p>Attractive and modern website that increases traffic by 40% and sales by 35%, boosting the company's online presence.</p>
<a target="_blank" href="https://corptexar.com/">Webpage</a></div>
</div>
<div class="exp_card" style="--clr:#1a7a3d">
<div class="exp_card__img"><img src="assets/images/cameraadjustments.jpeg"></div>
<div class="exp_card__cont"><h2>PYTHON CAMERA ADJUSMENTS</h2>
<p>Program to adjust your camera settings (brightness, contrast, sharpness), image filters, and take pictures.</p>
<a target="_blank" href="https://github.com/LuVaAcAn/Python-Camera-Adjustments">GH Repository</a></div>
</div>
</div>
<div class="exp_container">
<div class="exp_card" style="--clr:#1a7a3d;">
<div class="exp_card__img"><img src="assets/images/ASCIIART.jpg"></div>
<div class="exp_card__cont"><h2>ASCII IMAGE CONVERSION</h2>
<p>Program to compress images (lossy or lossless) and display them in ACSII format on screen.</p>
<a target="_blank" href="https://github.com/LuVaAcAn/Image-Compression_And_ASCII-Show">GH Repository</a></div>
</div>
<div class="exp_card" style="--clr:#1a7a3d;">
<div class="exp_card__img"><img src="assets/images/PPS.jpg"></div>
<div class="exp_card__cont"><h2>WEB POWERPULSE SPORT</h2>
<p>Three-layer web application for a sports shoe store. Using MongoDB, Dockers and HTML/CSS/JS.</p>
<a target="_blank" href="https://github.com/LuVaAcAn/PowerPulse-Sports-Web">GH Repository</a></div>
</div>
<div class="exp_card" style="--clr:#1a7a3d">
<div class="exp_card__img"><img src="assets/images/namelinker.jpeg"></div>
<div class="exp_card__cont"><h2>LINK NAMES BY AFFINITY</h2>
<p>This Flask app creates interactive name similarity graphs based on user input (number of names, filters).</p>
<a target="_blank" href="https://github.com/LuVaAcAn/Link-Names-By-Affinity">GH Repository</a></div>
</div>
</div>
</div>
</div>
<div class="contactpart four unselectable">
<div class="contactpabove">
<div id="contactptitle">
<h1>CONTACT</h1>
</div>
</div>
<div id="contactways">
<div id="contactlist">
<div id="contactsocialmedia">
<a target="_blank" href="https://www.linkedin.com/in/luvaacan/"><div class="contactitem">
<i class="fa-brands fa-linkedin"></i>
<p> LINKEDIN</p>
</div></a>
<a target="_blank" href="https://www.instagram.com/luva_acan/"><div class="contactitem">
<i class="fa-brands fa-instagram"></i>
<p>INSTAGRAM</p>
</div></a>
<a target="_blank" href="https://github.com/LuVaAcAn"><div class="contactitem">
<i class="fa-brands fa-github"></i>
<p>GITHUB</p>
</div></a>
</div>
<a href="mailto:[email protected]"><div class="contactitem contactemail">
<i class="fa-solid fa-envelope"></i>
<p>[email protected]</p>
</a>
</div>
</div>
<img class="abtimgs abtbdb" id="bdbabt4" src="/assets/images/Birdibly.png">
</div>
<!--CONTACT FORM<div class="contactform">
<form class="contactformreal" method="POST" data-netlify="true" data-netlify-honeypot="botfield">
<div class="formrow">
<div class="contactinput">
<input type="text" id="name" required>
<label for="name">Nombre</label>
</div>
<div class="contactinput">
<input type="text" id="number" required>
<label for="number">Número</label>
</div>
</div>
<div class="contactinput">
<input type="email" id="email" required>
<label for="email">Correo Electrónico</label>
</div>
<div class="contactinput">
<textarea id="message" rows="12" required></textarea>
<label id="messagetext" for="message">Mensaje</label>
</div>
<button type="submit" name="submit">ENVIAR</button>
</form>
</div>
</div>-->
<div class="blankspace"></div>
</div>
<footer></footer>
<div class="circles-container">
<span class="circlesback c1 cmove"></span>
<span class="circlesback c2 cmove"></span>
<span class="circlesback c3 cmove"></span>
</div>
<span class="circlesback c4"></span>
</div>
<a href="#header_wrap"><button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top"><i class="fa-solid fa-angle-up"></i></button></a>
<div id="cv-download">
<a href="https://drive.google.com/file/d/1oGzeq6D6g9jFX54R6XCZik4mfC8m4MxT/view?usp=sharing" target="_blank">CV</a>
</div>
</div>
<script src="/assets/jsminified/script.js"></script>
</body>
</html>