Skip to content

Commit 607e502

Browse files
devifaustinedevifaustine
committed
Update UI and refactor
1 parent 183ac3d commit 607e502

8 files changed

Lines changed: 239 additions & 556 deletions

File tree

‎achievements.html‎

Lines changed: 2 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -6,59 +6,7 @@
66
<title>Devi Faustine — Achievements</title>
77
<link rel="stylesheet" href="style.css">
88
</head>
9-
<body>
10-
11-
<button id="lang-toggle" onclick="toggleLang()">DE</button>
12-
13-
<header>
14-
<div class="character-sheet">
15-
<div class="sprite-container">
16-
<div class="sprite-frame">
17-
<img src="char.png" class="character-sprite" alt="Pixel art character of Devi Faustine">
18-
</div>
19-
<div class="sprite-name-tag">PLAYER 1</div>
20-
</div>
21-
<div class="character-stats">
22-
<div class="character-name">Devi Faustine</div>
23-
<div class="character-class" data-i18n="char-class">CLASS: BACKEND SORCERER</div>
24-
<div class="stat-row">
25-
<span class="stat-label">LVL</span>
26-
<span class="stat-value">3</span>
27-
<span class="stat-stars">★★★</span>
28-
</div>
29-
<div class="stat-bar-row">
30-
<span class="stat-label">HP</span>
31-
<div class="stat-bar"><div class="stat-fill hp" style="width:82%"></div></div>
32-
<span class="stat-num">82/100</span>
33-
</div>
34-
<div class="stat-bar-row">
35-
<span class="stat-label">MP</span>
36-
<div class="stat-bar"><div class="stat-fill mp" style="width:95%"></div></div>
37-
<span class="stat-num">95/100</span>
38-
</div>
39-
<div class="mini-stats">
40-
<div class="mini-stat"><span class="mini-stat-label">STR</span><span class="mini-stat-value">★★★</span></div>
41-
<div class="mini-stat"><span class="mini-stat-label">INT</span><span class="mini-stat-value">★★★★★</span></div>
42-
<div class="mini-stat"><span class="mini-stat-label">DEX</span><span class="mini-stat-value">★★★★</span></div>
43-
</div>
44-
<div class="character-subtitle">
45-
<span data-i18n="char-subtitle">Software Developer | Cybersecurity &amp; AI Enthusiast</span><br>
46-
<span data-i18n="char-location">► Germany (made in Indonesia)</span>
47-
</div>
48-
</div>
49-
</div>
50-
</header>
51-
52-
<nav>
53-
<ul>
54-
<li><a href="index.html" data-i18n="nav-about">About</a></li>
55-
<li><a href="skills.html" data-i18n="nav-skills">Skills</a></li>
56-
<li><a href="quests.html" data-i18n="nav-quests">Quests</a></li>
57-
<li><a href="education.html" data-i18n="nav-education">Education</a></li>
58-
<li><a href="achievements.html" class="active" data-i18n="nav-achievements">Achievements</a></li>
59-
<li><a href="contact.html" data-i18n="nav-contact">Contact</a></li>
60-
</ul>
61-
</nav>
9+
<body data-page="achievements">
6210

6311
<div class="container">
6412
<h2 data-i18n="h2-achievements">Achievements</h2>
@@ -97,7 +45,7 @@ <h2 data-i18n="h2-achievements">Achievements</h2>
9745
</div>
9846
</div>
9947

100-
<footer><p data-i18n="footer">© 2025 Devi Faustine. All rights reserved.</p></footer>
48+
<footer><p data-i18n="footer">© 2026 Devi Faustine. All rights reserved.</p></footer>
10149

10250
<script src="script.js"></script>
10351
</body>

‎contact.html‎

