This Website
A custom-built portfolio created to showcase my work in filmmaking and software engineering in a single cohesive experience. Rather than using a template or a website builder, I designed and developed the site from scratch using modern web technologies, allowing complete control over presentation, performance, and functionality.
Created Entirely by Damian Seals
Tech Stack
My Contributions
Designed the site's visual identity and user experience, developed the frontend using Next.js, TypeScript, and Tailwind CSS, implemented responsive layouts and reusable components, integrated video and image galleries, and deployed the application to production on a custom domain using Vercel.
Key Challenges
Designing a flexible project system
Supporting both film and software projects in a single reusable template.
This portfolio contains both film and software projects, each requiring different information and presentation styles. The challenge was supporting both project types while keeping a single reusable project page template and avoiding duplicating page logic . I solved this using conditional rendering and project-specific metadata, allowing the same page architecture to adapt to different content formats such as video previews, tech stacks, and project roles.
Video Preview Performance and Autoplay Behavior
Making video previews feel instant without hurting performance.
Browser autoplay rules, preload behavior, and network caching created inconsistent loading behavior across local and production environments, especially with multiple embedded videos. I optimized this using muted autoplay, preload="metadata", and lightweight preview encodes.
Dynamic Routing + Content Architecture
Creating scalable project pages using slugs.
I implemented dynamic routes using Next.js App Router and structured project data so pages are generated from a single source of truth. This made it easy to add new projects without touching page logic.
Development Highlights
Unified Project Data
Centralized project information into a shared data structure, making it easy to add new projects and maintain consistent layouts throughout the site.
{
slug: "website",
title: "Portfolio Website",
meta: {
tech: ["Next.js", "TypeScript", "Tailwind CSS"]
}
}Flexible Project Templates
Used conditional rendering and project-specific metadata to support both film and software projects within a single page architecture. Conditional rendering and project-specific metadata allow the same template to adapt to different content requirements without duplicating page logic.
{project.fullVideo ? (
<VideoPlayer />
) : (
<ImageViewer />
)}Reusable Components
Extracted repeated UI patterns into reusable components, reducing duplication and improving maintainability. This made it easier to expand the site while maintaining a unified design system.
<ProjectMeta meta={project.meta} />What I learned
Building and maintaining the site provided experience across the entire application lifecycle, from architecture and frontend development to deployment, troubleshooting, and ongoing maintenance. The project strengthened my understanding of Next.js, TypeScript, Git workflows, DNS configuration, performance optimization, and production hosting environments.