Git Product home page Git Product logo

developerfolio's Introduction

👨‍💻 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) 🔗 https://youtu.be/GrA2i1GNmbg

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 folder in project 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
  • 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)

developerfolio's People

Contributors

developer-junaid avatar labheshwar avatar aishakhan0925 avatar abdulwaqar844 avatar tayyabhussain03 avatar hemrajmalhi 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.