/TechFolio

An Open Sourced Creative Portfolio for Developer and Tech Geeks πŸ˜€

Primary LanguageJavaScript


ArminC AutoExec

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:

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 :

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 ! 😴