-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathportfolio.html
More file actions
347 lines (315 loc) · 14.6 KB
/
Copy pathportfolio.html
File metadata and controls
347 lines (315 loc) · 14.6 KB
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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Japhet - Software Engineer & Product Builder</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="portfolio.css">
<link rel="icon" type="image/x-icon" href="logo.png">
</head>
<body>
<!-- Background Effects -->
<div class="bg-grid"></div>
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
<!-- Navigation -->
<div class="container">
<nav>
<div class="logo">Nyangaresi Japhet</div>
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<!-- Hero Section -->
<div class="container">
<section class="hero">
<div class="hero-label">
<span class="status-dot"></span>
Available for opportunities
</div>
<h1>
Building the <span class="gradient-text">future</span><br>
one line of code<br>
at a time
</h1>
<p>
Software Engineer student passionate about creating modern, impactful digital products.
I turn ideas into beautiful, functional applications that solve real-world problems.
</p>
<div class="cta-group">
<a href="#projects" class="btn btn-primary">View My Work</a>
<a href="#contact" class="btn btn-secondary">Get in Touch</a>
</div>
</section>
</div>
<!-- Skills Section -->
<div class="container">
<section class="section" id="skills">
<div class="section-header reveal">
<div class="section-label">Expertise</div>
<h2 class="section-title">What I bring to the table</h2>
</div>
<div class="skills-grid">
<div class="skill-card reveal">
<div class="skill-icon">⚡</div>
<h3>Frontend Development</h3>
<p>
Building responsive, modern and high-performance interfaces
focused on user experience and clean design.
</p>
<div class="tech-tags">
<span class="tech-tag">React</span>
<span class="tech-tag">Next.js</span>
<span class="tech-tag">Tailwind</span>
<span class="tech-tag">TypeScript</span>
</div>
</div>
<div class="skill-card reveal">
<div class="skill-icon">🚀</div>
<h3>Backend Engineering</h3>
<p>
Developing secure backend systems, APIs, authentication flows,
and scalable cloud-connected applications.
</p>
<div class="tech-tags">
<span class="tech-tag">Node.js</span>
<span class="tech-tag">Supabase</span>
<span class="tech-tag">Firebase</span>
<span class="tech-tag">REST APIs</span>
</div>
</div>
<div class="skill-card reveal">
<div class="skill-icon">🔐</div>
<h3>Cybersecurity Fundamentals</h3>
<p>
Applying secure coding practices, authentication safety,
vulnerability awareness, and web security principles.
</p>
<div class="tech-tags">
<span class="tech-tag">OWASP Basics</span>
<span class="tech-tag">Secure Auth</span>
<span class="tech-tag">Linux</span>
<span class="tech-tag">Network Basics</span>
</div>
</div>
<div class="skill-card reveal">
<div class="skill-icon">💡</div>
<h3>Product Development</h3>
<p>
Turning ideas into real digital products through rapid MVP
building, iteration, and user-focused thinking.
</p>
<div class="tech-tags">
<span class="tech-tag">MVP Strategy</span>
<span class="tech-tag">Problem Solving</span>
<span class="tech-tag">Agile</span>
<span class="tech-tag">User Research</span>
</div>
</div>
<div class="skill-card reveal">
<div class="skill-icon">🧠</div>
<h3>Systems Thinking</h3>
<p>
Breaking down complex problems, debugging efficiently,
and designing practical technical solutions.
</p>
<div class="tech-tags">
<span class="tech-tag">Debugging</span>
<span class="tech-tag">Logic</span>
<span class="tech-tag">Architecture</span>
<span class="tech-tag">Optimization</span>
</div>
</div>
<div class="skill-card reveal">
<div class="skill-icon">🎨</div>
<h3>UI/UX Design</h3>
<p>
Designing clean, intuitive interfaces that combine beauty,
usability, and seamless user interaction.
</p>
<div class="tech-tags">
<span class="tech-tag">Figma</span>
<span class="tech-tag">Wireframing</span>
<span class="tech-tag">Prototyping</span>
<span class="tech-tag">Design Systems</span>
</div>
</div>
</div>
</section>
</div>
<!-- Projects Section -->
<div class="container">
<section class="section" id="projects">
<div class="section-header reveal">
<div class="section-label">Portfolio</div>
<h2 class="section-title">Featured Projects</h2>
</div>
<div class="projects-grid">
<div class="project-card reveal">
<div class="project-content">
<div class="project-number">01</div>
<h3>Social Connect Platform</h3>
<p class="project-description">
A modern social networking platform built with React and Firebase. Features real-time messaging,
user profiles, and content sharing with a focus on meaningful connections.
</p>
<div class="tech-tags">
<span class="tech-tag">React</span>
<span class="tech-tag">supabase</span>
<span class="tech-tag">Tailwind CSS</span>
</div>
<div class="project-links">
<a href="https://mmu-vibe-meet.netlify.app/" class="project-link">View Project →</a>
<a href="https://github.com/kevingtonee/vibeMeet-frontend" class="project-link">GitHub →</a>
</div>
</div>
<div class="project-visual">
<div class="project-visual-placeholder">📱</div>
</div>
</div>
<div class="project-card reveal">
<div class="project-content">
<div class="project-number">02</div>
<h3>Student Hub App</h3>
<p class="project-description">
Comprehensive student management system with features for course scheduling, grade tracking,
and collaborative study groups. Built to streamline academic life.
</p>
<div class="tech-tags">
<span class="tech-tag">Next.js</span>
<span class="tech-tag">Supabase</span>
<span class="tech-tag">TypeScript</span>
</div>
<div class="project-links">
<a href="#" class="project-link">View Project →</a>
<a href="#" class="project-link">GitHub →</a>
</div>
</div>
<div class="project-visual">
<div class="project-visual-placeholder">📚</div>
</div>
</div>
</div>
</section>
</div>
<!-- About Section -->
<div class="container">
<section class="section" id="about">
<div class="section-header reveal">
<div class="section-label">Background</div>
<h2 class="section-title">About Me</h2>
</div>
<div class="about-content">
<div class="about-image reveal">
<img src="./src/profile-pic.jpeg" alt="Japhet Nyangaresi" class="circle-image-large">
</div>
<div class="about-text reveal">
<p>
I'm a <strong>Software Engineer student</strong> with an unwavering passion for technology
and innovation. My journey in software development is driven by curiosity and the desire
to create meaningful solutions that make a difference.
</p>
<br>
<p>
I thrive on <strong>turning ideas into reality</strong> through clean code and thoughtful design.
Whether it's building social platforms, student-focused apps, or modern websites, I approach
each project as an opportunity to learn, grow, and push boundaries.
</p>
<br>
<p>
My philosophy is simple: <strong>learn by doing</strong>. I believe in hands-on experience,
continuous improvement, and staying ahead of the curve with emerging technologies.
Let's build something amazing together.
</p>
</div>
<div class="about-stats reveal">
<div class="stat-card">
<div class="stat-number">2+</div>
<div class="stat-label">Projects Completed</div>
</div>
<div class="stat-card">
<div class="stat-number">10+</div>
<div class="stat-label">Technologies Mastered</div>
</div>
<div class="stat-card">
<div class="stat-number">100%</div>
<div class="stat-label">Commitment</div>
</div>
<div class="stat-card">
<div class="stat-number">∞</div>
<div class="stat-label">Drive to Learn</div>
</div>
</div>
</div>
</section>
</div>
<!-- Contact Section -->
<div class="container">
<section class="section" id="contact">
<div class="section-header reveal">
<div class="section-label">Get in Touch</div>
<h2 class="section-title">Let's work together</h2>
</div>
<div class="contact-grid">
<div class="contact-info reveal">
<h3>Have a project in mind?</h3>
<p>
I'm always open to discussing new projects, creative ideas, or opportunities
to be part of your vision. Let's connect and create something extraordinary.
</p>
<div class="social-links">
<a href="mailto:japhetkevingtone@gmail.com" class="social-link">
<span class="social-icon">✉️</span>
japhetkevingtone@gmail.com
</a>
<a href="https://github.com/kevingtonee" class="social-link" target="_blank">
<span class="social-icon">💻</span>
GitHub
</a>
<a href="https://www.linkedin.com/in/japhet-nyangaresi-2185762aa/" class="social-link" target="_blank">
<span class="social-icon">💼</span>
LinkedIn
</a>
</a>
</div>
</div>
<form class="contact-form reveal"
action="https://formspree.io/f/xgokqedp"
method="POST">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="your name" required>
</di>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="john@example.com" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" placeholder="Tell me about your project..." required></textarea>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;">
Send Message
</button>
</form>
</div>
</section>
</div>
<!-- Footer -->
<footer>
<div class="container">
<p>© 2026 NYANGARESI JAPHET. Crafted with passion and code.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>