DeveloperFolio
DeveloperFolio copied to clipboard
A DevFolio/Developer Portfolio built using ReactJs, Sanity CMS and Animation libraries.
👨💻 Personal DevFolio (3.0)
Personal Portfolio built using ReactJs, Sanity CMS and Animation libraries, hope you like it. Tweak it and use it !!
Demo Video (3.0) :link: https://youtu.be/GrA2i1GNmbg
Link :link: https://developerjunaid.com/
Images






Mobile Responsive

Run Locally
- Run this command
git clone https://github.com/developer-junaid/DeveloperFolio.git
- You are now in the dev environment and you can play around
To Run Sanity CMS Locally
- Sign Up to Sanity
- Navigate to portfoliosanitydata using terminal Run:
cd portfoliosanitydata
- Install dependencies Run:
npm install
- Install Sanity Cli Run:
npm install -g @sanity/cli
- Login to sanity using cli run:
sanity login
(Select your preferred method) - Initialize sanity project run:
sanity init
- We are going to see a list of questions for us to answer in the next steps. Let's walk through those!
-
- Create new project — Hit Enter.
-
- Your project name: — We can name it whatever we would like. Let's “Portfolio Sanity Data" for this project.
-
- Use the default dataset configuration? — The default dataset configuration has a public dataset named “production”, let's stick with that. So type in “Y” and hit Enter.
-
- Project output path: — This will show us the path where our sanity project will live. The path should show the path that leads to this: /developerFolio/portfoliosanitydata. Hit Enter.
-
- Select project template: — Here we are going to choose “Movies (schema + Sample data)”. Using the arrow keys, navigate to that so it’s showing blue. Hit Enter once there. Success!
-
- Now Replace
schemas
folder with the folder from my repository
- Now Replace
- Run Sanity Studio in the browser, first navigate to sanity project :
cd portfoliosanitydata
- Run:
sanity start
- Visit localhost:3333 to view live studio and add your data
Connecting React App with Sanity Locally
- Get projectId and dataset from portfoliosanitydata/sanity.json and paste in the value of those keys in the src/client.js respected fields
Tech Stack
- HTML5
- CSS3
- Javascript ES6
- React js
- Animation Libraries (Framer motion, react-scroll, aos)
- Firebase
- Github Actions
- Sanity.io (CMS)