DeveloperFolio

DeveloperFolio is a free, open-source React single-page portfolio template that turns a single configuration file into a developer's personal portfolio site with sections for skills, projects, certifications, blogs, and contact information.

What is DeveloperFolio?

DeveloperFolio is a single-page React application that produces a personal portfolio website for software developers. The entire site is driven by one file, src/portfolio.js, which contains configuration objects for greeting text, social media links, skills, tech stack, work experience, open-source projects, achievements, blog posts, and contact information. It runs on any Node.js environment (Node 10.16 or higher) and can be started locally with npm start, built for production, or containerized with Docker using the provided commands.

Key Features

• Single-file customization — Change the content in src/portfolio.js to replace all personal data; no component code needs editing.
• Built-in sections — Summary/About, Skills, Projects, Certificates, Blogs, Contact Me, and a GitHub Profile section are already implemented.
• GitHub integration — The Projects section displays only pinned GitHub repositories; a personal access token stored in a .env file as REACT_APP_GITHUB_TOKEN enables fetching, and showGithubProfile toggles the contact profile.
• Emoji helper — The emoji() function wraps text to keep emojis consistent across browsers and platforms.
• Docker support — Two commands build and run the site: docker build -t developerfolio:latest . and docker run -p 3000:3000 developerfolio:latest.
• Deployment guides — Documentation covers hosting on GitHub Pages (by editing the homepage field in package.json) and on Netlify by linking the repository.
• Tech stack — Built with React, Apollo Boost (GraphQL client), react-twitter-embed for Twitter feeds, react-easy-emoji, react-headroom for a collapsing header, and color-thief for extracting image colors. Illustrations come from UnDraw.

Who is it for?

• Software developers — Create a professional portfolio to showcase their skills and experience without writing HTML/CSS from scratch.
• Job seekers in tech — Quickly stand up a polished site that links to their GitHub, LinkedIn, and résumé (a resumeLink field is included in the greeting config).
• Open-source contributors — Display their pinned GitHub repositories and write-up projects, with a built-in blog section for sharing articles.
• Students and recent graduates — Use the Certificates section to display credentials and the About section to write a bio.

What can you do with DeveloperFolio?

• Personalize content — Edit src/portfolio.js to set your name, subtitle, résumé link, social media URLs, skills, work experience, projects, achievements, and blog entries.
• Showcase GitHub work — Generate a simple GitHub token, add it to .env, and the site will pull your pinned repositories into the Projects section.
• Deploy in minutes — Follow the GitHub Pages or Netlify instructions to publish the portfolio; a CNAME file can be added for a custom domain.

How does DeveloperFolio work?

Clone the repository, run npm install, then npm start to launch the development server. The site reads data from src/portfolio.js and renders a single-page layout with smooth navigation. To display GitHub projects, create a .env file in the root, add REACT_APP_GITHUB_TOKEN with a personal access token, and set showGithubProfile to true. Deployment to GitHub Pages requires changing the homepage value in package.json to your site URL before running the build.

Pricing

DeveloperFolio is free and open source under the GPL-3.0 License. The source code is publicly available and can be used or modified according to the license terms.

FAQ

Is DeveloperFolio free?

Yes, DeveloperFolio is completely free. It is released under the GPL-3.0 License, so you can use, modify, and distribute it as long as you follow the license's terms.

How do I customize the template?

Open the src/portfolio.js file and replace the configuration objects (greeting, socialMediaLinks, skillsSection, techStack, workExperience, bigProjects, etc.) with your own data. The sections update automatically when you save and the dev server reloads.

Does the Projects section show all my GitHub repos?

No. The Projects section only displays the repositories you have pinned on your GitHub profile. You must also set up a GitHub personal access token in a .env file as REACT_APP_GITHUB_TOKEN for the fetch to work.

Can I deploy to GitHub Pages?

Yes, the README includes step-by-step instructions. You need to change the homepage field in package.json to your GitHub Pages URL, optionally add a CNAME file for a custom domain, then follow the official create-react-app deployment guide.

What Node.js version do I need?

You need Node.js version 10.16.0 or higher and npm version 6.9.0 or higher. Alternatively, the repository includes a Dockerfile so you can build and run the app with Docker.