Personal Portfolio Website
My first full portfolio website built to showcase projects, experience, and design work while serving as a foundation for future freelance web development.
Project overview
A&R Design is my personal portfolio website built to showcase my technical projects, design work, and professional journey through an interactive and visually engaging experience. The site was created as my first dedicated portfolio platform and serves as a foundation for presenting my work to employers and potential freelance clients. The website was built using React, TypeScript, and Tailwind CSS with component-based architecture to keep the layout scalable and maintainable. It features animated SVG elements, Framer Motion transitions, and a polaroid-style photo gallery to create a more personal and interactive storytelling experience. Key sections include an About page, a portfolio section for projects, a resume layout highlighting experience and skills, and a contact page with an integrated form. One of my goals with this project was to design a site that balanced technical structure with thoughtful visual design. Accessibility, responsive layout, and clear user navigation were key priorities throughout the development process. This version of the portfolio was built primarily through my own development process with minimal AI assistance, focusing on understanding the underlying implementation of each component and interaction. One major improvement I plan to implement next is connecting the site to a backend CMS so that new projects, images, and updates can be added dynamically without manually modifying the codebase.
Problem
I needed a professional portfolio website that could effectively showcase my technical work, design abilities, and personal story while also serving as a potential landing page for freelance web development opportunities.
Approach / process
I approached the project by designing a modular, component-based React architecture that would allow the site to grow as I added new projects and content. I focused on creating a clean and responsive layout while incorporating subtle animations and interactive elements to create a more engaging user experience.
Implementation details
The site was built using React and TypeScript with Tailwind CSS for styling and layout. Framer Motion was used to create page transitions and animated components, while reusable UI components allowed the portfolio and resume sections to remain consistent across the site. The project gallery and personal sections were designed to highlight both technical projects and personal storytelling elements.
Gallery
Related projects
CineNiche Streaming Platform
A full-stack movie discovery platform built during BYU’s INTEX 2025 that enables users to browse, rate, and organize films while receiving personalized recommendations through content-based and collaborative filtering.
Interactive Model
An interactive web visualization of the Christlike Leader Model created with the Sorensen Center, allowing users to explore leadership principles through a dynamic hover and click interface.
