Skip to content

Commit 24e96dc

Browse files
YoshiroMaximusYoshiroMaximus
authored
Refactor portfolio.html for improved structure and style
1 parent dcbd389 commit 24e96dc

1 file changed

Lines changed: 86 additions & 72 deletions

File tree

‎portfolio.html‎

Lines changed: 86 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Yoshiro</title>
7-
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet">
7+
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet">
88
<style>
99
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
1010

@@ -14,9 +14,6 @@
1414
--text: #1a1a1a;
1515
--muted: #888;
1616
--line: #d8d6d0;
17-
--accent: #9b8ea0;
18-
--accent2: #7a9490;
19-
--accent3: #a08b7a;
2017
--tag-bg: #e8e6e2;
2118
}
2219

@@ -29,27 +26,13 @@
2926
line-height: 1.6;
3027
}
3128

32-
/* ── Layout ── */
3329
.page {
3430
max-width: 640px;
3531
margin: 0 auto;
3632
padding: 0 2rem;
3733
}
3834

39-
section {
40-
padding: 4rem 0;
41-
border-bottom: 1px solid var(--line);
42-
opacity: 0;
43-
transform: translateY(20px);
44-
transition: opacity 0.6s ease, transform 0.6s ease;
45-
}
46-
47-
section.visible {
48-
opacity: 1;
49-
transform: translateY(0);
50-
}
51-
52-
/* ── Header ── */
35+
/* Header */
5336
header {
5437
padding: 5rem 0 4rem;
5538
border-bottom: 1px solid var(--line);
@@ -82,10 +65,22 @@
8265
font-size: 1rem;
8366
font-weight: 300;
8467
color: var(--muted);
85-
max-width: 380px;
8668
}
8769

88-
/* ── Section labels ── */
70+
/* Sections */
71+
section {
72+
padding: 4rem 0;
73+
border-bottom: 1px solid var(--line);
74+
opacity: 0;
75+
transform: translateY(20px);
76+
transition: opacity 0.6s ease, transform 0.6s ease;
77+
}
78+
79+
section.visible {
80+
opacity: 1;
81+
transform: translateY(0);
82+
}
83+
8984
.section-label {
9085
font-family: 'DM Mono', monospace;
9186
font-size: 0.65rem;
@@ -95,20 +90,21 @@
9590
margin-bottom: 2rem;
9691
}
9792

98-
/* ── About ── */
93+
/* About */
9994
.about-text {
100-
font-size: 1.05rem;
95+
font-size: 1rem;
10196
font-weight: 300;
102-
color: var(--text);
103-
max-width: 520px;
10497
line-height: 1.75;
98+
max-width: 520px;
10599
}
106100

107101
.about-text + .about-text {
108102
margin-top: 1rem;
103+
color: var(--muted);
104+
font-size: 0.9rem;
109105
}
110106

111-
/* ── Skills ── */
107+
/* Skills */
112108
.skills-grid {
113109
display: flex;
114110
flex-wrap: wrap;
@@ -128,7 +124,7 @@
128124

129125
.tag:hover { background: var(--line); }
130126

131-
/* ── Projects ── */
127+
/* Projects */
132128
.projects-grid {
133129
display: flex;
134130
flex-direction: column;
@@ -142,9 +138,8 @@
142138
padding: 1.5rem;
143139
display: flex;
144140
flex-direction: column;
145-
gap: 0.5rem;
141+
gap: 0.6rem;
146142
transition: background 0.2s ease;
147-
cursor: pointer;
148143
}
149144

150145
.project-card:hover { background: var(--bg2); }
@@ -174,10 +169,25 @@
174169
font-size: 0.875rem;
175170
font-weight: 300;
176171
color: var(--muted);
177-
line-height: 1.5;
172+
line-height: 1.6;
173+
}
174+
175+
.project-specs {
176+
display: flex;
177+
flex-wrap: wrap;
178+
gap: 0.4rem;
179+
}
180+
181+
.spec {
182+
font-family: 'DM Mono', monospace;
183+
font-size: 0.65rem;
184+
background: var(--tag-bg);
185+
color: var(--muted);
186+
padding: 0.25rem 0.6rem;
187+
border-radius: 2px;
188+
letter-spacing: 0.04em;
178189
}
179190

