This repository is no longer maintained. I decided to rebuild the portfolio template as a Gatsby Theme which makes it easier to update. Please use this Starter project instead: Gatsby Starter Portfolio Minimal Theme
Gatsby Starter Portfolio Minimal
A modern one-page portfolio with a clean yet expressive design.
Portfolio Minimal is a Gatsby Starter. Starters are boilerplate projects that can be used to set up new sites effortless. With this starter, you can create a modern one-page portfolio within minutes.
Just install the starter, add your content, and there you go!
The starter has predefined sections as well as a template that you can use to create new, custom sections.
The predefined sections are:
- About me
- Contact me
- Medium articles
🍪 [NEW] Cookie Consent Bar - Be ready for GDPR-compliant tracking.
Add tracking services like Google Analytics to your site and display a GDPR-compliant cookie consent banner.
🌛 [NEW] Dark Mode - Based on user's preferences.
If the user's OS is set to using dark mode, the Gatsby Starter will automatically switch to a dark theme too.
🕹️ Quick and Easy Setup - Add content and deloy.
Just install the starter, add your content, and deploy it! This starter works seamlessly with hosts like Netlify.
📓 Content Integration via MDX - No external CMS needed.
MDX is a Markdown format that allows you to enrich your content with React components. This makes it fully customizable without external dependencies.
🧰 Extendable Layout - Add more sections as you like.
The starter includes predefined sections as well as a template for new, custom sections. Moreover, you can add new projects to the project section without additional coding.
💅 Responsive Design - With freshening animations.
The starter is designed with a mobile-first approach and looks perfect on small and large breakpoints. Moreover, it has some nice and smooth animations.
In case you are a writer on Medium, the starter has a easy to use Medium integration that allows you to feature your latest articles.
To see all features in action, have a look at the live demo.
How to Start
With Portfolio Minimal, you get up and running in just a few minutes.
Install the Gatsby CLI.
npm install -g gatsby-cli
Create a new Gatsby site with the Portfolio Minimal starter.
gatsby new portfolio-minimal https://github.com/konstantinmuenster/gatsby-starter-portfolio-minimal
Start the site in
cd portfolio-minimal gatsby develop
Open the source code and start editing!
After you installed the starter project, you most likely want to add your own content.
First, you want to edit the config file which stores the site's configuration (e.g. title, description) and social profiles.
|-- config |-- index.js
Navigate to the
index.js file in the config folder, edit the configuration, save it, that's it!
Edit page content
Next, you can edit the content for each section you want to be displayed. By default, all sections are shown. If you want to remove certain sections from the site, check out this part of the Readme.
|-- content |-- imprint |-- index |-- about |-- contact ... ...
You find all content in the content folder (surprisingly). For content integration, the project uses MDX, a Markdown format. If you haven't worked with Markdown or MDX before, check the Markdown syntax in Gatsby's docs. They also provide further information about MDX.
To get up and running, just edit the predefined data fields in each
You find the color and font settings in the configuration file, located at:
Note: The usage of the splash screen can be set for each page individually in the page content directory.
Edit Page Structure
To remove or reorder predefined sections, navigate to the
src/pages/index.js file. This is the home page of your site.
Each section (besides the Articles section) exists of an imported React component and a GraphQL query that is needed for data querying.
If you want to remove a section, just delete the imported React component and query.
If you want to reorder your sections, just reorder the React components inside the
<Layout /> component.
Add custom sections
If you want to add your own custom sections, there is a section template you can use. You can find it in the following directory:
Designing and building a portfolio from scratch can be tough. To inspire you and provide you a foundation to build upon, I've decided to publish my personal website as a Gatsby Starter. This boilerplate project should motivate you to build your own awesome portfolio with Gatsby.
I always appreciate feedback, so share your thoughts and suggestions with me: firstname.lastname@example.org
If you find any bugs or have feature suggestions, create a new issue or pull request
Thanks a lot for using this starter!
Konstantin Münster – konstantin.digital
Distributed under the MIT license.
LICENSE for more information.