-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
175 lines (167 loc) · 8.12 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 lang="en">
<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">
<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=Exo:ital,wght@1,500&family=Martel:wght@200&family=Nunito&display=swap" rel="stylesheet">
<!-- FONT AWESOME es un repositorio de iconos para incrutar en las páginas web
La etiqueta de FONT AWESOME debe ir antes de los estilos CSS -->
<script src="https://kit.fontawesome.com/2908e4e466.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<title>PORTFOLIO ANDRES PEREZ DIAZ | Data Scientist & Full Stack Developer</title>
</head>
<body>
<div class="contenedor">
<!-- Este es el contenedor general para que todos
los elementos queden organizados en su interior -->
<header>
<div class="logo">
<h1 id="nombre">ANDRES RUEDALIBRE</h1>
<p>Master in Anthropology | Data Scientist | Full Stack Developer</p>
</div>
<form action="">
<!-- Esta es la barra de búsqueda para que
el visitante pueda filtrar la información
que desee ver -->
<input type="text" class="barra-busqueda"
id="barra-busqueda" placeholder="Search">
</form>
<div class="categorias" id="categorias">
<!-- Este es el menú de categorías, consiste
básicamente en textos que tienen enlaces a las
diferentes páginas de los proyectos.
-->
<!-- Debe haber una de las categorías que sea
la que esté activa cuando se carga el index.
Por eso lleva una clase que lo identifica. -->
<a href="#" class="activo">All</a>
<a href="#">Data Science</a>
<a href="#">Mobile Dev</a>
<a href="#">Web Dev</a>
<a href="#">Gallery</a>
<a href="#">Blog</a>
<a href="#">Ethics</a>
</div>
</header>
<!-- En esta sección van a quedar organizadas todas las imagenes que
representan a todas las categorías de la web -->
<!-- Las imagenes deben ir dentro de un contenedor tipo grid y
cada imagen sera un item del grid -->
<section class="grid" id="grid">
<!-- data-categoria es un atributo personalizado que es posible en HTML5
Permite crear atributos usando el prefijo data- -->
<!-- Las etiquetas con los términos de búsqueda que podrán utilizar
los usuarios para filtrar en la barra de búsqueda -->
<div class="item"
data-categoria="data science"
data-etiquetas="data science desarrollo AI"
data-descripcion="1. Proyectos de Data Science e Inteligencia Artificial">
<div class="item-contenido">
<img src="images/data_science.png" alt="data_science">
</div>
</div>
<div class="item"
data-categoria="mobile dev"
data-etiquetas="mobile dev react mobile development api-rest responsive"
data-descripcion="2. Mobile development">
<div class="item-contenido">
<img src="images/mobile.png" alt="mobile-dev">
</div>
</div>
<div class="item"
data-categoria="web dev"
data-etiquetas="web dev web development api-rest responsive"
data-descripcion="3. Web development">
<div class="item-contenido">
<img src="images/web.png" alt="web-dev">
</div>
</div>
<div class="item"
data-categoria="gallery"
data-etiquetas="gallery photography images travel"
data-descripcion="4. Fotografía amateur">
<div class="item-contenido">
<img src="images/image_gallery.png" alt="web-dev">
</div>
</div>
<div class="item"
data-categoria="blog"
data-etiquetas="blog opinion writing"
data-descripcion="5. Columnas de opinión sobre diversos temas">
<div class="item-contenido">
<img src="images/blog.png" alt="web-dev">
</div>
</div>
<div class="item"
data-categoria="ethics"
data-etiquetas="ethics values opinion writing"
data-descripcion="6. Principios éticos y filosofía de vida">
<div class="item-contenido">
<img src="images/ethics.png" alt="web-dev">
</div>
</div>
</section>
<!-- ESTA ES LA SECCIÓN QUE VA A MOSTRAR LA IMAGEN EN DETALLE (OVERLAY)
CON SU RESPECTIVA DESCRIPCIÓN -->
<section class="overlay" id="overlay">
<div class="contenedor-img">
<!-- Le asigno una clase al botón de cerrar para darle estilos en css -->
<!-- En la web de FONT AWESOME, copio el código que va entre las etiquetas de button
para que se cargue el icono -->
<button id="btn-cerrar-popup"><i class="fas fa-times-circle"></i></button>
<img src="" alt="">
</div>
<p class="descripcion">
<!-- En esta descripción puedo incluir más elementos
como íconos, botones call-to-action, etc -->
</p>
</section>
<!-- El FOOTER va a llevar también la clase "contenedor"
para que también quede centrado -->
<footer class="contenedor">
<div class="redes-sociales">
<div class="contendor-icono">
<a href="https://github.com/ruedalibre"
target="blank" class="github">
<i class="fab fa-github"></i>
</a>
</div>
<div class="contendor-icono">
<!-- El target blank es para que
el vínculo se abra en una nueva pestaña
para que el usuario no se salga de mi sitio web-->
<a href="https://twitter.com/AndresPD76"
target="blank" class="twitter">
<!-- El icono de Twitter fue agregado
usand el enlace de fontawesome.com -->
<i class="fab fa-twitter"></i>
</a>
</div>
<div class="contendor-icono">
<a href="https://www.linkedin.com/in/andres-perez-develop/"
target="blank" class="linkedin">
<i class="fab fa-linkedin"></i>
</a>
</div>
</div>
<div class="creado-por">
<p>By Andrés Ruedalibre <a href="#">Andrés Pérez Díaz</a>
- <a href="/">Ruedalibre</a></p>
</div>
</footer>
</div>
<!-- Estas son las librerías de MUURI que controlan las animaciones de
la grilla que organiza los elementos -->
<!-- NOTA: el orden es importante, primero se debe insertar el link de las animaciones
y después el de la librería como tal -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/web-animations.min.js"></script>
<!-- NOTA SOBRE MUURI: Esta librería exige sus propios estilos CSS que están en la página
de la aplicación. Tenerlo en cuenta para futuros proyectos. -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/muuri.min.js"></script>
<!-- Acá creo el archivo Javascript con el que se va a programar la web -->
<script src="main.js"></script>
</body>
</html>