lawrenceberry / personal-website

My personal website, built with Gatsby

Gatsby minimal starter

🚀 Quick start

1. Create a Gatsby site.

   Use the Gatsby CLI to create a new site, specifying the minimal starter.

   # create a new Gatsby site using the minimal starter
   npm init gatsby

2. Start developing.

   Navigate into your new site’s directory and start it up.

   cd my-gatsby-site/
   npm run develop

3. Open the code and start customizing!

   Your site is now running at http://localhost:8000!

   Edit src/pages/index.js to see your site update in real-time!

4. Learn more

   • Documentation

   • Tutorials

   • Guides

   • API Reference

   • Plugin Library

   • Cheat Sheet

🚀 Quick start (Gatsby Cloud)

Deploy this starter with one click on Gatsby Cloud:

personal-website's Issues

Add analytics tracking

• Add an analytics tracker like Google Analytics.

Investigate getting about data from LinkedIn

• Investigate trying to get data from LinkedIn by creating a Gatsby GraphQL plugin for the LinkedIn API.
• If it works publish this plugin perhaps?

Fill in about page with useful info

• Fill in the "about" page with useful info about myself, including a short intro e.g. "Hello there! I'm Lawrence - an aspiring web developer" etc.
• Add a section which lists my top GitHub repos in a similar form to my existing site.
• Add a section which lists the technologies I'm familiar with e.g. React, FastApi etc. separated by front-end, back-end and dev ops. Perhaps find an interesting tile-set like way to display this information.

Add blogging capability

• Add the ability to write blog posts in markdown and have them appear on the blogging page.

Add a search bar/category picker to the blog page

• Add a search bar and/or category picker to filter through blog posts.

Search engine optimisation

• Optimise the site for SEO.

Make navbar appear when you scroll up but hide when you scroll down

• It would be nice if the navbar appeared whenever the users scrolls slightly up, but then disappears when the user scrolls down again (like the iOS Safari search bar). https://docusaurus.io/docs/ seem to have done exactly this!

Investigate adding tests

• Would it be worth adding Jest tests?

Add ability to collapse the sidebar

• Add the ability to collapse the sidebar in desktop mode. A little < chevron at the top left of the side bar (horizontally aligned with the dark mode toggle) could trigger this. The sidebar then collapses into a very thin bar with:
  • a > chevron to pop it back out,
  • a picture of me,
  • links to the about and blog pages (rotated words).

Investigate setting up Sentry and depandabot

• Would Sentry alerting be useful?
• Would depandabot be useful?

Create about and blog pages

• Re-purpose the index page into an about me page and add a (for now empty) blog page.
• Allow the user to switch between the two using the navbar/sidebar.

Sass up the README

• Improve the readme, documenting the aims of my personal website and how to further develop it and add blog posts.
• Add badges for everything I can think of:
  • Build status,
  • Typescript,
  • Styled components,
  • Prettier, etc.

Add dark mode

• Add a dark mode with a react-toggleat the top right of the navbar and sidebar to turn it on or off.
• The mode should save to local storage and not flash - https://victorzhou.com/blog/dark-mode-gatsby/ may be helpful.

Add a footer in mobile mode

• Add a footer at the bottom of the page in mobile mode which shows the social media links that are present in the sidebar when in desktop mode.

Set up a deployment workflow

• Set up a deployment workflow which uses GitHub actions to build the site and deploys it to GitHub pages (like ad-breaker or offset-me).
• As part of the workflow we should run type checking and prettier formatting checking.
• The build/test/type and prettier checking should happen on every PR branch, with deployments only on merges to master.