A portfolio starter for Gatsby. The target audience are designers and photographers.
Thanks to @bradlc’s work on babel-plugin-tailwind-components, we can easily get the power of Tailwind without the stylesheet bloat by passing Tailwind classes into styled-components with Babel macros 🎉.
If you want to quickly bootstrap a design/photography portfolio or use it as a foundation for your personal site, the starters in gatsby-starter-portfolio are a perfect fit for you! The project’s goal is to offer minimalistic and fast websites.
I hope you like my starters and create something awesome! To see some of my work, you can visit my website or support me on Patreon to get some neat rewards (4K images, project files, tutorial insights). Every pledge on Patreon helps me create more free starters!
Also, check out the other starters for gatsby-starter-portfolio:
Check out the Gatsby Starter Portfolio Overview!
tailwind.macro
(Babel macro) to have hot-reloading of Tailwind stylesPlease note: The parallax effect can be quite heavy for some older CPUs and the site uses some newer CSS features which will result in incompatibility with older browsers.
Check your development environment! You’ll need Node.js, the Gatsby CLI and node-gyp installed. The official Gatsby website also lists two articles regarding this topic:
To copy and install this starter run this command (with “project-name” being the name of your folder you wish to install it in):
gatsby new project-name https://github.com/LekoArts/gatsby-starter-portfolio-cara
cd project-name
npm run dev
You can add other features by having a look at the official plugins page.
npm run build
Copy the content of the public
folder to your webhost or use a website like Netlify which automates that for you.
You have multiple options to configure this project.
config/website.js
to configure data passed to the SEO component and other parts of the Gatsby site:module.exports = {
pathPrefix: '/', // Prefix for all links. If you deploy your site to example.com/portfolio your pathPrefix should be "/portfolio"
siteTitle: 'Cara - Gatsby Starter Portfolio', // Navigation and Site Title
siteTitleAlt: 'Cara', // Alternative Site title for SEO
siteTitleShort: 'Cara', // short_name for manifest
siteHeadline: 'Creating marvelous art & blazginly fast websites', // Headline for schema.org JSONLD
siteUrl: 'https://cara.lekoarts.de', // Domain of your site. No trailing slash!
siteLanguage: 'en', // Language Tag on <html> element
siteLogo: '/logo.png', // Used for SEO and manifest
siteDescription: 'Playful & Colorful One-Page website with Parallax effect',
author: 'LekoArts', // Author for schema.org JSONLD
// siteFBAppID: '123456789', // Facebook App ID - Optional
userTwitter: '@cara', // Twitter Username
ogSiteName: 'cara', // Facebook Site Name
ogLanguage: 'en_US', // Facebook Language
// Manifest and Progress color
themeColor: tailwind.colors.orange,
backgroundColor: tailwind.colors.blue,
}
Use the tailwind.js
file to configure TailwindCSS. Their documentation explains it step-by-step.
Modify the files in the src/styles
directory.
Modify the sections in the src/views
directory. They contain the Dividers & SVG icons.
You can also place the icons somewhere else on the page, modify their animation and hide them on smaller screens:
<SVG icon="triangle" hideMobile width={48} stroke={colors.orange} left="10%" top="20%" />
<SVG icon="hexa" width={48} stroke={colors.red} left="60%" top="70%" />
<SVG icon="box" width={6} fill={colors['grey-darker']} left="60%" top="15%" />
icon
, you have the options: triangle, circle, arrowUp, upDown, box, hexa, cross
hideMobile
to the SVG componentstroke
or fill
depending on the icon. For reference, have a look at the currently used SVGsleft
and top
position the icon relatively to its parent container<UpDown />
or <UpDownWide />
to animate themInstead of relying on Google’s CDN to host its fonts, this site self-hosts the fonts and therefore benefits from increased performance. The installed fonts can be found in src/components/Layout.jsx
:
import 'typeface-cantata-one';
import 'typeface-open-sans';
This starter uses typefaces by Kyle Mathews. Have a look at the repository if you want to install & use other fonts.
You’ll also need to configure fonts
in tailwind.js
to reflect the changes. You then can use the fonts with font-sans
and font-serif
.