-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
208 lines (197 loc) · 14.7 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
<!DOCTYPE html5>
<html lang="en">
<head>
<!-- Meta tags for character encoding, viewport, and description -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Alex Bravo - Web Developer portfolio showcasing projects and experience in front-end and back-end development.">
<!-- Title and favicon -->
<title>Alex Bravo - Portfolio</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Stylesheet link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<!-- Header section: Contains name, title, social links, and navigation -->
<header>
<h1>Alex Bravo</h1>
<p class="subtitle">Web Developer 👨💻</p>
<div class="header-social">
<a href="https://www.linkedin.com/in/alex-brav0/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
</a>
<a href="https://github.com/ItsAl3xx" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
</a>
</div>
<nav>
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#projects">Projects</a></li>
</ul>
</nav>
<!-- Add a mobile menu button -->
<button class="mobile-menu-toggle" aria-label="Toggle menu">
<span></span>
<span></span>
<span></span>
</button>
</header>
<main>
<!-- About section: Introduces the developer and their interests -->
<section id="about">
<h2>About Me 👤</h2>
<p>Hi, I'm Alex! I'm a <span class="highlight">Computer Science student</span> passionate about web development and IT. With skills in <span class="highlight">React, Bootstrap, and various IT technologies</span>, I'm always eager to take on new challenges.</p>
<p>When I'm not coding or troubleshooting, I enjoy:</p>
<ul>
<li>Working in IT and fixing computers</li>
<li>Upgrading my gaming rig</li>
<li>Playing video games</li>
</ul>
<p>I'm a <span class="highlight">self-starter</span> who's not afraid to ask for help when learning something new. Currently, I'm excited about building a website for my mom's cleaning business, combining my love for web development with real-world application.</p>
<a href="more-about-me.html" class="modern-link">More About Me <span class="arrow">→</span></a>
</section>
<!-- Experience section: Displays work history and skills -->
<section id="experience">
<div class="section-header">
<h2>Experience 💼</h2>
<a href="images/resume/Alex B Resume 2024.pdf" target="_blank" rel="noopener noreferrer" class="view-more">View Full Resume →</a>
</div>
<article class="job">
<h3>I.T. Student Employee - Service Management</h3>
<p class="job-details"><span class="highlight">Company:</span> CSUDH</p>
<p class="job-details"><span class="highlight">Duration:</span> May 2023 - Present</p>
<ul>
<li>Provide <span class="highlight">technical support</span> to students, faculty, and staff.</li>
<li><span class="highlight">Troubleshoot</span> a range of issues on university-provided computers, from <span class="highlight">connectivity problems</span> to <span class="highlight">hardware malfunctions</span>.</li>
<li>Assist with <span class="highlight">WiFi connections</span>, <span class="highlight">password resets</span>, and address <span class="highlight">complex tech challenges</span>.</li>
<li>Log tickets for further action using <span class="highlight">Service Now</span> when issues arise beyond immediate resolution.</li>
<li>Offer <span class="highlight">on-site support</span>, visiting employees' offices to address technology concerns.</li>
<li><span class="highlight">Re-Image</span> company computers and school computers.</li>
</ul>
<div class="tech-tags">
<span class="tech-tag">Windows</span>
<span class="tech-tag">macOS</span>
<span class="tech-tag">iOS</span>
<span class="tech-tag">ServiceNow</span>
<span class="tech-tag">Azure AD</span>
<span class="tech-tag">Networking</span>
<span class="tech-tag">Hardware Troubleshooting</span>
<span class="tech-tag">Software Troubleshooting</span>
<span class="tech-tag">VPN</span>
<span class="tech-tag">Office 365</span>
<span class="tech-tag">Duo Admin</span>
</div>
</article>
<article class="job">
<h3>Game Tester</h3>
<p class="job-details">(Contract)</p>
<p class="job-details"><span class="highlight">Company:</span> Riot Games</p>
<p class="job-details"><span class="highlight">Duration:</span> March 2022 - March 2022</p>
<ul>
<li>Attended <span class="highlight">briefing sessions</span> with game developers to understand game objectives and mechanics.</li>
<li>Conducted focused <span class="highlight">1-2 hour play test sessions</span> on provided devices.</li>
<li>Took <span class="highlight">detailed notes</span> during play-tests to record observations and first impressions.</li>
<li>Participated in <span class="highlight">post-playtest discussions</span>, providing verbal feedback and insights.</li>
<li>Reported <span class="highlight">bugs, glitches, and potential improvements</span> using company computers.</li>
<li>Contributed to <span class="highlight">game improvement</span> by suggesting enhancements and user experience optimizations.</li>
</ul>
</article>
</section>
<!-- Projects section: Showcases developer's projects -->
<section id="projects">
<h2>Projects ⚙️</h2>
<div class="projects-grid">
<article class="project-card">
<h3>Cleaning Business Website <span class="wip-tag">Currently in development</span></h3>
<div class="project-content">
<div class="project-image">
<img src="images/Website-preview.png" alt="Cleaning Business Website Mockup">
</div>
<div class="project-details">
<p class="project-year">2024</p>
<p>A website for a cleaning business, designed to showcase services and streamline client interactions. This project combines my web development skills with real-world business needs.</p>
<p><strong>Planned Features:</strong></p>
<ul>
<li>Online appointment booking system</li>
<li>Interactive schedule display</li>
<li>Service showcase and pricing</li>
<li>Client testimonials and reviews</li>
<li>Contact form and business information</li>
</ul>
<div class="project-tags">
<span class="project-tag">MongoDB</span>
<span class="project-tag">Express.js</span>
<span class="project-tag">React</span>
<span class="project-tag">Node.js</span>
<span class="project-tag">RESTful API</span>
</div>
</div>
</div>
</article>
<article class="project-card">
<h3>Squirtlepedia <a href="https://squirtlepedia.vercel.app" target="_blank" rel="noopener noreferrer" class="project-link">↗</a></h3>
<div class="project-content">
<div class="project-image">
<img src="images/squirtlepedia-preview.png" alt="Squirtlepedia Preview">
</div>
<div class="project-details">
<p class="project-year">2023</p>
<p>This is one of my first FrontEnd coding boot camp projects that I did.
A React-based Pokémon information app using PokeAPI v2. Features include a 3-page layout with React Router, 10+ custom components, and CRUD operations via a Favorites system.
Showcases API integration, responsive design with React Bootstrap, and efficient state management. Users can search, view details, and manage favorite Pokémon.
</p>
<div class="project-tags">
<span class="project-tag">React</span>
<span class="project-tag">React Router</span>
<span class="project-tag">React Bootstrap</span>
<span class="project-tag">JavaScript</span>
<span class="project-tag">PokeAPIv2</span>
</div>
</div>
</div>
</article>
</div>
</section>
<!-- Explore More section: Links to additional resources -->
<section id="explore-more">
<h2>Explore More</h2>
<p>Discover additional resources and information</p>
<div class="explore-links">
<a href="images/resume/Alex B Resume 2024.pdf" target="_blank" rel="noopener noreferrer" class="modern-link">
See Full Resume
<span class="arrow">→</span>
</a>
<a href="more-about-me.html" class="modern-link">More About Me <span class="arrow">→</span></a>
</div>
</section>
</main>
<!-- Footer section: Copyright info, navigation links, and social icons -->
<footer>
<div class="footer-content">
<div class="footer-info">
<p>© 2024 Alex Bravo</p>
<p>Web Developer & IT Specialist</p>
</div>
<nav class="footer-nav">
<a href="#about">About</a>
<a href="#experience">Experience</a>
<a href="#projects">Projects</a>
</nav>
<div class="footer-social">
<a href="https://www.linkedin.com/in/alex-brav0" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
</a>
<a href="https://github.com/ItsAl3xx" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
</a>
</div>
</div>
</footer>
</div>
<!-- JavaScript file link -->
<script src="script.js"></script>
</body>
</html>