Renewed personal brand site from the existing portfolio site. Redesigned with new planning, added animation effects, and changed the page rendering method to server-side. In the UI planning stage, Apple's Human Interface Guideline was reflected in the design. The goal was to provide users entering my page with an intuitive and consistent experience, considering a possible release of services under my brand name in the future.

The reason for changing from Plain React to NextJS is solely for server-side rendering. Nebaram's web is expected to grow significantly. Considering the impact on user experience with continued addition of complex animations and data bundles in a single-page web using CSR, we decided to change the rendering method together.

Scroll/mouse animation, motion slider, multilingual routing and translation, server-side rendering, responsive web screen, PWA

The initial page had a First Contentful Paint (FCP) of 2.5 seconds, Cumulative Layout Shift (CLS) index of 0.6, and a very low Search Engine Optimization (SEO) index of 68, making it vulnerable to exposure frequency. Analyzing five performance indicators to improve, we applied and summarized improvement methods. For better user experience, we analyzed three representative websites in terms of UI/UX. In terms of performance, all images were compressed to 30KB or less, more than 2 times, and the size and ratio were fixed to block layout changes. Additionally, image descriptions, sitemap, and page-specific metadata were added, and loading feedback for large images such as GIFs was provided. From the rendering aspect, we changed the layout to prerender on the server side, reducing the time it takes for the page to load. In terms of user experience, providing a unified font, distinct sizes, and a limited color palette minimized confusion and created immediate feedback based on the user's movement using transitions. As a result, the average index of the five performance indicators improved from 67 to 96, and FCP, CLS, and SEO were improved to 0.6 seconds, 0.005, and 100, respectively.

TypeScript React Next.js Redux-Toolkit i18next TailwindCSS

Vercel