\n\nPlayful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with [MDX](https://mdxjs.com/) and [Theme UI](https://theme-ui.com/).\n\n[](https://cara.lekoarts.de)\n\nRead the [Source Code](https://github.com/LekoArts/gatsby-starter-portfolio-cara).\n\nAlso be sure to check out other [Free & Open Source Gatsby Themes](https://themes.lekoarts.de) and my [Personal Website](https://www.lekoarts.de?utm_source=cara&utm_medium=Theme).\n\n## Features\n\n- Theme UI-based theming\n- react-spring parallax effect\n- CSS Animations on Shapes\n- Light/Dark mode\n\n## Installation\n\n```sh\nnpm install @lekoarts/gatsby-theme-cara\n```\n\n### Install as a starter\n\nThis will generate a new site (with the folder name \"cara\") that pre-configures use of the theme including example content and additional plugins.\n\n```sh\ngatsby new cara LekoArts/gatsby-starter-portfolio-cara\n```\n\n[**View the starter's code**](https://github.com/LekoArts/gatsby-starter-portfolio-cara)\n\n## Usage\n\n### Theme options\n\n| Key | Default Value | Description |\n| ---------- | ------------- | ------------------------------------------------------------------------------------------------------- |\n| `basePath` | `/` | Root url for the theme |\n| `mdx` | `true` | Configure `gatsby-plugin-mdx` (if your website already is using the plugin pass false to turn this off) |\n\n#### Example usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n plugins: [\n {\n resolve: `@lekoarts/gatsby-theme-cara`,\n options: {\n // basePath defaults to `/`\n basePath: `/sideproject`,\n },\n },\n ],\n};\n```\n\n#### Additional configuration\n\nIn 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`\n\n```js\n// gatsby-config.js\nmodule.exports = {\n siteMetadata: {\n // Used for the title template on pages other than the index site\n siteTitle: `Cara`,\n // Default title of the page\n siteTitleAlt: `Cara - @lekoarts/gatsby-theme-cara`,\n // Can be used for e.g. JSONLD\n siteHeadline: `Cara - Gatsby Theme from @lekoarts`,\n // Will be used to generate absolute URLs for og:image etc.\n siteUrl: `https://cara.lekoarts.de`,\n // Used for SEO\n siteDescription: `Playful and Colorful One-Page portfolio featuring Parallax effects and animations`,\n // Will be set on the
tag\n siteLanguage: `en`,\n // Used for og:image and must be placed inside the `static` folder\n siteImage: `/banner.jpg`,\n // Twitter Handle\n author: `@lekoarts_de`,\n },\n};\n```\n\n### Shadowing\n\nPlease read the guide [Shadowing in Gatsby Themes](https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/shadowing/) to understand how to customize the theme! Generally speaking you will want to place your files into `src/@lekoarts/gatsby-theme-cara/` to shadow/override files. The Theme UI config can be configured by shadowing its files in `src/gatsby-plugin-theme-ui/`.\n\n### Editing the content\n\nThe 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.\n\nThese files are available: `intro.mdx`, `projects.mdx`, `about.mdx`, `contact.mdx`\n\nSee the [example](https://github.com/LekoArts/gatsby-themes/tree/main/examples/cara/src/@lekoarts/gatsby-theme-cara/sections) that shadows via `src/@lekoarts/gatsby-theme-cara/sections/intro.mdx`:\n\n```md\n# Hi, I'm Jane Doe\n\nI'm creating noice web experiences for the next generation of consumer-facing companies\n```\n\n> The other headings should be `
![\"Gatsby](\"https://img.lekoarts.de/gatsby/gatsby-themes-illustration.png\")
\n \n![\"@lekoarts/gatsby-theme-cara](\"https://img.shields.io/badge/license-MIT-blue.svg\"){kind=icon}
\n ![\"Current](\"https://img.shields.io/npm/v/@lekoarts/gatsby-theme-cara.svg\")
\n ![\"Downloads](\"https://img.shields.io/npm/dm/@lekoarts/gatsby-theme-cara.svg\")
\n ![\"Total](\"https://img.shields.io/npm/dt/@lekoarts/gatsby-theme-cara.svg\")
\n ![\"Website\"](\"https://img.shields.io/badge/-website-blue\"){kind=icon}
\n ![\"Follow](\"https://img.shields.io/twitter/follow/lekoarts_de.svg?label=Follow%20@lekoarts_de\")
\n