bchiang7 / v4

Fourth iteration of my personal website built with Gatsby

brittanychiang.com - v4

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

Previous iterations: v1, v2, v3

🚨 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
Light Navy	#112240
Lightest Navy	#233554
Slate	#8892b0
Light Slate	#a8b2d1
Lightest Slate	#ccd6f6
White	#e6f1ff
Green	#64ffda

v4's Issues

Sorry but how to change color to any color?

Nonono I meant how to change to any color. Not only green but any color. I tried changing by changing hex code but it's not changing in the site. But I've put it on auto update mode in Netlify but it updates and nothing happens. Can I add a color in Global Style? Also pls help to change the color to any color. I just said an example.

Sorry for reopening the issue.

Active jobs tab highlight on mobile

Firstly, amazing template. Thanks so much for making it available.

I've noticed that on mobile the active tabs in the jobs section the highlight doesn't always line up with the tab. As it seems to get worse the farther right you go I'm guessing it's a small math error that grows as it goes. But I haven't actually started troubleshooting this at all so that's just a guess at this point. I plan to, and if I figure it out quickly I'll go ahead and let you know and close this out but I thought it might be nice to get your perspective too.

(Thanks again)

Error - The system cannot find the path specified.

@bchiang7 Mam when I am doing npm start I am getting the following error, please help me

Executing task: npm run start <

[email protected] start C:\Users\SHUBHAMDEEP JHA\Desktop\v4-master
npm run develop

[email protected] develop C:\Users\SHUBHAMDEEP JHA\Desktop\v4-master
gatsby develop

success open and validate gatsby-configs - 0.120s
success load plugins - 3.381s
success onPreInit - 0.027s
success initialize cache - 0.029s
success copy gatsby files - 0.249s
success onPreBootstrap - 0.031s
success createSchemaCustomization - 0.098s
success source and transform nodes - 1.696s
success building schema - 0.839s
success createPages - 0.153s
success createPagesStatefully - 0.294s
success onPreExtractQueries - 0.004s
success update schema - 0.088s
success extract queries from components - 1.171s
success write out requires - 0.191s
success write out redirect data - 0.075s
success Build manifest and related icons - 0.339s
success onPostBootstrap - 0.358s
⠀
info bootstrap finished - 16.307s
⠀
warn code block or inline code language not specified in markdown. applying generic code block
success run queries - 10.182s - 14/14 1.38/s

ERROR

Processing C:/Users/SHUBHAMDEEP JHA/Desktop/v4-master/content/featured/SpotifyProfile/demo.png failed

Original error:
The system cannot find the path specified.

WorkerError: Processing C:/Users/SHUBHAMDEEP JHA/Desktop/v4-master/content/featured/SpotifyProfile/demo.png failed
Original error:
The system cannot find the path specified.

• jobs-manager.js:316 exports.enqueueJob
  [v4-master]/[gatsby]/dist/utils/jobs-manager.js:316:23

not finished Generating image thumbnails - 18.769s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] develop: gatsby develop
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\SHUBHAMDEEP JHA\AppData\Roaming\npm-cache_logs\2020-05-31T13_42_18_163Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: npm run develop
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\SHUBHAMDEEP JHA\AppData\Roaming\npm-cache_logs\2020-05-31T13_42_18_446Z-debug.log
The terminal process terminated with exit code: 1

Nice site!

div blocking card highlight

The highlighted div blocks onhover for the card. Just wanted to let you know if this isn't intended.

Great job on the site, it looks really nice.

How to deploy on github page?

Hi,

This is a really beautiful website, thanks so much! I was just wondering how I would deploy this on a GitHub Page, specifically <my_username>.github.io? After pushing to that repo, the README shows up, instead of the index.js. I was wondering how I would be able to have what I see on my localhost show up instead?

Thanks!

Broken build. Not able to run, and build a fresh clone of the repository

Broken build. Not able to run, and build a fresh clone of the repository

To Reproduce
Steps to reproduce the behaviour:

1. git clone [email protected]:bchiang7/v4.git
2. Follow steps from readme
3. Observe the error in terminal saying Please install the libjpeg development package before building.

