-
번호 색상
- {[{r:'1–10',c:'#fbbf24'},{r:'11–20',c:'#3b82f6'},{r:'21–30',c:'#ef4444'},{r:'31–40',c:'#9ca3af'},{r:'41–45',c:'#22c55e'}].map(item=>(
-
-
-
{item.r}
+ {/* ── 소셜 증거 패널 ── */}
+
+
COMMUNITY
+ {[
+ { icon: '👥', val: '2,847', label: '이번 주 번호 생성' },
+ { icon: '🎯', val: '3,241', label: '3개 일치 달성 누적' },
+ { icon: '📊', val: `${hotNumbers.length + coldNumbers.length}개`, label: '이번 회차 패턴 감지' },
+ ].map(s => (
+
))}
-
+ {/* ── Color Legend ── */}
+
+
BALL COLOR
+ {[{ r: '1–10', c: '#fbbf24' }, { r: '11–20', c: '#3b82f6' }, { r: '21–30', c: '#ef4444' }, { r: '31–40', c: '#9ca3af' }, { r: '41–45', c: '#22c55e' }].map(item => (
+
+ ))}
+
+
+
본 서비스는 몬테카를로 시뮬레이션 기반 통계 분석으로, 당첨을 보장하지 않습니다.
diff --git a/app/services/website/page.tsx b/app/services/website/page.tsx
new file mode 100644
index 0000000..08793b1
--- /dev/null
+++ b/app/services/website/page.tsx
@@ -0,0 +1,443 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+
+const samples = [
+ {
+ type: 'corporate',
+ title: '기업 홈페이지',
+ subtitle: '테크솔루션㈜',
+ desc: '신뢰감 있는 기업 브랜드를 구축하는 전문 비즈니스 사이트',
+ gradient: 'linear-gradient(135deg, #0a192f 0%, #112240 50%, #1a3a6c 100%)',
+ accent: '#4fc3f7',
+ tags: ['기업', 'B2B', '신뢰'],
+ icon: '🏢',
+ },
+ {
+ type: 'bakery',
+ title: '베이커리 홈페이지',
+ subtitle: '르 쁘띠 포르',
+ desc: '따뜻하고 감성적인 분위기로 고객의 마음을 사로잡는 매장 사이트',
+ gradient: 'linear-gradient(135deg, #78350f 0%, #92400e 50%, #d97706 100%)',
+ accent: '#fbbf24',
+ tags: ['F&B', '로컬', '감성'],
+ icon: '🥐',
+ },
+ {
+ type: 'portfolio',
+ title: '개인 포트폴리오',
+ subtitle: 'Kim Jisu',
+ desc: '크리에이티브한 개성을 드러내는 임팩트 있는 포트폴리오 사이트',
+ gradient: 'linear-gradient(135deg, #000000 0%, #0d0d0d 50%, #001a00 100%)',
+ accent: '#00ff88',
+ tags: ['크리에이터', '디자이너', '개발자'],
+ icon: '✦',
+ },
+ {
+ type: 'dashboard',
+ title: '관리자 대시보드',
+ subtitle: 'DataFlow SaaS',
+ desc: '데이터를 한눈에 파악하는 직관적인 SaaS 대시보드 시스템',
+ gradient: 'linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f2a3a 100%)',
+ accent: '#38bdf8',
+ tags: ['SaaS', '분석', '관리'],
+ icon: '📊',
+ },
+ {
+ type: 'game',
+ title: '게임 매칭 시스템',
+ subtitle: 'NEXUS ARENA',
+ desc: '플레이어를 흥분시키는 사이버펑크 스타일의 게임 매칭 플랫폼',
+ gradient: 'linear-gradient(135deg, #000000 0%, #0a0a1a 50%, #0d0029 100%)',
+ accent: '#a855f7',
+ tags: ['게임', '멀티플레이', '랭킹'],
+ icon: '⚡',
+ },
+];
+
+const processSteps = [
+ { step: '01', title: '무료 상담', desc: '요구사항 파악 및 방향성 논의', icon: '💬' },
+ { step: '02', title: '기획', desc: '사이트맵 & 와이어프레임', icon: '📋' },
+ { step: '03', title: '디자인', desc: 'UI/UX 시안 제작', icon: '🎨' },
+ { step: '04', title: '개발', desc: '반응형 퍼블리싱 & 기능 구현', icon: '⚙️' },
+ { step: '05', title: '납품', desc: '검수 완료 후 도메인 배포', icon: '🚀' },
+];
+
+const plans = [
+ {
+ name: '스타터',
+ price: '50',
+ unit: '만원~',
+ color: '#38bdf8',
+ features: ['5페이지 이내', '반응형 디자인', '기본 SEO 설정', '1개월 유지보수', '3~5영업일 납품'],
+ note: '개인 블로그, 소규모 소개 사이트',
+ },
+ {
+ name: '비즈니스',
+ price: '150',
+ unit: '만원~',
+ color: '#818cf8',
+ featured: true,
+ features: ['10페이지 이내', '반응형 디자인', '관리자 페이지', 'SEO 최적화', '3개월 유지보수', '1~2주 납품'],
+ note: '기업 사이트, 브랜드 페이지',
+ },
+ {
+ name: '프리미엄',
+ price: '300',
+ unit: '만원~',
+ color: '#f472b6',
+ features: ['페이지 수 무제한', '맞춤 디자인', '결제/회원 시스템', 'DB 연동', '6개월 유지보수', '일정 협의'],
+ note: '쇼핑몰, SaaS, 복합 시스템',
+ },
+];
+
+const faqs = [
+ {
+ q: '제작 기간은 얼마나 걸리나요?',
+ a: '규모에 따라 다르지만, 스타터는 3~5영업일, 비즈니스는 1~2주, 프리미엄은 협의 후 결정합니다. 빠른 납품이 필요한 경우 별도 상담해 주세요.',
+ },
+ {
+ q: '수정은 몇 번까지 가능한가요?',
+ a: '기획 확정 후 디자인 시안 수정은 2회, 개발 완료 후 기능 수정은 유지보수 기간 내 자유롭게 가능합니다. 추가 기능 개발은 별도 견적으로 진행합니다.',
+ },
+ {
+ q: '도메인과 호스팅도 도와주시나요?',
+ a: '네, 도메인 구매부터 서버 세팅, 배포까지 전 과정을 도와드립니다. Vercel, AWS, 카페24 등 원하시는 플랫폼에 맞춰 배포해 드립니다.',
+ },
+];
+
+export default function WebsiteServicePage() {
+ const [openFaq, setOpenFaq] = useState
(null);
+
+ return (
+
+
+
+ {/* Hero */}
+
+
+
+
+
+ Homepage Development Service
+
+
+ 비즈니스를 빛내는 홈페이지,
+
+ 7년차 대기업 개발자가 기획·디자인·개발·배포까지 원스톱으로.
+
+
+ {/* Stats */}
+
+ {[
+ { num: '3~5일', label: '최단 납품' },
+ { num: '50만원~', label: '시작 가격' },
+ { num: '100%', label: '반응형 지원' },
+ ].map((s) => (
+
+ ))}
+
+
+
+ {/* Sample Portfolio */}
+
+
+
+ 포트폴리오 샘플
+
+
+ 카드를 클릭하면 실제 완성 화면을 미리 확인할 수 있습니다
+
+
+ {samples.map((s) => (
+
+
+
+
{s.icon}
+
+ {s.tags.map((tag) => (
+ {tag}
+ ))}
+
+
+ 미리보기 →
+
+
+
+
+ {s.subtitle}
+
+
+ {s.title}
+
+
+ {s.desc}
+
+
+
+
+ ))}
+
+
+ {/* Process */}
+
+
+
+
+ 제작 프로세스
+
+
+ 투명하고 체계적인 5단계로 진행됩니다
+
+
+
+ {processSteps.map((p, i) => (
+
+
+
{p.icon}
+
+ STEP {p.step}
+
+
+ {p.title}
+
+
+ {p.desc}
+
+
+ {i < processSteps.length - 1 && (
+
›
+ )}
+
+ ))}
+
+
+
+ {/* Pricing */}
+
+
+
+ 가격 플랜
+
+
+ 프로젝트 규모에 맞는 플랜을 선택하세요
+
+
+ {plans.map((plan) => (
+
+ {plan.featured && (
+
BEST
+ )}
+
+ {plan.name}
+
+
+
+ {plan.price}
+
+
+ {plan.unit}
+
+
+
+ {plan.note}
+
+
+ {plan.features.map((f) => (
+
+ ✓
+ {f}
+
+ ))}
+
+
+ 상담 신청
+
+
+ ))}
+
+
+ {/* FAQ */}
+
+
+
+ 자주 묻는 질문
+
+
+
+ {faqs.map((faq, i) => (
+
+
setOpenFaq(openFaq === i ? null : i)} style={{
+ width: '100%', textAlign: 'left', padding: '18px 22px',
+ background: 'none', border: 'none', cursor: 'pointer',
+ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12,
+ }}>
+
+ {faq.q}
+
+ +
+
+ {openFaq === i && (
+
+ {faq.a}
+
+ )}
+
+ ))}
+
+
+ {/* CTA */}
+
+
+
+ 지금 바로 시작하세요
+
+
+ 무료 상담은 24시간 이내 답변드립니다.
+
+ 무료 상담 신청하기 →
+
+
+
+
+
+ {/* Back Banner */}
+
+ |
+
+ SAMPLE · 베이커리 홈페이지
+
+
+
+ {/* Navbar */}
+
+
+
+ Le Petit Fort
+
+
Artisan Boulangerie
+
+ {['메뉴', '스토리', '매장안내', '예약'].map((item) => (
+ {item}
+ ))}
+
+
+ 예약하기
+
+
+
+ {/* Hero */}
+
+ {/* Decorative circles */}
+
+
+ 🥐
+
+
+
+ "매일 아침, 정성을 굽습니다"
+
+
+ 갓 구운 빵의따뜻한 향기 가
+
+ 프랑스 전통 방식으로 매일 새벽 4시부터
+
+
+ 오늘의 메뉴 보기
+
+
+ 매장 찾아오기
+
+
+
+
+ {/* Menu */}
+
+
+
+
Today's Menu
+
+ 오늘의 추천 메뉴
+
+
+ 매일 새벽 구운 신선한 빵을 만나보세요
+
+
+
+ {menuItems.map((item) => (
+
+
+ {item.emoji}
+ {item.tag}
+
+
+
+ {item.name}
+
+
+ {item.desc}
+
+
+
+ ₩{item.price}
+
+ 담기
+
+
+
+ ))}
+
+
+
+ {/* Story */}
+
+
+
+
+ Our Story
+
+
+ 2009년부터우리 동네 빵집
+
+
+ 파리에서 5년간 수업한 오너 셰프가 고향 서울로 돌아와 차린 작은 베이커리. 대기업 프랜차이즈가 넘쳐나는 세상에서도 손으로 빚고, 눈으로 확인하는 전통 방식을 고집합니다.
+
+
+ 밀가루, 버터, 소금, 물. 단 네 가지 재료로 만드는 우리의 빵에는 흉내낼 수 없는 진심이 담겨있습니다.
+
+
+
+
👨🍳
+
+ Chef Kim Dongwoo
+
+
+ Le Cordon Bleu Paris 졸업
+
+ {[{ n: '15+', l: '년 경력' }, { n: '200+', l: '종류의 빵' }, { n: '4시', l: '매일 기상' }].map((s) => (
+
+ ))}
+
+
+
+
+ {/* Hours & Location */}
+
+
+
+
+ Hours
+
+
+ 운영 시간
+
+
+ {hours.map((h) => (
+
+ {h.day}
+ {h.time}
+
+ ))}
+
+
+
+
+ Location
+
+
+ 매장 위치
+
+
+ 서울특별시 마포구 연남동 224-14
+
+
📍 지하철 2호선 홍대입구역 3번 출구 도보 5분
+
📞 02-334-5678
+
📱 @lepetitfort_seoul
+
+
+
+
+ {/* CTA */}
+
+
+ 특별한 날을 위한 케이크
+
+
+ 생일, 기념일, 웨딩 케이크까지.
+
+ 케이크 주문 예약하기 →
+
+
+
+ {/* Footer */}
+
+
+
+
+ {/* Back Banner */}
+
+ |
+
+ SAMPLE · 기업 홈페이지
+
+
+
+ {/* Navbar */}
+
+
+
T
+
+
+ TechSolution
+
+
㈜테크솔루션
+
+
+ {['회사소개', '서비스', '포트폴리오', '고객사', '채용', '연락처'].map((item) => (
+ {item}
+ ))}
+
+ 문의하기
+
+
+
+
+ {/* Hero */}
+
+
+
+
+
+ Enterprise IT Solutions
+
+
+ 디지털 혁신으로비즈니스의 미래 를
+
+ 15년의 경험과 기술력으로 기업의 IT 인프라를 혁신합니다.
+
+
+ 서비스 상담 신청 →
+
+
+ 회사 소개서 다운로드
+
+
+
+
+ {/* Stats */}
+
+ {stats.map((s, i) => (
+
+
+ {s.num}
+
+
+ {s.label}
+
+
+
+ {/* Services */}
+
+
+
+
+ Our Services
+
+
+ 핵심 서비스
+
+
+ 기업의 성장을 이끄는 IT 솔루션을 제공합니다
+
+
+
+ {services.map((svc) => (
+
+
+ {svc.icon}
+
+
+ {svc.title}
+
+
+ {svc.desc}
+
+
+ 자세히 보기 →
+
+
+ ))}
+
+
+
+ {/* Clients */}
+
+
+
+ Trusted By
+
+
+ 함께하는 고객사
+
+
+ {clients.map((c) => (
+
{c}
+ ))}
+
+
+
+ {/* Contact */}
+
+
+
+ 프로젝트를 시작하세요
+
+
+ IT 솔루션이 필요하시면 언제든지 연락해주세요.
+
+
+ 무료 상담 신청
+
+
+ 02-1234-5678
+
+
+
+
+ {/* Footer */}
+
+
+
+
+ {/* Back Banner */}
+
+ |
+
+ SAMPLE · 관리자 대시보드
+
+
+
+
+ {/* Sidebar */}
+
+ {/* Logo */}
+
+
+
DF
+
+
DataFlow
+
v2.4.1 · PRO
+
+
+
+
+ MAIN
+
+ {menus.map((m) => (
+ setActiveMenu(m.id)}
+ style={{
+ width: '100%', textAlign: 'left',
+ padding: '9px 12px', borderRadius: 8, border: 'none', cursor: 'pointer',
+ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 2,
+ background: activeMenu === m.id ? 'rgba(59,130,246,0.15)' : 'transparent',
+ color: activeMenu === m.id ? '#60a5fa' : '#475569',
+ }}
+ >
+ {m.icon}
+
+ {m.label}
+
+ {activeMenu === m.id && (
+
+ )}
+
+ ))}
+
+
+ {/* User */}
+
+
+
A
+
+
+ Admin
+
+
Super Admin
+
+
+
+
+
+ {/* Main */}
+
+ {/* Header */}
+
+
+
+ Overview
+
+
+ 2024.08.14 · 오전 10:32 업데이트
+
+
+
+
+ 최근 30일
+
+
+ 리포트 내보내기
+
+
+
+ {kpis.map((kpi) => (
+
+
+
{kpi.label}
+
{kpi.icon}
+
+
+ {kpi.value}
+
+
+ {kpi.up ? '↑' : '↓'} {kpi.change}
+
+
+ ))}
+
+ {/* Bar Chart */}
+
+
+
+ 월별 매출 추이
+
+
+ {['1M', '3M', '6M', '1Y'].map((p) => (
+ {p}
+ ))}
+
+
+
+ {chartData.map((d, i) => (
+
+ ))}
+
+
+
+ {/* Progress */}
+
+
+ 채널별 전환율
+
+ {[
+ { label: 'Organic Search', val: 78, color: '#3b82f6' },
+ { label: 'Direct', val: 55, color: '#10b981' },
+ { label: 'Social Media', val: 42, color: '#a855f7' },
+ { label: 'Email', val: 34, color: '#f59e0b' },
+ { label: 'Referral', val: 20, color: '#ec4899' },
+ ].map((p) => (
+
+
+ {p.label}
+ {p.val}%
+
+
+
+ ))}
+
+
+
+
+
+
+ {['사용자', '활동', '시간', '상태'].map((h) => (
+ {h}
+ ))}
+
+
+
+ {activities.map((a, i) => (
+
+
+ {a.user}
+
+
+ {a.action}
+
+
+ {a.time}
+
+
+
+
+ ))}
+
+
+
+
+
;
+ if (matchingActive) {
+ timer = setInterval(() => {
+ setMatchTimer((t) => t + 1);
+ }, 1000);
+ } else {
+ setMatchTimer(0);
+ }
+ return () => clearInterval(timer);
+ }, [matchingActive]);
+
+ const rankings = [
+ { rank: 1, name: 'ShadowViper_KR', score: 9_842, tier: 'GRANDMASTER', wins: 312, kda: '18.4' },
+ { rank: 2, name: 'NightFalcon', score: 9_610, tier: 'GRANDMASTER', wins: 289, kda: '15.2' },
+ { rank: 3, name: 'Xenon_X', score: 9_241, tier: 'MASTER', wins: 267, kda: '12.9' },
+ { rank: 4, name: 'KR_Dominator', score: 8_970, tier: 'MASTER', wins: 251, kda: '11.7' },
+ { rank: 5, name: 'Pulse_Wave', score: 8_834, tier: 'DIAMOND', wins: 238, kda: '10.3' },
+ ];
+
+ const modes = [
+ {
+ id: 'solo',
+ name: 'SOLO',
+ sub: '1 vs 1',
+ desc: '순수한 실력으로 맞붙는 1대1 대결',
+ icon: '⚡',
+ color: '#06b6d4',
+ players: '12,400',
+ },
+ {
+ id: 'duo',
+ name: 'DUO',
+ sub: '2 vs 2',
+ desc: '파트너와 함께하는 팀플레이',
+ icon: '◈',
+ color: '#a855f7',
+ players: '28,700',
+ },
+ {
+ id: 'squad',
+ name: 'SQUAD',
+ sub: '5 vs 5',
+ desc: '전략과 팀워크로 승리를 쟁취',
+ icon: '▲',
+ color: '#f59e0b',
+ players: '7,100',
+ },
+ ];
+
+ const tierColor: Record = {
+ GRANDMASTER: '#fbbf24',
+ MASTER: '#a855f7',
+ DIAMOND: '#60a5fa',
+ };
+
+ return (
+
+
+
+ {/* Back Banner */}
+
+ |
+
+ SAMPLE · 게임 매칭 시스템
+
+
+
+ {/* Navbar */}
+
+
+ NEXUS ARENA
+
+
+ {['HOME', 'MATCH', 'RANK', 'SHOP', 'CLAN'].map((item) => (
+ {item}
+ ))}
+
+
+
+
+ {onlinePlayers.toLocaleString()} ONLINE
+
+
+
+ {/* Hero */}
+
+ {/* Grid */}
+
+ {/* Scan line */}
+
+
+ {/* Corner decorations */}
+ {[
+ { top: 40, left: 40, borderTop: '2px solid #06b6d4', borderLeft: '2px solid #06b6d4' },
+ { top: 40, right: 40, borderTop: '2px solid #a855f7', borderRight: '2px solid #a855f7' },
+ { bottom: 40, left: 40, borderBottom: '2px solid #06b6d4', borderLeft: '2px solid #06b6d4' },
+ { bottom: 40, right: 40, borderBottom: '2px solid #a855f7', borderRight: '2px solid #a855f7' },
+ ].map((s, i) => (
+
+ ))}
+
+
+
+ Season 7 · RANKED MATCH
+
+
+ NEXUSARENA
+
+
+ ENTER THE ARENA. CLAIM YOUR GLORY.
+
+
+ {/* Live Stats */}
+
+ {[
+ { label: 'ONLINE', val: onlinePlayers.toLocaleString(), color: '#06b6d4' },
+ { label: 'IN MATCH', val: matchingCount.toLocaleString(), color: '#a855f7' },
+ { label: 'SERVERS', val: '24', color: '#10b981' },
+ ].map((s) => (
+
+
{s.val}
+
+ {s.label}
+
+
+ ))}
+
+
+ {/* Matching Button */}
+ {!matchingActive ? (
+
setMatchingActive(true)}
+ style={{
+ background: 'linear-gradient(135deg, #06b6d4, #0891b2)',
+ border: 'none', color: 'white',
+ padding: '18px 56px', fontSize: 16, fontWeight: 900,
+ cursor: 'pointer', fontFamily: 'Orbitron, sans-serif',
+ letterSpacing: '0.1em',
+ clipPath: 'polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px))',
+ animation: 'pulse-ring 2s infinite',
+ }}
+ >
+ FIND MATCH
+
+ ) : (
+
+
+ MATCHING... {String(Math.floor(matchTimer / 60)).padStart(2, '0')}:{String(matchTimer % 60).padStart(2, '0')}
+
+
setMatchingActive(false)} style={{
+ background: 'none', border: 'none', color: '#334155',
+ fontFamily: 'Rajdhani, sans-serif', fontSize: 13, cursor: 'pointer',
+ letterSpacing: '0.1em', textDecoration: 'underline',
+ }}>
+ CANCEL
+
+
+ )}
+
+
+ {/* Game Modes */}
+
+
+
+
+ {modes.map((mode) => (
+
+
+
{mode.icon}
+
+
{mode.name}
+
{mode.sub}
+
+
{mode.desc}
+
+
+ {mode.players} IN QUEUE
+
+
+ PLAY →
+
+
+
+ ))}
+
+
+
+ {/* Rankings */}
+
+
+
+
+ GLOBAL RANKING.
+
+
+ Season 7 · Top 100
+
+
+
+ {/* Header */}
+
+ {['RANK', 'PLAYER', 'SCORE', 'WINS', 'K/D/A'].map((h) => (
+
{h}
+ ))}
+
+ {rankings.map((r, i) => (
+
+
+ {r.rank < 10 ? `0${r.rank}` : r.rank}
+
+
+
+ {r.name}
+
+
{r.tier}
+
+
{r.score.toLocaleString()}
+
+ {r.wins}
+
+
+ {r.kda}
+
+
+ ))}
+
+
+
+ {/* Footer */}
+
+ NEXUS ARENA
+
+ © 2024 NEXUS ARENA STUDIOS. ALL RIGHTS RESERVED.
+
+
+ {['Twitter', 'Discord', 'YouTube'].map((s) => (
+ {s}
+ ))}
+
+
+
(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 (
+
+
+
+ {/* Back Banner */}
+
+ |
+
+ SAMPLE · 개인 포트폴리오
+
+
+
+ {/* Navbar */}
+
+
+ KJ_
+
+
+ {['About', 'Work', 'Skills', 'Contact'].map((item) => (
+ {item}
+ ))}
+
+
+ HIRE ME
+
+
+
+ {/* Hero */}
+
+ {/* Scanline effect */}
+
+ {/* Grid */}
+
+
+
+
+ {'> Hello, World. I am'}
+
+
+ KimJisu
+
+
+ Product Designer & Creative Developer
+
+
+ 픽셀 하나하나에 의미를 담는 디자이너. 아름다움과 기능의 교차점에서 디지털 경험을 설계합니다.
+
+
+
+ VIEW WORK →
+
+
+ Download CV
+
+
+ {['6+', '30+', '2x'].map((s, i) => (
+
+ {s}
+ {['YEARS', 'PROJECTS', 'AWWWARDS'][i]}
+
+ ))}
+
+
+
+
+ {/* Projects */}
+
+
+
+
+ Selected Work.
+
+
+ 2019 — 2024
+
+
+
+ {projects.map((proj, i) => (
+
setHoveredProject(i)}
+ onMouseLeave={() => setHoveredProject(null)}
+ style={{
+ border: '1px solid #111827', borderRadius: 12, overflow: 'hidden',
+ cursor: 'pointer', background: '#0a0a0a',
+ }}
+ >
+
+
+ {proj.title}
+
+
{proj.tag}
+
+
+
+ {proj.title}
+
+
+ {proj.desc}
+
+
+
+ ))}
+
+
+
+ {/* Skills */}
+
+
+
+
+ Skills.
+
+
+ {skills.map((s) => (
+
+
+
+ {s.name}
+
+
+ {s.level}%
+
+
+
+
+ ))}
+
+
+
+
+ Timeline.
+
+
+
+ {timeline.map((t, i) => (
+
+
+
+ {t.year}
+
+
+ {t.event}
+
+
+ ))}
+
+
+
+
+ {/* Contact */}
+
+
+ {'> LET\'S COLLABORATE'}
+
+
+ Have a project?
+
+
+ jisu.kim@design.studio · @jisu_creates
+
+
+ START A PROJECT →
+
+
+