Building a Persona-Themed Blog

In this post, I'll walk through how I built this Persona 5 inspired blog using Next.js, TypeScript, and Tailwind CSS.

The Inspiration

Persona 5's UI design is iconic - bold colors, dynamic animations, and a distinctive comic book style. I wanted to capture that energy in my personal site.

Key Design Elements

The most important aspects I focused on were:

• The color palette: crimson red, dark maroon, black, and white
• Typography: Bungee for headings to mimic the game's chunky display type
• Diagonal sections and comic-panel borders
• Animated hover states with quick cubic-bezier transitions

Implementation Challenges

The biggest challenge was balancing the bold aesthetic with readability and performance. Here's how I approached it:

// Example of the card hover animation
<div className="hover:transform hover:-translate-y-2 hover:rotate-1 transition-all duration-300">
  {/* Card content */}
</div>

Conclusion

Building this theme was a fun way to express my personality while practicing my front-end skills.