346 lines
16 KiB
TypeScript
346 lines
16 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useState } from 'react';
|
|
|
|
export default function PortfolioSample() {
|
|
const [hoveredProject, setHoveredProject] = useState<number | null>(null);
|
|
|
|
const skills = [
|
|
{ name: 'Figma', level: 98 },
|
|
{ name: 'React', level: 90 },
|
|
{ name: 'TypeScript', level: 85 },
|
|
{ name: 'After Effects', level: 88 },
|
|
{ name: 'Three.js', level: 75 },
|
|
{ name: 'Framer', level: 92 },
|
|
];
|
|
|
|
const projects = [
|
|
{ title: 'NEON CITY UI', desc: '사이버펑크 게임 인터페이스', gradient: 'linear-gradient(135deg, #00ff88, #00d4ff)', tag: 'UI/UX' },
|
|
{ title: 'FLOW BRAND', desc: '핀테크 스타트업 브랜딩', gradient: 'linear-gradient(135deg, #a855f7, #ec4899)', tag: 'Branding' },
|
|
{ title: 'ORBITAL APP', desc: '위성 추적 대시보드', gradient: 'linear-gradient(135deg, #3b82f6, #06b6d4)', tag: 'Web App' },
|
|
{ title: 'TERRA SHOP', desc: '친환경 D2C 쇼핑몰', gradient: 'linear-gradient(135deg, #22c55e, #84cc16)', tag: 'E-commerce' },
|
|
{ title: 'PULSE MOTION', desc: '모션 그래픽 패키지', gradient: 'linear-gradient(135deg, #f59e0b, #ef4444)', tag: 'Motion' },
|
|
{ title: 'AXIS SYSTEM', desc: '물류 관리 SaaS', gradient: 'linear-gradient(135deg, #64748b, #475569)', tag: 'Dashboard' },
|
|
];
|
|
|
|
const timeline = [
|
|
{ year: '2023', event: 'Google UX Design Certificate 취득', type: 'award' },
|
|
{ year: '2022', event: 'Awwwards SOTD 2회 수상', type: 'award' },
|
|
{ year: '2021', event: 'LINE Corp. UI 디자이너 입사', type: 'career' },
|
|
{ year: '2020', event: 'Hongik University 시각디자인과 졸업', type: 'edu' },
|
|
{ year: '2019', event: 'Adobe Design Award Korea 은상', type: 'award' },
|
|
];
|
|
|
|
return (
|
|
<div style={{ background: '#000000', minHeight: '100vh', color: 'white' }}>
|
|
<style>{`
|
|
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');
|
|
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
|
|
@keyframes scanline { 0% { top: -10%; } 100% { top: 110%; } }
|
|
@keyframes glow { 0%, 100% { text-shadow: 0 0 20px rgba(0,255,136,0.5); } 50% { text-shadow: 0 0 40px rgba(0,255,136,0.9), 0 0 80px rgba(0,255,136,0.3); } }
|
|
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
|
@keyframes slideBar { from { width: 0; } to { width: 100%; } }
|
|
.proj-card:hover { border-color: rgba(0,255,136,0.4) !important; }
|
|
.proj-card { transition: border-color 0.3s; }
|
|
`}</style>
|
|
|
|
{/* Back Banner */}
|
|
<div style={{
|
|
background: 'linear-gradient(135deg, #1e1b4b, #312e81)',
|
|
padding: '10px 24px', display: 'flex', alignItems: 'center', gap: 12,
|
|
}}>
|
|
<Link href="/services/website" style={{
|
|
color: '#a5b4fc', fontSize: 13, textDecoration: 'none',
|
|
fontFamily: 'Space Grotesk, sans-serif',
|
|
}}>
|
|
← 홈페이지 제작 서비스로 돌아가기
|
|
</Link>
|
|
<span style={{ color: '#4c1d95', fontSize: 13 }}>|</span>
|
|
<span style={{ color: '#00ff88', fontSize: 12, fontFamily: 'Space Mono, monospace', fontWeight: 700 }}>
|
|
SAMPLE · 개인 포트폴리오
|
|
</span>
|
|
</div>
|
|
|
|
{/* Navbar */}
|
|
<nav style={{
|
|
position: 'sticky', top: 0, zIndex: 100,
|
|
background: 'rgba(0,0,0,0.9)', backdropFilter: 'blur(20px)',
|
|
borderBottom: '1px solid rgba(0,255,136,0.15)',
|
|
padding: '0 48px', height: 64,
|
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
|
}}>
|
|
<div style={{
|
|
fontFamily: 'Space Mono, monospace', fontSize: 15, fontWeight: 700,
|
|
color: '#00ff88', letterSpacing: '-0.02em',
|
|
animation: 'glow 3s ease-in-out infinite',
|
|
}}>
|
|
KJ<span style={{ color: 'rgba(0,255,136,0.4)' }}>_</span>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 32 }}>
|
|
{['About', 'Work', 'Skills', 'Contact'].map((item) => (
|
|
<span key={item} style={{
|
|
fontFamily: 'Space Grotesk, sans-serif', fontSize: 13, fontWeight: 600,
|
|
color: '#4b5563', cursor: 'pointer', letterSpacing: '0.05em',
|
|
textTransform: 'uppercase',
|
|
}}>{item}</span>
|
|
))}
|
|
</div>
|
|
<button style={{
|
|
background: 'transparent', border: '1px solid #00ff88',
|
|
color: '#00ff88', padding: '8px 20px', borderRadius: 4,
|
|
fontSize: 12, fontWeight: 700, cursor: 'pointer',
|
|
fontFamily: 'Space Mono, monospace', letterSpacing: '0.08em',
|
|
}}>
|
|
HIRE ME
|
|
</button>
|
|
</nav>
|
|
|
|
{/* Hero */}
|
|
<section style={{ padding: '100px 48px 80px', position: 'relative', overflow: 'hidden' }}>
|
|
{/* Scanline effect */}
|
|
<div style={{
|
|
position: 'absolute', left: 0, right: 0, height: '2px',
|
|
background: 'linear-gradient(90deg, transparent, rgba(0,255,136,0.4), transparent)',
|
|
animation: 'scanline 8s linear infinite',
|
|
pointerEvents: 'none',
|
|
}} />
|
|
{/* Grid */}
|
|
<div style={{
|
|
position: 'absolute', inset: 0,
|
|
backgroundImage: 'linear-gradient(rgba(0,255,136,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,136,0.04) 1px, transparent 1px)',
|
|
backgroundSize: '40px 40px',
|
|
}} />
|
|
|
|
<div style={{ maxWidth: 900, position: 'relative', animation: 'fadeUp 0.8s ease forwards' }}>
|
|
<div style={{
|
|
fontFamily: 'Space Mono, monospace', fontSize: 12,
|
|
color: 'rgba(0,255,136,0.6)', letterSpacing: '0.2em',
|
|
marginBottom: 20, textTransform: 'uppercase',
|
|
}}>
|
|
{'> Hello, World. I am'}
|
|
</div>
|
|
<h1 style={{
|
|
fontFamily: 'Space Grotesk, sans-serif',
|
|
fontSize: 'clamp(52px, 7vw, 96px)',
|
|
fontWeight: 700, lineHeight: 1.0, marginBottom: 16,
|
|
letterSpacing: '-0.03em',
|
|
}}>
|
|
Kim<br />
|
|
<span style={{ color: '#00ff88' }}>Jisu</span>
|
|
<span style={{
|
|
display: 'inline-block', width: 6, height: 'clamp(52px, 7vw, 96px)',
|
|
background: '#00ff88', marginLeft: 8, verticalAlign: 'middle',
|
|
animation: 'blink 1.2s step-end infinite',
|
|
}} />
|
|
</h1>
|
|
<div style={{
|
|
fontFamily: 'Space Grotesk, sans-serif', fontSize: 20,
|
|
color: '#4b5563', fontWeight: 500, marginBottom: 24,
|
|
}}>
|
|
Product Designer & Creative Developer
|
|
</div>
|
|
<p style={{
|
|
fontFamily: 'Space Grotesk, sans-serif', fontSize: 16,
|
|
color: '#6b7280', lineHeight: 1.8, maxWidth: 520, marginBottom: 36,
|
|
}}>
|
|
픽셀 하나하나에 의미를 담는 디자이너. 아름다움과 기능의 교차점에서 디지털 경험을 설계합니다.
|
|
</p>
|
|
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
<button style={{
|
|
background: '#00ff88', color: '#000000', border: 'none',
|
|
padding: '14px 32px', fontSize: 14, fontWeight: 700, cursor: 'pointer',
|
|
fontFamily: 'Space Mono, monospace', letterSpacing: '0.05em',
|
|
clipPath: 'polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px))',
|
|
}}>
|
|
VIEW WORK →
|
|
</button>
|
|
<button style={{
|
|
background: 'transparent', color: '#9ca3af',
|
|
border: '1px solid #1f2937',
|
|
padding: '14px 32px', fontSize: 14, fontWeight: 600, cursor: 'pointer',
|
|
fontFamily: 'Space Grotesk, sans-serif', borderRadius: 4,
|
|
}}>
|
|
Download CV
|
|
</button>
|
|
<div style={{ display: 'flex', gap: 8, marginLeft: 8 }}>
|
|
{['6+', '30+', '2x'].map((s, i) => (
|
|
<div key={i} style={{
|
|
padding: '8px 14px', border: '1px solid #1f2937', borderRadius: 4,
|
|
fontFamily: 'Space Mono, monospace', fontSize: 12,
|
|
color: '#4b5563',
|
|
}}>
|
|
<span style={{ color: '#00ff88', fontWeight: 700 }}>{s}</span>
|
|
<span style={{ marginLeft: 4 }}>{['YEARS', 'PROJECTS', 'AWWWARDS'][i]}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Projects */}
|
|
<section style={{ padding: '80px 48px', background: '#050505' }}>
|
|
<div style={{ maxWidth: 1100, margin: '0 auto' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 48 }}>
|
|
<h2 style={{
|
|
fontFamily: 'Space Grotesk, sans-serif', fontSize: 36, fontWeight: 700,
|
|
letterSpacing: '-0.02em',
|
|
}}>
|
|
Selected Work<span style={{ color: '#00ff88' }}>.</span>
|
|
</h2>
|
|
<span style={{ color: '#374151', fontSize: 12, fontFamily: 'Space Mono, monospace' }}>
|
|
2019 — 2024
|
|
</span>
|
|
</div>
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 16 }}>
|
|
{projects.map((proj, i) => (
|
|
<div
|
|
key={i}
|
|
className="proj-card"
|
|
onMouseEnter={() => setHoveredProject(i)}
|
|
onMouseLeave={() => setHoveredProject(null)}
|
|
style={{
|
|
border: '1px solid #111827', borderRadius: 12, overflow: 'hidden',
|
|
cursor: 'pointer', background: '#0a0a0a',
|
|
}}
|
|
>
|
|
<div style={{
|
|
height: 180, background: proj.gradient, position: 'relative',
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
transition: 'transform 0.3s',
|
|
transform: hoveredProject === i ? 'scale(1.02)' : 'scale(1)',
|
|
}}>
|
|
<div style={{
|
|
fontFamily: 'Space Grotesk, sans-serif', fontSize: 24, fontWeight: 700,
|
|
color: 'rgba(0,0,0,0.4)', letterSpacing: '-0.02em',
|
|
}}>
|
|
{proj.title}
|
|
</div>
|
|
<div style={{
|
|
position: 'absolute', top: 12, right: 12,
|
|
background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(8px)',
|
|
border: '1px solid rgba(255,255,255,0.15)',
|
|
borderRadius: 4, padding: '3px 10px',
|
|
fontSize: 10, fontWeight: 700, color: 'white',
|
|
fontFamily: 'Space Mono, monospace', letterSpacing: '0.1em',
|
|
}}>{proj.tag}</div>
|
|
</div>
|
|
<div style={{ padding: '16px 18px' }}>
|
|
<div style={{ fontSize: 15, fontWeight: 700, color: 'white', fontFamily: 'Space Grotesk, sans-serif', marginBottom: 4 }}>
|
|
{proj.title}
|
|
</div>
|
|
<div style={{ fontSize: 13, color: '#4b5563', fontFamily: 'Space Grotesk, sans-serif' }}>
|
|
{proj.desc}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Skills */}
|
|
<section style={{ padding: '80px 48px', background: '#000000' }}>
|
|
<div style={{ maxWidth: 900, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
|
|
<div>
|
|
<h2 style={{
|
|
fontFamily: 'Space Grotesk, sans-serif', fontSize: 36, fontWeight: 700,
|
|
marginBottom: 36, letterSpacing: '-0.02em',
|
|
}}>
|
|
Skills<span style={{ color: '#00ff88' }}>.</span>
|
|
</h2>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
|
|
{skills.map((s) => (
|
|
<div key={s.name}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
|
|
<span style={{ fontFamily: 'Space Mono, monospace', fontSize: 12, color: '#9ca3af', letterSpacing: '0.05em' }}>
|
|
{s.name}
|
|
</span>
|
|
<span style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#00ff88' }}>
|
|
{s.level}%
|
|
</span>
|
|
</div>
|
|
<div style={{ height: 3, background: '#111827', borderRadius: 2, overflow: 'hidden' }}>
|
|
<div style={{
|
|
height: '100%', borderRadius: 2,
|
|
background: 'linear-gradient(90deg, #00ff88, #00d4ff)',
|
|
width: `${s.level}%`,
|
|
animation: 'slideBar 1.5s ease forwards',
|
|
}} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2 style={{
|
|
fontFamily: 'Space Grotesk, sans-serif', fontSize: 36, fontWeight: 700,
|
|
marginBottom: 36, letterSpacing: '-0.02em',
|
|
}}>
|
|
Timeline<span style={{ color: '#00ff88' }}>.</span>
|
|
</h2>
|
|
<div style={{ position: 'relative', paddingLeft: 20 }}>
|
|
<div style={{
|
|
position: 'absolute', left: 4, top: 8, bottom: 8,
|
|
width: 1, background: '#1f2937',
|
|
}} />
|
|
{timeline.map((t, i) => (
|
|
<div key={i} style={{ position: 'relative', paddingBottom: 24 }}>
|
|
<div style={{
|
|
position: 'absolute', left: -20, top: 4,
|
|
width: 8, height: 8, borderRadius: '50%',
|
|
background: t.type === 'award' ? '#00ff88' : t.type === 'career' ? '#3b82f6' : '#a855f7',
|
|
boxShadow: `0 0 8px ${t.type === 'award' ? 'rgba(0,255,136,0.6)' : t.type === 'career' ? 'rgba(59,130,246,0.6)' : 'rgba(168,85,247,0.6)'}`,
|
|
}} />
|
|
<div style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#374151', marginBottom: 2 }}>
|
|
{t.year}
|
|
</div>
|
|
<div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 14, color: '#d1d5db' }}>
|
|
{t.event}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Contact */}
|
|
<section style={{
|
|
padding: '80px 48px', textAlign: 'center',
|
|
background: 'linear-gradient(180deg, #000000, #001a00)',
|
|
borderTop: '1px solid rgba(0,255,136,0.1)',
|
|
}}>
|
|
<div style={{
|
|
fontFamily: 'Space Mono, monospace', fontSize: 12,
|
|
color: 'rgba(0,255,136,0.5)', letterSpacing: '0.2em', marginBottom: 20,
|
|
}}>
|
|
{'> LET\'S COLLABORATE'}
|
|
</div>
|
|
<h2 style={{
|
|
fontFamily: 'Space Grotesk, sans-serif', fontSize: 'clamp(36px, 5vw, 60px)',
|
|
fontWeight: 700, letterSpacing: '-0.03em', marginBottom: 16,
|
|
animation: 'glow 3s ease-in-out infinite',
|
|
}}>
|
|
Have a project<span style={{ color: '#00ff88' }}>?</span>
|
|
</h2>
|
|
<p style={{
|
|
fontFamily: 'Space Grotesk, sans-serif', fontSize: 16,
|
|
color: '#4b5563', marginBottom: 36,
|
|
}}>
|
|
jisu.kim@design.studio · @jisu_creates
|
|
</p>
|
|
<button style={{
|
|
background: '#00ff88', color: '#000000', border: 'none',
|
|
padding: '16px 44px', fontSize: 14, fontWeight: 700,
|
|
cursor: 'pointer', fontFamily: 'Space Mono, monospace', letterSpacing: '0.08em',
|
|
clipPath: 'polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px))',
|
|
}}>
|
|
START A PROJECT →
|
|
</button>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|