Giter VIP home page Giter VIP logo

gatsby-portfolio's Introduction

Personal Product Design Portfolio

View the design

This portfolio is open-source and so is the design on Figma. View the design on Figma Community

How to use

  1. Install Gatsby

    Visit the official Gatsby documentation for installation instructions. Note: This site uses Gatsby 2.22 (not 3 or 4) so you may need to install a specific version.

  2. Clone this repo

    Once you have Gatsby installed, clone this repo locally, then navigate back to this folder in your command line and run:

    npm run develop
  3. Open the code and start customizing!

    • The site is now running at http://localhost:8000!
    • Edit src/pages/index.js to see your site update in real-time!
    • This code is far from perfect but feel free to remix and use for your own portfolio. Hopefully it's a valuable learning tool.
    • All the project pages can be found in the pages folder.
    • The entire page transition lives in the Transition.js component.
    • I had to build a ClientOnly.js component to solve for some strange server side rendering bugs (data hydration) when it cames to animations.
    • This site uses Gatsby + Framer Motion and Netlify for Hosting.

gatsby-portfolio's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.