Case Study
Sheryl Morgan Kausek
Independent Professional
Personal project
React, Gatsby
Professional identity, résumé, contact
Goal
My previous web portfolio was out of date and reflected an earlier phase of my career. I wanted to create a new site that represented my current professional identity, experience, and resume while giving me a flexible foundation for adding projects and content over time.
Website overview
- A text-focused professional site
- Built with React and Gatsby
- Custom responsive navigation
- MDX support
- Integrated contact form
Design approach
The site was intentionally designed as a simple, content-focused portfolio. I used a personal photograph as the primary visual element and kept the initial experience to a single page so the focus remained on my professional experience and work.
The design uses typography, spacing, and a restrained layout to organize a substantial amount of resume content without making the page feel overwhelming.
React & Gatsby implementation
I had spent several years working on an internal documentation platform at IBM built with React and Gatsby. While that project was inherited by my team, this was my first opportunity to build a Gatsby site from the ground up.
I used the project to strengthen my understanding of the framework’s structure and build process while applying patterns and practices familiar from my professional work.
Content structure
I created a custom homepage and 404 page and configured the project to support MDX pages, giving me a foundation for expanding the site beyond the initial one-page portfolio.
I also created a custom confirmation page that users reach after submitting the contact form, using it as an opportunity to verify that the MDX setup was working as intended.
Project structure
Components
header.jsx— Site header and homepage navigationfooter.jsx— Footer with an expandable contact formmobileMenu.jsx— Responsive navigation with SVG icon and toggle interaction
Selected files under pages/
index.js— Homepage and primary portfolio content404.js— Custom not-found pagethanks.mdx— Form submission confirmation page
Responsive considerations
The site was designed and tested across desktop and mobile layouts, with responsive navigation and flexible page dimensions to accommodate different screen sizes.
What I learned
Although I had worked with React and Gatsby for several years professionally, my experience had largely been with an existing codebase that my team inherited. Building this project from scratch gave me a better understanding of how a Gatsby application is structured, configured, and developed from the ground up.
It also gave me an opportunity to apply my professional React experience to a project where I controlled the architecture and implementation decisions from the beginning.
Tell me about your project.
Send me a few lines about your work, what you need, and where you’re starting.
I’ll take a look and get back to you personally.