-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (163 loc) · 7.96 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
<!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">
<meta name="description" content="Portafolio de Jesús Gutiérrez, desarrollador web en formación.">
<link rel="stylesheet" href="style.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=Raleway:wght@500&display=swap" rel="stylesheet">
<title>Mi Portafolio - Jesús Gutiérrez</title>
</head>
<body>
<header>
<nav class="navbar">
<a href="#home" class="logo">Jesús Gutiérrez</a>
<ul class="nav-links">
<li><a href="#sobre-mi">Sobre mi</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#hobbies">Hobbies</a></li>
<li><a href="#formacion">Formación</a></li>
<li><a href="#xp">Proyectos</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section id="home" class="hero">
<img class="title__profile" src="assets/selfie.jpg" alt="Jesús Gutiérrez">
<div class="title__container">
<h1>Soy Jesús Gutiérrez y quiero ser desarrollador Web</h1>
<p>Autodidacta. Formación en AluraLatam y Freecodecamp. Actualmente participo en el proyecto Oracle ONE en Alura Latam.</p>
<ul class="title__network">
<li><a href="https://github.com/2gutierrez">Github</a></li>
<li><a href="https://linkedin.com/in/yourprofile">LinkedIn</a></li>
<li><a href="https://instagram.com/yourprofile">Instagram</a></li>
</ul>
</div>
</section>
<section id="sobre-mi" class="about">
<h2>Sobre mi</h2>
<p>Soy licenciado en Psicología por la Universidad Nacional Autónoma de México. Diplomado en Economía por el Instituto Matías Romero de Estudios Diplomáticos.</p>
<p>Me apasiona aprender cosas nuevas y enfrentar retos. Internacionalista por necesidad. Desarrollador WEB por afición.</p>
</section>
<section id="skills" class="skills">
<h2>Skills</h2>
<div class="skills__line">
<div class="skills__box">
<img src="assets/htlm.png" alt="HTML">
<p>HTML 5</p>
</div>
<div class="skills__box">
<img src="assets/js_icon.png" alt="Javascript">
<p>Javascript</p>
</div>
<div class="skills__box">
<img src="assets/css_icon.png" alt="CSS">
<p>CSS</p>
</div>
</div>
</section>
<section id="hobbies" class="hobbies">
<h2>Hobbies</h2>
<div class="hobbies__line">
<div class="hobbies__box">
<img src="assets/guitar_icon.png" alt="Tocar bajo">
<p>Tocar bajo</p>
</div>
<div class="hobbies__box">
<img src="assets/headphones_icon.png" alt="Oir música">
<p>Oir música</p>
</div>
<div class="hobbies__box">
<img src="assets/tv_icon.png" alt="Ver séries">
<p>Ver séries</p>
</div>
<div class="hobbies__box">
<img src="assets/camera_icon.png" alt="Tomar fotos">
<p>Tomar fotos</p>
</div>
</div>
</section>
<section id="formacion" class="academic">
<h2>Formación académica</h2>
<div class="academic__courses">
<div class="academic__courses__box">
<img src="assets/alura_logo.png" alt="Alura">
<h3>Formación en Front-end</h3>
<p>2024 - Alura</p>
</div>
<div class="academic__courses__box">
<img src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png" alt="Freecodecamp">
<h3>Formación en Front-end</h3>
<p>2024 - Freecodecamp</p>
</div>
</div>
</section>
<section id="xp" class="experience">
<h2>Experiencia Profesional</h2>
<div class="experience__box">
<img src="assets/org.png" alt="org">
<div class="experience__info">
<h3>Organization Manager</h3>
<p>Alura ORG</p>
<a href="https://github.com/2gutierrez/org.git" class="button">Repositorio</a>
<a href="https://org-fawn-psi.vercel.app/" class="button">Ver demo</a>
</div>
</div>
<div class="experience__box">
<img src="assets/alurageek.png" alt="Product Manager">
<div class="experience__info">
<h3>Product Manager</h3>
<p>Freecodecamp Challenge</p>
<a href="https://github.com/2gutierrez/AluraGeek-Challenge.git" class="button">Repositorio</a>
<a href="https://2gutierrez.github.io/AluraGeek-Challenge/" class="button">Ver demo</a>
</div>
</div>
<div class="experience__box">
<img src="assets/space.png" alt="SpaceApp">
<div class="experience__info">
<h3>SpaceApp</h3>
<p>Alura SpaceApp</p>
<a href="https://github.com/2gutierrez/space-app.git" class="button">Repositorio</a>
<a href="https://space-app-sigma-five.vercel.app/" class="button">Ver demo</a>
</div>
</div>
<div class="experience__box">
<img src="assets/imagen_encriptador.png" alt="Encriptador de texto">
<div class="experience__info">
<h3>Encriptador de texto</h3>
<p>Challenge Alura Codificador</p>
<a href="https://github.com/2gutierrez/challenge-oracle-decoder.git" class="button">Repositorio</a>
<a href="https://2gutierrez.github.io/challenge-oracle-decoder/" class="button">Ver demo</a>
</div>
</div>
<div class="experience__box">
<img src="assets/U2_tribute.png" alt="Tribute Page">
<div class="experience__info">
<h3>Simple Tribute Page</h3>
<p>Freecodecamp Challenge</p>
<a href="https://github.com/2gutierrez/U2-Tribute-page.git" class="button">Repositorio</a>
<a href="https://2gutierrez.github.io/U2-Tribute-page/" class="button">Ver demo</a>
</div>
</div>
</section>
<section id="contacto" class="contact">
<h2>Contacto</h2>
<form id="contact-form">
<input type="text" id="name" name="name" placeholder="Nombre" required>
<input type="email" id="email" name="email" placeholder="E-mail" required>
<input type="text" id="asunto" name="asunto" placeholder="Asunto" required>
<textarea id="mensaje" name="mensaje" placeholder="Mensaje" required></textarea>
<button type="submit">Enviar mensaje</button>
</form>
</section>
</main>
<footer>
<p>© 2024 Jesús Gutiérrez. Developed by Jesús Gutiérrez.</p>
</footer>
<script src="script.js"></script>
</body>
</html>