See what's launched

The next gen Gatsby is here Performance, developer velocity, and scaling to meet Enterprise needs - See what’s launched

Sign Up for Free

Powering Up Portfolios with Gatsby

Debra Combs
April 24th, 2020

In our recent webinar Getting Started with Gatsby: Building Your Portfolio Site, Tiffany White and Nathan Leon described how using Gatsby transformed the process of building their portfolios. These days, portfolios are far more than just "Resume 2.0" or the post-business-card business card. Modern portfolios showcase skills developers are passionate about, like animation or illustration, while adding to their marketable skill-sets.

Portfolios are key to landing that dream job, and both Tiffany and Nathan were building their portfolios to pursue new better-fit positions that reflect their passions. Tiffany is a front end web developer, instructor at egghead.io, and an extensive blogger. Nathan is a front end engineer in Washington DC and is passionate about CSS, React, and Gelato.

Old-School Portfolios: Slow and Bland

For years the portfolio-building experience for most devs is best described as tedious and slow. Even worse, for developers who don’t also happen to be designers, the results could turn out looking unfortunately bland or even a bit slap-dash despite many hours of invested effort.

“My original portfolio was not something I could look at and feel proud of,” Tiffany says. Before transitioning to Gatsby, she continues, her portfolio wasn't eye-catching: the design was little more than a landing page with all her links, a small animate library, and her logo. She knew she could make something better, but wasn’t completely sure how. For her new portfolio site, Tiffany's goals included showcasing her blog posts, her projects, and her code repositories through expressing a style that was all her own. As a prolific blogger, though, Tiffany also needed her design to appeal to a wide audience of developers and associated IT professionals. Ultimately, she says, “I wanted something easy to set and also customize for someone who isn't a designer”—but that would still convey her brand.

Like Tiffany, Nathan's portfolio goals included an easy-to-customize design with distinctive style. He also needed it to come together quickly and easily because it was a key component for his job search. To help things go quickly, Nathan says, he wanted to work with familiar tools.

Portfolio builds made fast and easy

The tools Nathan particularly sought to use were React and Emotion, and he wanted to work in a component architecture. Sure enough, Gatsby's extensive plug-ins included Emotion. And Gatsby, running on React, does all the tweaking for optimized performance, like code splitting and bundle optimization. Meaning that Nathan’s portfolio would still have really fast load times, even for people on mobile phones or with bad connections. Nathan found Gatsby’s hot reloading feature especially useful, because he could view his changes live. "It was incredibly easy to just build my components, and then see the immediate results," he says. This is the magic of static rendering: as soon as it outputs a site, Gatsby outputs the static link as well. “All this allowed me to focus on making a portfolio that really stands out instead of worrying about optimizing the site,” Nathan reports.

Nathan's initial reason for selecting Gatsby, though, was the easy-to-follow and extensive documentation. Within 30 minutes of starting the tutorial, he was confident in using Gatsby. Then, he says, the helpful related tutorial on using Netlify had his site running and deployed in about 30 more minutes. Even getting the SSL certification only took about an hour: “Overall, it was crazy easy," Nathan says: The entire process of building and deploying the portfolio took him around 8 hours over a weekend.

Like Nathan, Tiffany appreciated the familiarity of the stack: JavaScript, React, GraphQL. Compared to Jekyll, Tiffany found Gatsby to be a "fast, flexible, and extensible" static site generator. In terms of process, pairing Gatsby with the Contentful CMS let Tiffany skip the slow "push and pull" of working from the command line. Instead, she says, she could "get something up and running right away." When it came to actually building her portfolio site, Tiffany also appreciated the built in supports, especially the "increasing selection of starters," as well as the many plug-ins available to handle just about any functionality she could desire.

Not just easy, but eye-catching

Tiffany is now using her newly rebuilt (and eye-catching) site to network with other developers and also as part of her job search. Ultimately, she says, "The Gatsby starter kit and Contentful were the easiest and quickest way to showcase the work that I've already done—freeing up more time to focus on my current main projects.”

Tiffany White developer portfolio landing page

Still enthralled with how fast Gatsby websites load, Nathan used the webinar to showcase his portfolio’s speedy performance. He ran two real-time audits on his portfolio site using a simulated fast 3G network: a Lighthouse audit that returned a 97 in performance, and an Applied audit that returned a 94. “These speeds are incredible,” Nathan says.

Nathan's new Gatsby-powered portfolio also helped him achieve his ultimate goal: he now is a front end engineer at Tagflix. During his interview, Nathan was told that one of the reasons Tagflix decided to interview him was because his portfolio stood out. “I owe some of that to Gatsby,” Nathan says, “because it made building so easy."

His final takeaway?

I could not speak any more highly of my experience using Gatsby for the first time. It was incredibly positive, from start to finish.

Share on TwitterShare on LinkedInShare on FacebookShare via Email

Product Manager, Writer, Gamer, and lover of laughter.

Tagged with Case Studies, portfolio-siteView all Tags

Talk to our team of Gatsby Experts to supercharge your website performance.

Contact Gatsby Now
© 2022 Gatsby, Inc.