Lines changed: 2 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -6,59 +6,7 @@
66
<title>Devi Faustine — Contact</title>
77
<link rel="stylesheet" href="style.css">
88
</head>
9-
<body>
10-
11-
<button id="lang-toggle" onclick="toggleLang()">DE</button>
12-
13-
<header>
14-
<div class="character-sheet">
15-
<div class="sprite-container">
16-
<div class="sprite-frame">
17-
<img src="char.png" class="character-sprite" alt="Pixel art character of Devi Faustine">
18-
</div>
19-
<div class="sprite-name-tag">PLAYER 1</div>
20-
</div>
21-
<div class="character-stats">
22-
<div class="character-name">Devi Faustine</div>
23-
<div class="character-class" data-i18n="char-class">CLASS: BACKEND SORCERER</div>
24-
<div class="stat-row">
25-
<span class="stat-label">LVL</span>
26-
<span class="stat-value">3</span>
27-
<span class="stat-stars">★★★</span>
28-
</div>
29-
<div class="stat-bar-row">
30-
<span class="stat-label">HP</span>
31-
<div class="stat-bar"><div class="stat-fill hp" style="width:82%"></div></div>
32-
<span class="stat-num">82/100</span>
33-
</div>
34-
<div class="stat-bar-row">
35-
<span class="stat-label">MP</span>
36-
<div class="stat-bar"><div class="stat-fill mp" style="width:95%"></div></div>
37-
<span class="stat-num">95/100</span>
38-
</div>
39-
<div class="mini-stats">
40-
<div class="mini-stat"><span class="mini-stat-label">STR</span><span class="mini-stat-value">★★★</span></div>
41-
<div class="mini-stat"><span class="mini-stat-label">INT</span><span class="mini-stat-value">★★★★★</span></div>
42-
<div class="mini-stat"><span class="mini-stat-label">DEX</span><span class="mini-stat-value">★★★★</span></div>
43-
</div>
44-
<div class="character-subtitle">
45-
<span data-i18n="char-subtitle">Software Developer | Cybersecurity &amp; AI Enthusiast</span><br>
46-
<span data-i18n="char-location">► Germany (made in Indonesia)</span>
47-
</div>
48-
</div>
49-
</div>
50-
</header>
51-
52-
<nav>
53-
<ul>
54-
<li><a href="index.html" data-i18n="nav-about">About</a></li>
55-
<li><a href="skills.html" data-i18n="nav-skills">Skills</a></li>
56-
<li><a href="quests.html" data-i18n="nav-quests">Quests</a></li>
57-
<li><a href="education.html" data-i18n="nav-education">Education</a></li>
58-
<li><a href="achievements.html" data-i18n="nav-achievements">Achievements</a></li>
59-
<li><a href="contact.html" class="active" data-i18n="nav-contact">Contact</a></li>
60-
</ul>
61-
</nav>
9+
<body data-page="contact">
6210

6311
<div class="container">
6412
<h2 data-i18n="h2-contact">Contact</h2>
@@ -79,7 +27,7 @@ <h2 data-i18n="h2-contact">Contact</h2>
7927
</div>
8028
</div>
8129

82-
<footer><p data-i18n="footer">© 2025 Devi Faustine. All rights reserved.</p></footer>
30+
<footer><p data-i18n="footer">© 2026 Devi Faustine. All rights reserved.</p></footer>
8331

8432
<script src="script.js"></script>
8533
</body>

‎education.html‎

Lines changed: 2 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -6,59 +6,7 @@
66
<title>Devi Faustine — Education</title>
77
<link rel="stylesheet" href="style.css">
88
</head>
9-
<body>
10-
11-
<button id="lang-toggle" onclick="toggleLang()">DE</button>
12-
13-
<header>
14-
<div class="character-sheet">
15-
<div class="sprite-container">
16-
<div class="sprite-frame">
17-
<img src="char.png" class="character-sprite" alt="Pixel art character of Devi Faustine">
18-
</div>
19-
<div class="sprite-name-tag">PLAYER 1</div>
20-
</div>
21-
<div class="character-stats">
22-
<div class="character-name">Devi Faustine</div>
23-
<div class="character-class" data-i18n="char-class">CLASS: BACKEND SORCERER</div>
24-
<div class="stat-row">
25-
<span class="stat-label">LVL</span>
26-
<span class="stat-value">3</span>
27-
<span class="stat-stars">★★★</span>
28-
</div>
29-
<div class="stat-bar-row">
30-
<span class="stat-label">HP</span>
31-
<div class="stat-bar"><div class="stat-fill hp" style="width:82%"></div></div>
32-
<span class="stat-num">82/100</span>
33-
</div>
34-
<div class="stat-bar-row">
35-
<span class="stat-label">MP</span>
36-
<div class="stat-bar"><div class="stat-fill mp" style="width:95%"></div></div>
37-
<span class="stat-num">95/100</span>
38-
</div>
39-
<div class="mini-stats">
40-
<div class="mini-stat"><span class="mini-stat-label">STR</span><span class="mini-stat-value">★★★</span></div>
41-
<div class="mini-stat"><span class="mini-stat-label">INT</span><span class="mini-stat-value">★★★★★</span></div>
42-
<div class="mini-stat"><span class="mini-stat-label">DEX</span><span class="mini-stat-value">★★★★</span></div>
43-
</div>
44-
<div class="character-subtitle">
45-
<span data-i18n="char-subtitle">Software Developer | Cybersecurity &amp; AI Enthusiast</span><br>
46-
<span data-i18n="char-location">► Germany (made in Indonesia)</span>
47-
</div>
48-
</div>
49-
</div>
50-
</header>
51-
52-
<nav>
53-
<ul>
54-
<li><a href="index.html" data-i18n="nav-about">About</a></li>
55-
<li><a href="skills.html" data-i18n="nav-skills">Skills</a></li>
56-
<li><a href="quests.html" data-i18n="nav-quests">Quests</a></li>
57-
<li><a href="education.html" class="active" data-i18n="nav-education">Education</a></li>
58-
<li><a href="achievements.html" data-i18n="nav-achievements">Achievements</a></li>
59-
<li><a href="contact.html" data-i18n="nav-contact">Contact</a></li>
60-
</ul>
61-
</nav>
9+
<body data-page="education">
6210

