Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sleepyqadir/techfolio
An Open Sourced Creative Portfolio for Developer and Tech Geeks 😀
https://github.com/sleepyqadir/techfolio
animation css graphql infinite-scroll portfolio portfolio-site portfolio-template react
Last synced: 7 days ago
JSON representation
An Open Sourced Creative Portfolio for Developer and Tech Geeks 😀
- Host: GitHub
- URL: https://github.com/sleepyqadir/techfolio
- Owner: sleepyqadir
- Created: 2020-07-22T12:33:33.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-10-02T00:04:35.000Z (about 1 year ago)
- Last Synced: 2024-08-01T21:58:56.046Z (3 months ago)
- Topics: animation, css, graphql, infinite-scroll, portfolio, portfolio-site, portfolio-template, react
- Language: JavaScript
- Homepage:
- Size: 5.8 MB
- Stars: 79
- Watchers: 1
- Forks: 11
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
An Open Sourced Creative Portfolio for Developer and Tech Geeks :smiley:
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. :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:
Preview :skull:
Features :
: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
Getting Started :
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.
**Pre requires:**
```ruby
[email protected] or higher
[email protected] or higher
[email protected] 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 :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 start
```
**Bingo :tada:**
Configuration :
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 :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.json
```
2.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.
Changing Config file:
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 = {......}
```
Deployment :
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
````
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 :smirk: 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:
```ruby
project path: /path/to/project/build
```
5 : Last it will ask you about domain name enter it e.g yourname.surge.sh :tada:
Bingo :tada:
Deployment to Github Pages
adding sooon ! :sleeping:
Deployment to Netlify
adding sooon ! :sleeping:
Technologies Used :
:vhs: React
:vhs: GraphQl
:vhs: Apollo boost
:vhs: React Helet
:vhs: React Reveal
:vhs: React Scroll
:vhs: React Typist
:vhs: React Visibility Sensor
:vhs: React Flex-Box Grid
:vhs: React Device Detect
:vhs: React Easy Emoji
Author:
| 
| :---: |
| Abdul Qadir :sleeping: |
| 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. :smiley:
Yes you can contribute to project by adding more features, I'm waiting for your pull request. :smiley:
License:
adding sooon ! :sleeping: