-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
222 lines (163 loc) · 9.88 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi portfolio - Barbara - </title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" href="css/intro.css">
<link rel="stylesheet" href="css/diome.css">
<link rel="stylesheet" href="css/bye.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=Amiko&family=Audiowide&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/04eace9da0.js" crossorigin="anonymous"></script>
</head>
<body>
<section>
<nav>
<div class="menu" id="nav">
<a href="#sobre-mi"><button class="menu-link active"><i class="fa-solid fa-house"></i></button></a>
<a href="#portfolio"><button class="menu-link"><i class="fa-sharp fa-solid fa-briefcase"></i></button></a>
<a href="#contacto"><button class="menu-link"><i class="fa-solid fa-address-book"></i></button></a>
</div>
</nav>
</section>
<div class="background">
<section class="section" id="sobre-mi">
<div>
<h1 class="sobre-mi__titular">¡Hola! <br> Soy diseñadora web</h1>
<div class="sobre-mi__contenido">
<div class="sobre-mi__descripcion">
<p>Mi nombre es Bárbara y soy programadora web enfocada en diseño web frontend. Las principales tecnologías con las que trabajo son HTML, CSS y JS. También tengo conocimientos en experiencia de usuario. Lo que me permite un enfoque amplio a la hora de encarar mis diseños. Garantizo tanto la estética, como la usabilidad del sitio web y la funcionalidad del mismo desde su estructura.</p>
</div>
<div class="sobre-mi__foto">
<img src="img/intro-removebg-preview.png" alt="" width="100%" height="auto">
</div>
</div>
</div>
</section>
<section class="section" id="portfolio">
<h2 class="portfolio__titular">Mis diseños</h2>
<div class="flex__container">
<div class="slide__container">
<div class="mySlides fade">
<img src="img/encriptador.png" alt="Vista previa del proyecto encriptador"
class="proyecto__img proyecto__uno" />
</div>
<div class="mySlides fade">
<img src="img/ahorcado.png" alt="Vista previa del proyecto juego del ahorcado"
class="proyecto__img proyecto__dos" />
</div>
<div class="mySlides fade">
<img src="img/e_learning_Alura.png" alt="Vista previa del proyecto e-learning" class="proyecto__img proyecto__tres" />
</div>
<div class="mySlides fade">
<img src="img/Apeperia.png" alt="Vista previa del proyecto Apeperia" class="proyecto__img proyecto__cuatro" />
</div>
<div class="mySlides fade">
<img src="img/Freelance.png" alt="Vista previa del proyecto freelance" class="proyecto__img proyecto__cinco" />
</div>
<div class="mySlides fade">
<img src="img/Alura-Store.png" alt="Vista previa del proyecto alura store" class="proyecto__img proyecto__seis" />
</div>
<div class="mySlides fade">
<img src="img/Recetas-Blog.png" alt="Vista previa del proyecto recetas blog" class="proyecto__img proyecto__siete" />
</div>
<a class="prev" onclick="plusSlides(-1)">
</a>
<a class="next" onclick="plusSlides(+1)"> > </a>
</div>
<div class="puntitos" style="text-align: center">
<span class="dot" onclick="currenSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<span class="dot" onclick="currentSlide(6)"></span>
<span class="dot" onclick="currentSlide(7)"></span>
</div>
<p class="projects project1">Encriptador de texto. Genera tus mensajes en código secreto. Las
tecnologías utilizadas fueron: HTML, CSS, Javascript y diseño responsivo (adaptable
mobile).
<a href="https://barlen738.github.io/encriptador_de_texto/" target="_blank">Visítalo</a>
</p>
<p class="projects project2">Juego del ahorcado. Diviértete adivinando la palabra secreta, y agrega tus propias
palabras. Las tecnologías utilizadas fueron: HTML, CSS, JavaScript y diseño responsivo (adaptable
mobile).
<a href="https://barlen738.github.io/juego_ahorcado/
" target="_blank">Visítalo</a>
</p>
<p class="projects project3">E-learning. Ofrece cursos en línea con un diseño funcional y estético. Las
tecnologías utilizadas fueron: HTML, CSS, JavaScript y diseño responsivo (adaptable mobile).
<a href="https://barlen738.github.io/E-learning_Alura/" target="_blank">Visítalo</a>
</p>
<p class="projects project4">Apeperia. Diseño responsivo y adaptable a distintos dispositivos (mobile-first).
Uso de metodología BEM como estándar
para nombrar clases CSS y facilitar su
comprensión.
Código semántico, cuidando su legibilidad y
estructura, para facilitar su comprensión,
accesibilidad y posicionamiento web. Las
tecnologías utilizadas fueron: HTML, CSS, diseño responsivo y mobile first design.
<a href="https://barlen738.github.io/Apeperia_Home/" target="_blank">Visítalo</a>
</p>
<p class="projects project5">Freelance. Adaptación de un template según requerimiento del
usuario.
Uso de transiciones suaves para mejorar la experiencia de
usuario y optimizar la navegación, interactividad y
estética del sitio web.
Diseño responsivo y adaptable a distintos dispositivos. Las
tecnologías utilizadas fueron: HTML, CSS, JavaScript, PHP y diseño responsivo (adaptable mobile).
<a href="https://barlen738.github.io/freelance/" target="_blank">Visítalo</a>
</p>
<p class="projects project6">Alura Store. Creación de página web usando CSS grid layout.
Diseño responsivo y adaptable a distintos dispositivos.
Uso de metodología BEM como estándar para nombrar
clases CSS y facilitar su comprensión. Las
tecnologías utilizadas fueron: HTML, CSS, grid y diseño responsivo (adaptable mobile).
<a href="https://barlen738.github.io/AluraStore/" target="_blank">Visítalo</a>
</p>
<p class="projects project7">Blog de recetas. Uso de metodología BEM como estándar para
nombrar clases CSS y facilitar su comprensión.
Uso de metodología Atomic Design, para una
mejor organización y mantenimiento del código
CSS.
Aplicación de diseño responsivo, cuidando la
visualización correcta de la página web en
distintos dispositivos (móviles, tablets). Las
tecnologías utilizadas fueron: HTML, CSS, flexbox y diseño responsivo (adaptable mobile).
<a href="https://barlen738.github.io/Blog_Recetas/" target="_blank">Visítalo</a>
</p>
</div>
</section>
<section class="section" id="contacto">
<div class="contacto__divi">
<h2 class="contacto__titular">¿Te gustó lo que viste?</h2>
<p class="contacto__descripcion">Mandame un mensaje y conversemos.</p>
<div class="contacto__links">
<a href="https://www.linkedin.com/in/barbara-lencinas/" target="_blank">
<div class="contacto__links--LI"><i class="fa-brands fa-linkedin fa-3x"></i></div>
</a>
<a href="https://github.com/BarLen738" target="_blank">
<div class="contacto__links--IG"><i class="fa-brands fa-square-github fa-3x"></i></div>
</a>
<!-- <a href="#">
<div class="contacto__links--FB"><i class="fa-brands fa-square-facebook fa-3x"></i></div>
</a> -->
</div>
</div>
</section>
</div>
<footer class="pie">
<div class="pie__logo">
<img src="img/barbyCodes-removebg-preview.png" alt="Logo">
</div>
<p class="pie__descripcion">Copyright © 2022 All rights reserved</p>
<p class="pie__descripcion">Diseñado con 💜</p>
</footer>
<script src="dynamic.js"></script>
</body>
</html>