Gatsby Portfolio

screenshot of Gatsby Portfolio

Gatsby Portfolio

creative personal & portfolio template based on gatsby. designed so you can showcase your work and write your blogs.


This product is a creative personal and portfolio template based on Gatsby. It is designed to showcase work and allow for blogging. The theme is built using Gatsby v2 and utilizes styled-components and styled-system for styling. It also includes SEO features and has a responsive design.


  • Gatsby v2: The template is built using the latest version of Gatsby, providing speed and performance.
  • Styled-components + Styled-system: Styling is done using styled-components and styled-system, making it easy to customize the theme to fit personal preferences.
  • SEO: The template includes SEO features, allowing for better search engine optimization and visibility.
  • Responsive design: The theme is designed to be responsive, ensuring that it looks good and functions well on different devices and screen sizes.


To install the template and start using it, follow these steps:

  1. Clone the site using Git:
git clone <repository-url>
  1. Use the Gatsby CLI to create a new site, specifying the default starter:
gatsby new my-portfolio
  1. Navigate into your new site’s directory:
cd my-portfolio
  1. Set up the environment by opening the file .env.development and pasting your personal GitHub access token in it. Make sure to have at least repository and user read access. The file should then look like the following:
  1. Start the development server:
gatsby develop
  1. Open the source code and start editing! Your site is now running at http://localhost:8000. Note that you'll also see a second link http://localhost:8000/___graphql, which is a tool you can use to experiment with querying your data.


This product is a personal and portfolio template based on Gatsby. It provides a modern and customizable design, with features such as styled-components for styling, SEO optimization, and a responsive layout. Installing the template is easy by following the provided steps. Overall, it is a great choice for those looking to showcase their work and write blogs.


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 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


SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

Styled Components

Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.


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.


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.

Prism JS

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