Back to rankings

bchiang7/v4

JavaScriptv4.brittanychiang.com

Fourth iteration of my personal website built with Gatsby

styled-componentsgatsbyjspersonal-site
Star Growth
Stars
8.3k
Forks
4.2k
Weekly Growth
β€”
Issues
20
5k
Sep 2018Apr 2021Dec 2023Jul 2026
Artifactsnpmnpm install v4
README
Logo

brittanychiang.com - v4

The fourth iteration of brittanychiang.com built with Gatsby and hosted with Netlify

Previous iterations: v1, v2, v3

Netlify Status

demo

🚨 Forking this repo (please read!)

Many people have contacted me asking me if they can use this code for their own website, and the answer to that question is usually yes, with attribution.

I value keeping my site open source, but as you all know, plagiarism is bad. It's always disheartening whenever I find that someone has copied my site without giving me credit. I spent a non-trivial amount of effort building and designing this iteration of my website, and I am proud of it! All I ask of you all is to not claim this effort as your own.

Please also note that I did not build this site with the intention of it being a starter theme, so if you have questions about implementation, please refer to the Gatsby docs.

TL;DR

Yes, you can fork this repo. Please give me proper credit by linking back to brittanychiang.com. Thanks!

πŸ›  Installation & Set Up

  1. Install the Gatsby CLI

    npm install -g gatsby-cli
    
  2. Install and use the correct version of Node using NVM

    nvm install
    
  3. Install dependencies

    yarn
    
  4. Start the development server

    npm start
    

πŸš€ Building and Running for Production

  1. Generate a full static production build

    npm run build
    
  2. Preview the site as it will appear once deployed

    npm run serve
    

🎨 Color Reference

Color Hex
Navy #0a192f #0a192f
Light Navy #112240 #112240
Lightest Navy #233554 #233554
Slate #8892b0 #8892b0
Light Slate #a8b2d1 #a8b2d1
Lightest Slate #ccd6f6 #ccd6f6
White #e6f1ff #e6f1ff
Green #64ffda #64ffda
Related repositories
styled-components/styled-components

Fast, expressive styling for React. Server components, client components, streaming SSR, React Nativeβ€”one API.

TypeScriptnpmMIT Licensereactcss-in-js
styled-components.com
41.1k2.6k
react-boilerplate/react-boilerplate

πŸ”₯ A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

JavaScriptnpmMIT Licensereactreact-boilerplate
reactboilerplate.com
29.5k6k
withspectrum/spectrum

Simple, powerful online communities.

JavaScriptnpmBSD 3-Clause "New" or "Revised" Licensereactjsnodejs
spectrum.chat
10.8k1.2k
astrit/css.gg

700+ Pure CSS, SVG & Figma UI Icons, 6000+ glyphs, patterns, colors and layouts.

JavaScriptnpmOthercssicons
css.gg
10k496
ben-rogerson/twin.macro

πŸ¦Ήβ€β™‚οΈ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.

TypeScriptnpmMIT Licensetailwindtailwindcss
8k178
rebassjs/rebass

:atom_symbol: React primitive UI components built with styled-system.

JavaScriptnpmMIT Licensejavascriptreact
rebassjs.org
7.9k634
styled-system/styled-system

β¬’ Style props for rapid UI development

JavaScriptnpmMIT Licensereactcss-in-js
styled-system.com
7.9k495
styled-components/polished

A lightweight toolset for writing styles in JavaScript ✨

JavaScriptnpmMIT Licensecss-in-jsstyled-components
polished.js.org
7.7k214
react95-io/React95

πŸŒˆπŸ•Ή Windows 95 style UI component library for React

TypeScriptnpmMIT Licensecomponent-libraryreact
react95.io
7.3k213
Evavic44/portfolio-ideas

A curation of awesome portfolio website ideas for developers and designers to draw inspiration from. Raise a pull request to add more. πŸ’œ

MarkdownMIT Licensedesignersdeveloper-portfolio
portfolio-ideas.vercel.app/portfolio.html
6.2k944
gluestack/gluestack-ui

React & React Native Components & Patterns (copy-paste components & patterns crafted with Tailwind CSS (NativeWind))

TypeScriptnpmreactui
gluestack.io
5.2k230
kriasoft/react-firebase-starter

Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay

JavaScriptnpmMIT Licensereactboilerplate
firebase.reactstarter.com
4.5k754