Harshiv07/harshiv07-portfolio

A beautiful and simple portfolio website built using React, Nextjs and framer motion

You can find the project deployed at https://harshiv07.vercel.app/.

Let's get things running

This template is built on top of NextJS, a full-stack development framework built on top of React.

• animejs -> A javascript animation library, used for the grid animation inside of DotGrid.tsx
• framer-motion -> A react based animation library, used in a hand full of places (anywhere you see <motion.el /> style components)
• sass -> All styling uses plain CSS and sass modules for this project

Install dependencies

From your terminal, run:

npm install
# or
yarn install

Once that's done, run the following command:

npm run dev
# or
yarn dev

This will start your project on localhost:3000

The file structure

Because this is a NextJS project, we follow the standard NextJS pattern for organizing this project.

Inside of the pages/ directly you'll find 3 files:

• _app.tsx -> A file which wraps around every page in our app. Here we import the Poppins font and include it in our page. You can change to use whatever font you'd like here (docs).
• _document.tsx -> Essentially the NextJS version of your base "HTML document". Nothing fancy here.
• _index.tsx -> This represents our home route. We include 1 single component here called <Home />. Click into this component to begin exploring.

To add MORE routes to your project, see this doc.

Inside of the styles/ directly you'll find find a global CSS file. This just includes a basic reset, as well as a couple of classes we use throughout the project.

Inside of the components/ directory you'll find all of the good stuff. The components/home/ directory houses the majority of what you'll like want to edit

Styling

Global styling (colors mainly) are defined using CSS variables in the styles/globals.css file.