Skip to content

Commit a8ca696

Browse files
bgoonzbgoonz
committed
update
1 parent 90cd1d5 commit a8ca696

17 files changed

Lines changed: 13312 additions & 0 deletions

‎purple-spinach-fd57f/.github/FUNDING.yml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# These are supported funding model platforms
2+
3+
github: [LekoArts]
4+
patreon: lekoarts
5+
open_collective: # Replace with a single Open Collective username
6+
ko_fi: lekoarts
7+
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8+
custom: # Replace with a single custom sponsorship URL

‎purple-spinach-fd57f/README.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<p align="center">
2+
<a href="https://cara.lekoarts.de">
3+
<img alt="LekoArts" src="https://img.lekoarts.de/gatsby/gatsby-site-illustration.png" />
4+
</a>
5+
</p>
6+
<h1 align="center">
7+
Gatsby Starter Portfolio: Cara
8+
</h1>
9+
10+
<p align="center">
11+
<a href="https://github.com/LekoArts/gatsby-starter-portfolio-cara/blob/master/LICENSE">
12+
<img src="https://img.shields.io/badge/license-0BSD-blue.svg" alt="Gatsby Starter Portfolio: Cara is released under the 0BSD license." />
13+
</a>
14+
<a href="https://github.com/sponsors/LekoArts">
15+
<img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/LekoArts">
16+
</a>
17+
<a href="https://www.lekoarts.de?utm_source=cara&utm_medium=Starter">
18+
<img alt="Website" src="https://img.shields.io/badge/-website-blue">
19+
</a>
20+
<a href="https://twitter.com/intent/follow?screen_name=lekoarts_de">
21+
<img src="https://img.shields.io/twitter/follow/lekoarts_de.svg?label=Follow%20@lekoarts_de" alt="Follow @lekoarts_de" />
22+
</a>
23+
</p>
24+
25+
Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Using the Gatsby Theme [`@lekoarts/gatsby-theme-cara`](https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-cara).
26+
27+
[**Demo Website**](https://cara.lekoarts.de)
28+
29+
Also 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=Starter).
30+
31+
## ✨ Features
32+
33+
- Theme UI-based theming
34+
- react-spring parallax effect
35+
- CSS Animations on Shapes
36+
37+
## 🚀 Getting Started
38+
39+
[<img src="https://www.gatsbyjs.com/deploynow.svg" alt="Deploy to Gatsby Cloud">](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/LekoArts/gatsby-starter-portfolio-cara)
40+
41+
1. **Create a Gatsby site.**
42+
43+
Use the Gatsby CLI to create a new site, specifying this project
44+
45+
```sh
46+
gatsby new project-name https://github.com/LekoArts/gatsby-starter-portfolio-cara
47+
```
48+
49+
2. **Start developing.**
50+
51+
Navigate into your new site's directory and start it up.
52+
53+
```sh
54+
cd project-name
55+
gatsby develop
56+
```
57+
58+
3. **Open the code and start customizing!**
59+
60+
Your site is now running at `http://localhost:8000`!
61+
62+
If you want to learn more about how you can use a Gatsby starter that is configured with a Gatsby theme, you can check out this [shorter](https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/using-a-gatsby-theme/) or [longer](https://www.gatsbyjs.com/tutorial/using-a-theme/) tutorial. The tutorials don't exactly apply to this starter however the concepts are the same.
63+
64+
## 📝 Using and modifying this starter
65+
66+
**Important Note:** Please read the guide [Shadowing in Gatsby Themes](https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/shadowing/) to understand how to customize the underlying theme!
67+
68+
This starter creates a new Gatsby site that installs and configures the theme [`@lekoarts/gatsby-theme-cara`](https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-cara).
69+
70+
Have a look at the theme's README and files to see what options are available and how you can shadow the various components including Theme UI. 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/`.
71+
72+
### Changing content
73+
74+
The content of this project is defined in four `.mdx` files inside the theme's `sections` folder. You can override the files `intro.mdx`, `projects.mdx`, `about.mdx` and `contact.mdx`. This starter has overridden the `intro.mdx` file as an example. Place the other files in the same `src/@lekoarts/gatsby-theme-cara/sections/` folder.
75+
76+
You have to use the `<ProjectCard />` component inside `projects.mdx` to display the cards. Example:
77+
78+
```md
79+
## Projects
80+
81+
<ProjectCard title="Freiheit" link="https://www.behance.net/gallery/58937147/Freiheit" bg="linear-gradient(to right, #D4145A 0%, #FBB03B 100%)">
82+
This project is my entry to Adobe's #ChallengeYourPerspective contest.
83+
</ProjectCard>
84+
```
85+
86+
### Change your `static` folder
87+
88+
The `static` folder contains the icons, social media images and robots.txt. Don't forget to change these files, too!
89+
90+
## 🤔 Questions or problems?
91+
92+
Please open up an issue on the main repository: [LekoArts/gatsby-themes](https://github.com/LekoArts/gatsby-themes). Thanks!
93+
94+
## 🎓 Learning Gatsby
95+
96+
Looking for more guidance? Full documentation for Gatsby lives [on Gatsby's website](https://www.gatsbyjs.com/).
97+
98+
### Themes
99+
100+
- To learn more about Gatsby themes specifically, we recommend checking out the [theme docs](https://www.gatsbyjs.com/docs/themes/).
101+
102+
### General
103+
104+
- **For most developers, I recommend starting with the [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/docs/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
105+
106+
- **To dive straight into code samples, head [to Gatsby's documentation](https://www.gatsbyjs.com/docs/).** In particular, check out the _Reference Guides_ and _Gatsby API_ sections in the sidebar.
107+
108+
## 🌟 Supporting me
109+
110+
Thanks for using this project! I'm always interested in seeing what people do with my projects, so don't hesitate to tag me on [Twitter](https://twitter.com/lekoarts_de) and share the project with me.
111+
112+
Please star this project, share it on Social Media or consider supporting me on [Patreon](https://www.patreon.com/lekoarts) or [GitHub Sponsor](https://github.com/sponsors/LekoArts)!

‎purple-spinach-fd57f/gatsby-config.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
require(`dotenv`).config()
2+
3+
const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
4+
const googleAnalyticsTrackingId = process.env.GOOGLE_ANALYTICS_ID
5+
6+
module.exports = {
7+
siteMetadata: {
8+
// You can overwrite values here that are used for the SEO component
9+
// You can also add new values here to query them like usual
10+
// See all options: https://github.com/LekoArts/gatsby-themes/blob/master/themes/gatsby-theme-cara/gatsby-config.js
11+
siteTitleAlt: `Cara - Gatsby Starter Portfolio`,
12+
},
13+
flags: {
14+
FAST_DEV: true,
15+
},
16+
plugins: [
17+
{
18+
resolve: `@lekoarts/gatsby-theme-cara`,
19+
// See the theme's README for all available options
20+
options: {},
21+
},
22+
googleAnalyticsTrackingId && {
23+
resolve: `gatsby-plugin-google-analytics`,
24+
options: {
25+
trackingId: process.env.GOOGLE_ANALYTICS_ID,
26+
},
27+
},
28+
{
29+
resolve: `gatsby-plugin-manifest`,
30+
options: {
31+
name: `Cara - @lekoarts/gatsby-theme-cara`,
32+
short_name: `Cara`,
33+
description: `Playful and Colorful One-Page portfolio featuring Parallax effects and animations`,
34+
start_url: `/`,
35+
background_color: `#141821`,
36+
theme_color: `#f6ad55`,
37+
display: `standalone`,
38+
icons: [
39+
{
40+
src: `/android-chrome-192x192.png`,
41+
sizes: `192x192`,
42+
type: `image/png`,
43+
},
44+
{
45+
src: `/android-chrome-512x512.png`,
46+
sizes: `512x512`,
47+
type: `image/png`,
48+
},
49+
],
50+
},
51+
},
52+
`gatsby-plugin-offline`,
53+
`gatsby-plugin-gatsby-cloud`,
54+
`gatsby-plugin-netlify`,
55+
shouldAnalyseBundle && {
56+
resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
57+
options: {
58+
analyzerMode: `static`,
59+
reportFilename: `_bundle.html`,
60+
openAnalyzer: false,
61+
},
62+
},
63+
].filter(Boolean),
64+
}

‎purple-spinach-fd57f/netlify.toml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
[build]
2+
command = "gatsby build"
3+
publish = "public"

‎purple-spinach-fd57f/package.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"private": true,
3+
"name": "cara",
4+
"description": "Playful and Colorful One-Page portfolio featuring Parallax effects and animations",
5+
"version": "0.2.10",
6+
"author": "LekoArts <hello@lekoarts.de>",
7+
"license": "0BSD",
8+
"starter-name": "gatsby-starter-portfolio-cara",
9+
"scripts": {
10+
"build": "gatsby build",
11+
"develop": "gatsby develop",
12+
"develop:cypress": "cross-env CYPRESS_SUPPORT=y yarn develop",
13+
"build:cypress": "cross-env CYPRESS_SUPPORT=y yarn build",
14+
"start": "gatsby develop",
15+
"serve": "gatsby serve",
16+
"clean": "gatsby clean"
17+
},
18+
"dependencies": {
19+
"@lekoarts/gatsby-theme-cara": "^2.0.0",
20+
"gatsby": "^3.6.1",
21+
"gatsby-plugin-gatsby-cloud": "^2.6.1",
22+
"gatsby-plugin-google-analytics": "^3.6.0",
23+
"gatsby-plugin-manifest": "^3.6.0",
24+
"gatsby-plugin-netlify": "^3.6.1",
25+
"gatsby-plugin-offline": "^4.6.0",
26+
"gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.22",
27+
"react": "^17.0.2",
28+
"react-dom": "^17.0.2"
29+
},
30+
"devDependencies": {
31+
"cross-env": "^7.0.3"
32+
}
33+
}

‎purple-spinach-fd57f/src/@lekoarts/gatsby-theme-cara/sections/intro.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Hi, I'm Jane Doe
2+
3+
I'm creating noice web experiences for the next generation of consumer-facing companies

‎purple-spinach-fd57f/src/pages/404.jsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import * as React from "react"
2+
import { Link } from "gatsby"
3+
import { Parallax } from "@react-spring/parallax"
4+
import { Themed } from "theme-ui"
5+
import Layout from "@lekoarts/gatsby-theme-cara/src/components/layout"
6+
import Divider from "@lekoarts/gatsby-theme-cara/src/elements/divider"
7+
import { UpDown, UpDownWide } from "@lekoarts/gatsby-theme-cara/src/styles/animations"
8+
import Svg from "@lekoarts/gatsby-theme-cara/src/components/svg"
9+
import Seo from "@lekoarts/gatsby-theme-cara/src/components/seo"
10+
import Content from "@lekoarts/gatsby-theme-cara/src/elements/content"
11+
import Inner from "@lekoarts/gatsby-theme-cara/src/elements/inner"
12+
13+
const NotFound = () => (
14+
<Layout>
15+
<Seo title="404 - Not Found" />
16+
<Parallax pages={1}>
17+
<div>
18+
<Divider speed={0.2} offset={0} factor={1}>
19+
<UpDown>
20+
<Svg icon="triangle" hiddenMobile width={48} stroke color="icon_orange" left="10%" top="20%" />
21+
<Svg icon="hexa" width={48} stroke color="icon_red" left="60%" top="70%" />
22+
<Svg icon="box" width={6} color="icon_darker" left="60%" top="15%" />
23+
</UpDown>
24+
<UpDownWide>
25+
<Svg icon="arrowUp" hiddenMobile width={16} color="icon_blue" left="80%" top="10%" />
26+
<Svg icon="triangle" width={12} stroke color="icon_brightest" left="90%" top="50%" />
27+
<Svg icon="circle" width={16} color="icon_darker" left="70%" top="90%" />
28+
<Svg icon="triangle" width={16} stroke color="icon_darkest" left="30%" top="65%" />
29+
<Svg icon="cross" width={16} stroke color="icon_pink" left="28%" top="15%" />
30+
<Svg icon="circle" width={6} color="icon_darkest" left="75%" top="10%" />
31+
<Svg icon="upDown" hiddenMobile width={8} color="icon_darkest" left="45%" top="10%" />
32+
</UpDownWide>
33+
<Svg icon="circle" hiddenMobile width={24} color="icon_darker" left="5%" top="70%" />
34+
<Svg icon="circle" width={6} color="icon_darkest" left="4%" top="20%" />
35+
<Svg icon="circle" width={12} color="icon_darkest" left="50%" top="60%" />
36+
<Svg icon="upDown" width={8} color="icon_darkest" left="95%" top="90%" />
37+
<Svg icon="upDown" hiddenMobile width={24} color="icon_darker" left="40%" top="80%" />
38+
<Svg icon="triangle" width={8} stroke color="icon_darker" left="25%" top="5%" />
39+
<Svg icon="circle" width={64} color="icon_green" left="95%" top="5%" />
40+
<Svg icon="box" hiddenMobile width={64} color="icon_purple" left="5%" top="90%" />
41+
<Svg icon="box" width={6} color="icon_darkest" left="10%" top="10%" />
42+
<Svg icon="box" width={12} color="icon_darkest" left="40%" top="30%" />
43+
<Svg icon="hexa" width={16} stroke color="icon_darker" left="10%" top="50%" />
44+
<Svg icon="hexa" width={8} stroke color="icon_darker" left="80%" top="70%" />
45+
</Divider>
46+
<Content sx={{ variant: `texts.bigger` }} speed={0.4} offset={0} factor={1}>
47+
<Inner>
48+
<Themed.h1>404 - Page not found</Themed.h1>
49+
<Themed.p>
50+
Go back to <Link to="/">homepage</Link>.
51+
</Themed.p>
52+
</Inner>
53+
</Content>
54+
</div>
55+
</Parallax>
56+
</Layout>
57+
)
58+
59+
export default NotFound

‎purple-spinach-fd57f/stackbit.yaml‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
stackbitVersion: ~0.3.0
2+
ssgName: gatsby
3+
nodeVersion: '12'
4+
publishDir: public
5+
pagesDir: src/@lekoarts/gatsby-theme-cara/sections
6+
models:
7+
section:
8+
type: page
9+
label: Section
10+
match: '*'
11+
fields: []

‎purple-spinach-fd57f/static/android-chrome-192x192.png‎

52.3 KB
Loading

‎purple-spinach-fd57f/static/android-chrome-512x512.png‎

262 KB
Loading

0 commit comments

Comments
 (0)