Expected behaviour
A fresh clone should run, and build as expected

Screenshots

Desktop (please complete the following information):

• OS: macOs Majave
• Browser chrome, firefox
• Version 71.0.3578.98, 64.0.2

Additional context
NA

How would I change the color scheme?

How would I change the color scheme and/or add google tracking? I would like to change to red and white or black and white.

Plagiarism form

Quick suggestion time

Do consider making a Google Form where ppl can post URLs of other people's websites where credit has not been given so that you can contact them and request them to if you want

Personally, I've seen tens of portfolio sites that say "Created and Developed by " even though it's not the case

Featured Section not Rendering

Hi, I keep having an issue with the featured section

once I remove it from the index.js it works.

component:
in Featured (at pages/index.js:27)
in main (created by Main)
in Main (created by pages__MainContainer)
in pages__MainContainer (at pages/index.js:23)
in div (at layout.js:89)
in div (at layout.js:81)
in StaticQuery (at layout.js:68)
in Layout (at pages/index.js:22)
in IndexPage (created by PageRenderer)
in PageRenderer (at json-store.js:93)
in JSONStore (created by EnsureResources)
in ScrollContext (at root.js:63)
in RouteUpdates (at root.js:62)
in EnsureResources (at root.js:60)
in RouteHandler (created by Root)
in div (created by FocusHandlerImpl)
in FocusHandlerImpl (created by Context.Consumer)
in FocusHandler (created by RouterImpl)
in RouterImpl (created by LocationProvider)
in LocationProvider (created by Context.Consumer)
in Location (created by Context.Consumer)
in Router (created by Root)
in Root (at root.js:119)
in _default (created by HotExported_default)
in AppContainer (created by HotExported_default)
in HotExported_default (at app.js:55)

React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.

Next.js fork

I am using your design to build one in next.js, it's almost complete.

Repo: https://github.com/abhijithvijayan/abhijithvijayan.in

Uses markdown parsing for the content and build using next.js export.

Also mentioned credits in the readme. Thanks 😃

Adding new icons

Hi,
First of all, congratulations on the website. It looks really good.

I have been thinking of utilising the same as my own personal website (credited to you!). I was wondering how do I go about adding a new icon, say youtube, to the list of icons in

src/components/icons.

I downloaded an SVG file for the same and converted it to .js file (do you recommend a particular method of doing that?) which is now present as youtube.js at
src/components/icons.

I also added the same in formattedIcon.js and I thought it will be good to go as:

youtube: 'https://www.youtube.com/watch?v=pYe77UhBgKg'

But I am still not able to get the youtube-icon below my project. I would welcome your suggestions

How to deploy Website on Heroku app or on personal Website

Can you share the step, it will be greatly helpful.

I just want to achieve the way you did it on your custom domain.

ERROR #85922 GRAPHQL: There was an error in your GraphQL query

I am trying to build and deploy this site but receive the following error after running npm start:

Repo: https://github.com/jaredbest/personal-website

ERROR #85922  GRAPHQL
There was an error in your GraphQL query:
Field "avatar" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "avatar". If you didn't expect "avatar" to be of type "String" make sure that your input source and/or plugin is correct.
File: src/pages/index.js:52:20

I am using a computer running Pop! OS. On Windows 10, I don't receive this error message and can start the development server.

Do you know what the issue is? Thank you, and amazing work on this!

Error for service worker registration

Error for service worker registration in console

To Reproduce
Steps to reproduce the behaviour:

1. Open https://brittanychiang.com/
2. Open console in Web inspector
3. 2 Errors for service worker registration

Expected behaviour
Service worker registration to be handled without errors.

Screenshots

Desktop (please complete the following information):

• OS: macOs Majave
• Browser chrome, firefox
• Version 71.0.3578.98, 64.0.2

Additional context
The user never notices any anomaly, all the features work as expected.

Problems with Gatsby

Hi @bchiang7 ,
Thank you for making our lives easier by building this amazing portfolio and letting us re-use it. However, the following error is making my life so hard now.

