Portfolio Websites

Software Engineering Portfolio Showcase: https://github.com/ivan-schutt/software-portfolio-showcase

Sound Design Portfolio Showcase: https://github.com/ivan-schutt/sound-portfolio-showcase

---

The Idea

I needed two distinct online presences — one to showcase my work as a software engineer and another for my sound design projects. Rather than using a template or a website builder, I designed and built both from scratch as full Next.js applications, sharing the same architectural foundation but with tailored content, color palettes, and feature sets.

• -Software Engineering Portfolio — ivanschutt.com — Dark theme with blue accents, project detail pages with image carousels and markdown content, tech stack tags
• -Sound Design Portfolio — ivanschuttlabs.com — Dark cinematic theme with violet accents, demo reel, video/audio modals with Vimeo, SoundCloud, and Spotify embeds

---

3D Hero Section

Both sites open with a full-viewport 3D scene built with React Three Fiber.

1 / 2

Post-processing includes Bloom and N8AO ambient occlusion. The particle cloud auto-rotates and responds to mouse movement with smooth interpolation. On mobile, the FBO resolution drops from 512x512 to 256x256 for performance.

---

Featured Works

The home page showcases featured projects in a responsive grid with GSAP ScrollTrigger parallax on thumbnails and hover lift/shadow animations.

1 / 2

The software portfolio links to full project detail pages with image carousels, while the sound portfolio opens video/audio modals with embedded players.

---

Project Pages

The software engineering site has dedicated project detail pages with tag-based tech stacks, image carousels with lightbox navigation, and markdown content that auto-embeds Vimeo and YouTube URLs as responsive iframes.

1 / 2

The sound design site organizes projects by category (Sound Design, Music Production, Audio Editing, Video Editing) with filterable gallery and modal playback.

---

Blog System

Both sites include a blog with posts managed through a custom admin panel. Content is stored as JSON in the GitHub repository and published through authenticated API calls — no database needed.

The markdown renderer is hand-rolled — no external parser libraries. It handles headings, fenced code blocks, tables, lists, bold/italic, links, images, and auto-embeds bare Vimeo/YouTube URLs as iframes. The sound portfolio adds SoundCloud and Spotify embed support for blog posts.

---

Admin Dashboard

A centralized administration panel for managing all site content. The admin authenticates with a token verified using timing-safe HMAC comparison, then accesses a split-pane editor with live markdown preview.

• -Blog Editor — Title, slug (auto-generated), category, date, excerpt, content with live preview, draft/publish toggle
• -Projects Editor — Full CRUD with collapsible media sections, image gallery with drag-reorder, Cloudinary upload integration
• -About & Social Links Editors — Direct editing of bio, skills, and social link configuration
• -Image Upload — Drag-and-drop with Cloudinary CDN hosting, MIME validation, 5 MB cap

Changes are committed directly to the GitHub repository via the GitHub Contents API, triggering automatic Vercel redeployment.

---

Contact & About

1 / 2

The contact form uses EmailJS for client-side email delivery with honeypot spam prevention and submission cooldown. Falls back to a mailto: link when EmailJS is disabled.

---

Shared Architecture

Both sites share the same core architecture:

JSON config files (src/config/)
    └── Repository classes (src/lib/repository.ts)     — typed, cached
        └── React components (src/components/)         — all 'use client'
            └── Pages (src/app/(portfolio)/)           — thin wrappers

Admin CMS:
    Browser → /api/admin/config/[resource] → GitHub API → repo commit → Vercel redeploy
    Image upload: Browser → /api/admin/upload → Cloudinary CDN

No database. No server state. All content is static JSON committed to GitHub. The admin panel provides a GUI to commit changes directly to the repository.

---

Page Transitions & Animations

• -GSAP Page Transitions — Timeline-based fade-out/slide-up before route change, fade-in/slide-down on new page
• -ScrollTrigger Reveals — Staggered entrance animations for cards, headings, and content sections
• -Parallax Thumbnails — Custom hook applies ±70px vertical movement on project card images during scroll
• -Framer Motion — Component transitions, modal animations, AnimatePresence for enter/exit

---

Security

Both sites are hardened for production:

• -Content Security Policy — Strict CSP with allowed sources for frames, images, and connections
• -Security Headers — HSTS (2-year max-age), X-Frame-Options DENY, X-Content-Type-Options nosniff, strict Referrer-Policy, restrictive Permissions-Policy
• -Admin API — Timing-safe HMAC comparison to prevent timing-oracle attacks
• -Rate Limiting — In-memory sliding-window limiter on blog API
• -Upload Validation — MIME type check and 5 MB file size cap
• -Iframe Sandboxing — All embedded content uses sandboxed iframes

---

Tech Stack