Hero's Chronicle

Hero's Chronicle: An RPG-themed dev portfolio where skills are stats, projects become quests, and my career unfolds as an epic timeline adventure. Built w/ Node.js + Tailwind.

Comment

Inspiration

I wanted to create a portfolio that stood out in the Portxfolio hackathon - not just another resume site, but an interactive experience. The RPG theme emerged from my love of games and desire to make technical skills visually engaging.

What it does

Hero's Chronicle transforms my developer journey into an adventure. Visitors explore:

Skills as RPG character stats

Projects as completed quests

Career timeline as a hero's progression All wrapped in a responsive, animated interface.

How It Works

  • Backend: Node.js/Express server with EJS templating
  • Frontend: Tailwind CSS for responsive styling
  • Interactive Elements:
    • Animated timeline with scroll-triggered effects
    • RPG-style skill visualizations
    • Thematic hover states throughout

How we built it

Built solo using: ▸ Frontend: Tailwind CSS + JavaScript animations ▸ Backend: Node.js/Express with EJS templating ▸ Design: Custom RPG UI with consistent theming

Challenges we ran into

  1. Implementing complex animations without libraries
  2. Making the timeline responsive on all devices
  3. Balancing fantasy aesthetics with professional content
  4. Debugging EJS template rendering issues

Accomplishments that we're proud of

Created a fully functional portfolio that: ✓ Showcases both technical and creative skills ✓ Got 100+ GitHub stars during development ✓ Proves I can build full-stack projects solo

What we learned

▸ Advanced Tailwind configuration ▸ EJS template organization ▸ Performance optimization for animations ▸ How to tell technical stories visually

What's next for Portxfolio

  1. Add dark/light mode toggle
  2. Build a CMS for easy content updates
  3. Expand mobile interactions

Built With

Share this project:

Updates