Skip to content

Commit 308d354

Browse files
YoshiroMaximusYoshiroMaximus
authored
Update portfolio.html
1 parent 24e96dc commit 308d354

1 file changed

Lines changed: 61 additions & 40 deletions

File tree

‎portfolio.html‎

Lines changed: 61 additions & 40 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:wght@300;400;500&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet">
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">
88
<style>
99
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
1010

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

@@ -26,13 +29,27 @@
2629
line-height: 1.6;
2730
}
2831

32+
/* ── Layout ── */
2933
.page {
3034
max-width: 640px;
3135
margin: 0 auto;
3236
padding: 0 2rem;
3337
}
3438

35-
/* Header */
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 ── */
3653
header {
3754
padding: 5rem 0 4rem;
3855
border-bottom: 1px solid var(--line);
@@ -65,22 +82,10 @@
6582
font-size: 1rem;
6683
font-weight: 300;
6784
color: var(--muted);
85+
max-width: 380px;
6886
}
6987

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-
88+
/* ── Section labels ── */
8489
.section-label {
8590
font-family: 'DM Mono', monospace;
8691
font-size: 0.65rem;
@@ -90,21 +95,20 @@
9095
margin-bottom: 2rem;
9196
}
9297

93-
/* About */
98+
/* ── About ── */
9499
.about-text {
95-
font-size: 1rem;
100+
font-size: 1.05rem;
96101
font-weight: 300;
97-
line-height: 1.75;
102+
color: var(--text);
98103
max-width: 520px;
104+
line-height: 1.75;
99105
}
100106

101107
.about-text + .about-text {
102108
margin-top: 1rem;
103-
color: var(--muted);
104-
font-size: 0.9rem;
105109
}
106110

107-
/* Skills */
111+
/* ── Skills ── */
108112
.skills-grid {
109113
display: flex;
110114
flex-wrap: wrap;
@@ -124,7 +128,7 @@
124128

125129
.tag:hover { background: var(--line); }
126130

127-
/* Projects */
131+
/* ── Projects ── */
128132
.projects-grid {
129133
display: flex;
130134
flex-direction: column;
@@ -138,8 +142,9 @@
138142
padding: 1.5rem;
139143
display: flex;
140144
flex-direction: column;
141-
gap: 0.6rem;
145+
gap: 0.5rem;
142146
transition: background 0.2s ease;
147+
cursor: pointer;
143148
}
144149

145150
.project-card:hover { background: var(--bg2); }
@@ -169,13 +174,14 @@
169174
font-size: 0.875rem;
170175
font-weight: 300;
171176
color: var(--muted);
172-
line-height: 1.6;
177+
line-height: 1.5;
173178
}
174179

175180
.project-specs {
176181
display: flex;
177182
flex-wrap: wrap;
178183
gap: 0.4rem;
184+
margin-top: 0.15rem;
179185
}
180186

181187
.spec {
@@ -188,6 +194,7 @@
188194
letter-spacing: 0.04em;
189195
}
190196

197+
/* Screenshot placeholder */
191198
.project-img {
192199
width: 100%;
193200
aspect-ratio: 16/9;
@@ -196,14 +203,16 @@
196203
display: flex;
197204
align-items: center;
198205
justify-content: center;
199-
margin-top: 0.25rem;
206+
margin-top: 0.5rem;
200207
overflow: hidden;
208+
position: relative;
201209
}
202210

203211
.project-img img {
204212
width: 100%;
205213
height: 100%;
206214
object-fit: cover;
215+
display: block;
207216
}
208217

209218
.project-img-label {
@@ -212,38 +221,44 @@
212221
color: var(--line);
213222
letter-spacing: 0.1em;
214223
text-transform: uppercase;
224+
position: absolute;
215225
}
216226

217-
/* Contact */
227+
.project-img img ~ .project-img-label { display: none; }
228+
229+
/* ── Contact ── */
218230
.contact-list {
231+
display: flex;
232+
flex-direction: column;
233+
gap: 0;
219234
border-top: 1px solid var(--line);
220235
}
221236

