-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
226 lines (188 loc) · 10.1 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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!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">
<meta name="author" content="Nereida Rondon">
<meta name="description" content="Nereida Rondon Frontend Developer Portfolio">
<meta name="description" content="Learn about my experience transitioning from teaching to instructional design for a software development EdTech company and how I gained the skills and experience needed to succeed in this field. From earning additional certifications to building my online presence, I share my journey and tips for other teachers looking to make a career change.">
<meta name="keywords" content="teacher, career change, software development, instructional design, education technology, Software Developer, Portfolio, teacher to software developer, frontend engineer, pivot into tech">
<title>Nereida Rondon Portfolio</title>
<link rel="icon" type="image" href="/images/My logo.svg">
<link rel="stylesheet" href="source/styles.css">
<link rel="stylesheet" href="source/layout.css">
<link rel="stylesheet" href="source/particles.css">
<!-- Font Awesome Icons -->
<link href="/fontAwesome/css/all.css" rel="stylesheet">
</head>
<body id="top" class="gradient">
<!-----------------HEADER--------------------->
<header class="banner-container" role="banner">
<div class="item1">
<a class= "home-link" href="index.html"><img class="signature" src="images/My logo.svg" width="75" alt="Nereida Rondon Home link"></a>
</div>
<div class="item2"></div>
<div class="item3">
<ul>
<li><a class='icon-link' href="mailto:Nereida.Rondon5@gmail.com" aria-label="Email icon"><abbr title="Email"><i role="img" class="fa-regular fa-envelope fa-beat"></i></abbr></a></li>
<li><a class='icon-link' href="https://www.linkedin.com/in/nereida-rondon-65403a22b/" aria-label="Linked In icon" target="_blank"><abbr title="Linked in" ><i role="img" class="fa-brands fa-linkedin-in fa-beat"></i></abbr></a></li>
<li><a class='icon-link' href="https://github.com/NereidaRondon" aria-label="Github icon" target="_blank"><abbr title="Github"><i role="img" class="fa-brands fa-github fa-beat"></i></abbr></a></li>
</ul>
</div>
</header>
<!----------------COLORFUL BAR------------------>
<div class="banner-div"></div>
<!---------------------------------------------->
<!-----------------PARTICLES-------------------->
<div id="particle-container-1">
<div class="particle"></div><div class="particle"></div>
<div class="particle"></div><div class="particle"></div>
<div class="particle"></div><div class="particle"></div>
<div class="particle"></div><div class="particle"></div>
<div class="particle"></div><div class="particle"></div>
<div class="particle"></div><div class="particle"></div>
<div class="particle"></div><div class="particle"></div>
<div class="particle"></div><div class="particle"></div>
<div class="particle"></div><div class="particle"></div>
<div class="particle"></div><div class="particle"></div>
<div class="particle"></div><div class="particle"></div>
<div class="particle"></div><div class="particle"></div>
<div class="particle"></div><div class="particle"></div>
<div class="particle"></div><div class="particle"></div>
<div class="particle"></div><div class="particle"></div>
</div>
<!-----------------NAV MENU-------------------->
<nav role="navigation">
<ul>
<a class="disabeled" aria-disabled="true" href="index.html"><li>Home</li></a>
<a class='link' href="projects.html"><li>Projects</li></a>
<a class='link' href="about.html"><li>About</li></a>
<a class='link' href="contact.html"><li>Contact</li></a>
</ul>
</nav>
<br>
<!---------------------------------------------->
<div class="layout-container">
<div class="main">
<div class="window-bar">🔴 🟡 🟢</div>
<div class="main-box">
<!------------------------------------------>
<div class="box-1">
<div class="intro-container">
<img id="portrait" src="images/portrait.webp" width="150" height="210" alt="Portrait of Nereida Rondon">
</div>
</div>
<div class="box-2 ">
<div class="typewriter">Nereida Rondon</div>
<h1 class="intro-txt">Software Developer</h1>
</div>
<!----------------------------------->
<div class="box-3">
<h1 class="window-title">Welcome to my portfolio!</h1>
<p>As a software developer, I bring a unique combination of technical expertise and experience in education and digital content design to the table. With a solid foundation in building with HTML and CSS, I am skilled in JavaScript and other relevant frameworks like Bootstrap and React. I am passionate about building efficient, user-friendly, and visually appealing software solutions. Keeping up with emerging technologies and trends in software development is my top priority. With an insatiable drive for learning and innovation, I can quickly adapt to new tools and techniques, delivering the most effective solutions to clients. </p>
<p>Currently, I'm seeking opportunities to apply my skills and create meaningful digital content, from designing web pages and applications to developing and maintaing technical content.</p>
<p>Please take a moment to browse through my projects and work experience. If you're looking for a passionate, driven, and dedicated team member, or would like to work together, let's connect!</p>
</div>
</div>
</div>
<!--------------------------------------->
<h1 class="train-title">Education and Training</h1>
<div class="school1">
<a href="https://www.fsw.edu/" target="_blank">
<div class="logo-frame">
<img class="school-logo fsw" src="/images/fsw.webp" alt="Earned Bachelor's of Science degree at FSW State College" width='120'/>
</div></a>
<figcaption>B. S. Secondary Math Education <br> <a href="https://www.fsw.edu/" target="_blank"><abbr title="Florida SouthWestern State College">FSW</abbr></a></figcaption>
</div>
<!------------------------------------------->
<div class="school2">
<a href="/doc files/Promineo Certificate.pdf" target="_blank">
<div class="logo-frame">
<img class="school-logo" src="/images/promineo.webp" alt="Certificate from FSW for Frontend Development Corporate Training Coding Boot Camp" width='90'/>
</div></a>
<figcaption>Certificate for 360-hour course in Front-End Development <br><a href="https://www.promineotech.com/" target="blank">Promineo Tech</a> via <a href="https://www.fsw.edu/" target="_blank"><abbr title="Florida SouthWestern State College">FSW</abbr></a></figcaption>
</div>
<!------------------------------------------>
<div class="school3">
<a href="https://www.shecodes.io/certificates/f731cd23adf9ad7f1c418750f1bab885" target="_blank">
<div class="logo-frame">
<img class="school-logo shecodes" src="/images/shecodes.png" alt="Certificate of completion for Intro to Coding Workshop" width='110'/>
</div></a>
<figcaption>Certificate for Intro to Coding Workshop with <a href="https://www.shecodes.io/" target="_blank">SheCodes.io</a></figcaption>
</div>
<!------------------------------------------->
<div class="school4 ">
<!-- <a href="https://coursera.org/share/b268b4a2930331ad08e28cb2ca963dc2" target="_blank">
<div class="logo-frame">
<img class="school-logo coursera" src="/images/coursera.svg" alt="Certificate for JavaScript Programming" width='110'/>
</div></a>
<figcaption>Meta's Front-End Developer Certificate <br>via <a href="https://www.coursera.org/professional-certificates/meta-front-end-developer" target="_blank">Coursera</a>... in progress</figcaption> -->
</div>
<!---------------TOOLKIT------------------>
<section class="tools">
<h1 class="tools-title">Tools and Languages</h1>
<div class="tool-container">
<div class="tool-box">
<i class="fa-brands fa-html5 tool-icon"></i>
<p class="tool-label">HTML</p>
</div>
<div class="tool-box">
<i class="fa-brands fa-css3-alt tool-icon"></i>
<p class="tool-label">CSS</p>
</div>
<div class="tool-box">
<i class="fa-solid fa-border-all tool-icon"></i>
<p class="tool-label">CSS Grid</p>
</div>
<div class="tool-box">
<i class="fa-brands fa-npm tool-icon"></i>
<p class="tool-label">npm</p>
</div>
<div class="tool-box">
<i class="fa-brands fa-js tool-icon"></i>
<p class="tool-label">JavaScript</p>
</div>
<div class="tool-box">
<i class="fa-brands fa-github tool-icon"></i>
<p class="tool-label">GitHub</p>
</div>
<div class="tool-box">
<i class="fa-brands fa-git-alt tool-icon"></i>
<p class="tool-label">Git</p>
</div>
<div class="tool-box">
<i class="fa-brands fa-react tool-icon"></i>
<p class="tool-label">React.js</p>
</div>
<div class="tool-box">
<i class="fa-brands fa-bootstrap tool-icon"></i>
<p class="tool-label">Bootstrap</p>
</div>
<div class="tool-box">
<i class="fa-brands fa-node-js tool-icon"></i>
<p class="tool-label">Node.js</p>
</div>
<div class="tool-box">
<img class='tool-svg-icon' src='/images/jquery.svg' alt='jquery' width='60'/>
<p class="tool-label">JQuery</p>
</div>
<div class="tool-box">
<i class="fa-solid fa-universal-access tool-icon"></i>
<p class="tool-label">Accessibility</p>
</div>
</div>
</section>
<!--------------------------------------->
<div class="footer-div">
<a href="#top" class="scrolly"><button><img class="to-top" src="./images/angles-up-solid.svg" alt="'back to top" width="20"></button></a>
<div class="footer">
<footer>Created by Nereida Rondon ©️2022</footer>
</div>
</div>
<!----------------------------------------->
</div>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="app.js"></script>
</body>
</html>