+
diff --git a/app/services/website/samples/portfolio/page.tsx b/app/services/website/samples/portfolio/page.tsx
index 1c4ebf9..0f3ecee 100644
--- a/app/services/website/samples/portfolio/page.tsx
+++ b/app/services/website/samples/portfolio/page.tsx
@@ -3,34 +3,57 @@
import Link from 'next/link';
import { useState } from 'react';
+const awards = [
+ { name: 'Awwwards SOTD', count: '× 2', color: '#f59e0b' },
+ { name: 'CSS Design Awards', count: 'Winner', color: '#06b6d4' },
+ { name: 'Adobe Design Award', count: '은상', color: '#ec4899' },
+ { name: 'Google UX Cert.', count: '2023', color: '#34d399' },
+];
+
+const services = [
+ { title: 'UI/UX Design', desc: '사용자 중심의 인터페이스 설계와 프로토타입', icon: 'M', color: '#00ff88' },
+ { title: 'Creative Development', desc: 'Three.js · WebGL · 몰입형 웹 경험 구현', icon: 'C', color: '#a855f7' },
+ { title: 'Brand Identity', desc: '로고부터 브랜드 시스템 전체 디자인', icon: 'B', color: '#06b6d4' },
+ { title: 'Motion Design', desc: 'After Effects · Lottie 모션 에셋 제작', icon: 'M', color: '#f59e0b' },
+];
+
+const projects = [
+ { title: 'NEON CITY UI', desc: '사이버펑크 게임 인터페이스 디자인. 넥슨 신작 게임의 전체 UI 시스템 구축', gradient: 'linear-gradient(135deg, #00ff88, #00d4ff)', tag: 'UI/UX', year: '2024', featured: true },
+ { title: 'FLOW BRAND', desc: '핀테크 스타트업 브랜딩 — 시리즈 B 투자유치 직전 리브랜딩', gradient: 'linear-gradient(135deg, #a855f7, #ec4899)', tag: 'Branding', year: '2024', featured: false },
+ { title: 'ORBITAL APP', desc: '위성 추적 실시간 대시보드 — NASA 오픈 API 활용', gradient: 'linear-gradient(135deg, #3b82f6, #06b6d4)', tag: 'Web App', year: '2023', featured: false },
+ { title: 'TERRA SHOP', desc: '친환경 D2C 쇼핑몰 — 전환율 340% 개선 달성', gradient: 'linear-gradient(135deg, #22c55e, #84cc16)', tag: 'E-commerce', year: '2023', featured: false },
+ { title: 'PULSE MOTION', desc: '글로벌 광고 에이전시를 위한 모션 그래픽 패키지', gradient: 'linear-gradient(135deg, #f59e0b, #ef4444)', tag: 'Motion', year: '2023', featured: false },
+ { title: 'AXIS SYSTEM', desc: '스타트업 물류 관리 SaaS — 현재 MAU 12만', gradient: 'linear-gradient(135deg, #64748b, #475569)', tag: 'Dashboard', year: '2022', featured: false },
+];
+
+const skills = [
+ { name: 'Figma', level: 98, category: 'Design' },
+ { name: 'Framer', level: 92, category: 'Design' },
+ { name: 'After Effects', level: 88, category: 'Motion' },
+ { name: 'React', level: 90, category: 'Code' },
+ { name: 'TypeScript', level: 85, category: 'Code' },
+ { name: 'Three.js', level: 75, category: 'Code' },
+];
+
+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' },
+];
+
+const testimonials = [
+ { client: 'Joon Park', role: 'CEO, FlowTech', text: 'Jisu가 리디자인한 결과물로 투자 피칭에서 VC들의 반응이 완전히 달라졌습니다. 결과적으로 시리즈 B 클로징에 큰 역할을 했어요.' },
+ { client: 'Yuna Kim', role: 'Product Lead, Orbital', text: '기술적인 복잡함을 이렇게 아름다운 인터페이스로 풀어낼 수 있다는 게 놀라웠습니다. 유저 피드백 NPS가 34점 올랐습니다.' },
+];
+
export default function PortfolioSample() {
const [hoveredProject, setHoveredProject] = useState
(null);
+ const [activeCategory, setActiveCategory] = useState('All');
- 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' },
- ];
+ const categories = ['All', 'UI/UX', 'Branding', 'Web App', 'Motion'];
+ const filteredProjects = activeCategory === 'All' ? projects : projects.filter(p => p.tag === activeCategory);
return (
@@ -41,137 +64,287 @@ export default function PortfolioSample() {
@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; }
+ @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
+ @keyframes pulse-green { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,136,0.4); } 50% { box-shadow: 0 0 0 6px rgba(0,255,136,0); } }
+ .proj-card { transition: border-color 0.3s, transform 0.3s; }
+ .proj-card:hover { border-color: rgba(0,255,136,0.3) !important; transform: translateY(-4px); }
+ .service-card { transition: background 0.3s, border-color 0.3s; }
+ .service-card:hover { background: rgba(255,255,255,0.04) !important; }
+ .cat-btn { transition: background 0.2s, color 0.2s; cursor: pointer; }
+ .cat-btn:hover { color: white !important; }
+ .award-badge { transition: transform 0.2s; }
+ .award-badge:hover { transform: translateY(-2px); }
`}
{/* Back Banner */}
-
-
+
+
← 홈페이지 제작 서비스로 돌아가기
- |
+ |
SAMPLE · 개인 포트폴리오
+ {/* Awards Marquee */}
+
+
+ {[...awards, ...awards].map((a, i) => (
+
+
+
{a.name}
+
{a.count}
+
+ ))}
+
+
+
{/* Navbar */}