6311
<div class="container">
6412
<h2 data-i18n="h2-education">Education</h2>
@@ -76,7 +24,7 @@ <h2 data-i18n="h2-education">Education</h2>
7624
</div>
7725
</div>
7826

79-
<footer><p data-i18n="footer">© 2025 Devi Faustine. All rights reserved.</p></footer>
27+
<footer><p data-i18n="footer">© 2026 Devi Faustine. All rights reserved.</p></footer>
8028

8129
<script src="script.js"></script>
8230
</body>

‎index.html‎

Lines changed: 2 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -6,59 +6,7 @@
66
<title>Devi Faustine — About</title>
77
<link rel="stylesheet" href="style.css">
88
</head>
9-
<body>
10-
11-
<button id="lang-toggle" onclick="toggleLang()">DE</button>
12-
13-
<header>
14-
<div class="character-sheet">
15-
<div class="sprite-container">
16-
<div class="sprite-frame">
17-
<img src="char.png" class="character-sprite" alt="Pixel art character of Devi Faustine">
18-
</div>
19-
<div class="sprite-name-tag">PLAYER 1</div>
20-
</div>
21-
<div class="character-stats">
22-
<div class="character-name">Devi Faustine</div>
23-
<div class="character-class" data-i18n="char-class">CLASS: BACKEND SORCERER</div>
24-
<div class="stat-row">
25-
<span class="stat-label">LVL</span>
26-
<span class="stat-value">3</span>
27-
<span class="stat-stars">★★★</span>
28-
</div>
29-
<div class="stat-bar-row">
30-
<span class="stat-label">HP</span>
31-
<div class="stat-bar"><div class="stat-fill hp" style="width:82%"></div></div>
32-
<span class="stat-num">82/100</span>
33-
</div>
34-
<div class="stat-bar-row">
35-
<span class="stat-label">MP</span>
36-
<div class="stat-bar"><div class="stat-fill mp" style="width:95%"></div></div>
37-
<span class="stat-num">95/100</span>
38-
</div>
39-
<div class="mini-stats">
40-
<div class="mini-stat"><span class="mini-stat-label">STR</span><span class="mini-stat-value">★★★</span></div>
41-
<div class="mini-stat"><span class="mini-stat-label">INT</span><span class="mini-stat-value">★★★★★</span></div>
42-
<div class="mini-stat"><span class="mini-stat-label">DEX</span><span class="mini-stat-value">★★★★</span></div>
43-
</div>
44-
<div class="character-subtitle">
45-
<span data-i18n="char-subtitle">Software Developer | Cybersecurity &amp; AI Enthusiast</span><br>
46-
<span data-i18n="char-location">► Germany (made in Indonesia)</span>
47-
</div>
48-
</div>
49-
</div>
50-
</header>
51-
52-
<nav>
53-
<ul>
54-
<li><a href="index.html" class="active" data-i18n="nav-about">About</a></li>
55-
<li><a href="skills.html" data-i18n="nav-skills">Skills</a></li>
56-
<li><a href="quests.html" data-i18n="nav-quests">Quests</a></li>
57-
<li><a href="education.html" data-i18n="nav-education">Education</a></li>
58-
<li><a href="achievements.html" data-i18n="nav-achievements">Achievements</a></li>
59-
<li><a href="contact.html" data-i18n="nav-contact">Contact</a></li>
60-
</ul>
61-
</nav>
9+
<body data-page="about">
6210

