-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (134 loc) · 5.31 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
<!--Portfolio con metodología BEM-->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /><!--El maximum scale = 1 es para que el usuario no pueda hacer zoom en la pagina
y no se me descuadre nada en temas responsive-->
<!--Estilos-->
<link
rel="stylesheet"
href="assests/fuentes/fonts/fontawesome-free-6.5.2-web/css/all.min.css"
/>
<link rel="stylesheet" href="assests/fuentes/fonts/poppins/poppins.css" />
<link rel="stylesheet" href="assests/css/reset.css" />
<link rel="stylesheet" href="assests/css/scroll.css" />
<link rel="stylesheet" href="assests/css/styles.css" />
<link rel="stylesheet" href="assests/css/responsive.css"/>
<!--Script JS-->
<script src="assests/js/menu.js" defer></script>
<title>Portfolio - Andrés Martín - Inicio</title>
</head>
<body>
<!--layout principal-->
<div class="layout">
<!--Barra lateral. Info del usuario-->
<aside class="layout__aside">
<section class="aside__user-info">
<!--información gral del usuario-->
<div class="user-info__general">
<div class="user-info__container-image">
<img
src="assests/img/HOJA.jpg"
alt="Fotografía de perfil"
class="user-info__image"
/>
</div>
<h2 class="user-info__name">Andrés Martín</h2>
<h4 class="user-info__job">Especialista, desarrollador GIS</h4>
</div>
<!--Menu navegacion-->
<nav class="layout__menu">
<!--le pongo esa clase porque estaría dentro de la layout, aunque
podría poner user-info__menu que tendría mas logica-->
<ul class="menu__list">
<li class="menu__option">
<a href="index.html" class="menu__link menu__link--active">
<i class="menu__icon fas fa-home"></i>
<span class="menu__overlay">Home</span>
</a>
</li>
<li class="menu__option">
<a href="sobre-mi.html" class="menu__link">
<i class="menu__icon fas fa-user"></i>
<span class="menu__overlay">Sobre mi</span>
</a>
</li>
<li class="menu__option">
<a href="curriculum.html" class="menu__link">
<i class="menu__icon fas fa-graduation-cap"></i>
<span class="menu__overlay">Curriculum</span>
</a>
</li>
<li class="menu__option">
<a href="portafolio.html" class="menu__link">
<i class="menu__icon fas fa-briefcase"></i>
<span class="menu__overlay">Portfolio</span>
</a>
</li>
<li class="menu__option">
<a href="contacto.html" class="menu__link">
<i class="menu__icon fas fa-envelope"></i>
<span class="menu__overlay">Contacto</span>
</a>
</li>
</ul>
</nav>
<!--links RRSS-->
<div class="user-info__links">
<ul class="links__social">
<li class="social__option">
<a
href="https://www.youtube.com/channel/UCHFa9O6q8AdVr_pq63Mi7vQ"
class="social__link"
target="_blank"
>
<i class="social__icon fa-brands fa-youtube"></i>
</a>
</li>
<li class="social__option">
<a
href="https://www.linkedin.com/in/andresmartinrodriguez/"
class="social__link"
target="_blank"
>
<i class="social__icon fa-brands fa-linkedin"></i>
</a>
</li>
<li class="social__option">
<a
href="https://www.instagram.com/antarticka_/"
class="social__link"
target="_blank"
>
<i class="social__icon fa-brands fa-instagram"></i>
</a>
</li>
</ul>
</div>
<!--botón-->
<div class="user-info__buttons">
<a href="#" class="user-info__btn">Descargar CV</a>
</div>
<!--Footer. En este diseño, el footer va en el aside-->
<footer class="user-info__footer">
© 2024 Andrés Martín Rodríguez
</footer>
</section>
</aside>
<!--Menu responsive. El toggle es un elemento que al darle clic aparece, y al volver a darle desaparece.
Esto en la vista de escritorio, no lo voy a mostrar, sólo lo mostraré en detdos media queries-->
<div class="layout__menu-toggle">
<i class="menu-toggle__icon fa-solid fa-bars"></i>
<i class="menu-toggle__icon fa-solid fa-xmark"></i>
</div>
<!--Contenido principal-->
<main class="layout__content">
<section class="content__page">
<h1 class="page__name">Andrés Martín</h1>
<h2 class="page__job">Analista Desarrollador GIS/WEB.</h2>
</section>
</main>
</div>
</body>
</html>