Skip to content

Commit b5e4fdd

Browse files
devifaustinedevifaustine
committed
Add playable char in personal website
1 parent 0205b32 commit b5e4fdd

3 files changed

Lines changed: 952 additions & 52 deletions

File tree

‎index.html‎

Lines changed: 130 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,67 +3,145 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Devi Faustine — About</title>
7-
<link rel="stylesheet" href="style.css">
6+
<title>Devi Faustine — Portfolio</title>
7+
<meta name="description" content="Devi Faustine — software developer. Python, GCP, Firebase, REST API, Langchain. Play the journey!">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=JetBrains+Mono:wght@400;600&display=swap">
11+
<link rel="stylesheet" href="portfolio.css">
812
</head>
9-
<body data-page="about">
13+
<body>
1014

11-
<div class="container">
12-
<h2 data-i18n="h2-about">About Me</h2>
15+
<nav>
16+
<ul>
17+
<li style="--i:0"><a href="#hero"><span class="nav-arrow">► </span>About</a></li>
18+
<li style="--i:1"><a href="#journey"><span class="nav-arrow">► </span>Journey</a></li>
19+
<li style="--i:2"><a href="#skills"><span class="nav-arrow">► </span>Skills</a></li>
20+
<li style="--i:3"><a href="#achievements"><span class="nav-arrow">► </span>Achievements</a></li>
21+
<li style="--i:4"><a href="#contact"><span class="nav-arrow">► </span>Contact</a></li>
22+
</ul>
23+
</nav>
1324

14-
<div class="about-text">
15-
<p data-i18n="about-p1">Hi! I'm a software developer with expertise in Python, GCP, Firebase, REST API, and Langchain. I'm based in Germany but made in Indonesia :D, studied at University of Saarland majoring in Cybersecurity.</p>
16-
<p data-i18n="about-p2">Happy to give you some insights on my personal projects and get to know me.</p>
25+
<header id="hero">
26+
<div class="hero-inner">
27+
<div class="hero-sprite">
28+
<div class="hero-sprite-frame">
29+
<img src="char.png" alt="Devi Faustine sprite">
30+
</div>
31+
<div class="hero-player-tag">PLAYER 1</div>
32+
</div>
33+
34+
<div class="hero-main">
35+
<div class="hero-name">Devi Faustine<span class="hero-cursor">_</span></div>
36+
<div class="hero-class">CLASS: BACKEND SORCERER</div>
37+
<p class="hero-bio">Hi! I'm a software developer with expertise in Python, GCP, Firebase, REST API, and Langchain. Based in Germany, made in Indonesia :D.</p>
38+
<div class="hero-hint">▼ PLAY THE JOURNEY BELOW</div>
39+
</div>
40+
41+
<div class="traits-card">
42+
<div class="traits-header">▶ TRAITS</div>
43+
<div class="trait"><span class="trait-icon">🎮</span><span class="trait-name">GAMING</span></div>
44+
<div class="trait"><span class="trait-icon">🍳</span><span class="trait-name">COOKING</span></div>
45+
<div class="trait"><span class="trait-icon">🧁</span><span class="trait-name">BAKING</span></div>
46+
<div class="trait"><span class="trait-icon">📚</span><span class="trait-name">READING</span></div>
47+
<div class="traits-lore">⚠ LORE: Bakes for everyone, eats none of it herself.</div>
48+
</div>
49+
</div>
50+
</header>
51+
52+
<section id="journey">
53+
<div class="journey-head">
54+
<div class="journey-title">[ THE JOURNEY ]</div>
55+
<div class="journey-progress" id="journey-progress">0 / 8 coins</div>
1756
</div>
1857

