
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
Content:- 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)
Audience:- 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