I had the application running in my local perfectly but after installing gh-pages to deploy it on github pages, the application stopped running in local as well. Now even if I remove node_modules and package_lock.json and reinstall everything, it still gives me this error when I do npm start.

[email protected] start /Users/indhujaravi/SJSU/Courses/v4
npm run develop

[email protected] develop /Users/indhujaravi/SJSU/Courses/v4
gatsby develop

ERROR

UNHANDLED REJECTION Reducers may not dispatch actions.

Error: Reducers may not dispatch actions.

• redux.js:214 dispatch
  [v4]/[redux]/lib/redux.js:214:13

• index.js:64 action
  [v4]/[gatsby]/dist/redux/index.js:64:88

• index.js:14 Object.dispatch
  [v4]/[redux-thunk]/lib/index.js:14:16

• index.js:47 dispatch
  [v4]/[gatsby-cli]/lib/reporter/redux/index.js:47:11

• redux.js:483 Object.createLog
  [v4]/[redux]/lib/redux.js:483:12

• index.js:69 Object.text [as log]
  [v4]/[gatsby-cli]/lib/reporter/index.js:69:53

• index.js:461 Console.console.log.args [as log]
  [v4]/[gatsby-cli]/lib/reporter/index.js:461:37

• config.js:20 module.exports
  [v4]/[gatsby]/dist/redux/reducers/config.js:20:19

• redux.js:465 combination
  [v4]/[redux]/lib/redux.js:465:29

• redux.js:219 dispatch
  [v4]/[redux]/lib/redux.js:219:22

• index.js:64 action
  [v4]/[gatsby]/dist/redux/index.js:64:88

• index.js:14 Object.dispatch
  [v4]/[redux-thunk]/lib/index.js:14:16

• index.js:170 module.exports
  [v4]/[gatsby]/dist/bootstrap/index.js:170:9

not finished open and validate gatsby-configs - 0.101s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] develop: gatsby develop
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/indhujaravi/.npm/_logs/2020-09-20T01_54_11_735Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: npm run develop
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/indhujaravi/.npm/_logs/2020-09-20T01_54_11_758Z-debug.log

Possibility of dynamically generating resume.

Firstly, thank you for building such an amazing website.

I was wondering/hoping if it would be possible to dynamically generate a resume instead of having a hardcoded one in a folder. I've started trying to do such an implementation using PDFKIT. Do you think it's a feature you could add to the website?

How to change color from cyan to something else?

How to change color from the cyan color to green or something else? I want to change all the color including background. Pls reply @bchiang7

List of websites using v4

Websites using bchiang7/v4

• white bg-version
• original version
  • based on original
  • added a blog section

i thought it would be nice to have this kind of list in README.md.
Since some websites don't always give credit

How can I add more things, like another slide with featured projects.

How can I add more things, like another slide with featured projects ?
I've tried currently duplicating al featured section related files but is giving me errors.
Thanks and congratulations for this awesome design.
Bruno

How to stop the loading animation with the letter icon?

TypeError: tech is null

Thank you @bchiang7 for making this portfolio template and having it open sourced! :)

I encountered an error when trying to run this locally for the first time.
I got this error:
TypeError: tech is null in project.js
The error is coming from:

  <StyledTechList>
    {tech.map((tech, i) => (
       <li key={i}>{tech}</li>
     ))}
  </StyledTechList>

I looked at featured.js and that seems to be working so I just copied over to project.js and that did the trick!

{tech && (
    <StyledTechList>
        {tech.map((tech, i) => (
           <li key={i}>{tech}</li>
            ))}
     </StyledTechList>
  )}

Not sure if it is intended or missed out by accident!

Parsing Error

Hi.

When I click to files in components folder it's throw me an error.

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

Could you help me, please?

Links redirecting to different pages

What's up?

First of all, that's some really good design congratz on that.

I'm really inspired and I'm trying to develop some of my own.

As I was looking at your page I saw, that maybe there are some broken links.

at your experience - Starry is redirecting to Apple and MullenLowe is redirecting to Upstatement.

