Back to Overview

Profile Showcase

Tags:Front-EndWebsite
Technologies:NextJSTypeScriptTaildwind CSSshadcn/ui
Visit WebsiteGitView Source

A modern, highly personalized profile and showcase website designed to act as my own soft, welcoming corner of the internet. This project was a perfect opportunity to move away from rigid, third-party link-in-bio services and build a fully custom space that reflects my personality, interests, and real-time presence.

The Stack

  • Framework: Next.js utilizing the React Compiler for optimal frontend performance.
  • Language: TypeScript, keeping the entire project strictly type-safe.
  • Styling: Tailwind CSS paired with Radix UI for clean, accessible, and consistent components.
  • Package Manager: Bun, for fast dependency resolution and script execution.
  • Real-Time: Lanyard API for live Discord presence.

Features & Live Presence

This isn't just a static page; it's a living snapshot of who I am and what I'm up to. I built out dedicated sections to warmly introduce my world:

  • A real-time status integration that dynamically displays my current Discord presence and what I'm currently listening.
  • A beautiful photo gallery to showcase personal albums—like my plush family, cozy outfits, and comfort items, perfectly captured.
  • An eye-catching hero section and an "about me" space to share my interests, favorite media, and the things I love.
  • A clean, centralized social grid linking out to all my active platforms, from GitHub and Discord to Twitch and Bluesky.

Theming & Aesthetics

Because this space is deeply personal, the aesthetic had to be exactly right. I implemented a seamless theme toggle managed via Next Themes, ensuring user preferences are saved persistently while maintaining the site's signature soft, pastel-heavy look in both light and dark modes. The entire layout is highly responsive, adapting flawlessly from mobile to desktop without losing its charm.

The Challenge

Building this website meant balancing a comforting, cute aesthetic with robust, modern frontend performance. Working with the Lanyard API to fetch and render real-time presence data without causing layout shifts—and optimizing the gallery images for fast loading—provided a great opportunity to blend creative UI/UX design with strict technical standards.