https://github.com/keithrfung/keithrfung.github.io

Personal Website v1. Using Gatsby and React to create a simple but friendly landing page.
https://github.com/keithrfung/keithrfung.github.io

gatsby gatsbyjs github-pages react theme-ui

Last synced: about 1 month ago
JSON representation

Personal Website v1. Using Gatsby and React to create a simple but friendly landing page.

• Host: GitHub
• URL: https://github.com/keithrfung/keithrfung.github.io
• Owner: keithrfung
• Created: 2015-01-03T19:37:37.000Z (about 10 years ago)
• Default Branch: main
• Last Pushed: 2024-01-10T05:10:01.000Z (12 months ago)
• Last Synced: 2024-10-15T07:57:52.172Z (3 months ago)
• Topics: gatsby, gatsbyjs, github-pages, react, theme-ui
• Language: TypeScript
• Homepage: https://keithrfung.dev
• Size: 12.9 MB
• Stars: 0
• Watchers: 3
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


    



# keithrfung.dev - v1

![Publish](https://github.com/keithrfung/keithrfung.github.io/actions/workflows/publish.yml/badge.svg)

The first iteration of keithrfung.dev built with Gatsby and hosted with GitHub Pages. Site uses Framer Motion to incorporate some friendly and fun animations while trying to maintain a simple codebase for light maintenance.

🛠 Installation & Running

1.  **Setup**

    Install the dependencies

    ```shell

    npm install

    ```

2.  **Start developing.**

    Navigate into the root directory and start it up.

    ```shell

    npm run develop

    ```

3.  **Check out the site**

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

🏗 Architecture

The architecture of this setup is designed to be as lightweight and easily maintainable as possible.

- **React** for quick componentization. 

- **Gatsby** allows for a quick load time and easily integrating **Markdown** components for easy edits. 

- **Framer Motion** is in use to add a visual flair with minimal code.

🎨 Design

If you're interested in some of the design and outline process, you can view my [FigJam here](https://www.figma.com/file/9V6WSDT5HwQtPtaYwjIS5U/Rebranding-v1?node-id=102%3A107&t=MbJCAnhjJXyJ0yl7-1).