Insert blog using graphQL with Gatsby

I would like to have a blog index in this website, where you can see a list of recent blogs. Essentially reading Markdown in new page

Issue with image (avatar)

Hi
I have been working with your website for a while and I am almost done with the first version of my own. Everything was working great but suddenly the photo of me is getting screwed up.
The idea is to have a transparent shadow on top of the image before hovering. You can check my current website here. So, do so I believe I have to make changes to about.js file which I have done as here

But still, I am not getting the desired results. I was successfully able to get it working once, but could not push the entire thing. Any help would be appreciated

Adding Json file to read the static data.

I'm planning to add the static data in the json file.

Reason why I am planning to do:

• when anyone wanted to host there personal website they just need to change that json file and portfolio is ready.
• Easy to modify details in the production (Need to change the Json file and we don't need to go for re-deployment)

@bchiang7 your thoughts? I am happy to work in this enhancement

On firefox, Text is not displayed of some components

Describe the bug
Text for some components are missing from the DOM, it does not get displayed. This behaviour is only observed in firefox when built with gatsby build.

To Reproduce
Steps to reproduce the behaviour:

1. Go to https://ankushmehta.com
2. Scroll down to see empty content of About Me, Where I've Worked, Get In Touch
3. Inspect to check these missing in rendered DOM

Expected behaviour
In the production version, Text from all the components should render

Screenshots

Desktop (please complete the following information):

• OS: macOs Mojave
• Browser Firefox
• Version 64.0.2

Additional context
It runs perfectly well when

• running in Google Chrome
• running on Firefox, localhost, gatsby build && gatsby serve skips the render of some components

?

Changing sections heading and adding more sections

Hi,
I have been tinkering with the website and want to use it as a base for my own. I was wondering if it would be possible for you to highlight two things:

1. If I want to change the headings (like 'About me' , 'Where I've Worked' etc) to something different, where can I find the same to be changed?
2. If I want to add more sections, like ones for Publications, should they go in the content directory?
3. As the website is divided into sections (01 About me,02 Where I've Worked,03...), I have been thinking of changing the background colour of each of these sections. Can you comment on it, if possible?

I would appreciate your inputs

Need info regarding deploying on github pages

I gone through the issue #18, do I have to just add the "deploy": "gatsby build && gh-pages -d public -b master" under scripts in package.json. Will that be enough? Or do i need to remove some lines?

Can you share the source file of your pdf resume?

Hey bchiang,

I really liked your resume template, both web one and pdf one. Can I use this for mine?

Can you share the editable template or source file specially of resume.pdf one? Weather it's adobe indesign or docs or whatever. I'm in love, the placement you designed was really fabulous. I'm seeking for job, and this will definitely help me.

Changing the B letter in the loader screen?

Hi @bchiang7 ,

I am trying to change the letter in the Loading screen from B to an O. How can I do this? I cannot see any B in the loader.js file. Where is the animation in the codebase?

Thanks

Resume Source File

The resume is currently in .pdf format.

It'd be helpful to also have the (.tex or whatever format) source file in the repo.

SVG Paths

Hey! Nice Website Design. I am having trouble editing the svg paths and was wondering how you generated the svg paths for the logo and icons.

Post Content is Mixed up in projects part , achived project route not working

post content is mixed up with project content and UI is collapsed if I delete posts, and achive route is also not working

, could you please tell me how to fix it
thank you
you made a great portfolio

how can i change favicon

i tried to remove your favicon and added my favicon but it did not change

How can I change the logo shown when loading?

Please help me!!!

I want to host it in Netlify or Repl.it. Please walk me through the necessary steps.

Changing the logo image in loader, favicon and title

Hi,
Can someone please tell me how to change the Hexagonal "B" logo and insert my own logo? As in, where do I put the new image and/or what parts of the code do I modify for the same?
Any pointers would be helpful.

Also, I have already changed logo.png in /images/ folder and the favicons in the /images/favicons/ and the favicon does change, but on restarting the server, the original logo is again written to .cache for some reason. Any way to stop this?

when i run npm build it gives me this error

success onPostBootstrap - 0.407s
⠀
info bootstrap finished - 16.349 s
⠀
success Building production JavaScript and CSS bundles - 48.782s
success Rewriting compilation hashes - 0.006s

 ERROR 

UNHANDLED REJECTION /mnt/c/Users/mishr/Project/gatsby/main/v4/node_modules/cwebp-bin/vendor/cwebp: error while loading shared libraries: libGL.so.1: cannot open shared object file: No such file or directory




  Error: /mnt/c/Users/mishr/Project/gatsby/main/v4/node_modules/cwebp-bin/vendor/cwebp: error while loading shared librar  ies: libGL.so.1: cannot open shared object file: No such file or directory
  
  - index.js:231 
    [v4]/[exec-buffer]/[execa]/index.js:231:11
  
  - runMicrotasks
  
  - task_queues.js:93 processTicksAndRejections
    internal/process/task_queues.js:93:5
  
  - process-file.js:191 
    [v4]/[gatsby-plugin-sharp]/process-file.js:191:7
  
  - async Promise.all
  

not finished run queries - 56.615s
not finished Generating image thumbnails - 5.080s

(sharp:9254): GLib-CRITICAL **: 17:53:34.325: g_hash_table_lookup: assertion 'hash_table != NULL' failed
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `gatsby build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/crazylilosama/.npm/_logs/2019-12-04T12_23_34_381Z-debug.log
The terminal process terminated with exit code: 1

Terminal will be reused by tasks, press any key to close it.

Bug in Gatsby?

Thanks so much for sharing v4 publicly. It looks amazing.

But when I tried to run "yarn start" on my own computer, I encountered an error:

A little bit of research on google shows to me that this might be a bug on Gatsby:
gatsbyjs/gatsby#11688

Does anybody encounter the same issue? May I ask how's resolved?

Thanks a lot!

Image issue

When I am replacing a previous image (for eg: octoprofile), located in the content, with my new image having the same name, it throws an error saying:
"TypeError: Cannot read property 'childImageSharp' of null"
at location v4/src/components/sections/featured.js:278:
<StyledFeaturedImg fluid={cover.childImageSharp.fluid} alt={title} />

All the suggestions would be appreciated

Add metadata

Hi
As I can see in head.js title has a value as {metadata.title}.
How can I update it

thanks

On firefox, Text is not displayed of some components

Text for some components are missing from the DOM, it does not get displayed. This behaviour is only observed in firefox when built with gatsby build.

To Reproduce
Steps to reproduce the behaviour:

1. Go to https://ankushmehta.com
2. Scroll down to see empty content of About Me, Where I've Worked, Get In Touch
3. Inspect to check these missing in rendered DOM

Expected behaviour
These screenshots are captured when running on localhost, development version
In the production version, Text from all the components should render

Desktop details:

• OS: macOs Mojave
• Browser Firefox
• Version 64.0.2

Additional context
It runs perfectly well when

• running in Google Chrome
• running on Firefox, localhost, gatsby build && gatsby serve skips the render of some components

Why did you choose to create a custom webpack config?

Hi Brittany! I am currently redesigning my portfolio and am taking cues (not much code) from your portfolio here. I noticed in your gatsby-node.js file you have a custom webpack config but I don't understand why someone would do this. I am new to Gatsby and only have 1 year of professional dev experience so I am just trying to grok why one would do this, if my rambling makes any sense.

Thanks for your help.

Support to add blogs

Gatsby supports the addition of blogs & documentation to its framework.
Does this template can also support blogs?

Can u do a tutorial video

can u make a tutorial video please

Posts

Thank you so much for this amazing personal website. I noticed that there is a posts in content section, but there is no posts linked in the website, are you working on adding that?
Thanks

Add css for custom scrollbar

WE can think of adding CSS for a custom scrollbar like the following in the index.css file.

Currently, we get a white scrollbar(on windows) it would be better if I get a dark themed scrollbar when I open the website

Before	After

  /* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #232728;
  /* background: #3e3e42; */
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  background: #555;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #464c4f;
}