gatsby-theme-portfolio-minimal
Advanced tools
#### A modern one-page portfolio with a clean yet expressive design.
Portfolio Minimal is a Gatsby Theme. You can install it as a dependency in your project and use its building blocks to create your own site - effortless and within minutes.
Example Project on GitHub
This repository also contains an example-site, so that you can see how the theme integrates in an existing Gatsby site.
In general, Gatsby Themes are regular Node packages that can be installed like any other package via npm or yarn.
To use Gatsby Theme Portfolio Minimal, you need to have a Gatsby project. If you have an existing one, you can skip the next part and follow the instructions for adding Portfolio Minimal to an existing Gatsby site.
If you are creating a new site and want to use the Gatsby Theme Portfolio Minimal, you can use the Gatsby Theme Portfolio Minimal Starter. This will generate a new site that already has the theme pre-configured.
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-theme
Once installed, you can begin developing your site.
gatsby develop
By default, the Portfolio Minimal Starter has a content directory at the root of your Gatsby site. There, you can edit the theme settings as well as add content for your sections (e.g. images). To learn more about it, see this section: Using The Content Directory
If you already have a site you’d like to add the theme to, you can install it and manually configure it.
Install the Gatsby Theme Portfolio Minimal via npm or yarn.
npm install gatsby-theme-portfolio-minimal
Add the theme to the plugin list in your gatsby-config.js file.
module.exports = {
plugins: [`gatsby-theme-portfolio-minimal`],
};
Run development mode to initialize the theme's configuration files.
gatsby develop
By default, this creates a content directory at the root of your Gatsby site. There, you can edit the theme settings as well as add content for your sections (e.g. images). To learn more about it, see this section: Using The Content Directory
The concept behind themes is easy. You have the theme installed as a npm package which allows you to extract certain functionalities from it when building your site. In the case of Portfolio Minimal, you can extract and configure various components that can be used as building blocks to construct a page. Let's see how it works!
Creating pages with Portfolio Minimal can be done within minutes. To make it work, you have to create a new file within the pages directory of your site. This is where all pages are located in a Gatsby site.
portfolio-minimal-site
├── src
│ └── pages
│ └── first-page.js
├── gatsby-config.js
└── package.json
Note that the file name will be used as a URL route. So in our example, the page can be requested on the /first-page route.
Inside first-page.js, we create a React component which will be exported by default. The component uses the Page and Seo elements which are being imported from the gatsby-theme-portfolio-minimal package. While the Page component is mandatory to construct a page with Portfolio Minimal, Seo isn't (but recommended).
import { Page, Seo } from 'gatsby-theme-portfolio-minimal';
export default function FirstPage() {
return (
<>
<Seo title="FirstPage" />
<Page useSplashScreenAnimation>...</Page>
</>
);
}
Note that we pass useSplashScreenAnimation as a prop to the Page component. To find out more about how you can configure the theme's components, check out this section: Theme Components
Now that we have our basic page layout set up, we can start adding sections to the page. It basically works the same as before: You import components from the gatsby-theme-portfolio-minimal package which then can be configured and used in your page.
import { ArticlesSection, Page, Seo } from 'gatsby-theme-portfolio-minimal';
export default function FirstPage() {
return (
<>
<Seo title="FirstPage" />
<Page useSplashScreenAnimation>
<ArticlesSection anchor="articles" heading="Latest Articles" sources={['Medium']} />
</Page>
</>
);
}
That's it! You can now visit your page on /first-page. To see which components are available to create pages, have a look at Theme Components.
Portfolio Minimal aims to separate content from code. That's why most content should live in its own directory. This is, by default, a folder at the root of your site called content.
In the content directory, you have your settings.json file which is responsible for configuring global settings for your site as well as content-type-specific folders (by default: images, json).
If you want to learn which settings you can configure, switch to the Customization part of the documentation.
If you want to learn more about how to use images with Portfolio Minimal, switch to the Using Images part of the documentation.
The json folder contains all the content that is best stored in a structured format. This content is used in associated section components. Have a look at the table to see which files are used for what:
| File Name | Used As Data Source In | Example |
|---|---|---|
interests.json | InterestsSection | Example File |
projects.json | ProjectsSection | Example File |
socialProfiles.json | HeroSection, ContactSection | Example File |
tba
Just as we put structured JSON content in our separate content directory, we can do so with text-heavy content too. A simple solution would be to use Markdown for that.
To add Markdown content, follow these steps:
Install the required Gatsby plugins to add Markdown as a data source.
npm install gatsby-source-filesystem gatsby-transformer-remark
Add both plugins to your gatsby-config.js and configure the source filesystem plugin. The path represents the directory in which your Markdown files are stored. It is recommended to use a folder right next to our other content folders like json and images.
module.exports = {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/markdown`,
name: `markdown`,
},
},
`gatsby-transformer-remark`,
],
};
Next, we can create our first Markdown file, e.g. an about.md file for the About Me text.
**Portfolio Minimal** is a Gatsby Theme that creates outstanding one-pages portfolio within minutes!
To use and display the file contents, we need to write a GraphQL pageQuery that loads the content from the Markdown file and passes it as a prop called data to our page component. From it, we can extract the HTML we need for our AboutSection component.
import React from 'react';
import { graphql } from 'gatsby';
import { AboutSection, Page, Seo } from 'gatsby-theme-portfolio-minimal';
export default function IndexPage({ data }) {
return (
<>
<Seo title="Gatsby Theme Portfolio Minimal" />
<Page useSplashScreenAnimation>
<AboutSection
anchor="about"
heading="About Portfolio Minimal"
htmlDescription={data.aboutSection.edges[0].node.html}
imageFileName="charles-deluvio-DgoyKNgPiFQ-unsplash.jpg"
/>
</Page>
</>
);
}
export const pageQuery = graphql`
query AboutSection {
aboutSection: allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/about.md/" } }) {
edges {
node {
html
}
}
}
}
`;
If you want to learn more about using Gatsby with Markdown, check out the docs: How To Use Gatsby With Markdown.
Portfolio Minimal provides several components which you can use to build your individual portfolio site. In general, we can differentiate between layout components, metadata components, and section components.
Layout Components
Metadata Components
Section Components
<AboutSection /><ArticlesSection /><ContactSection /><HeroSection /><InterestsSection /><LegalSection /><ProjectsSection />The Page component is mandatory to construct a page. It provides the basic layout as well as header and footer. You can use it to wrap your page content within.
| Available Props | Type | Default | Description |
|---|---|---|---|
| useSplashScreenAnimation | boolean (optional) | false | Whether or not the page should use the splash screen animation sequence |
The Seo component can be used to enrich your page with SEO metadata, such as title, description, etc. It is recommended to include a Seo component on each page.
| Available Props | Type | Default | Description |
|---|---|---|---|
| title | string (required) | - | Defines the SEO title |
| useTitleTemplate | boolean (optional) | false | Whether or not the title template defined from settings.json should be used to construct a SEO title |
| description | string (optional) | - | Defines the SEO description |
| noIndex | boolean (optional) | false | Whether or not the page should be indexed by search engines |
The AboutSection component can be used to display a descriptive text in combination with an image.
| Available Props | Type | Default | Description |
|---|---|---|---|
| anchor | string (required) | - | Defines the anchor tag for the section. If you want to use a link to the section in your navigation, this anchor tag should be used. Note: The anchor should be defined without a preceding #. |
| heading | string (optional) | - | Defines the heading of the section. |
| htmlDescription | string (required) | - | Defines the descriptive text of the section. HTML tags can be used. |
| imageFileName | string (required) | - | File name for the image that should be displayed. The image must be stored in the images folder within your content directory. |
The ArticlesSection component can be used to display your latest articles as linked cards. Currently, it is only possible to use Medium as a source for articles.
| Available Props | Type | Default | Description |
|---|---|---|---|
| anchor | string (required) | - | Defines the anchor tag for the section. If you want to use a link to the section in your navigation, this anchor tag should be used. Note: The anchor should be defined without a preceding #. |
| heading | string (optional) | - | Defines the heading of the section. |
| sources | string[] (required) | - | Defines which sources should be used to collect your latest articles from. Available sources: "Medium" |
| maxArticles | number (optional) | 3 | Defines how many articles should be displayed at most. |
The ContactSection component can be used to display your contact details in combination with a profile image.
| Available Props | Type | Default | Description |
|---|---|---|---|
| anchor | string (required) | - | Defines the anchor tag for the section. If you want to use a link to the section in your navigation, this anchor tag should be used. Note: The anchor should be defined without a preceding #. |
| heading | string (optional) | - | Defines the heading of the section. |
| description | string (optional) | - | Defines the descriptive text between heading and contact details. |
| imageFileName | string (required) | - | File name for your profile image. The image must be stored in the images folder within your content directory. |
| name | string (required) | - | Defines your name that should be displayed in the contact details. |
| string (required) | - | Defines your email address that should be displayed in the contact details. | |
| socialProfiles | string[] (optional) | - | Defines which social profiles should be displayed in the contact details. Each entry of the array must have an associated profile in socialProfiles.json. Available profiles: "Mail", "LinkedIn", "Github", "Behance", "Medium" |
The HeroSection component is intended to be used as the very first section of your page. It displays a short summary what your portfolio is all about.
| Available Props | Type | Default | Description |
|---|---|---|---|
| anchor | string (required) | - | Defines the anchor tag for the section. If you want to use a link to the section in your navigation, this anchor tag should be used. Note: The anchor should be defined without a preceding #. |
| content.iconPrefixText | string (optional) | - | Defines the text left to the emoji / icon (e.g. used for a greeting). |
| content.iconFileName | string (optional) | - | File name for your emoji / icon. The image file must be stored in the images folder within your content directory. |
| content.title | string (required) | - | Defines the title text (e.g. who are you?) |
| content.subtitlePrefix | string (required) | - | Defines the first part of the subtitle. |
| content.subtitleHighlight | string (required) | - | Defines the highlighted part of the subtitle. |
| content.subtitleSuffix | string (required) | - | Defines the last part of the subtitle. |
| content.description | string (optional) | - | Defines a descriptive text below the subtitle. |
| content.socialProfiles | string[] (optional) | - | Defines which social profiles should be displayed below the description. Each entry of the array must have an associated profile in socialProfiles.json. Available profiles: "Mail", "LinkedIn", "Github", "Behance", "Medium" |
The InterestsSection component can be used to display several topics you are interested in or are interesting for the reader. It uses a list of interests that are stored in interests.json.
| Available Props | Type | Default | Description |
|---|---|---|---|
| anchor | string (required) | - | Defines the anchor tag for the section. If you want to use a link to the section in your navigation, this anchor tag should be used. Note: The anchor should be defined without a preceding #. |
| heading | string (optional) | - | Defines the heading of the section. |
| initiallyShown | number (optional) | - | Defines how many items should be initially visible. If there are more items than the number of initially shown, a "Show More" button is displayed. |
The LegalSection component can be used to display long texts (e.g. imprint, privacy policy) in a well formatted manner.
| Available Props | Type | Default | Description |
|---|---|---|---|
| anchor | string (required) | - | Defines the anchor tag for the section. If you want to use a link to the section in your navigation, this anchor tag should be used. Note: The anchor should be defined without a preceding #. |
| heading | string (optional) | - | Defines the heading of the section. |
| htmlContent | string (required) | - | Defines the content of the page. HTML tags can be used. |
The ProjectsSection component can be used to display several projects / features with an image, a description, and external links. Each project must be defined in projects.json.
| Available Props | Type | Default | Description |
|---|---|---|---|
| anchor | string (required) | - | Defines the anchor tag for the section. If you want to use a link to the section in your navigation, this anchor tag should be used. Note: The anchor should be defined without a preceding #. |
| heading | string (optional) | - | Defines the heading of the section. |
| maxProjects | number (optional) | 4 | Defines how many projects should be displayed the most. |
| button.label | string (optional) | - | Defines the label of the button that is displayed below the projects. |
| button.url | string (optional) | - | Defines the url of the button that is displayed below the projects. |
I tried to leave as much configuration as possible to you as a developer. This allows the theme to be highly flexible and adjustable to your needs.
The theme settings can be divided in two parts. There is a settings.json file inside the content directory which is the main spot to configure your site. Also, you can set some settings for the theme inside your gatsby-config.js. These options are used to configure some plugins which Portfolio Minimal uses under the hood.
settings.json{
"siteMetadata": {
"title": "Gatsby Theme Portfolio Minimal",
"titleTemplate": "%s · A Gatsby Theme",
"description": "A Gatsby Theme to create a clean one-page portfolio with Markdown content.",
"author": "Konstantin Münster",
"siteUrl": "https://example.com",
"language": "en"
},
"logo": { "text": "Gatsby" },
"navigation": {
"header": [
{ "displayName": "About", "url": "/#about" },
{ "displayName": "Features", "url": "/#features" },
{ "displayName": "Github", "url": "/#github" }
],
"ctaButton": {
"openNewTab": true,
"displayName": "Resume",
"url": "/resume.pdf"
},
"footer": [
{ "displayName": "Privacy", "url": "/privacy" },
{ "displayName": "Imprint", "url": "/imprint" }
]
},
"featureToggles": {
"useDarkModeAsDefault": false,
"useDarkModeBasedOnUsersPreference": true,
"useCookieBar": false
}
}
gatsby-config.jsmodule.exports = {
plugins: [
{
resolve: 'gatsby-theme-portfolio-minimal',
options: {
favicon: '', // e.g. "./content/favicon.png"
siteUrl: 'https://example.com', // Used for sitemap generation
manifestSettings: {
siteName: 'My Minimal Portfolio', // Used in manifest.json
shortName: 'Portfolio', // Used in manifest.json
startUrl: '/', // Used in manifest.json
backgroundColor: '#FFFFFF', // Used in manifest.json
themeColor: '#000000', // Used in manifest.json
display: 'minimal-ui', // Used in manifest.json
},
googleAnalytics: {
trackingId: 'UA-XXXXXX-X',
anonymize: true, // Default true
environments: ['production', 'development'], // Default ["production"]
},
},
},
],
};
Internally, Portfolio Minimal uses CSS variables to ensure a consistent color scheme across the site. You can override these colors by using the concept of shadowing Gatsby offers. To do this, follow the instructions:
Create a file called theme.css in the following path: {GatsbyProjectRoot}/src/gatsby-theme-portfolio-minimal/src/globalStyles.
Add the following contents to the file and adjust the colors as you like. Do not change the names of the variables!
body[data-theme='lightTheme'] {
--primary-color: #000000;
--secondary-color: #fff4d9;
--tertiary-color: #f2f2f2;
--text-color: #000000;
--subtext-color: #555555;
--background-color: #ffffff;
--card-background-color: #ffffff;
--scroll-bar-color: rgba(0, 0, 0, 0.5);
--box-shadow-color: rgba(0, 0, 0, 0.16);
--box-shadow-hover-color: rgba(0, 0, 0, 0.32);
--base-font: 'Roboto', Arial, sans-serif;
}
body[data-theme='darkTheme'] {
--primary-color: #fafafa;
--secondary-color: #2a2926;
--tertiary-color: #252525;
--text-color: rgba(255, 255, 255, 0.87);
--subtext-color: #aaaaaa;
--background-color: #121212;
--card-background-color: #1c1c1c;
--scroll-bar-color: rgba(255, 255, 255, 0.5);
--box-shadow-color: rgba(0, 0, 0, 0.16);
--box-shadow-hover-color: rgba(0, 0, 0, 0.32);
--base-font: 'Roboto', Arial, sans-serif;
}
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
FAQs
#### A modern one-page portfolio with a clean yet expressive design.
The npm package gatsby-theme-portfolio-minimal receives a total of 22 weekly downloads. As such, gatsby-theme-portfolio-minimal popularity was classified as not popular.
We found that gatsby-theme-portfolio-minimal demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.