An Open Sourced Creative Portfolio for Developer and Tech Geeks 😀
Over View •
Features •
Getting Started •
Installation •
Configuration •
Deployment •
Tech Used •
Author •
Contributing •
License
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. :smiley:
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. :relaxed:
Yes you can contribute to project by adding more features, I’m waiting for your pull request.:relaxed:
:large_blue_diamond: Summary and Avatar
:large_blue_diamond: Social Links
:large_blue_diamond: About Me
:large_blue_diamond: Skills Set
:large_blue_diamond: Open-source Projects (connected with github)
:large_blue_diamond: Major Projects
:large_blue_diamond: Experience Timeline
:large_blue_diamond: Contact Me
:wrench: more to come
An overview of TechFolio how to download and run it on your local machine and then configure it for deployment or development. :relaxed:
You are gonna need git and node-Js installed on your local machine.
ruby
node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higherAll 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 :heart_eyes:
ruby
# 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 startGenerate a Github personal access token using these Instructions Make sure you don’t select any scope just generate a simple token :relaxed:
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 :birthday:. 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 :tada: (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.
ruby
- TechFolio
- node_modules
- public
- src
- .env <-- create it here
- .gitignore
- package-lock.json
- package.json2.1 In .env file, add key REACT_APP_GITHUB_TOKEN and set in to your github token like this.
ruby
// .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.
You are just one step away from making your techfolio :smiley:
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. :smiley:
java
/* 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 = {......}Now All you need to do is to deploy your TechFolio and here are some options to deploy it :smirk: :smirk:
The step below is important!
If you skip it, your app will not deploy correctly. :smirk:
Open your package.json and add a homepage field for your project:
ruby
"homepage": "https://myusername.github.io", // edit my "https://aqadir64.github.io" with your username
````
<p>
<a href="surge">Surge </a> • <br>
<a href="#githubPages">Github Pages</a> • <br>
<a href="#netlify">Netlify</a> •
</p>
<h3 id="surge">Deployment to Surge </h3>
<p> 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 <a href="https://create-react-app.dev/docs/deployment/#surge">surge</a> :smirk: but Don't worry i'll guide you step by step how you gonna do it </p>
<p><b>1</b> : Build your techflio by running <b>npm run build</b> in your project directory </p>
<p><b>2</b> : Install the Surge CLI if you haven’t already by running <b>npm install -g surge. </b> </p>
<p><b>3</b> : Run the <b>surge</b> command and log in you or create a new account.</p>
<p><b>4</b> : When asked about the project path, make sure to specify the build folder, for example: </p>ruby5 : Last it will ask you about domain name enter it e.g yourname.surge.sh :tada:
Bingo :tada:
adding sooon ! :sleeping:
adding sooon ! :sleeping:
 |
|---|
Abdul Qadir  |
| TechFolio |
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. :smiley:
Yes you can contribute to project by adding more features, I’m waiting for your pull request. :smiley:
adding sooon ! :sleeping: