Devfolio

screenshot of Devfolio
gatsby
react
tailwind

Devfolio

A modern and production-ready personal portfolio + blog template built with GatsbyJs and TailwindCSS

Overview

Devfolio is a modern and production-ready personal portfolio and blog template built on GatsbyJS and styled with TailwindCSS. It allows users to easily showcase their projects, experience, skills, and write blog posts to showcase their knowledge. It is built with React on GatsbyJS and styled with TailwindCSS, making it mobile-friendly and blazing fast. Users can extend and customize the template as needed.

Features

  • Built with React on GatsbyJS: No React knowledge required to use the template.
  • Styled with Tailwind: The template is styled using TailwindCSS.
  • Simple Configuration: The template provides easy configuration options.
  • Production-ready & Deployable in Seconds: Users can quickly deploy their portfolio and blog.
  • Write Blog Posts in Markdown: Users can write blog posts using Markdown with syntax highlighting.
  • Mobile Friendly: The template is responsive and works well on mobile devices.
  • Extend and Customize as Needed: Users can modify and add features as per their requirements.
  • Blazing Fast: The template is optimized for speed.

Installation

To get started with Devfolio, follow these steps:

  1. Fork or clone the repo.
  2. Open gatsby-config.js and configure the options under siteMetadata.
    • Fill in the required fields like siteUrl, name, title, and description.
    • Optionally, add your Twitter handle, GitHub profile URL, and LinkedIn profile URL.
  3. Set up the blog (optional):
    • The content for the blog exists in the content/blog folder.
    • Blog posts are written in Markdown by default.
    • Delete the sample posts inside the folder if you don't want a blog.
    • Ensure to keep the content/blog folder intact (you may need to add .gitkeep to the folder).
    • If there are no posts in the folder, the Blog link and Latest Posts section will not be displayed.
  4. Customize and extend the template as needed.

Summary

Devfolio is a modern portfolio and blog template built on GatsbyJS and styled with TailwindCSS. It offers various features such as easy configuration, support for blog posts written in Markdown, mobile-friendliness, and the ability to extend and customize the template. Users can quickly set up their portfolio and blog by forking or cloning the repo, configuring the options, and customizing the template as per their requirements. The template is production-ready, deployable in seconds, and optimized for speed.

gatsby
Gatsby

GatsbyJS is a free and open-source static site generator based on React. It uses a modern development stack including Webpack, GraphQL, and modern JavaScript and CSS frameworks. It also provides a rich set of plugins, starters, and themes.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

personal
Personal

A personal website is an online platform that showcases an individual's work, interests, and personality. It can include a range of content, such as a bio, resume, portfolio, blog, and contact information, and is often used to promote one's personal brand or professional services.

portfolio
Portfolio

A portfolio website is a type of website that showcases an individual's or a company's work, skills, and accomplishments. It typically includes a gallery of images or videos, case studies, and client testimonials to provide potential clients or employers with a comprehensive overview of their experience and expertise.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

prismjs
Prism JS

PrismJS is an open-source, lightweight, and extensible syntax highlighting library that supports a wide range of programming languages and markup formats.