Portfolio System · Personal Brand · Static Site
Wyatt Spicer
Portfolio
A hand-coded portfolio system that organizes web, UX, 3D, and art/AV work without flattening the personality of each project.
Overview
The portfolio is not just a container for the work. It is one of the projects.
This portfolio was designed as a public system for multidisciplinary work: UX research, front-end development, 3D modeling, live media, visual experiments, and client-ready web production. The challenge was not just making a nice homepage. The challenge was making different kinds of work feel connected without making them feel identical.
The site uses a coded personal-brand mark, a spark-pointer interaction, a case-study library, category pages, resume links, contact flow, smart navigation behavior, metadata, sitemap support, and responsive layouts. It has to serve recruiters, professors, clients, collaborators, and people who only look at one page.
A portfolio should feel edited, not sanitized.
Core design insightThe final direction keeps the site structured enough to be evaluated professionally, while still letting the work keep its weirdness, specificity, and visual range.
Brief
The site needed to make a multidisciplinary practice legible.
A single-discipline portfolio can be simple: one audience, one type of artifact, one proof format. This site has to explain why a medical-practice website, a car-buying UX capstone, a South Padre decision engine, a keyboard product concept, 3D modeling decks, and reactive media experiments all belong to the same person.
The site could become a pile of unrelated projects, or worse, a generic portfolio template that makes the work feel interchangeable.
The structure separates disciplines while using shared navigation, case-study pacing, footer identity, and launch polish to hold everything together.
Information Architecture
The structure had to support both skimming and deep reading.
The top-level navigation gives users a quick way to understand the range: Web, UX, 3D, Art & AV, About, and Contact. Each section can stand on its own, but the case studies give deeper proof when someone wants more than a thumbnail.
1. First impression
The homepage establishes the cross-disciplinary identity and routes users into the strongest work quickly.
2. Category scan
Section pages let people browse by discipline without needing to read every case study.
3. Proof layer
Case studies explain process, decisions, constraints, and outcomes in a format closer to professional review.
4. Contact path
The About, resume, and Contact pages provide the practical next steps after the work earns interest.
Design System
The identity needed to feel coded without becoming cold.
The updated system borrows the rigor of recent client-site work but translates it into a personal voice. The navy, warm paper, olive, code-style name mark, and pointer spark create a technical identity that still feels handmade.
A generic black-and-white UX portfolio, a maximalist art site with no hierarchy, and a sterile agency-style template.
A structured personal system with editorial pages, clear project cards, coded signature details, and enough visual texture to feel like the work belongs to a person.
The footer signature matters because it turns a tiny production detail into a brand moment. <WYATT_SPICER_/> reads like authorship, not just a copyright line.
Case Study System
The long-form pages needed more than screenshots and labels.
The case-study direction is built around decisions: what problem the project solved, what the constraints were, what changed from the original idea, and what the finished version demonstrates. That format is more useful than a gallery because it shows judgment.
The strongest pages explain not just what was made, but what had to be protected: patient trust in AIM, financial confidence in GoCapital, real-time usefulness in Tiki Tommy, restraint in Keyboard Board, and personality in VisitSPI.
Build
The site is intentionally static, inspectable, and deployable.
The portfolio uses hand-coded HTML, CSS, and JavaScript. That keeps the site lightweight and makes the work easy to audit. The contact form is wired for Netlify, the sitemap and robots file support indexing, metadata is present, and the pages avoid unnecessary application complexity.
Production Standard
The interface has to make the range feel intentional.
The production layer supports the content instead of becoming the content. Links, mobile layout, contact flow, metadata, and motion settings are treated as part of the reader's experience because small failures can make strong work feel careless.
Contact Flow
The practical end of the portfolio matters as much as the visual first impression.
A portfolio can look strong and still fail if the next step is unclear. The contact page, resume links, social links, footer structure, and case-study CTAs form the conversion path for the site. They let a recruiter download the resume, a client reach out, or a collaborator understand how to continue the conversation.
The contact flow also protects credibility. The form needs real labels, sensible required fields, hidden honeypot behavior, and a success path. Resume links need to point to the same current PDF. External links need to open intentionally and avoid dragging users away without warning.
Takeaways
The portfolio works best when it explains range without apologizing for it.
The central design problem was not choosing between art, UX, web, and fabrication. It was building a system where those categories can sit next to each other and still feel intentional. The site is strongest when it treats the range as a feature: design judgment applied across different media.
That is also why the site itself belongs in the case-study library. It demonstrates the same skills it claims: structuring information, writing for context, building responsive pages, handling metadata, wiring forms, and making visual identity decisions that serve the content.
The question this project answers.
How do you build a personal portfolio that can hold client websites, UX research, 3D objects, and experimental media without turning into a generic template?