Git Product home page Git Product logo

developer-junaid / developerfolio Goto Github PK

View Code? Open in Web Editor NEW
114.0 2.0 50.0 22.35 MB

A DevFolio/Developer Portfolio built using ReactJs, Sanity CMS and Animation libraries.

Home Page: https://developerjunaid.com/

HTML 2.20% JavaScript 67.56% CSS 30.24%
devfolio portfolio-website react react-animations react-portfolio personal-portfolio hacktoberfest hacktoberfest2020 hacktoberfest-accepted hacktoberfest2021

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

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

abdulwaqar844 avatar aishakhan0925 avatar developer-junaid avatar hemrajmalhi avatar labheshwar avatar mozi47 avatar tayyabhussain03 avatar

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  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  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

developerfolio's Issues

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.