-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (157 loc) · 9.2 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
<!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">
<title>!Hola mundo¡</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="images.css">
</head>
<body>
<header class="menu">
<h3 class="menu_name">Sergio Muñoz</h3>
<nav class="menu__navbar">
<ul>
<li class="menu__navbar__item"><a href="#about">Sobre mi</a></li>
<li class="menu__navbar__item"><a href="#skills">Skills</a></li>
<li class="menu__navbar__item"><a href="#hobbies">Hobbies</a></li>
<li class="menu__navbar__item"><a href="#education">Formación</a></li>
<li class="menu__navbar__item"><a href="#experience">Proyectos</a></li>
</ul>
</nav>
<p class="menu__email">tkd.sergio.samc@gmail.com</p>
</header>
<section class="presentation">
<div class="presentation__image image"></div>
<div class="presentation__div">
<h1 class="presentation__title title-text">Hola, mi nombre es Sergio Muñoz y soy desarrollador Front-end</h1>
<p class="presentation__subtitle description-text">Estoy enfocado en la construcción de páginas web y actualmente estoy terminando mis estudios en ingeniería electrónica en Bogotá, Colombia.</p>
<ul class="presentation__network">
<li class="presentation__network__item"><a href="">Github <div class="presentation__network__item_arrow image"></div></a></li>
<li class="presentation__network__item"><a href="">Linkedin <div class="presentation__network__item_arrow image"></div></a></li>
<li class="presentation__network__item"><a href="https://www.instagram.com/tkd_sergio_cuf/">Instagram <div class="presentation__network__item_arrow image"></div></a></li>
<li class="presentation__network__item"><a href="">Curriculo <div class="presentation__network__item_arrow image"></div></a></li>
</ul>
</div>
</section>
<section class="aboutMe" id="about">
<h1 class="aboutMe__title title-text">Sobre mi</h1>
<p class="aboutMe__decription description-text">Mi nombre es Sergio Muñoz y actualmente estoy en la etapa final de mis estudios de Ingeniería Electrónica en la Universidad El Bosque en Bogotá, Colombia. Soy un apasionado de la tecnología y el desarrollo, con un interés particular en el desarrollo Front-end. Durante mi experiencia, he trabajado con diversas tecnologías de desarrollo, me enamoré del desarrollo desde que escribí mis primeras líneas de código en 2020. En cuandto a Front-end trabajo frecuentemente con JavaScript, HTML, Css, PHP y React, sin embargo conozco y prodria llegar a trabajar con: Python, Java, C++, MySQl, entre otras más. <br>
Además del desarrollo, disfruto practicar taekwondo y crear contenido multimedia. Llevo más de 13 años practicando este deporte y más de un año creando contenido para una empresa de artes marciales. Considero que soy una persona comprometida, apasionada por lo que hace y con liderazgo.</p>
</section>
<section class="skills" id="skills">
<h1 class="skills__title title-text">Skills</h1>
<div class="skills__div">
<div class="skills__skill">
<div class="skills__skill__image image javaScript-image"></div>
<p class="skills__skill__subtitle subtitle-text">JavaScript</p>
</div>
<div class="skills__skill">
<div class="skills__skill__image image php-image"></div>
<p class="skills__skill__subtitle subtitle-text">PHP</p>
</div>
<div class="skills__skill">
<div class="skills__skill__image image react-image"></div>
<p class="skills__skill__subtitle subtitle-text">React</p>
</div>
<div class="skills__skill">
<div class="skills__skill__image image html-image"></div>
<p class="skills__skill__subtitle subtitle-text">Html 5</p>
</div>
<div class="skills__skill">
<div class="skills__skill__image image css-image"></div>
<p class="skills__skill__subtitle subtitle-text">Css 3</p>
</div>
</div>
</section>
<section class="hobbies" id="hobbies">
<h1 class="hobbies__title title-text">Hobbies</h1>
<div class="hobbies__div">
<div class="hobbies__hobbie">
<div class="hobbies__hobbie__image image taekwondo-image"></div>
<p class="hobbies__hobbie__subtitle subtitle-text">Taekwondo</p>
</div>
<div class="hobbies__hobbie">
<div class="hobbies__hobbie__image image videogames-image"></div>
<p class="hobbies__hobbie__subtitle subtitle-text">Videogames</p>
</div>
<div class="hobbies__hobbie">
<div class="hobbies__hobbie__image image photo-image"></div>
<p class="hobbies__hobbie__subtitle subtitle-text">Tomar fotos</p>
</div>
<div class="hobbies__hobbie">
<div class="hobbies__hobbie__image image series-image"></div>
<p class="hobbies__hobbie__subtitle subtitle-text">Ver series</p>
</div>
<div class="hobbies__hobbie">
<div class="hobbies__hobbie__image image music-image"></div>
<p class="hobbies__hobbie__subtitle subtitle-text">Musica</p>
</div>
</div>
</section>
<section class="education" id="education">
<h1 class="education__title title-text">Formacion Academica</h1>
<div class="education__div">
<a href="https://drive.google.com/file/d/1G2z6AO1l_6l0EYBp3Kx2pHW5NheMxwUI/view?usp=share_link"><div class="education__image image mision-tic-image"></div></a>
<p class="subtitle-text">Diplomado: "Formación básica en habilidades de programación de MISIÓN TIC 2022"</p>
<p class="description-text">2021- Universidad Nacional de Colombia</p>
</div>
<div class="education__div">
<div class="education__image image oracle-one-image"></div>
<p class="subtitle-text">Programa Oracle ONE</p>
<p class="description-text">2023</p>
</div>
<div class="education__div">
<div class="education__image image university-image"></div>
<p class="subtitle-text">Ingenieria electronica </p>
<p class="description-text">Proximamente... (5/9)</p>
</div>
</section>
<section class="experience" id="experience">
<h1 class="experience__title title-text">Experiencia Profesional</h1>
<div class="experience__div">
<div class="experience__image image encrypter-image"></div>
<div class="experience__information">
<p class="subtitle-text">Encriptador de texto </p>
<p class="description-text">Challenge Oracle</p>
<div class="">
<button class="experience__div__button"><a href="https://github.com/Semunozc/Encriptador-ONE">Repositorio</a></button>
<button class="experience__div__button"><a href="https://semunozc.github.io/Encriptador-ONE/">Ver Demo</a></button>
</div>
</div>
</div>
</section>
<section class="contact">
<h1 class="contact__title title-text">Contacto</h1>
<p class="contact__description subtitle-text">¿Quieres contactarme?</p>
<p class="contact__description subtitle-text">Completa el siguiente formulario y me pondré en contacto contigo lo antes posible.</p>
<form class="contact__form" action="https://formsubmit.co/tkd.sergio.samc@gmail.com" method="POST">
<label class="contact__form__container">
<input class="contact__input" type="text" name="nombre" data-type="name" required maxlength="50">
<span class="contact__form__label">Nombre</span>
</label>
<label class="contact__form__container">
<input class="contact__input" type="email" name="email" data-type="email" required>
<span class="contact__form__label" >E-mail</span>
</label>
<label class="contact__form__container">
<input class="contact__input" type="text" name="asunto" data-type="subject" required maxlength="50">
<span class="contact__form__label">Asunto</span>
</label>
<label class="contact__form__container">
<textarea class="contact__input" name="message" data-type="message" required maxlength="300"></textarea>
<span class="contact__form__label">Mensaje</span>
</label>
<input class="contact__btn" type="submit" value="Enviar mensaje">
</form>
</section>
<footer>
<p>
Desarrollado por Sergio Muñoz
</p>
</footer>
<script type="module" src="app.js"></script>
</body>
</html>