180-
/* Screenshot placeholder */
181191
.project-img {
182192
width: 100%;
183193
aspect-ratio: 16/9;
@@ -186,16 +196,14 @@
186196
display: flex;
187197
align-items: center;
188198
justify-content: center;
189-
margin-top: 0.5rem;
199+
margin-top: 0.25rem;
190200
overflow: hidden;
191-
position: relative;
192201
}
193202

194203
.project-img img {
195204
width: 100%;
196205
height: 100%;
197206
object-fit: cover;
198-
display: block;
199207
}
200208

201209
.project-img-label {
@@ -204,44 +212,38 @@
204212
color: var(--line);
205213
letter-spacing: 0.1em;
206214
text-transform: uppercase;
207-
position: absolute;
208215
}
209216

210-
.project-img img ~ .project-img-label { display: none; }
211-
212-
/* ── Contact ── */
217+
/* Contact */
213218
.contact-list {
214-
display: flex;
215-
flex-direction: column;
216-
gap: 0;
217219
border-top: 1px solid var(--line);
218220
}
219221

220222
.contact-item {
221223
display: flex;
222224
align-items: center;
223-
justify-content: space-between;
224225
padding: 1.25rem 0;
225226
border-bottom: 1px solid var(--line);
226227
text-decoration: none;
227228
color: var(--text);
229+
gap: 1rem;
228230
transition: padding-left 0.2s ease;
229231
}
230232

231233
.contact-item:hover { padding-left: 0.5rem; }
232234

233235
.contact-platform {
234-
font-size: 0.7rem;
235236
font-family: 'DM Mono', monospace;
237+
font-size: 0.65rem;
236238
letter-spacing: 0.1em;
237239
text-transform: uppercase;
238240
color: var(--muted);
239-
width: 80px;
241+
width: 72px;
240242
flex-shrink: 0;
241243
}
242244

243245
.contact-value {
244-
font-size: 0.95rem;
246+
font-size: 0.9rem;
245247
font-weight: 400;
246248
flex: 1;
247249
}
@@ -254,11 +256,9 @@
254256

255257
.contact-item:hover .contact-arrow { transform: translateX(4px); }
256258

257-
/* ── Footer ── */
259+
/* Footer */
258260
footer {
259261
padding: 3rem 0;
260-
opacity: 0;
261-
animation: fadeUp 0.6s ease 0.2s forwards;
262262
}
263263

