I don’t know if I will ever be truly happy with my portfolio. I tend to look at a lot of other people’s portfolios for inspiration or to see best practices, and it creates this cycle of feeling like anything I put together isn’t good enough.
I ended GA by building a basic portfolio using Skeleton CSS and HTML and CSS. It’s very basic, but for having thrown it together in about a week using a very limited framework, I was pretty happy with it. You can still see it here: http://stephrinehart.com/classic
When my program was over, I was determined to know more about ReactJS. The easiest way for me to figure out how components interact with each other was to build a static portfolio site. I’d be lying if I said I didn’t learn a lot during this process. And not just about components… I had a hard time deploying it to my website, thanks to the white screen of doom.
But I didn’t love either of those. The first wasn’t exactly what I was looking for and the other was too complex to build and too simple in appearance. Updating a static React portfolio wasn’t going to be fun, especially with the layout I went with – a sticky bottom navbar.
So I went looking for another option, something fast that can be easily access a content API so I can quickly, easily, and without much fuss, add to the portfolio content.
I settled on using GatsbyJS, and to use a headless CMS, DatoCMS, for my content. This affords me the ability to create a layout in React and feed in content from a CMS. The DatoCMS website has a short run down of the JAMstack:
JAM stands for JavaScript, APIs and Markup. This is just a funny acronym to explain a simple concept: your website is composed only of static HTML pages with JavaScript on top that interacts with external APIs.
One of the problems I have with just accepting my portfolio is that I won’t break it out in stages. I always want it to be perfect the first time and don’t plan for additional improvements – which is just silly. I wanted to give myself a project timeline to meet.
I wanted to hit MVP and then set stretch goals.
With all that in mind, let’s move on to where I went next: Defining my MVP (minimal viable product).
My new portfolio must:
- use DatoCMS to read in content using graphQL (even if it’s just static and not dynamic at the time of push),
- Include the following: Social links, about section, resume, projects, skills,
- Have consistent branding and styling,
- Be all on one page,
- Have web accessible fonts, alt tags for images, and other accessibility requirements.
What are my stretch goals?
- SEO via react-helmet,
- Accessibility updates,
- Use next-gen images instead of .png,
- Improve mobile responsiveness,
- Is it possible to read in dynamic content without a full build and upload, incremental builds? Webhooks?,
- Include styling updates that utilize JavaScript,
- Add resume in-line with layout instead of as attached doc,
- Improve overall styling,
- Add more details to project section,
- Fix your dang portfolio projects.
So there you have it – An MVP and some stretch goals for myself! And I can’t believe I’m going to say this, but I actually hit MVP last night:
Post Notes:
- I want to credit my fellow bootcamp grad, Doug Leinen, for bringing the JAMstack to my attention, which got me looking into Gatsby in the first place. Doug is truly the MVP (most valuable player in this instance) of our cohort. He’s always willing to help someone figure something out, and he’s super talented! Go hit him up!
