sleepyqadir / TechFolio

An Open Sourced Creative Portfolio for Developer and Tech Geeks 😀

An Open Sourced Creative Portfolio for Developer and Tech Geeks 😃

Over View • Features • Getting Started • Installation • Configuration • Deployment • Tech Used • Author • Contributing • License

---

Over View :

TechFolio is an open-source portfolio for the developer and other geeks to make their artistic and infinite scroll portfolio in just 5 mins and some basic steps from configuration to deployment. 😃

Feel free to open an issue on any kind of bug or glitches you find in the project and to make it better don't hesitate to contribute. ☺️

Yes you can contribute to project by adding more features, I'm waiting for your pull request.:relaxed:

Preview 💀

Features :

🔷 Summary and Avatar
🔷 Social Links
🔷 About Me
🔷 Skills Set
🔷 Open-source Projects (connected with github)
🔷 Major Projects
🔷 Experience Timeline
🔷 Contact Me

🔧 more to come

Getting Started :

An overview of TechFolio how to download and run it on your local machine and then configure it for deployment or development. ☺️

You are gonna need git and node-Js installed on your local machine.

Pre requires:

node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higher

Installation :

All you need to do is to run 4 simple commands in the command line or terminal in the directory where you want to set up it 😍

# Clone this repository
$ git clone https://github.com/AQadir64/TechFolio.git

# Go into the repository
$ cd techfolio

# Install project dependencies
$ npm install

#Start's development server
$ npm start

Bingo 🎉

Configuration :

Github Setup •
Config File •

Setting Up Github For Your Open Source Projects:

Generate a Github personal access token using these Instructions Make sure you don't select any scope just generate a simple token ☺️

1. Now you need to convert that github access token to base-64 string for security don't worry its just like eating a piece of cake 🎂. go to Base64 Decode and Encode copy your access code in the box and select the destination character set to ascii and hit the encode green button Bingo 🎉 (see the example below)

2. Now create a .env file in the root directory of the project. env file lets you customize your working environment variables.

- TechFolio
  - node_modules
  - public
  - src
  - .env         <-- create it here
  - .gitignore
  - package-lock.json
  - package.json
  

2.1 In .env file, add key REACT_APP_GITHUB_TOKEN and set in to your github token like this.

 // .env

  REACT_APP_GITHUB_ACCESS_TOKEN = "YOUR GITHUB TOKEN HERE" //make sure you have set you base64 converted token.
  

Note: Open Source Projects section only show pinned items of your Github. If you haven't pinned your github repos, please follow this Instructions.

Changing Config file:

You are just one step away from making your techfolio 😃

Shift to > /src/techfolio.js and modify the config as per your need. Make sure you read the notes before each section they will assist you out in make configuration simple for you. 😃

/* 1. Main App */
/* 2. Social Networks */
/* 3. Banner Section  */
/* 4. About Section  */
/* 5. Skills Section */
/* 6. Open Source Section  */
/* 7. Projects Section */
/* 8. Experience Section */
/* 9. Contact Section */

/*=====================
    1. Main App
    Desc: set what's in the document's head section
==========================*/

const app = {
  title: "AbdulQadir Portfolio",
  // Note : consider leaving null if you dont have any head icon
  icon: "ayin_qoph.png",
  description: "An ordinary karachitte Web Developer, Mobile Shutterbug, and Writer.",
};

/*=====================
    2. Social Networks 
    Desc: your social network links
==========================*/

const socialNetworks = {
  //Note : if you dont need or have any social network just add null value
  github: "https://github.com/AQadir64",
  linkden: null,
  facebook: "https://www.facebook.com/profile.php?id=100006896625330",
  instagram: "https://www.instagram.com/_ayin_qoph/",
  twitter: null,
};

const bannerSection = { ..... }

const aboutSection = { ...... }

const skillsSection = { ..... }

const openSourceSection = { .... }

const projectsSection = { ...... }

const experienceSection = { .... }

const contactSection = {......}

Deployment :

Now All you need to do is to deploy your TechFolio and here are some options to deploy it 😏 😏

The step below is important!
If you skip it, your app will not deploy correctly. 😏

Open your package.json and add a homepage field for your project:

"homepage": "https://myusername.github.io", // edit my "https://aqadir64.github.io" with your username

Surge •
Github Pages •
Netlify •

Deployment to Surge

This is one of the easiest ways to deploy your techfolio and i recommend you to read the official documentation of deploying react app on surge 😏 but Don't worry i'll guide you step by step how you gonna do it

1 : Build your techflio by running npm run build in your project directory

2 : Install the Surge CLI if you haven’t already by running npm install -g surge.

3 : Run the surge command and log in you or create a new account.

4 : When asked about the project path, make sure to specify the build folder, for example:

project path: /path/to/project/build

5 : Last it will ask you about domain name enter it e.g yourname.surge.sh 🎉

Bingo 🎉

Deployment to Github Pages

adding sooon ! 😴

Deployment to Netlify

adding sooon ! 😴

Technologies Used :

📼 React
📼 GraphQl
📼 Apollo boost
📼 React Helet
📼 React Reveal
📼 React Scroll
📼 React Typist
📼 React Visibility Sensor
📼 React Flex-Box Grid
📼 React Device Detect
📼 React Easy Emoji

Author:

Abdul Qadir 😴
TechFolio

Contributing:

Feel free to open an issue on any kind of bug or glitches you find in the project and to make it better don't hesitate to contribute. 😃

Yes you can contribute to project by adding more features, I'm waiting for your pull request. 😃

License:

adding sooon ! 😴