gahusb/web-page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI 디자인 대대적으로 대시보드 형태의 전문적인 느낌으로 재구성

Browse Source
This commit is contained in:
gahusb
2026-03-04 01:39:26 +09:00
parent 840b0a5300
commit 618d5f8e6f
21 changed files with 3499 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/pages/home/Home.jsx
View File

@@ -14,7 +14,7 @@ const Home = () => {
<section className="home-hero">
<div className="home-hero__text">
<p className="home-hero__kicker">Personal Archive</p>
<h1>기록을 모으고, 이야기를 이어붙이는 작은 집.</h1>
<h1>기록을 모으고,<br />이야기를 이어붙이는 작은 집.</h1>
<p className="home-hero__lead">
개발, 여행 스냅, 그리고 생각을 모아두는 공간입니다.
</p>
@@ -28,7 +28,7 @@ const Home = () => {
</div>
</div>
<div className="home-hero__card">
<p className="home-hero__card-title">이번 달 집중 테마</p>
<p className="home-hero__card-eyebrow">이번 달 집중 테마</p>
<div className="home-hero__card-body">
<h2>느린 기록, 깊은 회고</h2>
<p>
@@ -37,13 +37,13 @@ const Home = () => {
</p>
</div>
<div className="home-hero__stats">
<div>
<div className="home-hero__stat">
<p className="stat-label">게시 글</p>
<p className="stat-value">{posts.length}편</p>
<p className="stat-value">{posts.length}<span className="stat-unit">편</span></p>
</div>
<div>
<div className="home-hero__stat">
<p className="stat-label">다음 업데이트</p>
<p className="stat-value">이번 주말</p>
<p className="stat-value stat-value--sm">이번 주말</p>
</div>
</div>
</div>
@@ -56,12 +56,23 @@ const Home = () => {
</div>
<div className="home-grid">
{highlights.map((item) => (
<Link key={item.id} to={item.path} className="home-card">
<div>
<Link
key={item.id}
to={item.path}
className="home-card"
style={{ '--card-accent': item.accent }}
>
<div
className="home-card__icon"
style={{ color: item.accent }}
>
{item.icon}
</div>
<div className="home-card__body">
<p className="home-card__title">{item.label}</p>
<p className="home-card__desc">{item.description}</p>
</div>
<span className="home-card__cta">열기</span>
<span className="home-card__arrow">→</span>
</Link>
))}
</div>
@@ -75,8 +86,11 @@ const Home = () => {
<div className="home-posts">
{posts.map((post) => (
<Link key={post.slug} to="/blog" className="home-post">
<p className="home-post__title">{post.title}</p>
<p className="home-post__excerpt">{post.excerpt}</p>
<div className="home-post__dot" />
<div className="home-post__content">
<p className="home-post__title">{post.title}</p>
<p className="home-post__excerpt">{post.excerpt}</p>
</div>
<span className="home-post__meta">{post.date || '작성일 미정'}</span>
</Link>
))}
@@ -110,31 +124,26 @@ const Home = () => {
<p className="home-profile__section-title">연혁</p>
<ul>
<li>
<span>2023.02 - 현재</span>
<span className="timeline-period">2023.02 - 현재</span>
<strong>Server Developer</strong>
<span>내비 TIS 교통 서버/현대오토에버</span>
<span>내비 TIS 교통 서버 / 현대오토에버</span>
</li>
<li>
<span>2020.01 - 2023.02</span>
<span className="timeline-period">2020.01 - 2023.02</span>
<strong>Embedded Device SW Developer</strong>
<span>캐시비 단말기 개발/롯데정보통신</span>
<span>캐시비 단말기 개발 / 롯데정보통신</span>
</li>
<li>
<span>2019.07 - 2019.12</span>
<span className="timeline-period">2019.07 - 2019.12</span>
<strong>SSAFY - 삼성 SW Academy</strong>
<span>SSAFY</span>
<span>SSAFY 1기 수료</span>
</li>
</ul>
</div>
<div className="home-profile__tags">
<span>C++</span>
<span>Git</span>
<span>AWS</span>
<span>Jira</span>
<span>MySQL</span>
<span>Docker</span>
<span>Kubernetes</span>
<span>Linux</span>
{['C++', 'Git', 'AWS', 'Jira', 'MySQL', 'Docker', 'Kubernetes', 'Linux'].map((tag) => (
<span key={tag}>{tag}</span>
))}
</div>
<div className="home-profile__actions">
<button className="button ghost">프로필 수정</button>