Interview

🛠️ Skills I Used to Build My Portfolio

💡 Why I Built My Portfolio

I built my portfolio to showcase actual projects that I'm proud of - not just have my few pinned GitHub repos speak for me. A repository list doesn't convey design decisions, problem-solving, or the full scope of what I can do. I wanted a single place that presents my work, experience, and skills with the context they deserve, while also serving as a project itself - demonstrating my frontend abilities, attention to accessibility, and care for performance and SEO in a way a resume simply can't do.

🔧 How I Built My Portfolio

Built with Astro 5 and Tailwind CSS 4, using React islands for interactive pieces like the contact form and GitHub contribution heatmap. TypeScript throughout. I used Sharp for AVIF/WebP image optimization and GSAP for timeline animations. The hero section uses a CSS shape-outside float with a silhouette PNG so text content wraps naturally around the mascot illustration rather than sitting in rigid columns. Navigation is enhanced with spacebar keyboard shortcuts - pressing space snaps you through sections and horizontal scroll panels, making the site feel like a presentation. I also built in optional sound effects tied to UI interactions - button hovers, theme toggles, and section transitions - with a user-controlled toggle to keep it accessible. SEO is handled with JSON-LD structured data, Open Graph, and IndieWeb microformats. Deployed on Railway with gzip compression middleware. The data layer is fully separated so content changes never touch markup.

🧗 Challenges in Creating My Portfolio

The biggest challenge was the animation system. I wanted scroll-driven letter-by-letter wave effects, parallax on decorative shapes, cascade reveals, and timeline-tracking - but all of it had to gracefully degrade. Supporting multiple theme modes (normal, high-contrast dark and light), a manual animations toggle, AND supporting prefers-reduced-motion meant every animation needed a clean off-state. Getting the hero's CSS animation to survive toggling animations on and off was particularly tricky! Scroll-snap also introduced headaches - with mandatory snapping, every section needs to fit within the viewport, but device viewport heights vary wildly (mobile browser chrome, tablet orientations, ultrawide monitors). A section that fits perfectly on a 900px-tall screen overflows on a 700px one, and mandatory snap won't let you scroll through the overflow.

✅ How I Overcame Those Challenges

I built a centralized data-animations attribute on the document root that every animation checks before running. CSS rules force visibility on animated elements when disabled, and each section listens for an animations-change event to cleanly re-init or tear down its scroll observers. For the hero title, I used JavaScript to restart CSS animations via a forced reflow when toggling back on. For the theme modes, I isolated high-contrast styles to override the neon aesthetic with clean black/white palettes. For the snap-scroll viewport issue, I focused on limiting complexity within each section - keeping content concise, using collapsible panels where content could grow tall, and scoping scroll-snap exclusively to the homepage so subpages with longer free-flowing content aren't locked to a single snap point.

✨ Where I Found Inspiration

80's arcade carpet patterns and neon signage. I wanted the site to feel like walking into a retro arcade - glowing neon accents (cyan, pink, purple, orange) against deep dark purples, floating geometric shapes (triangles, diamonds, circles, zigzag lines), and glass-morphism containers with backdrop blur. The mascot portrait grounds it as a personal space rather than a pure design exercise. Fonts are Inter for readability and JetBrains Mono for code elements, keeping it professional underneath.

📚 What I Learned from Building My Portfolio

Astro's islands architecture taught me how much JavaScript you can avoid shipping while still having rich interactivity where it counts. I deepened my understanding of Intersection Observer patterns for scroll-driven animations, the nuances of CSS animation fill-modes and how they interact with class-based state, and the IndieWeb stack (IndieAuth, h-card microformats, rel="me" verification). I also learned that accessibility shouldn't be an afterthought and can help shape solid architectural decisions.

🔮 Future Plans for My Portfolio

I've considered a blog section using Astro's content collections with full BlogPosting structured data (the schema is already templated). I want to integrate the interactive terminal component that's currently stubbed out and expand the /now page with live data. I'm also planning to connect the GitHub heatmap to live API data instead of generated data, and improve Core Web Vitals scores on mobile by further reducing main-thread animation work (though I'm currently in the green across the board).