Skip to content

Commit c765e62

Browse files
author
y-yamasaki
committed
プロフィール欄追加
1 parent 28af4a9 commit c765e62

2 files changed

Lines changed: 233 additions & 0 deletions

File tree

‎assets/css/top.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,88 @@
175175
color: var(--color-text-muted);
176176
}
177177

178+
/* About / Profile セクション */
179+
.section--profile {
180+
margin-top: 22px;
181+
}
182+
183+
.profile-grid {
184+
display: grid;
185+
grid-template-columns: repeat(
186+
auto-fit,
187+
minmax(260px, 1fr)
188+
);
189+
gap: 14px;
190+
}
191+
192+
.profile-card {
193+
background: rgba(15, 23, 42, 0.96);
194+
border-radius: var(--radius-md);
195+
padding: 14px 16px;
196+
border: 1px solid var(--color-border-soft);
197+
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.8);
198+
}
199+
200+
.profile-card-title {
201+
margin: 0 0 8px;
202+
font-size: 1rem;
203+
}
204+
205+
.profile-list {
206+
list-style: none;
207+
margin: 0 0 8px;
208+
padding: 0;
209+
font-size: 0.9rem;
210+
}
211+
212+
.profile-list li {
213+
display: flex;
214+
flex-direction: column;
215+
margin-bottom: 4px;
216+
}
217+
218+
.profile-label {
219+
font-weight: 600;
220+
font-size: 0.86rem;
221+
}
222+
223+
.profile-value {
224+
font-size: 0.86rem;
225+
color: var(--color-text-muted);
226+
}
227+
228+
.profile-note {
229+
margin: 4px 0 0;
230+
font-size: 0.82rem;
231+
color: var(--color-text-muted);
232+
}
233+
234+
/* タグスタイル */
235+
236+
.profile-tagset {
237+
margin-bottom: 8px;
238+
}
239+
240+
.profile-tagset-label {
241+
font-size: 0.8rem;
242+
color: var(--color-text-muted);
243+
margin-bottom: 2px;
244+
}
245+
246+
.profile-taglist {
247+
display: flex;
248+
flex-wrap: wrap;
249+
gap: 4px;
250+
}
251+
252+
.profile-tag {
253+
font-size: 0.78rem;
254+
padding: 2px 8px;
255+
border-radius: 999px;
256+
border: 1px solid rgba(148, 163, 184, 0.7);
257+
background: rgba(15, 23, 42, 0.95);
258+
}
259+
178260
/* スマホ向け */
179261
@media (max-width: 768px) {
180262
.hero {

‎index.html‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,157 @@ <h3 class="home-latest-title">
136136
</aside>
137137
</section>
138138

139+
<section
140+
class="section section--profile"
141+
id="about"
142+
>
143+
<h2 class="section__title">
144+
About / Profile
145+
</h2>
146+
147+
<div class="profile-grid">
148+
<!-- 経験年数 -->
149+
<article class="profile-card">
150+
<h3 class="profile-card-title">
151+
経験
152+
</h3>
153+
<ul class="profile-list">
154+
<li>
155+
<span class="profile-label"
156+
>学生開発</span
157+
><span class="profile-value"
158+
>約 4 年</span
159+
>
160+
</li>
161+
<li>
162+
<span class="profile-label"
163+
>業務（ゲームクライアント）</span
164+
><span class="profile-value"
165+
>約 2.5 年</span
166+
>
167+
</li>
168+
<li>
169+
<span class="profile-label"
170+
>個人・趣味開発</span
171+
><span class="profile-value"
172+
>約 1.5 年</span
173+
>
174+
</li>
175+
</ul>
176+
<p class="profile-note">
177+
学生時代から一貫してゲーム開発に関わりつつ、ツールやインフラ周りも触りながら「便利屋」ポジションを目指しています。
178+
</p>
179+
</article>
180+
181+
<!-- 技術スタック -->
182+
<article class="profile-card">
183+
<h3 class="profile-card-title">
184+
Tech Stack
185+
</h3>
186+
<div class="profile-tagset">
187+
<div
188+
class="profile-tagset-label"
189+
>
190+
Game / Client
191+
</div>
192+
<div class="profile-taglist">
193+
<span class="profile-tag"
194+
>Unity</span
195+
>
196+
<span class="profile-tag"
197+
>C#</span
198+
>
199+
<span class="profile-tag"
200+
>UE5</span
201+
>
202+
<span class="profile-tag"
203+
>Blueprint</span
204+
>
205+
</div>
206+
</div>
207+
<div class="profile-tagset">
208+
<div
209+
class="profile-tagset-label"
210+
>
211+
Backend / Tools
212+
</div>
213+
<div class="profile-taglist">
214+
<span class="profile-tag"
215+
>Node.js</span
216+
>
217+
<span class="profile-tag"
218+
>Express</span
219+
>
220+
<span class="profile-tag"
221+
>Discord Bot</span
222+
>
223+
</div>
224+
</div>
225+
<div class="profile-tagset">
226+
<div
227+
class="profile-tagset-label"
228+
>
229+
Infra / DevOps
230+
</div>
231+
<div class="profile-taglist">
232+
<span class="profile-tag"
233+
>Linux</span
234+
>
235+
<span class="profile-tag"
236+
>Git / GitHub</span
237+
>
238+
<span class="profile-tag"
239+
>Jenkins</span
240+
>
241+
<span class="profile-tag"
242+
>pm2</span
243+
>
244+
</div>
245+
</div>
246+
</article>
247+
248+
<!-- 得意領域 -->
249+
<article class="profile-card">
250+
<h3 class="profile-card-title">
251+
Focus / 得意領域
252+
</h3>
253+
<ul class="profile-list">
254+
<li>
255+
<span class="profile-label"
256+
>ゲームクライアント</span
257+
>
258+
<span class="profile-value"
259+
>UI /
260+
UX・演出・ゲームロジック実装</span
261+
>
262+
</li>
263+
<li>
264+
<span class="profile-label"
265+
>ツール開発</span
266+
>
267+
<span class="profile-value"
268+
>Discord Bot /
269+
自動化スクリプト / CI
270+
周り</span
271+
>
272+
</li>
273+
<li>
274+
<span class="profile-label"
275+
>インフラ遊び</span
276+
>
277+
<span class="profile-value"
278+
>自宅サーバー・Minecraft
279+
サーバー・トンネル接続</span
280+
>
281+
</li>
282+
</ul>
283+
<p class="profile-note">
284+
「とりあえず必要なものは自前で用意する」スタイルで、クライアント開発に限らず周辺の環境整備も一緒にやることが多いです。
285+
</p>
286+
</article>
287+
</div>
288+
</section>
289+
139290
<section class="section section--top-grid">
140291
<h2 class="section__title">コンテンツ</h2>
141292
<ul class="card-list">

0 commit comments

Comments
 (0)