Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 663343e8bc |
226
src/app/page.tsx
226
src/app/page.tsx
@@ -31,25 +31,15 @@ export default function LandingPage() {
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Skills",
|
||||
id: "skills",
|
||||
},
|
||||
name: "Skills", id: "skills"},
|
||||
{
|
||||
name: "Projects",
|
||||
id: "projects",
|
||||
},
|
||||
name: "Projects", id: "projects"},
|
||||
{
|
||||
name: "Experience",
|
||||
id: "experience",
|
||||
},
|
||||
name: "Experience", id: "experience"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="Sion Kim"
|
||||
/>
|
||||
@@ -61,39 +51,23 @@ export default function LandingPage() {
|
||||
description="Web Publisher & Frontend UI Specialist. Building scalable, responsive, and user-focused digital interfaces for enterprise success."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Projects",
|
||||
href: "#projects",
|
||||
},
|
||||
text: "View Projects", href: "#projects"},
|
||||
{
|
||||
text: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Contact", href: "#contact"},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-editor-uses-ai-powered-software-pc-reels-creative-office_482257-126981.jpg",
|
||||
imageAlt: "Hero slide 1",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-editor-uses-ai-powered-software-pc-reels-creative-office_482257-126981.jpg", imageAlt: "Hero slide 1"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/programmer-writes-code-laptop-screen-while-apartment-office-using-java_482257-87273.jpg",
|
||||
imageAlt: "Hero slide 2",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/programmer-writes-code-laptop-screen-while-apartment-office-using-java_482257-87273.jpg", imageAlt: "Hero slide 2"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-desk-concept-with-copy-space_23-2148459730.jpg",
|
||||
imageAlt: "Hero slide 3",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-desk-concept-with-copy-space_23-2148459730.jpg", imageAlt: "Hero slide 3"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/working-table-with-computer_93675-133811.jpg",
|
||||
imageAlt: "Hero slide 4",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/working-table-with-computer_93675-133811.jpg", imageAlt: "Hero slide 4"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/african-american-investment-expert-works-home-analyzing-financial-statistics_482257-120570.jpg",
|
||||
imageAlt: "Hero slide 5",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/african-american-investment-expert-works-home-analyzing-financial-statistics_482257-120570.jpg", imageAlt: "Hero slide 5"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/senior-tech-startup-hr-recruiter-identifying-candidates-job-reviewing-cvs_482257-118780.jpg",
|
||||
imageAlt: "Hero slide 6",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/senior-tech-startup-hr-recruiter-identifying-candidates-job-reviewing-cvs_482257-118780.jpg", imageAlt: "Hero slide 6"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -103,20 +77,14 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Detail-Oriented Frontend Specialist"
|
||||
description="With over X years in the industry, I specialize in transforming complex design requirements into high-performance, accessible, and maintenance-friendly digital experiences. I bridge the gap between design and development through semantic markup and robust CSS architecture."
|
||||
description="With over 8 years in the industry, I specialize in transforming complex design requirements into high-performance, accessible, and maintenance-friendly digital experiences. I bridge the gap between design and development through semantic markup and robust CSS architecture."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Semantic & Accessible",
|
||||
description: "Writing clean, standard-compliant HTML/CSS with a focus on WCAG compliance.",
|
||||
},
|
||||
title: "Semantic & Accessible", description: "Writing clean, standard-compliant HTML/CSS with a focus on WCAG compliance."},
|
||||
{
|
||||
title: "Scalable Architecture",
|
||||
description: "Expert in SCSS and modular component libraries that grow with your project.",
|
||||
},
|
||||
title: "Scalable Architecture", description: "Expert in SCSS and modular component libraries that grow with your project."},
|
||||
{
|
||||
title: "Performance First",
|
||||
description: "Optimizing cross-browser compatibility and UI consistency for enterprise-grade performance.",
|
||||
},
|
||||
title: "Performance First", description: "Optimizing cross-browser compatibility and UI consistency for enterprise-grade performance."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/female-entrepreneur-looking-laptop-while-working-from-home-office_482257-20474.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
@@ -130,47 +98,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "s1",
|
||||
title: "Core Foundations",
|
||||
subtitle: "HTML5, CSS3, JS",
|
||||
category: "Development",
|
||||
value: "Expert",
|
||||
},
|
||||
id: "s1", title: "Core Foundations", subtitle: "HTML5, CSS3, JS", category: "Development", value: "Expert"},
|
||||
{
|
||||
id: "s2",
|
||||
title: "CSS Architecture",
|
||||
subtitle: "SCSS, BEM, Modular CSS",
|
||||
category: "Publishing",
|
||||
value: "Advanced",
|
||||
},
|
||||
id: "s2", title: "CSS Architecture", subtitle: "SCSS, BEM, Modular CSS", category: "Publishing", value: "Advanced"},
|
||||
{
|
||||
id: "s3",
|
||||
title: "UI Consistency",
|
||||
subtitle: "Design Systems, Figma",
|
||||
category: "Design Ops",
|
||||
value: "Advanced",
|
||||
},
|
||||
id: "s3", title: "UI Consistency", subtitle: "Design Systems, Figma", category: "Design Ops", value: "Advanced"},
|
||||
{
|
||||
id: "s4",
|
||||
title: "Modern Accessibility",
|
||||
subtitle: "WCAG Compliance, ARIA",
|
||||
category: "Access",
|
||||
value: "Certified",
|
||||
},
|
||||
id: "s4", title: "Modern Accessibility", subtitle: "WCAG Compliance, ARIA", category: "Access", value: "Certified"},
|
||||
{
|
||||
id: "s5",
|
||||
title: "Development Flow",
|
||||
subtitle: "Git, CLI, Gulp/Webpack",
|
||||
category: "Tools",
|
||||
value: "Advanced",
|
||||
},
|
||||
id: "s5", title: "Development Flow", subtitle: "Git, CLI, Gulp/Webpack", category: "Tools", value: "Advanced"},
|
||||
{
|
||||
id: "s6",
|
||||
title: "Responsive Strategy",
|
||||
subtitle: "Adaptive & Mobile-first",
|
||||
category: "UX/UI",
|
||||
value: "Master",
|
||||
},
|
||||
id: "s6", title: "Responsive Strategy", subtitle: "Adaptive & Mobile-first", category: "UX/UI", value: "Master"},
|
||||
]}
|
||||
title="Technical Competence"
|
||||
description="Enterprise-ready skill set for modern digital implementation."
|
||||
@@ -185,41 +123,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Samsung Enterprise Portal",
|
||||
price: "Publishing Lead",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/factory-employee-works-mockup-tablet-executives-discussing-strategies_482257-126500.jpg",
|
||||
},
|
||||
id: "p1", name: "Samsung Enterprise Portal", price: "Publishing Lead", imageSrc: "http://img.b2bpic.net/free-photo/factory-employee-works-mockup-tablet-executives-discussing-strategies_482257-126500.jpg"},
|
||||
{
|
||||
id: "p2",
|
||||
name: "LG Digital Campaign",
|
||||
price: "UI Implementation",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-still-life_23-2150440939.jpg",
|
||||
},
|
||||
id: "p2", name: "LG Digital Campaign", price: "UI Implementation", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-still-life_23-2150440939.jpg"},
|
||||
{
|
||||
id: "p3",
|
||||
name: "CJ Corporate Platform",
|
||||
price: "Accessibility Audit",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hands-working-laptop-network-graphic-overlay_53876-124039.jpg",
|
||||
},
|
||||
id: "p3", name: "CJ Corporate Platform", price: "Accessibility Audit", imageSrc: "http://img.b2bpic.net/free-photo/hands-working-laptop-network-graphic-overlay_53876-124039.jpg"},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Digital Agency Website",
|
||||
price: "Performance Dev",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/it-specialist-working-data-center-facility-housing-storage-hardware-close-up_482257-90136.jpg",
|
||||
},
|
||||
id: "p4", name: "Digital Agency Website", price: "Performance Dev", imageSrc: "http://img.b2bpic.net/free-photo/it-specialist-working-data-center-facility-housing-storage-hardware-close-up_482257-90136.jpg"},
|
||||
{
|
||||
id: "p5",
|
||||
name: "B2B SaaS Dashboard",
|
||||
price: "Frontend Dev",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-career-guidance-items-designers_23-2149443503.jpg",
|
||||
},
|
||||
id: "p5", name: "B2B SaaS Dashboard", price: "Frontend Dev", imageSrc: "http://img.b2bpic.net/free-photo/top-view-career-guidance-items-designers_23-2149443503.jpg"},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Design System 2.0",
|
||||
price: "Lead Publisher",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tech-startup-company-hr-employee-looking-cvs-doing-background-checks_482257-119132.jpg",
|
||||
},
|
||||
id: "p6", name: "Design System 2.0", price: "Lead Publisher", imageSrc: "http://img.b2bpic.net/free-photo/tech-startup-company-hr-employee-looking-cvs-doing-background-checks_482257-119132.jpg"},
|
||||
]}
|
||||
title="Enterprise Case Studies"
|
||||
description="Selected projects showcasing clean code and UI craftsmanship."
|
||||
@@ -233,25 +147,13 @@ export default function LandingPage() {
|
||||
tag="Efficiency & Quality"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "Concept",
|
||||
description: "Requirement Analysis & Planning",
|
||||
},
|
||||
id: "m1", value: "Concept", description: "Requirement Analysis & Planning"},
|
||||
{
|
||||
id: "m2",
|
||||
value: "Publish",
|
||||
description: "Semantic & Scalable Implementation",
|
||||
},
|
||||
id: "m2", value: "Publish", description: "Semantic & Scalable Implementation"},
|
||||
{
|
||||
id: "m3",
|
||||
value: "QA",
|
||||
description: "Rigorous Cross-Browser & Accessibility",
|
||||
},
|
||||
id: "m3", value: "QA", description: "Rigorous Cross-Browser & Accessibility"},
|
||||
{
|
||||
id: "m4",
|
||||
value: "Live",
|
||||
description: "Performance Tuning & Maintenance",
|
||||
},
|
||||
id: "m4", value: "Live", description: "Performance Tuning & Maintenance"},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -265,29 +167,13 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{
|
||||
id: "e1",
|
||||
name: "Senior Web Publisher",
|
||||
role: "Digital Agency",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/remote-worker-organizing-project-data-reviewing-his-handwritten-notes_482257-126448.jpg",
|
||||
},
|
||||
id: "e1", name: "Senior Web Publisher", role: "Digital Agency", imageSrc: "http://img.b2bpic.net/free-photo/remote-worker-organizing-project-data-reviewing-his-handwritten-notes_482257-126448.jpg"},
|
||||
{
|
||||
id: "e2",
|
||||
name: "Frontend Specialist",
|
||||
role: "Enterprise Corp",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-coding-software-tablet-server-room_482257-118186.jpg",
|
||||
},
|
||||
id: "e2", name: "Frontend Specialist", role: "Enterprise Corp", imageSrc: "http://img.b2bpic.net/free-photo/close-up-coding-software-tablet-server-room_482257-118186.jpg"},
|
||||
{
|
||||
id: "e3",
|
||||
name: "UI/UX Publisher",
|
||||
role: "Design Agency",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/development-agency-office-worker-analyzing-project-sales-fintech-startup-businessperson-sitting-desk-marketing-company-office-developing-financial-strategy-accounting-management_482257-40323.jpg",
|
||||
},
|
||||
id: "e3", name: "UI/UX Publisher", role: "Design Agency", imageSrc: "http://img.b2bpic.net/free-photo/development-agency-office-worker-analyzing-project-sales-fintech-startup-businessperson-sitting-desk-marketing-company-office-developing-financial-strategy-accounting-management_482257-40323.jpg"},
|
||||
{
|
||||
id: "e4",
|
||||
name: "Frontend Lead",
|
||||
role: "Software Startup",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pensive-programmer-walking-through-apartment-thinking-how-solve-coding-issues_482257-104090.jpg",
|
||||
},
|
||||
id: "e4", name: "Frontend Lead", role: "Software Startup", imageSrc: "http://img.b2bpic.net/free-photo/pensive-programmer-walking-through-apartment-thinking-how-solve-coding-issues_482257-104090.jpg"},
|
||||
]}
|
||||
title="Professional Experience"
|
||||
description="Driving UI excellence in major digital organizations."
|
||||
@@ -298,16 +184,13 @@ export default function LandingPage() {
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
variant: "plain"}}
|
||||
tag="Let's Collaborate"
|
||||
title="Ready for your next enterprise project?"
|
||||
description="Looking for a reliable Frontend UI Specialist? Let's discuss how my expertise in semantic publishing can elevate your project quality."
|
||||
buttons={[
|
||||
{
|
||||
text: "Send Email",
|
||||
href: "mailto:hello@example.com",
|
||||
},
|
||||
text: "Send Email", href: "mailto:hello@example.com"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -317,38 +200,25 @@ export default function LandingPage() {
|
||||
logoText="Sion Kim"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
title: "Navigation", items: [
|
||||
{
|
||||
label: "Projects",
|
||||
href: "#projects",
|
||||
},
|
||||
label: "Projects", href: "#projects"},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
label: "About", href: "#about"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
title: "Social", items: [
|
||||
{
|
||||
label: "GitHub",
|
||||
href: "#",
|
||||
},
|
||||
label: "GitHub", href: "#"},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
label: "LinkedIn", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Privacy Policy", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -358,4 +228,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user