A preliminary sketch of my website done in the design phase

This website is a portfolio of my work. It's built with Nuxt.js and Tailwind CSS, and hosted on GitHub Pages. It's a work in progress, and I'll be adding more projects as I complete them. I'm using it to play around with new technologies and ideas, as well as to share my work with others.

Project Brief

I wanted to create a simple but effective portfolio website to showcase my work and experiments with web technologies. The key requirements were:

• Is easy to learn more about me
• Looks good
• Easy to maintain and update
• Modern tech stack to enable experimentation
• Is easy to build on

• Resume
• Work experience
• Projects in article format (i.e. narrativizing motive, process, results, instructions for people to build on it, somewhere between a lab report and instruction set)
• About me section (interests like future of food, machine learning, industrial design, etc.)
• Stuff I'm thinking about (things that have inspired me, things that I'm curious about, etc. Can add non coding media or link to other people's work. Help situate myself re: other people's work)

• Potential employers
• Other software engineers
• Friends
• Family

Design

The design process started with research into other personal websites, and taking notes on what I liked. I followed up with sketches and wireframes using my iPad to establish the core layout and navigation structure. Key design decisions included:

• Simple, straightforward, mobile and desktop friendly
• Single-page application with client-side routing
• Consistent header with navigation menu
• Simple color scheme with accent colors for different sections
• Responsive grid layout for content
• Blocky, bold elements
• Large images
• Serif font
• Animation/transition effects on scroll
• Clear visual identity (commits to the bit)

Implementation

The website was built using:

• Nuxt.js 3 for the framework
• Vue 3 with Composition API
• Tailwind CSS for styling
• GitHub Actions for CI/CD
• GitHub Pages for hosting

Ongoing Development

Current focus areas include:

• Mobile optimization
• Dark mode implementation
• Content expansion across all sections
• SEO improvements