Portfolio / Project
Static serving my experience, accomplishments and ideas
Goal: To create a site that quickly showcased projects I've worked on, articles I've written and ideas I'm formulating
Career Transition
My previous portfolio was focused on my design skills and work history, and it was built using Wordpress and Elementor (you can see an archived version here). I decided to challenge myself this time around and focus on a development portfolio that was hand-crafted and used modern tools like Gatsby, a Headless CMS and Continuous Integration.
The Design Process
Using Figma, I designed out my initial screens. My goal was to put my experience first over any kind of flashy elements. Since my audience is hiring managers or CEOs, I knew their time was limited, so I wanted to put my experience first. If they wanted to explore further, then that was there also. I was really inspired by sites that are part resume, part storage shed for ideas. Conciseness was the aim. I would have plenty of time to explore creative outlets in other projects, but I wanted my portfolio just to be a shelf for these things.
Race to MVP
I had very tight deadline which was spurred on by my course at UCSD. While I had plenty of ideas about what I wanted to add, I also had limited time to get a working site into place. Because of time constraints, I wanted to build a system that was easy to add features into. I did have to put some features from the design on the back-burner as the crunch got closer, but since the site is built with modularity in mind, developing those additional elements should be easier to integrate.
The Stack:
I wanted a tech stack that was modern and which would challenge me to step out of the Wordpress eco-system. Luckily there are many powerful tools out there. I especially wanted speed. So I decided to go for a static site.
Gatsby (static site generator): Gatsby is React based and fast. It can pull data from many sources via GraphQL and compile it all into pages that can be statically served. Making for some blindingly fast sites. While it took me some time to wrap my head around its methods at first, Gatsby's power becomes evident when I tested it against the speed of other sites I've built. This site is fast! Here's my lighthouse score.
GraphCMS GraphCMS was super simple to setup and to get a schema constructed. Granted, my needs weren't overly complex, but I was able to go from sign-up to integration with my site within an hour. Because it's natively GraphQL, GraphCMS is straightforward to query. You can explore the data GraphQL tree right in your content view and then use that to help build out your queries in Gatsby.
SASS/SCSS Organization of components. While I've been doing CSS for years, I had really never delved deep into SASS. What a shame! I've found it excellent for organizing CSS into something manageable for larger projects. The ability to compartmentalize components with their styles helps a great deal in keeping a project in order. There are a few flaming hoops to jump through to get SASS working with Gatsby though.
Continuous integration with Netlify with Github integration . Ok, now this is cool. I use Netlify to build and host my live portfolio. The basic process is, I'm working on a dev branch of my portfolio and when I'm done working there, I can merge it into my main branch. This triggers Netlify to first build a preview before the merge so I can check for errors, then if all looks good I complete the merge and Netlify builds the live site. I can also trigger a build from inside GraphCMS! Pretty slick.
The Future
Creating the portfolio has been an excellent learning experience in many ways, and fun. My next steps with it will be adding a digital garden and some of the articles I've written.
