Product Lifecycle

My design/thought process for creating this website

Step 1: Why This Website?

"Normal" PowerPoint presentations are boring! I believe there's a better way to improve every experience (and presentation). And what better way to do this than to package it up in a beautiful website?

Step 2: List Requirements

Create a presentation
Show my Top 5 favorite blog posts
Write a new article which is easy to understand
Create a roadmap
Have fun and learn new things!

Step 3: UX Design

Before development, I wanted to form the layout for my site and create wireframes.

Wireframe Overview of this site

Homepage mimicking the Box Developer site

Roadmap

Presentation

Step 4: Presentation

I knew I wanted to create the slides with Reveal.js, as I've used it many times. In terms of the content, I wanted to pick a topic that I have not used before, so I could learn something new. I brainstored a few ideas (different products) but ulimately picked the one that I liked the most.

Step 5: Features & Flavor

Global
- Google Analytics so I can track my traffic.
- What happens when you hover over my Twitter handle?
Homepage
- Does this look familiar? It is based on the Box Developer site.
- Hover over the Cards to see a subtle animation.
About Page
- Check out how many hours I spend coding this website. It updates in real time based on my VSCode usage.
- Hover over my quote and see if anything goes off.
What Are APIs?
- Click on the Request Food button for an interactive animation.
My Top 5 Page
- Look at the fancy gradient borders of each blog post (which are embedded in the page).
My Roadmap
- Play around with the Kanban board, but your changes won't be saved.
This Page
- Why not click on the colorful images (way down below) for a fun time?
- While you're down there, see those arrows? They are virtually hand-drawn.

Step 6: Iterate

I always take an iterative approach to software development. I strongly believe in creating a prototype, then building on incrementally. When doing this, it's important to document progress and make everything easy to understand.

Clean Commits & Incremental Pushes

Clear, concise, and beautiful commit messages.

Incremental Progress

Here, we can see how this site was built over time.