I’ve always admired Persona 5’s striking red-black-white aesthetic, kinetic motion graphics, and stylish menus. I wanted my personal portfolio to feel like an experience — not just a static résumé — something that shows off both my creativity and technical skill the moment it loads.
💻 What it does
My Portfolio (P5 Style) is a fully interactive, web-based portfolio that mimics the energy and design language of Persona 5.
⚡ Animated navigation and transitions inspired by the game’s battle menus.
🎨 Dynamic red/black and light themes with responsive motion.
🧩 Modular sections for projects, skills, and contact presented as “character cards.”
📱 Optimized for both desktop and mobile with smooth performance and minimal load time.
🛠️ How I built it
Frontend: React + Vite for fast development and modular components.
Styling: Tailwind CSS with a custom Persona 5 color palette and Framer Motion animations.
Assets: SVG icons, layered shadows, and smooth parallax transitions.
Deployment: Hosted on Netlify for continuous deployment and instant previews.
Version control: Git + GitHub (repo ).
⚔️ Challenges I ran into
Local → Netlify deployment pains: The biggest challenge was moving from a local Vite dev server to a production build on Netlify. I had to debug several issues:
Incorrect build command and publish directory (npm run build, dist/).
Netlify’s Node version mismatch with my local environment.
Single-page app routing (404 on refresh) — fixed with _redirects or netlify.toml.
Asset optimization to reduce large bundle sizes.
Balancing style vs usability: Re-creating Persona 5’s chaotic UI without overwhelming users.
Mobile animation performance: Getting layered transitions to run smoothly on lower-end devices.
Accessibility: Maintaining color contrast and readable typography inside such a bold theme.
🏆 Accomplishments we’re proud of
Faithfully recreated the Persona 5 look while keeping it functional.
Learned to deploy a full React + Vite app with zero backend dependencies.
Achieved near-perfect Lighthouse scores for performance and accessibility.
Created a truly personal, immersive portfolio that reflects my design vision.
📚 What we learned
How to build production-ready Vite apps for Netlify (publish paths, environment variables, and caching).
How to pin Node and npm versions to prevent build inconsistencies.
The importance of SPA routing setup (_redirects or netlify.toml fixes).
Image compression, code-splitting, and lazy-loading to keep performance high.
How much thoughtful animation and transitions can enhance storytelling in UI design.
🚀 What’s next for My Portfolio (P5 Style)
Add a “Social Link” system — live GitHub/LinkedIn integration.
Implement optional background music with mute and volume controls.
Explore React + Three.js to create animated 3D character cards.
Package the UI as a template so others can create their own Persona-inspired portfolios.
Built With
- css
- framework:
- icons:
- language:
- lucide
- react
- tailwind
- typescript
- vite
Log in or sign up for Devpost to join the conversation.