6311
<div class="container">
6412
<h2 data-i18n="h2-about">About Me</h2>
@@ -114,7 +62,7 @@ <h2 data-i18n="h2-about">About Me</h2>
11462
</div>
11563
</div>
11664

117-
<footer><p data-i18n="footer">© 2025 Devi Faustine. All rights reserved.</p></footer>
65+
<footer><p data-i18n="footer">© 2026 Devi Faustine. All rights reserved.</p></footer>
11866

11967
<script src="script.js"></script>
12068
</body>

‎quests.html‎

Lines changed: 2 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -6,59 +6,7 @@
66
<title>Devi Faustine — Quests</title>
77
<link rel="stylesheet" href="style.css">
88
</head>
9-
<body>
10-
11-
<button id="lang-toggle" onclick="toggleLang()">DE</button>
12-
13-
<header>
14-
<div class="character-sheet">
15-
<div class="sprite-container">
16-
<div class="sprite-frame">
17-
<img src="char.png" class="character-sprite" alt="Pixel art character of Devi Faustine">
18-
</div>
19-
<div class="sprite-name-tag">PLAYER 1</div>
20-
</div>
21-
<div class="character-stats">
22-
<div class="character-name">Devi Faustine</div>
23-
<div class="character-class" data-i18n="char-class">CLASS: BACKEND SORCERER</div>
24-
<div class="stat-row">
25-
<span class="stat-label">LVL</span>
26-
<span class="stat-value">3</span>
27-
<span class="stat-stars">★★★</span>
28-
</div>
29-
<div class="stat-bar-row">
30-
<span class="stat-label">HP</span>
31-
<div class="stat-bar"><div class="stat-fill hp" style="width:82%"></div></div>
32-
<span class="stat-num">82/100</span>
33-
</div>
34-
<div class="stat-bar-row">
35-
<span class="stat-label">MP</span>
36-
<div class="stat-bar"><div class="stat-fill mp" style="width:95%"></div></div>
37-
<span class="stat-num">95/100</span>
38-
</div>
39-
<div class="mini-stats">
40-
<div class="mini-stat"><span class="mini-stat-label">STR</span><span class="mini-stat-value">★★★</span></div>
41-
<div class="mini-stat"><span class="mini-stat-label">INT</span><span class="mini-stat-value">★★★★★</span></div>
42-
<div class="mini-stat"><span class="mini-stat-label">DEX</span><span class="mini-stat-value">★★★★</span></div>
43-
</div>
44-
<div class="character-subtitle">
45-
<span data-i18n="char-subtitle">Software Developer | Cybersecurity &amp; AI Enthusiast</span><br>
46-
<span data-i18n="char-location">► Germany (made in Indonesia)</span>
47-
</div>
48-
</div>
49-
</div>
50-
</header>
51-
52-
<nav>
53-
<ul>
54-
<li><a href="index.html" data-i18n="nav-about">About</a></li>
55-
<li><a href="skills.html" data-i18n="nav-skills">Skills</a></li>
56-
<li><a href="quests.html" class="active" data-i18n="nav-quests">Quests</a></li>
57-
<li><a href="education.html" data-i18n="nav-education">Education</a></li>
58-
<li><a href="achievements.html" data-i18n="nav-achievements">Achievements</a></li>
59-
<li><a href="contact.html" data-i18n="nav-contact">Contact</a></li>
60-
</ul>
61-
</nav>
9+
<body data-page="quests">
6210

6311
<div class="container">
6412
<h2 data-i18n="h2-quests">Quest Log</h2>
@@ -114,7 +62,7 @@ <h2 data-i18n="h2-quests">Quest Log</h2>
11462
</div>
11563
</div>
11664

117-
<footer><p data-i18n="footer">© 2025 Devi Faustine. All rights reserved.</p></footer>
65+
<footer><p data-i18n="footer">© 2026 Devi Faustine. All rights reserved.</p></footer>
11866

11967
<script src="script.js"></script>
12068
</body>

0 commit comments

Comments
 (0)