Go to Home

Portfolio

Portfolio of Frontend Developer Hyunsoo Ro

A personal portfolio website built with React, TypeScript, and Tailwind CSS. Features responsive design, dark theme, smooth animations, and optimized performance. Includes project showcase, skills section, contact form, and guestbook functionality. Deployed using Vercel with continuous integration.

TypeScriptReactTailwind CSSMotionShadcn/uiTanstack QueryReact RouterReact Hook FormSupabaseBiomeGoogle Analytics
Team Size
1 people
Period
12.2024 ~ In Progress
Related Links
GitHubLive Site

Details

  • Modal Routing and Project Detail Page

    • Implemented a routing system that displays project details in two ways—modal and full page—utilizing React Router's location state
    • Supports both direct URL access and modal popup
    Modal Routing and Project Detail Page

  • Supabase-based Project Data Management

    • Developed project data retrieval, caching, and error handling using Supabase and React Query
    • Implemented real-time project information addition and modification through the Supabase dashboard without code redeployment
    • Created and applied caseConverter.ts utility function for automatic conversion from snake_case to camelCase
    Supabase-based Project Data Management

  • Performance Optimization and Skeleton UI

    • Improved user experience through loading state management and minimum display time guarantee via useProjectSkeletonLoading hook
    • Applied scroll event optimization using throttle from es-toolkit
    Performance Optimization and Skeleton UI

  • Web Accessibility and SEO Optimization

    • Ensured web accessibility through ARIA labels, semantic HTML, and keyboard navigation support
    • Improved SEO performance with structured data (Schema.org) and meta tag optimization

  • Continuous Performance Optimization in Progress

    • Continuously optimizing Performance, Accessibility, SEO, and Best Practices through Google Lighthouse performance measurement. Performance consistently maintains an average score of 70 or higher.
    • Implemented comprehensive web standards compliance including image optimization, code splitting, ARIA accessibility improvements, and meta tag optimization.
    • Achieved 70% reduction in FCP (1.75s→0.5s) and 46% improvement in LCP (4.6s→2.5s) on desktop, and continuing to enhance user experience through ongoing performance optimization.
    Lighthouse Performance Measurement Results