{"id":18509731,"url":"https://github.com/sleepyqadir/techfolio","last_synced_at":"2026-04-01T17:17:32.317Z","repository":{"id":44231396,"uuid":"281672435","full_name":"sleepyqadir/TechFolio","owner":"sleepyqadir","description":"An Open Sourced Creative Portfolio for Developer and Tech Geeks  😀","archived":false,"fork":false,"pushed_at":"2023-10-02T00:04:35.000Z","size":6082,"stargazers_count":76,"open_issues_count":7,"forks_count":11,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-03-27T15:24:37.845Z","etag":null,"topics":["animation","css","graphql","infinite-scroll","portfolio","portfolio-site","portfolio-template","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sleepyqadir.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-22T12:33:33.000Z","updated_at":"2026-02-24T02:11:33.000Z","dependencies_parsed_at":"2024-08-01T21:44:30.538Z","dependency_job_id":"4cc7d091-0efe-47ba-86a8-fe0fa5671511","html_url":"https://github.com/sleepyqadir/TechFolio","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sleepyqadir/TechFolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sleepyqadir%2FTechFolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sleepyqadir%2FTechFolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sleepyqadir%2FTechFolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sleepyqadir%2FTechFolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sleepyqadir","download_url":"https://codeload.github.com/sleepyqadir/TechFolio/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sleepyqadir%2FTechFolio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31053746,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-27T16:55:14.406Z","status":"ssl_error","status_checked_at":"2026-03-27T16:55:07.885Z","response_time":164,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","css","graphql","infinite-scroll","portfolio","portfolio-site","portfolio-template","react"],"created_at":"2024-11-06T15:18:54.459Z","updated_at":"2026-04-01T17:17:32.294Z","avatar_url":"https://github.com/sleepyqadir.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003ca href=\"\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/38910854/87874801-3d84dd00-c9e6-11ea-8b47-0f0106227fb4.png\" alt=\"ArminC AutoExec\"\u003e\u003c/a\u003e\n\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003eAn Open Sourced Creative Portfolio for Developer and Tech Geeks :smiley:\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://forthebadge.com/images/badges/made-with-javascript.svg\"\u003e\n  \u003cimg src=\"https://forthebadge.com/images/badges/built-with-love.svg\"\u003e\n  \u003cimg src=\"https://forthebadge.com/images/badges/makes-people-smile.svg\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#overview\"\u003eOver View\u003c/a\u003e •\n  \u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e •\n  \u003ca href=\"#gettingStarted\"\u003eGetting Started\u003c/a\u003e •\n  \u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e •\n  \u003ca href=\"#configuration\"\u003eConfiguration\u003c/a\u003e •\n  \u003ca href=\"#deployment\"\u003eDeployment\u003c/a\u003e •\n  \u003ca href=\"#techUsed\"\u003eTech Used\u003c/a\u003e •\n  \u003ca href=\"#author\"\u003eAuthor\u003c/a\u003e •\n  \u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e •\n  \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n\u003ch1 id=\"overview\"\u003eOver View :\u003c/h1\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/38910854/88264039-84274f80-cce4-11ea-94a5-4e59c8b24996.gif\"/\u003e  \n\u003cp\u003eTechFolio 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:\u003c/p\u003e\n\u003cp\u003eFeel 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:\u003c/p\u003e\n\u003cp\u003eYes you can contribute to project by adding more features, I'm waiting for your pull request.:relaxed: \u003c/p\u003e\n\u003ch2 align=\"center\"\u003e \u003ca href=\"http://abdulqadir.surge.sh/\"\u003e Preview :skull: \u003c/a\u003e\u003c/h2\u003e\n\n\u003ch1 id=\"features\"\u003eFeatures :\u003c/h1\u003e\n\u003cp\u003e:large_blue_diamond: Summary and Avatar\u003cbr\u003e\n:large_blue_diamond: Social Links\u003cbr\u003e\n:large_blue_diamond: About Me\u003cbr\u003e\n:large_blue_diamond: Skills Set\u003cbr\u003e\n:large_blue_diamond: Open-source Projects (connected with github)\u003cbr\u003e\n:large_blue_diamond: Major Projects\u003cbr\u003e\n:large_blue_diamond: Experience Timeline\u003cbr\u003e\n:large_blue_diamond: Contact Me\u003c/p\u003e\n\u003cp\u003e:wrench: more to come\u003c/p\u003e\n\n\n\u003ch1 id=\"gettingStarted\"\u003eGetting Started :\u003c/h1\u003e\n\u003cp\u003eAn overview of TechFolio how to download and run it on your local machine and then configure it for deployment or development. :relaxed:\u003c/p\u003e\n\u003cp\u003eYou are gonna need \u003ca href=\"\"\u003egit\u003c/a\u003e and \u003ca href=\"\"\u003enode-Js\u003c/a\u003e installed on your local machine. \u003c/p\u003e\n\n**Pre requires:**\n```ruby\nnode@v10.16.0 or higher\nnpm@6.9.0 or higher\ngit@2.17.1 or higher\n```\n\n\u003ch1 id=\"installation\"\u003eInstallation :\u003c/h1\u003e\n\u003cp\u003e 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: \u003c/p\u003e\n\n```ruby\n# Clone this repository\n$ git clone https://github.com/AQadir64/TechFolio.git\n\n# Go into the repository\n$ cd techfolio\n\n# Install project dependencies\n$ npm install\n\n#Start's development server\n$ npm start\n```\n\n**Bingo :tada:**\n\n\u003ch1 id=\"configuration\"\u003eConfiguration :\u003c/h1\u003e\n\u003cp\u003e\n  \u003ca href=\"#githubSetup\"\u003eGithub Setup\u003c/a\u003e • \u003cbr\u003e\n  \u003ca href=\"#configFile\"\u003eConfig File\u003c/a\u003e •\n\u003c/p\u003e\n\u003ch3 id=\"githubSetup\"\u003eSetting Up Github For Your Open Source Projects:\u003c/h3\u003e\n\u003cp\u003eGenerate a Github personal access token using these \u003ca href=\"https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token\"\u003eInstructions\u003c/a\u003e Make sure you don't select any scope just generate a simple token :relaxed: \u003c/p\u003e\n\u003cp\u003e1. 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 \u003ca href=\"https://www.base64encode.org/\"\u003eBase64 Decode and Encode\u003c/a\u003e 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)\u003c/p\u003e \n\u003cp align=\"center\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/38910854/87902564-62736180-ca73-11ea-9b13-949228bb6409.png\" width=\"600\"/\u003e \u003c/p\u003e\n\u003cp\u003e2. Now create a .env file in the root directory of the project. env file lets you customize your working environment variables. \u003c/p\u003e\n\n```ruby\n\n- TechFolio\n  - node_modules\n  - public\n  - src\n  - .env         \u003c-- create it here\n  - .gitignore\n  - package-lock.json\n  - package.json\n  \n```\n\u003cp\u003e2.1 In .env file, add key REACT_APP_GITHUB_TOKEN and set in to your github token like this.\u003c/p\u003e\n\n```ruby\n // .env\n\n  REACT_APP_GITHUB_ACCESS_TOKEN = \"YOUR GITHUB TOKEN HERE\" //make sure you have set you base64 converted token.\n  \n```\n\u003cp\u003eNote: Open Source Projects section only show pinned items of your Github. If you haven't pinned your github repos, please follow this \u003ca href=\"https://docs.github.com/en/enterprise/2.13/user/articles/pinning-items-to-your-profile\"\u003eInstructions.\u003c/a\u003e\u003c/p\u003e\n\n\u003ch3 id=\"configFile\"\u003eChanging Config file:\u003c/h3\u003e\n\u003cp\u003eYou are just one step away from making your techfolio :smiley:\u003c/p\u003e\n\n\u003cp\u003e Shift to \u003cb\u003e \u003e /src/techfolio.js \u003c/b\u003e 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:\u003c/p\u003e\n\n```java\n\n/* 1. Main App */\n/* 2. Social Networks */\n/* 3. Banner Section  */\n/* 4. About Section  */\n/* 5. Skills Section */\n/* 6. Open Source Section  */\n/* 7. Projects Section */\n/* 8. Experience Section */\n/* 9. Contact Section */\n\n/*=====================\n    1. Main App\n    Desc: set what's in the document's head section\n==========================*/\n\nconst app = {\n  title: \"AbdulQadir Portfolio\",\n  // Note : consider leaving null if you dont have any head icon\n  icon: \"ayin_qoph.png\",\n  description: \"An ordinary karachitte Web Developer, Mobile Shutterbug, and Writer.\",\n};\n\n/*=====================\n    2. Social Networks \n    Desc: your social network links\n==========================*/\n\nconst socialNetworks = {\n  //Note : if you dont need or have any social network just add null value\n  github: \"https://github.com/AQadir64\",\n  linkden: null,\n  facebook: \"https://www.facebook.com/profile.php?id=100006896625330\",\n  instagram: \"https://www.instagram.com/_ayin_qoph/\",\n  twitter: null,\n};\n\nconst bannerSection = { ..... }\n\nconst aboutSection = { ...... }\n\nconst skillsSection = { ..... }\n\nconst openSourceSection = { .... }\n\nconst projectsSection = { ...... }\n\nconst experienceSection = { .... }\n\nconst contactSection = {......}\n\n```\n\u003ch1 id=\"deployment\"\u003eDeployment :\u003c/h1\u003e\n\u003cp\u003e Now All you need to do is to deploy your TechFolio and here are some options to deploy it :smirk: :smirk: \u003c/p\u003e\n\n\u003cp\u003e \u003cb\u003eThe step below is important! \u003cbr\u003e If you skip it, your app will not deploy correctly. :smirk: \u003c/b\u003e\u003c/p\u003e\n\u003cp\u003eOpen your package.json and add a homepage field for your project: \u003c/p\u003e\n\n```ruby\n\n\"homepage\": \"https://myusername.github.io\", // edit my \"https://aqadir64.github.io\" with your username\n\n````\n\n\u003cp\u003e\n  \u003ca href=\"surge\"\u003eSurge \u003c/a\u003e  • \u003cbr\u003e\n  \u003ca href=\"#githubPages\"\u003eGithub Pages\u003c/a\u003e • \u003cbr\u003e\n  \u003ca href=\"#netlify\"\u003eNetlify\u003c/a\u003e •\n\u003c/p\u003e\n\n\u003ch3 id=\"surge\"\u003eDeployment to Surge \u003c/h3\u003e\n\u003cp\u003e 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 \u003ca href=\"https://create-react-app.dev/docs/deployment/#surge\"\u003esurge\u003c/a\u003e :smirk: but Don't worry i'll guide you step by step how you gonna do it \u003c/p\u003e\n\n\u003cp\u003e\u003cb\u003e1\u003c/b\u003e : Build your techflio by running \u003cb\u003enpm run build\u003c/b\u003e in your project directory \u003c/p\u003e\n\u003cp\u003e\u003cb\u003e2\u003c/b\u003e : Install the Surge CLI if you haven’t already by running \u003cb\u003enpm install -g surge. \u003c/b\u003e \u003c/p\u003e\n\u003cp\u003e\u003cb\u003e3\u003c/b\u003e : Run the \u003cb\u003esurge\u003c/b\u003e command and log in you or create a new account.\u003c/p\u003e\n\u003cp\u003e\u003cb\u003e4\u003c/b\u003e : When asked about the project path, make sure to specify the build folder, for example: \u003c/p\u003e\n\n```ruby\nproject path: /path/to/project/build\n```\n\u003cp\u003e\u003cb\u003e5\u003c/b\u003e : Last it will ask you about domain name enter it e.g \u003cb\u003eyourname.surge.sh \u003c/b\u003e :tada:\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cb\u003eBingo :tada:\u003c/b\u003e\u003c/p\u003e\n\n\u003ch3 id=\"githubpages\"\u003eDeployment to Github Pages \u003c/h3\u003e\n\n\u003cp\u003eadding sooon ! :sleeping:\u003c/p\u003e\n\n\u003ch3 id=\"netlify\"\u003eDeployment to Netlify \u003c/h3\u003e\n\n\u003cp\u003eadding sooon ! :sleeping:\u003c/p\u003e\n\n\u003ch1 id=\"techUsed\"\u003eTechnologies Used :\u003c/h1\u003e\n\u003ch3\u003e\u003ca href=\"https://reactjs.org/docs/getting-started.html\"\u003e:vhs: React \u003c/a\u003e\u003cbr\u003e\n\u003ca href=\"https://graphql.org/\"\u003e:vhs: GraphQl \u003c/a\u003e\u003cbr\u003e\n\u003ca href=\"https://www.apollographql.com/docs/react/get-started/\"\u003e:vhs: Apollo boost \u003c/a\u003e\u003cbr\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-helmet\"\u003e:vhs: React Helet \u003c/a\u003e\u003cbr\u003e\n\u003ca href=\"https://www.react-reveal.com/\"\u003e:vhs: React Reveal \u003c/a\u003e\u003cbr\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-scroll\"\u003e:vhs: React Scroll \u003c/a\u003e\u003cbr\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-typist\"\u003e:vhs: React Typist \u003c/a\u003e\u003cbr\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-visibility-sensor\"\u003e:vhs: React Visibility Sensor \u003c/a\u003e\u003cbr\u003e\n\u003ca href=\"https://roylee0704.github.io/react-flexbox-grid/\"\u003e:vhs: React Flex-Box Grid \u003c/a\u003e\u003cbr\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-device-detect\"\u003e:vhs: React Device Detect \u003c/a\u003e\u003cbr\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-easy-emoji\"\u003e:vhs: React Easy Emoji \u003c/a\u003e\u003cbr\u003e\n\u003c/h3\u003e\n\n\u003ch1 id=\"author\"\u003eAuthor:\u003c/h1\u003e\n\n| \u003cimg src=\"https://user-images.githubusercontent.com/38910854/88262175-1fb6c100-cce1-11ea-92ee-5904aee9657f.jpeg\" width=\"150\"/\u003e\n| :---: | \n| Abdul Qadir :sleeping: | \n| \u003ca href=\"http://abdulqadir.surge.sh/\"\u003e TechFolio \u003c/a\u003e | \n\n\u003ch1 id=\"contributing\"\u003eContributing:\u003c/h1\u003e\n\n\u003cp\u003eFeel 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:\u003c/p\u003e\n\u003cp\u003eYes you can contribute to project by adding more features, I'm waiting for your pull request. :smiley:\u003c/p\u003e\n\n\u003ch1 id=\"license\"\u003eLicense:\u003c/h1\u003e\n\n\u003cp\u003eadding sooon ! :sleeping:\u003c/p\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsleepyqadir%2Ftechfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsleepyqadir%2Ftechfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsleepyqadir%2Ftechfolio/lists"}