Raquel M Smith

Raquel M Smith

Screenshot of a blog post on the Raquel M Smith website
  • es6
  • gatsbyjs
  • graphql
  • javascript
  • reactjs

This is my personal portfolio site, where I play with my favorite technologies and waste time pretending to be a designer.

The site is built with React as the Javascript library and GatsbyJS as the website framework. It’s an amazing combo that I’m super excited about.

Browse the code on Github.

Fun features

Full Progressive Web App support

The Raquel M Smith site is a fully functional progressive web app. You can go download it to your home screen right now! Aside from that cool bit, progressive web apps offer a lot of benefit to both site owners and site users.

  • Makes content available offline
  • Enables native app functionality from the browser, such as push notifications
  • Keeps your content in front of users
  • Fast & seamless browsing can increase time on site and conversion rates
  • Light-weight apps mean more people can download quickly

While the Raquel M Smith website does’t make use of things like push notifications (for obvious reasons), it easily could if there were business objectives behind them.

Mobile-optimized

Over half of all web traffic is mobile, so it’s incredibly important that sites are optimized for mobile first. Aside from offering PWA support, the Raquel M Smith website is designed to look and feel like a native app and feels right at home on small screens.

Mobile view of the Raquel M Smith website

Incredibly fast static content

Pages on the Raquel M Smith website are served up as static HTML files and only load the requisite parts right away, which means that they load incredibly fast. Other pages on the site are also prefetched as the user browses the page, which means that subsequent pages load nearly instantaneously.

It’s React!

React is one of my favorite libraries to build sites with. It makes compartmentalizing various parts of the app easy and logical. And JSX is kind of a dream – write code like you’d write your HTML? Add my JS functionality and CSS right in the same files? 😍

Headless CMS

Every content-based business needs a way to manage their content. While Gatsby sites can and do work with markdown files, that’s not an ideal way for content teams to create, edit, and manage content.

Headless CMS systems are a dime a dozen these days, so take your pick. For this site, I used WordPress for a few reasons:

  1. Much of my site content was already in WordPress
  2. While WordPress makes a rather poor front-end, it actually makes a rather good CMS
  3. WordPress powers many, many sites out there that could benefit from a faster, independent front-end – but moving to a different CMS isn’t ideal for many companies
  4. The WordPress REST API gives us nearly all the information we need, and adding the extra bits isn’t difficult to do