222237
.contact-item {
223238
display: flex;
224239
align-items: center;
240+
justify-content: space-between;
225241
padding: 1.25rem 0;
226242
border-bottom: 1px solid var(--line);
227243
text-decoration: none;
228244
color: var(--text);
229-
gap: 1rem;
230245
transition: padding-left 0.2s ease;
231246
}
232247

233248
.contact-item:hover { padding-left: 0.5rem; }
234249

235250
.contact-platform {
251+
font-size: 0.7rem;
236252
font-family: 'DM Mono', monospace;
237-
font-size: 0.65rem;
238253
letter-spacing: 0.1em;
239254
text-transform: uppercase;
240255
color: var(--muted);
241-
width: 72px;
256+
width: 80px;
242257
flex-shrink: 0;
243258
}
244259

245260
.contact-value {
246-
font-size: 0.9rem;
261+
font-size: 0.95rem;
247262
font-weight: 400;
248263
flex: 1;
249264
}
@@ -256,9 +271,11 @@
256271

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

259-
/* Footer */
274+
/* ── Footer ── */
260275
footer {
261276
padding: 3rem 0;
277+
opacity: 0;
278+
animation: fadeUp 0.6s ease 0.2s forwards;
262279
}
263280

264281
.footer-text {
@@ -287,8 +304,12 @@ <h1>Yoshiro</h1>
287304
<!-- About -->
288305
<section id="about">
289306
<p class="section-label">About</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>
307+
<p class="about-text">
308+
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.
309+
</p>
310+
<p class="about-text" style="margin-top:1rem; color: var(--muted); font-size: 0.9rem;">
311+
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.
312+
</p>
292313
</section>
293314

294315
<!-- Skills -->
@@ -325,7 +346,7 @@ <h1>Yoshiro</h1>
325346
<span class="spec">modded</span>
326347
</div>
327348
<div class="project-img">
328-
<!-- To add a screenshot: replace this comment with <img src="mc-screenshot.png" alt="Minecraft server"> -->
349+
<!-- To add a screenshot: <img src="mc-screenshot.png" alt="Minecraft server"> -->
329350
<span class="project-img-label">add screenshot</span>
330351
</div>
331352
</div>
@@ -339,11 +360,11 @@ <h1>Yoshiro</h1>
339360
<div class="project-specs">
340361
<span class="spec">Ryzen 3400G</span>
341362
<span class="spec">32GB RAM</span>
342-
<span class="spec">2&#215;16TB HDD</span>
363+
<span class="spec">2&times;16TB HDD</span>
343364
<span class="spec">1TB SSD</span>
344365
</div>
345366
<div class="project-img">
346-
<!-- To add a photo: replace this comment with <img src="homelab.png" alt="Homelab"> -->
367+
<!-- To add a photo: <img src="homelab.png" alt="Homelab build"> -->
347368
<span class="project-img-label">add photo</span>
348369
</div>
349370
</div>
@@ -360,7 +381,7 @@ <h1>Yoshiro</h1>
360381
<span class="spec">cluster</span>
361382
</div>
362383
<div class="project-img">
363-
<!-- To add a photo: replace this comment with <img src="pi-cluster.png" alt="Pi cluster"> -->
384+
<!-- To add a photo: <img src="pi-cluster.png" alt="Pi cluster"> -->
364385
<span class="project-img-label">add photo</span>
365386
</div>
366387
</div>
@@ -375,12 +396,12 @@ <h1>Yoshiro</h1>
375396
<a class="contact-item" href="https://github.com/yoshiro" target="_blank" rel="noopener">
376397
<span class="contact-platform">GitHub</span>
377398
<span class="contact-value">github.com/yoshiro</span>
378-
<span class="contact-arrow">&#8594;</span>
399+
<span class="contact-arrow">→</span>
379400
</a>
380401
<a class="contact-item" href="mailto:you@email.com">
381402
<span class="contact-platform">Email</span>
382403
<span class="contact-value">you@email.com</span>
383-
<span class="contact-arrow">&#8594;</span>
404+
<span class="contact-arrow">→</span>
384405
</a>
385406
</div>
386407
</section>

0 commit comments

Comments
 (0)