# bchiang7/v4

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/bchiang7-v4).**

8,258 stars · 4,226 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/bchiang7/v4
- Homepage: https://v4.brittanychiang.com/
- awesome-repositories: https://awesome-repositories.com/repository/bchiang7-v4.md

## Topics

`gatsbyjs` `personal-site` `styled-components`

## Description

This is a developer portfolio site built with Gatsby, designed as a single-page website to showcase a developer's projects, experience, and personal brand. The site is powered by Gatsby's static site generator, which uses a GraphQL data layer and file-based routing to produce an optimized static build for deployment on any static hosting service.

The visual theme is controlled entirely through CSS custom properties, with a centralized set of variables for navy, slate, and accent colors that can be edited to customize the site's appearance. The user interface is constructed from reusable React components composed in a hierarchical structure.

The project provides a complete foundation for building and deploying a polished developer portfolio, with the ability to adjust the color palette by modifying named CSS variables.

## Tags

### Content Management & Publishing

- [Gatsby](https://awesome-repositories.com/f/content-management-publishing/static-site-document-generators/static-site-generators/gatsby.md) — Builds a React-based static site using GraphQL data layer and webpack bundling for optimized production output.
- [File-Based Routing](https://awesome-repositories.com/f/content-management-publishing/file-based-routing.md) — Creates page routes automatically from the file structure within the pages directory at build time.
- [Static Site Generation](https://awesome-repositories.com/f/content-management-publishing/static-site-document-generators/static-site-generators/static-site-generation.md) — Builds a fully static production site from a Gatsby project for local preview and deployment.
- [Gatsby](https://awesome-repositories.com/f/content-management-publishing/static-site-document-generators/static-site-generators/static-site-generation/gatsby.md) — Builds a static site with Gatsby, optimized for performance and deployable to any static hosting service.

### Software Engineering & Architecture

- [Developer Portfolio Sites](https://awesome-repositories.com/f/software-engineering-architecture/portfolio-showcases/developer-portfolio-sites.md) — Displays a developer's projects, experience, and personal brand in a polished, single-page site. ([source](https://cdn.jsdelivr.net/gh/bchiang7/v4@main/README.md))
- [Developer Portfolio Sites](https://awesome-repositories.com/f/software-engineering-architecture/portfolio-showcases/one-page-portfolio-templates/developer-portfolio-sites.md) — Provides a single-page website for showcasing a developer's projects, experience, and personal brand.

### User Interface & Experience

- [React Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components.md) — Builds the user interface by composing reusable React components in a hierarchical structure.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Uses CSS custom properties for navy, slate, and accent colors, enabling easy visual theme customization.
- [CSS Custom Property Bindings](https://awesome-repositories.com/f/user-interface-experience/styled-properties/css-custom-property-bindings.md) — Controls visual styling through CSS custom properties defined in a centralized theme file.
- [Theme Customization](https://awesome-repositories.com/f/user-interface-experience/visual-theme-configurations/visual-themes/theme-customization.md) — Adjusts a site's color palette by editing named CSS variables for navy, slate, and accent tones. ([source](https://cdn.jsdelivr.net/gh/bchiang7/v4@main/README.md))

### Web Development

- [Build-Time GraphQL](https://awesome-repositories.com/f/web-development/graphql-clients/data-layers/build-time-graphql.md) — Queries site metadata and content through a unified GraphQL schema during the build process.

### Part of an Awesome List

- [Portfolio Templates](https://awesome-repositories.com/f/awesome-lists/devtools/portfolio-templates.md) — React-based portfolio using Gatsby and styled-components.