niso.moe
  • About
  • Projects
  • Blog
  • Contact
Back to Overview

© 2026 niso.moe

  • Privacy
  • Imprint

Profile Showcase

July 15, 2026
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.