👻 Building a Haunted Portfolio with Kiro: A Kiroween 2025 Journey

Aarush Wasnik — Fri, 05 Dec 2025 21:05:38 +0000

👻 The Challenge

For Kiroween 2025, I set out to build something genuinely spooky: a Halloween-themed developer portfolio that would be memorable, polished, and actually terrifying. Not just dark colors and a pumpkin emoji — I wanted lightning flashes, ghost cursors, jump scares, and a Japanese horror girl lurking in the shadows.
The result? 17 distinct horror effects, a fully functional portfolio, and a development experience that felt like having a supernatural coding companion.

🎃 What I Built

The Haunted Portfolio features four themed sections:

The Summoning (Landing) — Parallax graveyard, blood moon, floating spirits, glitching text
The Séance (About) — Crystal ball bio reveal and tarot card skill showcase
The Graveyard (Projects) — Tombstone project cards that rise from the grave
Contact the Spirit (Contact) — An interactive Ouija board contact form

Plus global effects that haunt every page:

Ghost cursor trails
Random lightning
Blood drips
Eyes that follow your mouse
Optional jump scares 👀

🔮 The Kiro Difference: Spec-Driven Development

Instead of diving straight into code, I started with Kiro's spec system. This changed everything.

📜 The Three Sacred Documents

1. `requirements.md`

Every feature got a requirement ID:

5. Global Effects

REQ-5.1: Custom spooky cursor (skull or ghost)
REQ-5.2: Cursor trail with ghost particles
REQ-5.3: Toggleable jump scares
REQ-5.4: Flickering light effect

2. `design.md`

Architecture, color palette, component specs:

blood-red: #8B0000  
pumpkin-orange: #FF6600  
ghost-white: #F8F8FF  
midnight-black: #0D0D0D  
phantom-purple: #4B0082

3. `tasks.md`

A living checklist across 7 phases:

Phase 2: Core Effects System

[x] Task 2.1: GhostCursor component
[x] Task 2.2: ParticleSystem for fog/mist
[x] Task 2.3: Lightning flash effect

Because of this system, Kiro already knew the full vision before writing code.

👻 The Most Impressive Code Generation

The GhostCursor component blew my mind. One prompt produced this:

export function GhostCursor() {
  const { x, y } = useMousePosition();
  const [trails, setTrails] = useState<Trail[]>([]);

  useEffect(() => {
    const newTrail: Trail = { id: Date.now(), x, y };
    setTrails((prev) => [...prev.slice(-6), newTrail]);
  }, [x, y]);

  return (
    <div className="pointer-events-none fixed inset-0 z-[9999]">
      <AnimatePresence>
        {trails.map((trail) => (
          <motion.div
            key={trail.id}
            initial={{ opacity: 0.5, scale: 0.4 }}
            animate={{ opacity: 0, scale: 0.2 }}
            exit={{ opacity: 0 }}
            className="absolute"
            style={{ left: trail.x - 8, top: trail.y - 8 }}
          >
            {/* SVG ghost */}
          </motion.div>
        ))}
      </AnimatePresence>

      {/* Main cursor */}
      <motion.div
        animate={{ x: x - 12, y: y - 12 }}
        transition={{ type: 'spring', damping: 30, stiffness: 200 }}
      >
        {/* Glowing ghost */}
      </motion.div>
    </div>
  );
}

Mobile detection, physics, z-indexing — all correct on the first try.

🕷️ Agent Hooks: Automation with Personality

Accessibility Guardian

{
  "name": "Accessibility Guardian",
  "trigger": { "type": "onSave", "pattern": "**/*.tsx" },
  "action": {
    "type": "prompt",
    "prompt": "Review the saved file for accessibility concerns. Ensure animations respect prefers-reduced-motion…"
  }
}

Automatically ensured:

Reduced motion support
ARIA labels
Proper contrast

Spooky Commit Messages

{
  "name": "Spooky Commit Messages",
  "trigger": { "type": "manual" },
  "action": {
    "prompt": "Generate a Halloween-themed git commit message with emojis like 🎃👻💀🦇🕷️"
  }
}

Examples:

👻 Summoned the ghost cursor from the void
🦇 Lightning now strikes with double intensity

📜 Steering: No Repetition, Consistent Code

The coding-standards.md file used:

inclusion: always

Meaning every generation automatically followed:

Animation Rules

Always use Framer Motion
Respect prefers-reduced-motion
Smooth transforms
Creepy custom easing

Zero repetition. Zero mismatches. Perfect consistency.

🩸 The Creepy Details

👁️ CreepyEyes Component

Bloodshot eyes follow your cursor:

const angle = Math.atan2(mouseY - eyeRect.y, mouseX - eyeRect.x);
const distance = Math.min(eye.size * 0.2, 8);
const pupilX = Math.cos(angle) * distance;
const pupilY = Math.sin(angle) * distance;

Random blinking, random positions. Pure nightmare.

👧 HorrorGirl Component

A Sadako-style figure rises slowly from the bottom of the screen.

Long black hair
One glowing red eye
Fades away after 3–5 seconds

💀 JumpScare System

const triggerScare = () => {
  const delay = Math.random() * 45000 + 30000;
  setTimeout(() => {
    setIsActive(true);
    setTimeout(() => setIsActive(false), 400);
    triggerScare();
  }, delay);
};

But:

Off by default
Respects reduced motion
User-toggleable

The right balance between spooky and safe.

🌙 Accessibility in a Horror Site

Yes — it can be done.

const { reducedMotion, jumpScaresEnabled, soundEnabled } = useSpooky();

if (reducedMotion) return null;
if (!jumpScaresEnabled) return null;

Full reduced-motion support
Sound off by default
Jump scares opt-in
Keyboard friendly

🎯 What I Learned

Specs > Vibes Better structure = better AI output.
Hooks matter Accessibility checks on every save were priceless.
Steering eliminates repetition Say your standards once. Never again.
Context is everything The more Kiro understood, the better the generation.

🦇 Try It Yourself

Source Code:
👉 https://github.com/Ark2044/haunted-portfolio

Live Demo:
👉 https://haunted-portfolio.netlify.app/

Built with 🖤 and dark magic for Kiroween 2025.
This post is part of the Kiroween Hackathon — created with Kiro’s spec-driven development, agent hooks, and steering documents.

DEV Community: Aarush Wasnik