-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
159 lines (158 loc) · 4.86 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 name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Guaci Gutierrez • Front-End Developer</title>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./img/GG-FFFFFF.png"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/2e918371a2.js"></script>
</head>
<body>
<header class="nav">
<div class="nav-content">
<div class="nav-logo">
<a href="#home" class="home">
<img src="./img/GG-FFFFFF.png" alt="Guaci Gutierrez Logo"
/></a>
</div>
<ul class="nav-links">
<li>
<a href="#projects" class="projects">PROJECTS</a>
</li>
<li>
<a href="#about" class="about">ABOUT</a>
</li>
<li>
<a
href="https://www.linkedin.com/in/guacimaragutierrez/"
target="_blank"
><i class="fa fa-linkedin" aria-hidden="true"></i
></a>
</li>
</ul>
</div>
</header>
<main id="home">
<section class="hero-image">
<div class="hero-content">
<h1>Hi! I'm Guaci</h1>
</div>
<div class="hero-content-animated">
<h3 id="role"></h3>
</div>
</section>
<section id="projects" class="projects-wrapper">
<div class="projects-text-wrapper">
<h2>My projects</h2>
<p>
As a Junior Developer, I do my best to start in the amazing world of
web development. Fortunately, practice is key to learn from mistakes
and keep growing.
</p>
<p>
My latest projects are small apps that users can interact with,
mainly integrating
<strong>HTML, CSS, Sass, JavaScript, and React</strong>. I always
try to comply with responsive design best practices, being focused
on visual design and accessibility, besides testing them to make
sure they work well on any device.
</p>
</div>
<div id="btns-wrapper">
<button class="btn highlighted" onclick="filterProjects('all')">
ALL
</button>
<button class="btn" onclick="filterProjects('javascript')">
JavaScript
</button>
<button class="btn" onclick="filterProjects('react')">React</button>
<button class="btn" onclick="filterProjects('next')">NextJs</button>
</div>
<div id="display-proyects"></div>
</section>
<section id="about" class="about-wrapper">
<div class="about-content-wrapper">
<h2>About me</h2>
<div class="about-content">
<div class="about-pic-wrapper">
<img
src="https://res.cloudinary.com/drpcjt13x/image/upload/v1667941405/Proyectos/Profile/guaci-g-pic_ylwjm3.png"
alt="image-profile"
/>
</div>
<div class="about-text-wrapper">
<p>
After more than 10 years working in different industries, I
decided to make a fresh start as a
<strong>Front-End Developer</strong>, always motivated by
achieving goals which have made me a good problem solver who
never gives up.
</p>
<p>
I can take web designs and turn them into code to create
products with a friendly user experience, as well as build my
projects following the mobile-first principle, with usability
and responsive design best practices in mind. Always
enthusiastic for new challenges, I have strong analytical skills
along with a can-do attitude.
</p>
<p>
I can work both independently and collaborating within a team,
so feel free to
<a href="mailto:[email protected]">drop me a line</a> 😊
</p>
<p>
Finally, I have a good knowledge of HTML, CSS, JavaScript and
React, in addition to software packages such as frameworks and
tools that are used in today's technology. Find below a list of
my current technical skills:
</p>
</div>
</div>
<div class="tools" id="display-tools"></div>
</div>
</section>
</main>
<div class="left-side-vertical">
<ul class="social-icons">
<li>
<a href="mailto:[email protected]"
><i class="fas fa-envelope-open-text"></i
></a>
</li>
<li>
<a
href="https://www.linkedin.com/in/guacimaragutierrez/"
target="_blank"
><i class="fa fa-linkedin" aria-hidden="true"></i
></a>
</li>
<li>
<a href="https://github.com/GuaciG" target="_blank"
><i class="fa fa-github" aria-hidden="true"></i
></a>
</li>
<li>
<a href="https://codepen.io/GuaciG" target="_blank"
><i class="fa fa-codepen" aria-hidden="true"></i
></a>
</li>
<li>
<a href="https://www.freecodecamp.org/guacig" target="_blank"
><i class="fa fa-free-code-camp" aria-hidden="true"></i
></a>
</li>
</ul>
</div>
<footer>
<p>Ⓒ 2023 Guaci Gutiérrez  •  London (UK)</p>
</footer>
<script src="/main.js"></script>
</body>
</html>