154 lines
7.3 KiB
JavaScript
154 lines
7.3 KiB
JavaScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { navLinks } from '../../routes.jsx';
|
|
import { getBlogPosts } from '../../data/blog';
|
|
import myPhoto from '../../assets/myPhoto.jpg';
|
|
import './Home.css';
|
|
|
|
const Home = () => {
|
|
const posts = getBlogPosts().slice(0, 3);
|
|
const highlights = navLinks.filter((link) => link.id !== 'home');
|
|
|
|
return (
|
|
<div className="home">
|
|
<section className="home-hero">
|
|
<div className="home-hero__text">
|
|
<p className="home-hero__kicker">Personal Archive</p>
|
|
<h1>기록을 모으고, 이야기를 이어붙이는 작은 집.</h1>
|
|
<p className="home-hero__lead">
|
|
개발 실험, 여행 스냅, 그리고 생각을 모아두는 공간입니다. 블로그 글은
|
|
마크다운으로 작성해 계속 추가할 수 있어요.
|
|
</p>
|
|
<div className="home-hero__actions">
|
|
<Link className="button primary" to="/blog">
|
|
블로그 둘러보기
|
|
</Link>
|
|
<Link className="button ghost" to="/travel">
|
|
여행 갤러리 열기
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="home-hero__card">
|
|
<p className="home-hero__card-title">이번 달 집중 테마</p>
|
|
<div className="home-hero__card-body">
|
|
<h2>느린 기록, 깊은 회고</h2>
|
|
<p>
|
|
빠르게 업데이트하는 대신, 한 번쯤 되돌아보며 기록하는 걸 목표로
|
|
합니다. 글은 매주 한 편씩 추가될 예정이에요.
|
|
</p>
|
|
</div>
|
|
<div className="home-hero__stats">
|
|
<div>
|
|
<p className="stat-label">게시 글</p>
|
|
<p className="stat-value">{posts.length}편</p>
|
|
</div>
|
|
<div>
|
|
<p className="stat-label">다음 업데이트</p>
|
|
<p className="stat-value">이번 주말</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="home-section">
|
|
<div className="home-section__header">
|
|
<h2>공간 둘러보기</h2>
|
|
<p>확장 가능한 구조로 구성해 이후에도 쉽게 페이지를 추가할 수 있습니다.</p>
|
|
</div>
|
|
<div className="home-grid">
|
|
{highlights.map((item) => (
|
|
<Link key={item.id} to={item.path} className="home-card">
|
|
<div>
|
|
<p className="home-card__title">{item.label}</p>
|
|
<p className="home-card__desc">{item.description}</p>
|
|
</div>
|
|
<span className="home-card__cta">열기</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="home-section">
|
|
<div className="home-section__header">
|
|
<h2>최근 블로그</h2>
|
|
<p>마크다운 파일을 추가하면 자동으로 목록에 반영됩니다.</p>
|
|
</div>
|
|
<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>
|
|
<span className="home-post__meta">{post.date || '작성일 미정'}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="home-section">
|
|
<div className="home-section__header">
|
|
<h2>Profile</h2>
|
|
<p>페이지 주인 소개 영역입니다.</p>
|
|
</div>
|
|
<div className="home-profile">
|
|
<div className="home-profile__card">
|
|
<div className="home-profile__identity">
|
|
<img
|
|
className="home-profile__avatar"
|
|
src={myPhoto}
|
|
alt="Profile"
|
|
/>
|
|
<div>
|
|
<p className="home-profile__role">Server Developer</p>
|
|
<p className="home-profile__name">박 재 오</p>
|
|
</div>
|
|
</div>
|
|
<p className="home-profile__bio">
|
|
주변 동료와 함께 소통하며 성장하는걸 좋아합니다. <br />
|
|
성능 최적화, 인프라 자동화를 중요하게 생각합니다. <br />
|
|
여행과 사진, 새로운 기술 탐구를 좋아합니다.
|
|
</p>
|
|
<div className="home-profile__timeline">
|
|
<p className="home-profile__section-title">연혁</p>
|
|
<ul>
|
|
<li>
|
|
<span>2023.02 - 현재</span>
|
|
<strong>Server Developer</strong>
|
|
<span>내비 TIS 교통 서버/현대오토에버</span>
|
|
</li>
|
|
<li>
|
|
<span>2020.01 - 2023.02</span>
|
|
<strong>Embedded Device SW Developer</strong>
|
|
<span>캐시비 단말기 개발/롯데정보통신</span>
|
|
</li>
|
|
<li>
|
|
<span>2019.07 - 2019.12</span>
|
|
<strong>SSAFY - 삼성 SW Academy</strong>
|
|
<span>SSAFY</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>
|
|
</div>
|
|
<div className="home-profile__actions">
|
|
<button className="button ghost">프로필 수정</button>
|
|
<a className="button primary" href="mailto:bgg8988@gmail.com">
|
|
연락하기
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Home;
|