Skip to content

Commit c9b4146

Browse files
ShipFriend0516ShipFriend0516
authored
Merge pull request #60 from ShipFriend0516/refactor/main-page
[Refactor] 메인페이지 변경
2 parents 40459f7 + 78a6ffa commit c9b4146

3 files changed

Lines changed: 153 additions & 82 deletions

File tree

‎app/entities/portfolio/PortfolioPreview.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const PortfolioPreview = ({
3535

3636
return (
3737
<div
38-
className="bg-white dark:bg-neutral-800 rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition-shadow duration-300"
38+
className="group bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-2xl overflow-hidden shadow transition-all duration-300 border border-gray-200 dark:border-gray-700"
3939
onMouseEnter={() => setIsHovered(true)}
4040
onMouseLeave={() => setIsHovered(false)}
4141
>
@@ -50,7 +50,7 @@ const PortfolioPreview = ({
5050
src={project.image}
5151
alt={`${project.title} 프로젝트 이미지`}
5252
className={`w-full aspect-video object-cover transition-transform duration-500 ${
53-
showOverlay ? 'scale-105' : 'scale-100'
53+
showOverlay ? 'scale-110' : 'scale-100'
5454
}`}
5555
/>
5656

@@ -140,22 +140,22 @@ const PortfolioPreview = ({
140140
</div>
141141
</div>
142142

143-
<div className="p-4 md:p-6">
143+
<div className="p-6 md:p-8">
144144
<Link href={project.slug ? `/portfolio/${project.slug}` : '#'}>
145-
<h3 className="text-lg md:text-xl font-bold mb-2 hover:text-emerald-500 transition-colors line-clamp-2">
145+
<h3 className="text-xl md:text-2xl font-bold mb-3 text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-400 transition-colors line-clamp-2">
146146
{project.title}
147147
</h3>
148148
</Link>
149-
<p className="text-sm text-gray-600 dark:text-gray-300 mb-3 md:mb-4 line-clamp-3">
149+
<p className="text-sm md:text-base text-gray-600 dark:text-gray-300 mb-4 md:mb-5 line-clamp-3 leading-relaxed">
150150
{project.description}
151151
</p>
152152

153153
{!hideTags && project.tags && project.tags.length > 0 && (
154-
<div className="flex flex-wrap gap-1.5 md:gap-2 mt-3">
154+
<div className="flex flex-wrap gap-2 mt-4">
155155
{project.tags.map((tag, index) => (
156156
<span
157157
key={index}
158-
className="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-gray-700 dark:text-gray-300 whitespace-nowrap"
158+
className="text-xs px-3 py-1.5 bg-gray-200 dark:bg-gray-700 rounded-full text-gray-700 dark:text-gray-300 whitespace-nowrap font-medium"
159159
>
160160
{tag}
161161
</span>
@@ -164,15 +164,15 @@ const PortfolioPreview = ({
164164
)}
165165

166166
{/* 모바일 하단 액션 버튼들 */}
167-
<div className="flex md:hidden gap-2 mt-4 pt-3 border-t border-gray-200 dark:border-gray-700">
167+
<div className="flex md:hidden gap-2 mt-5 pt-4 border-t border-gray-200 dark:border-gray-700">
168168
{project.demoUrl && (
169169
<Link
170170
href={project.demoUrl}
171171
target="_blank"
172172
rel="noopener noreferrer"
173173
className="flex-1"
174174
>
175-
<button className="inline-flex items-center justify-center gap-1 w-full bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 text-neutral-700 dark:text-neutral-200 px-3 py-2 rounded-md transition-colors text-xs">
175+
<button className="inline-flex items-center justify-center gap-1.5 w-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-2.5 rounded-lg transition-colors text-xs font-medium">
176176
<FaGlobe size={12} />
177177
배포
178178
</button>
@@ -185,7 +185,7 @@ const PortfolioPreview = ({
185185
rel="noopener noreferrer"
186186
className="flex-1"
187187
>
188-
<button className="inline-flex items-center justify-center gap-1 w-full bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 text-neutral-700 dark:text-neutral-200 px-3 py-2 rounded-md transition-colors text-xs">
188+
<button className="inline-flex items-center justify-center gap-1.5 w-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-2.5 rounded-lg transition-colors text-xs font-medium">
189189
<FaGithub size={12} />
190190
코드
191191
</button>
@@ -197,7 +197,7 @@ const PortfolioPreview = ({
197197
rel="noopener noreferrer"
198198
className="flex-1"
199199
>
200-
<button className="w-full bg-emerald-100 dark:bg-emerald-800 hover:bg-emerald-200 dark:hover:bg-emerald-700 text-emerald-700 dark:text-emerald-200 px-3 py-2 rounded-md transition-colors text-xs">
200+
<button className="w-full bg-gray-800 dark:bg-gray-200 hover:bg-gray-700 dark:hover:bg-gray-300 text-gray-100 dark:text-gray-900 px-3 py-2.5 rounded-lg transition-colors text-xs font-medium">
201201
자세히
202202
</button>
203203
</Link>

‎app/page.tsx‎

Lines changed: 142 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { Post } from '@/app/types/Post';
1818
import ErrorBox from '@/app/entities/common/Error/ErrorBox';
1919
import { useRouter } from 'next/navigation';
2020
import useShortcut from '@/app/hooks/common/useShortcut';
21+
import DecryptedText from './entities/bits/DecryptedText';
2122

2223
export default function Home() {
2324
const { fingerprint } = useFingerprint();
@@ -58,95 +59,163 @@ export default function Home() {
5859
useShortcut(goToPostsPage, ['Ctrl', ';'], true);
5960

6061
return (
61-
<main className="w-full max-w-4xl mx-auto grid gap-16 p-4 md:p-8">
62-
<section className="grid gap-6">
63-
<div className="relative h-64 w-full overflow-hidden rounded-lg">
62+
<main className="w-full max-w-6xl mx-auto grid gap-16 p-4 md:p-8">
63+
{/* Hero Section */}
64+
<section className="grid gap-4">
65+
<div className="relative h-80 md:h-96 w-full overflow-hidden rounded-2xl shadow-2xl group">
6466
<Image
6567
src={profileBackground}
6668
priority={true}
6769
width={'1024'}
6870
height={'720'}
6971
alt="Hero image"
70-
className="object-cover bg-gray-100 w-full h-full"
72+
className="object-cover bg-gray-100 w-full h-full transition-transform duration-700 group-hover:scale-105"
7173
/>
72-
<div className="absolute inset-0 bg-black/10"></div>
73-
<div
74-
className={
75-
'absolute top-0 left-0 p-8 w-full h-full flex flex-col gap-2 text-white '
76-
}
77-
>
78-
<h1 className=" text-4xl font-bold ">Frontend Developer</h1>
79-
<p className={'text-xl '}>
80-
<span className="text-sm font-bold">Jeongwoo Seo</span>
81-
</p>
82-
<div className={' flex flex-col justify-end flex-grow'}>
83-
<div>React · NextJS · TypeScript</div>
74+
<div className="absolute inset-0 bg-gradient-to-br from-black/40 via-black/20 to-transparent"></div>
75+
<div className="absolute top-0 left-0 p-8 md:p-12 w-full h-full flex flex-col gap-3 text-white">
76+
<div className="space-y-2">
77+
<h1 className="text-5xl md:text-6xl font-bold tracking-tight">
78+
<DecryptedText
79+
text="Frontend Developer"
80+
speed={60}
81+
animateOn="view"
82+
revealDirection="start"
83+
sequential
84+
encryptedClassName="text-neutral-200/90"
85+
/>
86+
</h1>
87+
<p className="text-xl md:text-2xl font-light opacity-90">
88+
Jeongwoo Seo
89+
</p>
90+
</div>
91+
<div className="flex flex-col justify-end flex-grow">
92+
<div className="flex flex-wrap gap-3 text-sm md:text-base font-medium">
93+
<span className="px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full border border-white/30">
94+
React
95+
</span>
96+
<span className="px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full border border-white/30">
97+
NextJS
98+
</span>
99+
<span className="px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full border border-white/30">
100+
TypeScript
101+
</span>
102+
</div>
84103
</div>
85104
</div>
86105
</div>
87-
<p className="text-lg text-default max-w-2xl">
88-
안녕하세요, 서정우입니다. 사용자 경험과 깔끔한 코드 작성에 중점을 두고
89-
있으며, 멈추지 않는 기술의 변화를 즐깁니다.
106+
107+
<p className="text-lg md:text-xl text-default max-w-3xl mx-auto text-center mt-4">
108+
안녕하세요, 서정우입니다.
109+
</p>
110+
<p className="text-lg md:text-xl text-default max-w-3xl mx-auto text-center mb-4">
111+
깔끔한 코드 작성에 중점을 두고, 확장성에 대해 고민하며 멈추지 않는
112+
기술의 변화를 즐깁니다.
90113
</p>
91114
</section>
92115

93-
<section className="grid md:grid-cols-2 gap-8 items-center">
94-
<div className="relative h-64 overflow-hidden rounded-lg">
95-
<Image
96-
width={500}
97-
height={400}
98-
priority={true}
99-
src={'/images/profile/profile.jpg'}
100-
alt="About image"
101-
className="hover:rotate-180 transition duration-[60000ms] object-cover w-full h-full bg-gray-500"
102-
/>
103-
</div>
104-
<div className="grid gap-4">
105-
<h2 className="text-2xl font-semibold">About Me</h2>
106-
<p className="text-default">
107-
프론트엔드 개발자로서 React, Next.js, TypeScript를 주로 사용합니다.
108-
항상 사용자 입장에서 생각하고, 성능 최적화에 관심이 많으며, 지속적인
109-
학습과 성장을 추구합니다.
110-
</p>
111-
<div className="flex gap-4">
112-
<a href={githubLink} target={'_blank'}>
113-
<FaGithub className="w-5 h-5 text-default hover:scale-125 transition cursor-pointer" />
114-
</a>
115-
<a href={linkedinLink} target={'_blank'}>
116-
<FaLinkedin className="w-5 h-5 text-default hover:scale-125 transition cursor-pointer" />
117-
</a>
116+
<section className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 p-8 md:p-12">
117+
<div className="grid md:grid-cols-[1fr,2fr] gap-8 md:gap-12 items-center">
118+
<div className="relative mx-auto md:mx-0">
119+
<div className="absolute -inset-1 bg-gradient-to-r from-gray-300 to-gray-400 dark:from-gray-600 dark:to-gray-700 rounded-full blur opacity-20 animate-pulse"></div>
120+
<div className="relative h-56 w-56 overflow-hidden rounded-full ring-4 ring-white dark:ring-gray-700 shadow-xl">
121+
<Image
122+
width={500}
123+
height={400}
124+
priority={true}
125+
src={'/images/profile/profile.jpg'}
126+
alt="About image"
127+
className="hover:scale-110 transition duration-700 object-cover w-full h-full bg-gray-500"
128+
/>
129+
</div>
130+
</div>
131+
<div className="grid gap-6">
132+
<div className="space-y-2">
133+
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
134+
About Me
135+
</h2>
136+
<div className="h-1 w-20 bg-gray-900 dark:bg-gray-100 rounded-full"></div>
137+
</div>
138+
<p className="text-default text-lg leading-relaxed">
139+
프론트엔드 개발자로서 React, Next.js, TypeScript를 주로
140+
사용합니다. 항상 사용자 입장에서 생각하고, 성능 최적화에 관심이
141+
많으며, 지속적인 학습과 성장을 추구합니다.
142+
</p>
143+
<div className="flex gap-4 pt-2">
144+
<a
145+
href={githubLink}
146+
target={'_blank'}
147+
className="p-3 rounded-full bg-white dark:bg-gray-800 shadow-md hover:shadow-xl hover:scale-110 transition-all duration-300"
148+
>
149+
<FaGithub className="w-6 h-6 text-gray-700 dark:text-gray-300" />
150+
</a>
151+
<a
152+
href={linkedinLink}
153+
target={'_blank'}
154+
className="p-3 rounded-full bg-white dark:bg-gray-800 shadow-md hover:shadow-xl hover:scale-110 transition-all duration-300"
155+
>
156+
<FaLinkedin className="w-6 h-6 text-gray-700 dark:text-gray-300" />
157+
</a>
158+
</div>
118159
</div>
119160
</div>
120161
</section>
121162

122-
<section className="grid gap-6">
123-
<h2 className="text-2xl font-semibold">Featured Projects</h2>
124-
<div className={'grid grid-cols-1 md:grid-cols-2 gap-6'}>
163+
<section className="grid gap-8">
164+
<div className="space-y-2">
165+
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
166+
Featured Projects
167+
</h2>
168+
<div className="h-1 w-24 bg-gray-900 dark:bg-gray-100 rounded-full"></div>
169+
</div>
170+
<div className={'grid grid-cols-1 md:grid-cols-2 gap-8'}>
125171
{projects.map((project) => {
126172
return <PortfolioPreview key={project.title} project={project} />;
127173
})}
128174
</div>
129175
</section>
130176

131-
<section className="grid gap-6">
132-
<h2 className="text-2xl font-semibold">Latest Articles</h2>
133-
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
177+
<section className="grid gap-8">
178+
<div className="space-y-2">
179+
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
180+
Latest Articles
181+
</h2>
182+
<div className="h-1 w-24 bg-gray-900 dark:bg-gray-100 rounded-full"></div>
183+
</div>
184+
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
134185
{loading ? (
135186
<>
136-
<div className={'flex flex-col gap-2'}>
137-
<Skeleton className={'w-full h-48'} />
138-
<Skeleton className={'w-full h-6'} />
139-
<Skeleton className={'w-3/4 h-4'} />
187+
<div
188+
className={
189+
'flex flex-col gap-3 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-2xl overflow-hidden shadow-2xl border border-gray-200 dark:border-gray-700'
190+
}
191+
>
192+
<Skeleton className={'w-full h-52 rounded-none'} />
193+
<div className="p-6 space-y-3">
194+
<Skeleton className={'w-full h-7'} />
195+
<Skeleton className={'w-3/4 h-5'} />
196+
</div>
140197
</div>
141-
<div className={'flex flex-col gap-2'}>
142-
<Skeleton className={'w-full h-48'} />
143-
<Skeleton className={'w-full h-6'} />
144-
<Skeleton className={'w-3/4 h-4'} />
198+
<div
199+
className={
200+
'flex flex-col gap-3 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-2xl overflow-hidden shadow-2xl border border-gray-200 dark:border-gray-700'
201+
}
202+
>
203+
<Skeleton className={'w-full h-52 rounded-none'} />
204+
<div className="p-6 space-y-3">
205+
<Skeleton className={'w-full h-7'} />
206+
<Skeleton className={'w-3/4 h-5'} />
207+
</div>
145208
</div>
146-
<div className={'flex flex-col gap-2'}>
147-
<Skeleton className={'w-full h-48'} />
148-
<Skeleton className={'w-full h-6'} />
149-
<Skeleton className={'w-3/4 h-4'} />
209+
<div
210+
className={
211+
'flex flex-col gap-3 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-2xl overflow-hidden shadow-2xl border border-gray-200 dark:border-gray-700'
212+
}
213+
>
214+
<Skeleton className={'w-full h-52 rounded-none'} />
215+
<div className="p-6 space-y-3">
216+
<Skeleton className={'w-full h-7'} />
217+
<Skeleton className={'w-3/4 h-5'} />
218+
</div>
150219
</div>
151220
</>
152221
) : (
@@ -155,9 +224,9 @@ export default function Home() {
155224
<Link
156225
href={`/posts/${post.slug}`}
157226
key={post._id}
158-
className="group cursor-pointer"
227+
className="group cursor-pointer bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-2xl overflow-hidden shadow transition-all duration-300 border border-gray-200 dark:border-gray-700 hover:scale-[1.02]"
159228
>
160-
<div className="relative h-48 mb-4 overflow-hidden rounded-lg hover:shadow-lg">
229+
<div className="relative h-52 overflow-hidden">
161230
<Image
162231
width={500}
163232
height={400}
@@ -166,13 +235,17 @@ export default function Home() {
166235
'/images/placeholder/thumbnail_example2.webp'
167236
}
168237
alt={`Article ${post.title}`}
169-
className="object-cover bg-[position:50%_20%] bg-cover bg-no-repeat w-full h-full transition-transform group-hover:scale-105 bg-gray-500 "
238+
className="object-cover bg-[position:50%_20%] bg-cover bg-no-repeat w-full h-full transition-transform duration-500 group-hover:scale-110 bg-gray-500"
170239
/>
171240
</div>
172-
<h3 className="font-medium mb-2">{post.title}</h3>
173-
<p className="text-sm text-default">
174-
{post.subTitle && post.subTitle.slice(0, 80)}
175-
</p>
241+
<div className="p-6">
242+
<h3 className="text-lg font-bold mb-2 text-gray-900 dark:text-gray-100 line-clamp-2 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
243+
{post.title}
244+
</h3>
245+
<p className="text-sm text-gray-600 dark:text-gray-300 line-clamp-3 leading-relaxed">
246+
{post.subTitle && post.subTitle.slice(0, 80)}
247+
</p>
248+
</div>
176249
</Link>
177250
))
178251
)}

‎tailwind.config.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,10 @@ const config: Config = {
4040
slideUp: {
4141
'0%': {
4242
transform: 'translateY(50%)',
43-
width: '20%',
4443
opacity: '0',
4544
},
4645
'100%': {
4746
transform: 'translateY(0)',
48-
width: '100%',
4947
opacity: '1',
5048
},
5149
},

0 commit comments

Comments
 (0)