-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
173 lines (162 loc) · 8.89 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
173
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="Ana Jesus" />
<meta name="description"
content="This is a personal website, where I share my passion for technology and digital creativity, projects I'm working on, my latest blog posts, and get to know the mind behind the code." />
<link rel="icon" type="image/x-icon" href="AJ (1).png">
<title> Ana Jesus</title>
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/3bc0f60730.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="header">
<a href="/" class="logo">ANA JESUS</a>
<nav class="navbar">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="https://medium.com/@anajesus12" target="_blank">Blog</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
<!-- Dark mode -->
<div class="theme-switch-wrapper">
<span id="toggle-icon">
<span class="toggle-text"></span>
<i class="fas fa-sun"></i>
</span>
<label class="theme-switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
</div>
</nav>
</header>
<section id="welcome-section" class="home">
<div class="home-content">
<h1>Hello👋, I'm Ana Jesus </h1>
<h2>Front-End developer</h2>
<p>Thanks for stopping by. Please have a look around 👀. This is my web portfolio.
In the blog section I document my experiences in programming 👩🏻💻 . You may also look at
my web projects. Have Fun✨.</p>
<div class="btn-box">
<a href="/projects" target="_blank">Projects</a>
<a href="/contact" target="_blank">Let's Talk</a>
</div>
</div>
<div class="homephoto-container">
<div class="homephoto">
<img src="ana_foto.png" alt="Picture of Ana">
</div>
</div>
</section>
<!-- Projects section -->
<i class="fa-solid fa-angle-double-down fa-bounce center scroll-to-projects"
style=" --fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1; --fa-bounce-rebound: 0; cursor: pointer;"></i>
<section class="projects-section" id="projects">
<h2 class="projects-section-header">These are some of my projects</h2>
<div class="filter-projects" id="filter-projects">
<button class="btn-f btf active" data-filter="all" onclick="filterSelection('all')"> Show all </button>
<button class="btn-f btf" data-filter="React" onclick="filterSelection('React')">React</button>
<button class="btn-f btf" data-filter="HTML-CSS" onclick="filterSelection('HTML-CSS')">HTML and CSS</button>
<button class="btn-f btf" data-filter="Javascript"
onclick="filterSelection('Javascript')">Javascript</button>
<button class="btn-f btf" data-filter="Python" onclick="filterSelection('Python')"> Python</button>
<button class="btn-f btf" data-filter="Figma" onclick="filterSelection('Figma')"> Figma</button>
</div>
<div id="home_projects" class="projects-grid">
<!-- project 3 -->
<div class="project Figma Javascript">
<a href="https://archeana.github.io/quiz/" target="_blank" class="project-tile"><img
class="project-image" src="/Financial quiz.png" alt="#"></a>
<p class="project-title">Budget Bliss- Financial Quiz</p>
<div class="button_project">
<a href="https://archeana.github.io/quiz/" target="_blank">
<button class="website">Website</button></a>
<a href="https://github.com/archeana/quiz" target="_blank"><button class="code">Code</button></a>
</div>
</div>
<!-- project 5 -->
<div class="project React">
<a href="https://archeana.github.io/robofriends/" target="_blank" class="project-tile"><img
class="project-image" src="/robofriendsreact.png" alt="#"></a>
<p class="project-title">Robofriends</p>
<div class="button_project">
<a href="https://archeana.github.io/robofriends/" target="_blank">
<button class="website">Website</button></a>
<a href="https://github.com/archeana/robofriends" target="_blank"><button
class="code">Code</button></a>
</div>
</div>
<!-- project 4 -->
<div class="project HTML-CSS Javascript">
<a href="https://archeana.github.io/smaacstem.github.io/index.html" target="_blank"
class="project-tile"><img class="project-image" src="/SMACCSTEM.png" alt="#"></a>
<p class="project-title">Educational website</p>
<div class="button_project">
<a href="https://archeana.github.io/smaacstem.github.io/index.html" target="_blank">
<button class="website">Website</button></a>
<a href="https://github.com/archeana/smaacstem.github.io" target="_blank"><button
class="code">Code</button></a>
</div>
</div>
<!-- project 6 -->
<div class="project React">
<a href="#" target="_blank" class="project-tile"><img class="project-image" src="/facerecognition.png"
alt="#"></a>
<p class="project-title">Face recognition</p>
<div class="button_project">
<a href="#" target="_blank">
<button class="website">In progress</button></a>
<a href="https://github.com/archeana/facerecognition" target="_blank"><button class="code">Code
(private)</button></a>
</div>
</div>
<!-- project 1 -->
<div class="project HTML-CSS">
<a href="https://archeana.github.io/CFG-06-23-Group4/index.html" target="_blank"
class="project-tile"><img class="project-image" src="/cgfwebsite-min.png" alt="#"></a>
<p class="project-title">Women in Tech website</p>
<div class="button_project">
<a href="https://archeana.github.io/Very-final-in-full-project/" target="_blank">
<button class="website">Website</button></a>
<a href="https://archeana.github.io/CFG-06-23-Group4/index.html" target="_blank"><button
class="code">Code</button></a>
</div>
</div>
<!-- project 2 -->
<div class="project HTML-CSS Javascript">
<a href="https://archeana.github.io/team-gold/index.html" target="_blank" class="project-tile"><img
class="project-image" src="/budgetbliss.png" alt="image-budgetbliss"></a>
<p class="project-title">Budget Bliss- Website</p>
<div class="button_project">
<a href="https://archeana.github.io/team-gold/index.html" target="_blank">
<button class="website">Website</button></a>
<a href="https://github.com/archeana/team-gold" target="_blank"><button
class="code">Code</button></a>
</div>
</div>
</div>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
</section>
<footer>
<div class="footer-content">
<ul class="socials" aria-label="Social Media Links">
<li><a href="https://www.linkedin.com/in/ana-jesus-1644374a/" aria-label="LinkedIn"><i
class="bx bxl-linkedin"></i></a></li>
<li><a href="https://github.com/archeana" aria-label="GitHub"><i class="bx bxl-github"></i></a></li>
<li><a href="https://www.instagram.com/ana_vci/" aria-label="Instagram"><i
class="bx bxl-instagram"></i></a></li>
</ul>
</div>
<div class="footer-bottom">
<p>Copyright ©2023 Designed by Ana Jesus</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>