-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
166 lines (163 loc) · 10.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
160
161
162
163
164
165
166
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AlexisBogarin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="./css/styles.css">
<link rel="shortcut icon" href="./img/logo.png" />
</head>
<body>
<header>
<div class="navbar">
<div class="navbar__logo">
<a href="#">
<img src="./img/logo.png" alt="Logo" width="50" height="54">
</a>
</div>
<nav class="navbar__items">
<a aria-current="page" href="#Home">Home</a>
<a href="#projects">Proyects</a>
<a href="#about">About-me</a>
<a href="#contacts">Contacts</a>
</nav>
</div><!-- Navegador -->
</header>
<main>
<section id="Home">
<div class="welcome">
<div>
<h1>Front-End Developer</h1>
</div>
<div>
<img src="./img/head.jpg" alt="Sin cabeza pero con ideas." height="250">
</div>
</div> <!-- Bienvenida -->
</section>
<section class="about" id="about">
<div class="about__items">
<div>
<img src="./img/perfil.webp" alt="Foto de perfil." class="profile">
</div>
<div>
<div>
<p>I am a front-end web developer, driven by my passion for creating interactive applications
with a
strong focus on the user experience. My ultimate goal is to become an expert in web
development
and
provide high-quality solutions in user experience design and application development.</p>
</div>
<div class="contacts" id="contacts">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
class="bi bi-whatsapp" viewBox="0 0 16 16">
<path
d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232" />
</svg>+54 3548 462312</a>
<a href="https://www.linkedin.com/in/alexisbogarin/"><svg xmlns="http://www.w3.org/2000/svg"
width="20" height="20" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
</svg>Alexis Bogarin</a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
class="bi bi-envelope" viewBox="0 0 16 16">
<path
d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z" />
</svg>[email protected]</a>
</div>
</div>
</div>
</section><!-- Sobre mi -->
<section class="skills" id="skills">
<div class="skills__container">
<div>
<h2>Skills</h2>
</div>
<div class="skills__items">
<a><i><img src="https://img.icons8.com/?size=1x&id=v8RpPQUwv0N8&format=png" alt=""></i>HTML</a>
<a><i><img src="https://img.icons8.com/?size=1x&id=7gdY5qNXaKC0&format=png" alt=""></i>CSS</a>
<a><i><img src="https://img.icons8.com/?size=1x&id=PXTY4q2Sq2lG&format=png"
alt=""></i>Javascript</a>
<a><i><img src="https://img.icons8.com/?size=1x&id=pKaVdzbCJGgA&format=png" alt=""></i> PHP</a>
<a><i><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Bootstrap_logo.svg/2560px-Bootstrap_logo.svg.png"
alt="" width="50"></i> Bootstrap</a>
<a><i><img src="https://img.icons8.com/?size=1x&id=v9uZbuVoWleB&format=png" alt=""></i>WordPress</a>
<a><i><img src="https://img.icons8.com/?size=1x&id=KZHjwwenS7oK&format=png" alt=""></i>MySQL</a>
</div>
</div>
</section><!-- Lista de skills -->
<section class="projects" id="projects">
<div>
<h2>Proyects</h2>
</div>
<div class="projects__items">
<div>
<a href="figma-design/index.html"><img src="img/figma_logo.png" alt="Diseños en Figma" width="350px"
height="180px"></a>
</div>
<div>
<a href="https://projects-fcc.vercel.app/"><img src="img/fcc_logo.png" alt="Projectos FreeCodeCamp"
width="350px" height="180px"></a>
</div>
<div>
<a href="https://teanman-web.vercel.app/"><img src="img/teanman.png" alt="Landing Page Teanman"
width="350px"></a>
</div>
<div>
<a href="https://cardgame-chi.vercel.app/"><img src="img/cardgame.png" alt="Landing Page CardGame"
width="350px"></a>
</div>
</div>
</section><!-- Proyectos -->
<section class="education" id="education">
<div class="education__content">
<div>
<h2>Education</h2>
</div>
<div class="education__items">
<div>
<h3>Autodidact</h3>
<p>As a passionate about web programming, I have developed my skills in a self-taught way.
Through
online resources, personal projects, and continued exploration, I've gained knowledge in
languages
like HTML, CSS, and JavaScript, as well as popular frameworks like Bootstrap. I have faced
significant challenges, creating interactive websites and offering custom solutions. My
self-taught
approach drives me to keep up to date with the latest trends and technologies, always
willing to
learn and contribute to innovative projects in the field of web programming.</p>
</div>
<div>
<h3>SuperProf</h3>
<p>In addition to my passion for web programming, I have extensive experience as a web
development
teacher on the SuperProf platform. Over the past few months, I have had the privilege of
sharing my
knowledge with a variety of students, from beginners to those with prior programming
experience.
Through one-on-one tutoring sessions, I've helped my students understand the fundamentals of
web
programming, including HTML, CSS, JS, BOOTSTRAP, and Python. My pedagogical approach is
based on
practical and project-oriented learning, encouraging creativity and problem solving. I am
proud to
see my students gain confidence in their abilities and achieve tangible results in web
development.
As a web development teacher at SuperProf, my goal is to empower my students to become
successful
autonomous programmers in the ever-evolving digital world.
</div>
</div>
</div>
</section> <!-- Eduacion -->
</main>
<footer>
<p>Todos los derechos reservados de Alexis Bogarin</p>
</footer>
<script src="./js/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS"
crossorigin="anonymous"></script>
</body>