Modern web development with React, Gatsby, and Contentful.
With the need to build a new portfolio site I took advantage of the opportunity by trying to learn a few pieces of new web development technology. I improved my React and CSS Grid skills, learned about building "blazing fast" static sites with Gatsby, and how to retrieve data using GraphQL. My favorite part of building this portfolio site, was learning how to use Contentful to manage my content. More on that below.
Initial Concept with Sketch
Like many of my projects, I started with some messy sketching in my notebook to think through the content and layout. Once I had a general vision in place, I started some basic UI concepts in Sketch. After I had a solid direction set, I moved towards building and designing in the browser. My intent was to keep the site relatively straightforward with both the layout and the typography.
I wanted the work to have most of the visual focus and personality, rather than the site itself. Performance was also important. I wanted people to be able to quickly get a sense of each project and the kind of work I've done.
Dropbox Paper became a key part of our workflow at Adobe for documenting projects and managing timelines. I started the portfolio by organizing content there. Not surprisingly, remembering everything that happened over the past three years, gathering and sorting assets, and writing about the projects took several days. In the future I'll document projects throughout the process. Probably not though.
Contentful + Gatsby
Contentful is a "headless CMS," meaning that it's basically a back-end where you can input data and format data models however needed. There's no built-in output mechanism or “front-end UI” like you would find with Wordpress. The data on Contentful can be pulled into a website or application through their API.
Gatsby was a perfect addition to this. It's a framework that allows you to easily build fast, static websites using React. I was able to pull in my content through GraphQL queries to generate the static pages. This workflow would also be ideal for building sites with clients managing their content. If you're interested to learn more about how it works, check out this post on Gatsby and Contentful.
This was another opportunity to improve my React skills and get more accustomed to “thinking in components.” I improved my understanding of state and props, event handling, and the component lifecycle.
Not much to say here other than CSS Grid is awesome. This was my first experience building something using that approach. It makes creating layouts so much easier and enjoyable. Jen Simmons has fantastic videos on CSS Grid. This portfolio uses an eight column grid.
Of course I used an image from Adobe Stock by taking advantage of their fantastic first-month-free promo. What a steal! Great experience. Five stars.
Berkeley college campus
The type used for the site is Neue Haas Grotesk from Fonts.com. I was inspired by the Air Jordan Collection site's use of the same font. The font sizes were mostly determined by using a modular scale based on a 17px baseline grid.
I must admit that the typography on the post pages needs some work to achieve a vertical rhythm. However, time constraints left that pursuit as a future goal.
Deployment / Hosting
In the early stages of the project I was pushing out builds with Zeit's Now platform. After the initial setup, all it takes is entering “now” in the command line and a minute later the site is live. For the “production” builds, I've moved to Netlify. The combination of Contentful and Netlify is fantastic. Whenever I update my content, Contentful sends a webhook to Netlify, which triggers a new build of the site, making my changes live. I also monitor any potential usability and performance issues with Google Lighthouse.
Overall, I feel pretty good about the outcome. My biggest criticism would be that there's just too much content.
“Don't share all your work,” they said.
“Just show a couple of your best projects,“ they said.
“Okay,” I said. “Here's almost everything I've done in the past three to five years.”
Also, the way I'm displaying some of the work is not ideal for getting an up-close and large view. I think I'll add some interaction updates there soon.
I am however particularly pleased with the speed of the thing. I focused on performance quite a bit and Gatsby includes a lot of that built in. Something I struggle with is balancing having screenshots of work that are high quality, but aren't huge files that load slow and send too much data to people's devices.
Also, the Contentful back-end for the content is the best. I love how easily I can manage everything there. Hopefully, that will push me to consistently update the site and write new posts.
It wouldn't be a portfolio project if it didn't end with me being absolutely tired of looking at it. I don't hate it this time, but we need some time apart.
Update – December 9th
So much for taking a break.
Here's some changes I've made in the past couple days. Does anybody really care about this? 😅
Removing the Framer + Stock project from the 'Selected Work' section seems like an appropriate choice. While that's a project I'm proud of, it's not exactly a design project. It's more about development skills. For now, the focus on this site should be about design skills.
I moved the 2012-2014 and Resumè pages to the Other section on the navigation. The portfolio section needs more focus and simplicity.
The majority of the people that come to this site likely already have my resumè. Also, work from 2012-2014 was important for my development, but those sections are not a great indicator of what my experience and skill levels consist of today. They make for decent talking points instead.
I've added more specific Google Analytics tracking. The Page Analytics Chrome plugin is useful to see what links are being clicked more than others.
I'm even tracking how many times people click the banana on the homepage. Also, I got the random idea to have a Twilio service setup to send me a text message everytime someone clicks it. Yeah, maybe later. #ScopeCreep
This is something I expected.
I wrote a lot of content here. Some of it was just therapeutic. It felt good to recap most of what's happened in the past few years, but I see that a lot of the content needs to be tightened up and some sections need additional visuals to give better context to better communicate the full story.