264264
.footer-text {
@@ -281,18 +281,14 @@
281281
<header>
282282
<p class="header-label">Portfolio</p>
283283
<h1>Yoshiro</h1>
284-
<p class="tagline">Homelab dev & computer designer. High schooler building things that actually run.</p>
284+
<p class="tagline">Homelab dev &amp; computer designer. High schooler building things that actually run.</p>
285285
</header>
286286

287287
<!-- About -->
288288
<section id="about">
289289
<p class="section-label">About</p>
290-
<p class="about-text">
291-
I'm a high school student who spends way too much time in my homelab. I like spinning up self-hosted services, designing interfaces, and figuring out how things work under the hood.
292-
</p>
293-
<p class="about-text" style="margin-top:1rem; color: var(--muted); font-size: 0.9rem;">
294-
Outside of tech — I'm into music, graphic design, and collecting things I probably don't need. I like clean, considered aesthetics: nothing cluttered, nothing loud.
295-
</p>
290+
<p class="about-text">I'm a high school student who spends way too much time in my homelab. I like spinning up self-hosted services, designing interfaces, and figuring out how things work under the hood.</p>
291+
<p class="about-text">Outside of tech — I'm into music, graphic design, and collecting things I probably don't need. I like clean, considered aesthetics: nothing cluttered, nothing loud.</p>
296292
</section>
297293

298294
<!-- Skills -->
@@ -318,35 +314,54 @@ <h1>Yoshiro</h1>
318314

319315
<div class="project-card">
320316
<div class="project-header">
321-
<span class="project-name">Project one</span>
322-
<span class="project-type">homelab</span>
317+
<span class="project-name">Modded Minecraft Server</span>
318+
<span class="project-type">game server</span>
319+
</div>
320+
<p class="project-desc">PaperMC 1.21.1 modded server running through Crafty Controller, hosted for me and my friends. Crafty handles mod management, backups, and restarts through a web UI — no touching the terminal every time something breaks.</p>
321+
<div class="project-specs">
322+
<span class="spec">PaperMC</span>
323+
<span class="spec">Crafty Controller</span>
324+
<span class="spec">1.21.1</span>
325+
<span class="spec">modded</span>
323326
</div>
324-
<p class="project-desc">Short description of what this is and what problem it solves. Replace this with your own project.</p>
325327
<div class="project-img">
326-
<!-- To add a screenshot: <img src="your-screenshot.png" alt="Project one"> -->
328+
<!-- To add a screenshot: replace this comment with <img src="mc-screenshot.png" alt="Minecraft server"> -->
327329
<span class="project-img-label">add screenshot</span>
328330
</div>
329331
</div>
330332

331333
<div class="project-card">
332334
<div class="project-header">
333-
<span class="project-name">Project two</span>
334-
<span class="project-type">web</span>
335+
<span class="project-name">DIY Homelab</span>
336+
<span class="project-type">hardware</span>
337+
</div>
338+
<p class="project-desc">Self-built home server I put together myself. Runs all my self-hosted services and containers 24/7. The dual 16TB drives handle bulk storage and the SSD keeps things snappy for services that need it.</p>
339+
<div class="project-specs">
340+
<span class="spec">Ryzen 3400G</span>
341+
<span class="spec">32GB RAM</span>
342+
<span class="spec">2&#215;16TB HDD</span>
343+
<span class="spec">1TB SSD</span>
335344
</div>
336-
<p class="project-desc">Short description of what this is and what problem it solves. Replace this with your own project.</p>
337345
<div class="project-img">
338-
<span class="project-img-label">add screenshot</span>
346+
<!-- To add a photo: replace this comment with <img src="homelab.png" alt="Homelab"> -->
347+
<span class="project-img-label">add photo</span>
339348
</div>
340349
</div>
341350

342351
<div class="project-card">
343352
<div class="project-header">
344-
<span class="project-name">Project three</span>
345-
<span class="project-type">design</span>
353+
<span class="project-name">Raspberry Pi Cluster</span>
354+
<span class="project-type">cluster</span>
355+
</div>
356+
<p class="project-desc">A cluster of Raspberry Pis running DietPi — a stripped-down OS that keeps overhead minimal. Used for lightweight distributed services and learning how clustered systems actually behave in practice.</p>
357+
<div class="project-specs">
358+
<span class="spec">Raspberry Pi</span>
359+
<span class="spec">DietPi</span>
360+
<span class="spec">cluster</span>
346361
</div>
347-
<p class="project-desc">Short description of what this is and what problem it solves. Replace this with your own project.</p>
348362
<div class="project-img">
349-
<span class="project-img-label">add screenshot</span>
363+
<!-- To add a photo: replace this comment with <img src="pi-cluster.png" alt="Pi cluster"> -->
364+
<span class="project-img-label">add photo</span>
350365
</div>
351366
</div>
352367

@@ -357,28 +372,27 @@ <h1>Yoshiro</h1>
357372
<section id="contact">
358373
<p class="section-label">Get in touch</p>
359374
<div class="contact-list">
360-
<a class="contact-item" href="https://github.com/" target="_blank" rel="noopener">
375+
<a class="contact-item" href="https://github.com/yoshiro" target="_blank" rel="noopener">
361376
<span class="contact-platform">GitHub</span>
362377
<span class="contact-value">github.com/yoshiro</span>
363-
<span class="contact-arrow">→</span>
378+
<span class="contact-arrow">&#8594;</span>
364379
</a>
365380
<a class="contact-item" href="mailto:you@email.com">
366381
<span class="contact-platform">Email</span>
367382
<span class="contact-value">you@email.com</span>
368-
<span class="contact-arrow">→</span>
383+
<span class="contact-arrow">&#8594;</span>
369384
</a>
370385
</div>
371386
</section>
372387

373388
<!-- Footer -->
374389
<footer>
375-
<p class="footer-text">Yoshiro · sn4k.org/yoshiro</p>
390+
<p class="footer-text">Yoshiro &middot; sn4k.org/yoshiro</p>
376391
</footer>
377392

378393
</div>
379394

380395
<script>
381-
// Scroll-triggered fade-in
382396
const observer = new IntersectionObserver((entries) => {
383397
entries.forEach(entry => {
384398
if (entry.isIntersecting) {

0 commit comments

Comments
 (0)