블로그 리스트의 타이틀 색상 변화
메인 페이지에 profile card 추가 - 내 정보 업로드
This commit is contained in:
@@ -39,6 +39,8 @@ const extractExcerpt = (body) => {
|
||||
return '';
|
||||
};
|
||||
|
||||
const allowedTags = new Set(['일상', '개발', '공부', '아이디어', '기타']);
|
||||
|
||||
const normalizeTags = (value) => {
|
||||
if (!value) return [];
|
||||
const mapped = value
|
||||
@@ -54,7 +56,8 @@ const normalizeTags = (value) => {
|
||||
return tag;
|
||||
});
|
||||
|
||||
return Array.from(new Set(mapped));
|
||||
const normalized = mapped.map((tag) => (allowedTags.has(tag) ? tag : '기타'));
|
||||
return Array.from(new Set(normalized));
|
||||
};
|
||||
|
||||
const normalizeTitle = (slug) =>
|
||||
@@ -70,7 +73,7 @@ const inferTagFromPath = (path) => {
|
||||
if (folder === 'dev') return '개발';
|
||||
if (folder === 'study') return '공부';
|
||||
if (folder === 'ideas') return '아이디어';
|
||||
return '';
|
||||
return '기타';
|
||||
};
|
||||
|
||||
const inferDateFromSlug = (slug) => {
|
||||
|
||||
@@ -132,6 +132,7 @@
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #f8f3ee;
|
||||
}
|
||||
|
||||
.blog-list__excerpt {
|
||||
|
||||
@@ -196,6 +196,113 @@
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
|
||||
.home-profile {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.home-profile__card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 22px;
|
||||
padding: 22px;
|
||||
background: var(--surface);
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.home-profile__identity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.home-profile__avatar {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 16px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.home-profile__role {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.home-profile__name {
|
||||
margin: 6px 0 0;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.home-profile__bio {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.home-profile__timeline {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.home-profile__section-title {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.22em;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.home-profile__timeline ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.home-profile__timeline li {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.home-profile__timeline span {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.home-profile__timeline strong {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.home-profile__tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.home-profile__tags span {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.home-profile__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.home-hero {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@@ -2,6 +2,7 @@ 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 = () => {
|
||||
@@ -82,6 +83,69 @@ const Home = () => {
|
||||
))}
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user