Joshua Vargas Website

Project Name

Joshua Vargas Portfolio Website

Project Date

2026

Affiliation

Joshua VARGAS

Team

Joshua VARGAS, Code + Design + Sound

Joshua's Contribution

Web Development: front-end architecture (React, TypeScript), deployment automation
Design: UI/UX design, design system, brand identity
Sound Design: interface sound effects, music
Content: copywriting, project documentation
  • Portfolio Content
  • Web Development
  • UI/UX Design
  • Sound Design
  • Website
  • Digital Portfolio
  • Self-Expression
  • React
  • TypeScript
  • Tailwind CSS
  • Vite
  • Affinity Suite
  • Logic Pro
  • VS Code
  • Vercel

This website is meant to showcase my ability to integrate across my abilities in design, software development, information architecture, and sound design. This, of course, ties into my narrative - as a researcher and designer able to use multiple lenses in order to tell a story with better depth and clarity than possible with any single discipline.

background

This website was developed over a nine-month period, with the intention of using as many of my creative and technical skills as possible. Some of these skills, notably photography and sound design, do not necessarily have outlets in my professional work, but are abilities I intend to integrate in my own independent research and creative practice.

An earlier version of my website had been online since 2021, developed during my second year of university as support material for internship applications. While also a custom HTML5 site, it was built and hosted with Webflow, a no/low-code editor platform. As my career accelerated post-graduation, I quickly realised the limitations of no-code tools. Updating my website to show my current research work, engagements, and achievements required long, tedious periods of drag-and-drop design work. As a result, my website remained stagnant for much of 2024.

This earlier version of my website also categorised my projects into the arbitrary categories of 'Research + Design', 'Video Production', and 'Photography.' I received feedback that this categorisation did not adequately represent the breadth of my work.

Development started in March 2025. While initial tests were based on adapting a boilerplate template, I later decided to develop the website from scratch. Of course, my experience as a designer, coursework in Software Engineering, and early FCL research in planning support tools informed how I wanted to approach this problem. The focus was on creating:

  • a scalable architecture that could easily accommodate new project and CV entries while never breaking style;
  • a coherent and accessible user experience based on a cohesive visual identity and consistent information architecture;
  • a painless deployment experience where adding a new project requires running one script, leading to changes going live less than 5 minutes later.

A Brand Sheet was created for the project in June 2025, which defined the graphic design philosophy and specified the colour palette for both dark and light modes. In October, the Portfolio page grid system was fully developed. By November, the initial project pages were added and the first iteration of the website was launched.

The skeleton for the website was developed by hand as a way for me to determine the routing logic and ensure that the overall structure is something I am comfortable with manipulating. Each project is self-contained in a single .tsx file, and the site dynamically updates with every new project added. Subsequent feature additions were implemented with coding agents, with PR specifications and code reviews done by me, allowing for rapid iteration while ensuring maintainability and code quality. Harnesses used at the pre-launch stage include gemini-cli, Claude Code, and Codex. From 2026, AI agentic coding was done using the Claude Code and Opencode harnesses, leveraging inference providers with zero data retention (ZDR) policies through OpenRouter.

The website is deployed on Vercel, with a CI/CD pipeline that automatically deploys changes pushed to the main branch. This means that adding a new project only requires running one script to generate the .tsx file, and pushing the changes to GitHub, with the new project going live in less than 5 minutes.

A template based on an earlier version of this website's architecture has been open-sourced as the Sane Template, with naming inspired by my frustration at how many boilerplate templates on GitHub are either difficult to style or genuinely poorly designed with multiple conflicting styling paradigms. This template is now available on my GitHub.

Sane Template

gallery

Tap on a photo to expand it.

The brand sheet developed in June 2025, defining the visual identity.

related projects

code + design + sound © 2026 joshua vargas