Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.
Also be sure to checkout other Free & Open Source Gatsby Themes
- Theme UI-based theming
- react-spring parallax effect
- CSS Animations on Shapes
- Light/Dark mode
npm install @lekoarts/gatsby-theme-caraThis will generate a new site (with the folder name "cara") that pre-configures use of the theme including example content and additional plugins.
gatsby new cara LekoArts/gatsby-starter-portfolio-cara| Key | Default Value | Description |
|---|---|---|
basePath |
/ |
Root url for the theme |
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `@lekoarts/gatsby-theme-cara`,
options: {
// basePath defaults to `/`
basePath: `/sideproject`
}
}
]
};In addition to the theme options, there are a handful of items you can customize via the siteMetadata object in your site's gatsby-config.js
// gatsby-config.js
module.exports = {
siteMetadata: {
// Used for the title template on pages other than the index site
siteTitle: `Cara`,
// Default title of the page
siteTitleAlt: `Cara - @lekoarts/gatsby-theme-cara`,
// Can be used for e.g. JSONLD
siteHeadline: `Cara - Gatsby Theme from @lekoarts`,
// Will be used to generate absolute URLs for og:image etc.
siteUrl: `https://cara.lekoarts.de`,
// Used for SEO
siteDescription: `Playful and Colorful One-Page portfolio featuring Parallax effects and animations`,
// Will be set on the <html /> tag
siteLanguage: `en`,
// Used for og:image and must be placed inside the `static` folder
siteImage: `/banner.jpg`,
// Twitter Handle
author: `@lekoarts_de`
}
};The content of the page is managed by .mdx files inside the theme's sections folder. You can edit the files by shadowing them in your site.
These files are available: intro.mdx, projects.mdx, about.mdx, contact.mdx
See the example that shadows via src/@lekoarts/gatsby-theme-cara/sections/intro.mdx:
# Hi, I'm Jane Doe
I'm creating noice web experiences for the next generation of consumer-facing companiesThe other headings should be
<h2>headings!
You also have access to the <ProjectCard /> component/shortcode which is used in the projects.mdx section. The component takes the props title (string), link (string), bg (string) and children (React.ReactNode). You would use it like that:
## Projects
<ProjectCard title="Freiheit" link="https://www.behance.net/gallery/58937147/Freiheit" bg="linear-gradient(to right, #D4145A 0%, #FBB03B 100%)">
This project is my entry to Adobe's #ChallengeYourPerspective contest.
</ProjectCard>