19-
<div class="bio-card">
20-
<div class="bio-card-header" data-i18n="bio-header">▶ CHARACTER BIO</div>
21-
<div class="bio-body">
22-
<div class="bio-traits">
23-
<div class="bio-trait">
24-
<span class="bio-trait-icon">🎮</span>
25-
<div>
26-
<span class="bio-trait-name" data-i18n="bio-gaming-name">GAMING</span>
27-
<span class="bio-trait-desc" data-i18n="bio-gaming-desc">Avid gamer — probably why pixel UIs feel like home.</span>
28-
</div>
29-
</div>
30-
<div class="bio-trait">
31-
<span class="bio-trait-icon">🍳</span>
32-
<div>
33-
<span class="bio-trait-name" data-i18n="bio-cooking-name">COOKING</span>
34-
<span class="bio-trait-desc" data-i18n="bio-cooking-desc">Enjoys experimenting in the kitchen — debugging recipes one dish at a time.</span>
35-
</div>
36-
</div>
37-
<div class="bio-trait">
38-
<span class="bio-trait-icon">🧁</span>
39-
<div>
40-
<span class="bio-trait-name" data-i18n="bio-baking-name">BAKING</span>
41-
<span class="bio-trait-desc" data-i18n="bio-baking-desc">Dedicated baker who treats it like precision engineering.</span>
42-
</div>
43-
</div>
44-
<div class="bio-trait">
45-
<span class="bio-trait-icon">📚</span>
46-
<div>
47-
<span class="bio-trait-name" data-i18n="bio-reading-name">READING</span>
48-
<span class="bio-trait-desc" data-i18n="bio-reading-desc">Loves a good book — fiction or non-fiction, both welcome.</span>
49-
</div>
50-
</div>
58+
<div id="game-viewport" tabindex="0" role="application" aria-label="The Journey mini-game. Use A and D or arrow keys to walk, W or space to jump.">
59+
<div id="game-world"></div>
60+
<div id="game-hint"><div>► CLICK HERE<br>TO WALK ►</div></div>
61+
</div>
62+
63+
<div class="journey-controls">
64+
<div class="journey-keys">◄ A / D to walk · W / SPACE to jump bugs and grab coins</div>
65+
<div class="touch-buttons">
66+
<button id="btn-left" type="button" aria-label="Walk left">◀</button>
67+
<button id="btn-jump" type="button" aria-label="Jump">⤒</button>
68+
<button id="btn-right" type="button" aria-label="Walk right">▶</button>
69+
</div>
70+
</div>
71+
</section>
72+
73+
<div class="transition-strip"></div>
74+
75+
<div class="paper">
76+
77+
<section id="skills">
78+
<h2 class="pixel-h2">[ Skills ]</h2>
79+
<div class="skill-bars" id="skill-bars"></div>
80+
<div class="inventory-divider">— INVENTORY —</div>
81+
<div class="inventory" id="inventory"></div>
82+
<div id="skill-info" hidden>
83+
<div class="skill-info-head">▶ ITEM INFO</div>
84+
<span id="skill-info-text"></span>
85+
</div>
86+
</section>
87+
88+
<section id="achievements">
89+
<h2 class="pixel-h2">[ Achievements ]</h2>
90+
<div class="achievements-grid">
91+
<div class="achievement" style="--i:0">
92+
<span class="achievement-icon">⚔️</span>
93+
<div class="achievement-name">TEAM LEADER</div>
94+
<div class="achievement-desc">Promoted to Head of AI Team — leading the charge.</div>
95+
</div>
96+
<div class="achievement" style="--i:1">
97+
<span class="achievement-icon">🤖</span>
98+
<div class="achievement-name">AI PIONEER</div>
99+
<div class="achievement-desc">Built AI Chat system.</div>
100+
</div>
101+
<div class="achievement" style="--i:2">
102+
<span class="achievement-icon">☁️</span>
103+
<div class="achievement-name">CLOUD MAGE</div>
104+
<div class="achievement-desc">Deployed and managed full GCP backend infrastructure.</div>
51105
</div>
52-
<hr class="bio-divider">
53-
<div class="bio-podcast">
54-
<span class="bio-podcast-icon">🎙️</span>
55-
<div>
56-
<span class="bio-podcast-label" data-i18n="bio-listening-label">CURRENTLY LISTENING</span>
57-
<span class="bio-podcast-name" data-i18n="bio-listening-text">Founders &amp; Acquired — fascinated by the stories behind companies and the people who build them.</span>
58-
</div>
106+
<div class="achievement" style="--i:3">
107+
<span class="achievement-icon">🔐</span>
108+
<div class="achievement-name">CYBERSEC SCHOLAR</div>
109+
<div class="achievement-desc">Bachelor's in Cybersecurity — University of Saarland.</div>
110+
</div>
111+
<div class="achievement" style="--i:4">
112+
<span class="achievement-icon">🌏</span>
113+
<div class="achievement-name">WORLD TRAVELER</div>
114+
<div class="achievement-desc">Indonesia → Germany. Unlocked international career.</div>
115+
</div>
116+
<div class="achievement" style="--i:5">
117+
<span class="achievement-icon">🧪</span>
118+
<div class="achievement-name">QA GUARDIAN</div>
119+
<div class="achievement-desc">Mastered E2E testing and CI automation with Cypress.</div>
59120
</div>
60-
<div class="bio-lore" data-i18n="bio-lore">Bakes for everyone else. Does not eat sweets. The most selfless chaotic neutral you'll ever meet.</div>
61121
</div>
62-
</div>
63-
</div>
122+
</section>
64123

65-
<footer><p data-i18n="footer">© 2026 Devi Faustine. All rights reserved.</p></footer>
124+
<section id="contact">
125+
<h2 class="pixel-h2">[ Contact ]</h2>
126+
<div class="contact-list">
127+
<div class="contact-row" style="--i:0">
128+
<strong>Email:</strong>
129+
<a href="mailto:devifaustine.df@gmail.com">devifaustine.df@gmail.com</a>
130+
</div>
131+
<div class="contact-row" style="--i:1">
132+
<strong>GitHub:</strong>
133+
<a href="https://github.com/devifaustine" target="_blank" rel="noopener">github.com/devifaustine</a>
134+
</div>
135+
<div class="contact-row" style="--i:2">
136+
<strong>LinkedIn:</strong>
137+
<a href="https://linkedin.com/in/devifaustine" target="_blank" rel="noopener">linkedin.com/in/devifaustine</a>
138+
</div>
139+
</div>
140+
</section>
141+
142+
<footer><span class="star-accent">★ </span>© 2026 Devi Faustine. All rights reserved.<span class="star-accent"> ★</span></footer>
143+
</div>
66144

67-
<script src="script.js"></script>
145+
<script src="portfolio.js"></script>
68146
</body>
69147
</html>

0 commit comments

Comments
 (0)