Building a Modern Portfolio with Gatsby
Why Gatsby
After years of working with React and Node.js, I wanted a portfolio site that was fast, maintainable, and fun to build. Gatsby offers an incredible developer experience with its file-system routing, GraphQL data layer, and plugin ecosystem.
Dark/Light Mode
One of the first features I implemented was a theme toggle. The implementation is straightforward:
- A React Context manages the current theme state
- CSS custom properties define colors for each theme
- The
data-themeattribute on<html>switches between them - The preference is persisted in
localStorage
This approach keeps the theming logic clean and avoids CSS-in-JS overhead.
Blog with MDX
For the blog, Gatsby's MDX plugin allows me to write posts in Markdown with embedded JSX components. Each post is a .mdx file in src/posts/ with frontmatter for metadata.
The File System Route API ({mdx.frontmatter__slug}.tsx) automatically generates the blog post pages without needing a manual gatsby-node.js setup.
What's Next
I plan to add more content here about Laravel, React Native, cloud architecture, and lessons learned from 14+ years in software engineering.