add custom files
This commit is contained in:
parent
d49ec98ef2
commit
c0ebb768b3
|
|
@ -1,7 +1,29 @@
|
|||
module.exports = {
|
||||
siteMetadata: {
|
||||
siteUrl: "https://www.yourdomain.tld",
|
||||
title: "aki_site",
|
||||
siteTitle: `Akkkiiii site`,
|
||||
siteTitleAlt: `Cara - @lekoarts/gatsby-theme-cara`,
|
||||
siteHeadline: ``,
|
||||
siteUrl: `localhost:8080`,
|
||||
siteDescription: ``,
|
||||
siteLanguage: `en`,
|
||||
siteImage: `/banner.jpg`,
|
||||
author: `Priyatham <priyathamsaichand@gmail.com>`,
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
plugins: [
|
||||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
name: `sections`,
|
||||
path: `${__dirname}/src/sections`,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-plugin-mdx`,
|
||||
options: {
|
||||
lessBabel: true,
|
||||
},
|
||||
},
|
||||
`gatsby-plugin-react-helmet`,
|
||||
`gatsby-plugin-theme-ui`,
|
||||
],
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
const standardBasePath = `/`
|
||||
|
||||
exports.createPages = async ({ actions }, themeOptions) => {
|
||||
const { createPage } = actions
|
||||
|
||||
const basePath = themeOptions.basePath || standardBasePath
|
||||
|
||||
createPage({
|
||||
path: basePath,
|
||||
component: require.resolve(`./src/templates/cara.tsx`),
|
||||
})
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
|
|
@ -15,8 +15,18 @@
|
|||
"clean": "gatsby clean"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdx-js/mdx": "^1.6.22",
|
||||
"@react-spring/parallax": "^9.2.4",
|
||||
"@react-spring/web": "^9.2.4",
|
||||
"@theme-ui/presets": "^0.9.1",
|
||||
"gatsby-plugin-mdx": "^2.10.1",
|
||||
"gatsby-plugin-react-helmet": "^4.10.0",
|
||||
"gatsby-plugin-theme-ui": "^0.9.1",
|
||||
"gatsby-source-filesystem": "^3.10.0",
|
||||
"react-helmet": "^6.1.0",
|
||||
"gatsby": "^3.11.1",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1"
|
||||
"react-dom": "^17.0.1",
|
||||
"theme-ui": "^0.9.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
import * as React from "react"
|
||||
import Divider from "../elements/divider"
|
||||
import Inner from "../elements/inner"
|
||||
import Content from "../elements/content"
|
||||
import Svg from "./svg"
|
||||
import { UpDown, UpDownWide } from "../styles/animations"
|
||||
// @ts-ignore
|
||||
import AboutMDX from "../sections/about"
|
||||
|
||||
const About = ({ offset, factor = 1 }: { offset: number; factor?: number }) => (
|
||||
<div>
|
||||
<Divider
|
||||
bg="divider"
|
||||
clipPath="polygon(0 16%, 100% 4%, 100% 82%, 0 94%)"
|
||||
speed={0.2}
|
||||
offset={offset}
|
||||
factor={factor}
|
||||
/>
|
||||
<Divider speed={0.1} offset={offset} factor={factor}>
|
||||
<UpDown>
|
||||
<Svg icon="box" hiddenMobile width={6} color="icon_blue" left="50%" top="75%" />
|
||||
<Svg icon="upDown" hiddenMobile width={8} color="icon_darkest" left="70%" top="20%" />
|
||||
<Svg icon="triangle" width={8} stroke color="icon_darkest" left="25%" top="5%" />
|
||||
<Svg icon="upDown" hiddenMobile width={24} color="icon_orange" left="80%" top="80%" />
|
||||
</UpDown>
|
||||
<UpDownWide>
|
||||
<Svg icon="arrowUp" hiddenMobile width={16} color="icon_purple" left="5%" top="80%" />
|
||||
<Svg icon="triangle" width={12} stroke color="icon_brightest" left="95%" top="50%" />
|
||||
<Svg icon="circle" hiddenMobile width={6} color="icon_brightest" left="85%" top="15%" />
|
||||
<Svg icon="upDown" hiddenMobile width={8} color="icon_darkest" left="45%" top="10%" />
|
||||
</UpDownWide>
|
||||
<Svg icon="circle" hiddenMobile width={6} color="icon_brightest" left="4%" top="20%" />
|
||||
<Svg icon="circle" width={12} color="icon_darkest" left="70%" top="60%" />
|
||||
<Svg icon="box" width={6} color="icon_orange" left="10%" top="10%" />
|
||||
<Svg icon="box" width={12} color="icon_darkest" left="20%" top="30%" />
|
||||
<Svg icon="hexa" width={8} stroke color="icon_darkest" left="80%" top="70%" />
|
||||
</Divider>
|
||||
<Content speed={0.4} offset={offset} factor={factor}>
|
||||
<Inner>
|
||||
<AboutMDX />
|
||||
</Inner>
|
||||
</Content>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default About
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
/** @jsx jsx */
|
||||
import { jsx } from "theme-ui"
|
||||
import Divider from "../elements/divider"
|
||||
import Inner from "../elements/inner"
|
||||
import Content from "../elements/content"
|
||||
import Svg from "./svg"
|
||||
import { UpDown, UpDownWide, waveAnimation } from "../styles/animations"
|
||||
import Footer from "./footer"
|
||||
// @ts-ignore
|
||||
import ContactMDX from "../sections/contact"
|
||||
|
||||
const Contact = ({ offset, factor = 1 }: { offset: number; factor?: number }) => (
|
||||
<div>
|
||||
<Divider fill="divider" speed={0.2} offset={offset} factor={factor}>
|
||||
<div sx={{ position: `absolute`, bottom: 0, width: `full`, transform: `matrix(1, 0, 0, -1, 0, 0)` }}>
|
||||
<div
|
||||
sx={{
|
||||
position: `relative`,
|
||||
height: `full`,
|
||||
svg: { width: `100%`, height: `40vh` },
|
||||
path: { animation: waveAnimation(`20s`) },
|
||||
}}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="contact-wave" viewBox="0 0 800 338.05" preserveAspectRatio="none">
|
||||
<path>
|
||||
<animate
|
||||
attributeName="d"
|
||||
values="M 0 100 Q 250 50 400 200 Q 550 350 800 300 L 800 0 L 0 0 L 0 100 Z;M 0 100 Q 200 150 400 200 Q 600 250 800 300 L 800 0 L 0 0 L 0 100 Z;M 0 100 Q 150 350 400 200 Q 650 50 800 300 L 800 0 L 0 0 L 0 100 Z"
|
||||
repeatCount="indefinite"
|
||||
dur="30s"
|
||||
/>
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</Divider>
|
||||
<Content speed={0.4} offset={offset} factor={factor}>
|
||||
<Inner>
|
||||
<ContactMDX />
|
||||
</Inner>
|
||||
<Footer />
|
||||
</Content>
|
||||
<Divider speed={0.1} offset={offset} factor={factor}>
|
||||
<UpDown>
|
||||
<Svg icon="upDown" hiddenMobile width={8} color="icon_darkest" left="70%" top="20%" />
|
||||
<Svg icon="triangle" width={8} stroke color="icon_darkest" left="25%" top="5%" />
|
||||
</UpDown>
|
||||
<UpDownWide>
|
||||
<Svg icon="triangle" width={12} stroke color="icon_brightest" left="95%" top="50%" />
|
||||
<Svg icon="circle" width={6} color="icon_brightest" left="85%" top="15%" />
|
||||
<Svg icon="upDown" hiddenMobile width={8} color="icon_darkest" left="45%" top="10%" />
|
||||
</UpDownWide>
|
||||
<Svg icon="circle" width={6} color="icon_brightest" left="4%" top="20%" />
|
||||
<Svg icon="circle" width={12} color="icon_darkest" left="70%" top="60%" />
|
||||
<Svg icon="box" width={12} color="icon_darkest" left="20%" top="30%" />
|
||||
<Svg icon="hexa" width={8} stroke color="icon_darkest" left="80%" top="70%" />
|
||||
</Divider>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default Contact
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
/** @jsx jsx */
|
||||
import { Box, Flex, Link, useColorMode, jsx } from "theme-ui"
|
||||
|
||||
const Footer = () => {
|
||||
const [colorMode, setColorMode] = useColorMode()
|
||||
const isDark = colorMode === `dark`
|
||||
const toggleColorMode = (e: any) => {
|
||||
setColorMode(isDark ? `light` : `dark`)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box as="footer" variant="footer">
|
||||
<button
|
||||
sx={{ variant: `buttons.toggle`, fontWeight: `semibold`, display: `block`, mx: `auto`, mb: 3 }}
|
||||
onClick={toggleColorMode}
|
||||
type="button"
|
||||
aria-label="Toggle dark mode"
|
||||
>
|
||||
{isDark ? `Light` : `Dark`}
|
||||
</button>
|
||||
Copyright © {new Date().getFullYear()}. All rights reserved.
|
||||
<br />
|
||||
<Flex
|
||||
sx={{
|
||||
justifyContent: `center`,
|
||||
alignItems: `center`,
|
||||
mt: 3,
|
||||
color: `text`,
|
||||
fontWeight: `semibold`,
|
||||
a: { color: `text` },
|
||||
}}
|
||||
>
|
||||
{isDark ? (
|
||||
<img width="30" height="30" src="https://img.lekoarts.de/gatsby/logo_v2-light_w30.png" alt="LekoArts Logo" />
|
||||
) : (
|
||||
<img width="30" height="30" src="https://img.lekoarts.de/gatsby/logo_v2_w30.png" alt="LekoArts Logo" />
|
||||
)}
|
||||
{` `}
|
||||
<Link
|
||||
aria-label="Link to the theme's GitHub repository"
|
||||
sx={{ ml: 2 }}
|
||||
href="https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-cara"
|
||||
>
|
||||
Theme
|
||||
</Link>
|
||||
<div sx={{ mx: 1 }}>by</div>
|
||||
{` `}
|
||||
<Link
|
||||
aria-label="Link to the theme author's website"
|
||||
href="https://www.lekoarts.de?utm_source=cara&utm_medium=Theme"
|
||||
>
|
||||
LekoArts
|
||||
</Link>
|
||||
</Flex>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/** @jsx jsx */
|
||||
import { jsx } from "theme-ui"
|
||||
import Divider from "../elements/divider"
|
||||
import Inner from "../elements/inner"
|
||||
import Content from "../elements/content"
|
||||
import Svg from "./svg"
|
||||
import { UpDown, UpDownWide } from "../styles/animations"
|
||||
// @ts-ignore
|
||||
import Intro from "../sections/intro"
|
||||
|
||||
const Hero = ({ offset, factor = 1 }: { offset: number; factor?: number }) => (
|
||||
<div>
|
||||
<Divider speed={0.2} offset={offset} factor={factor}>
|
||||
<UpDown>
|
||||
<Svg icon="triangle" hiddenMobile width={48} stroke color="icon_orange" left="10%" top="20%" />
|
||||
<Svg icon="hexa" width={48} stroke color="icon_red" left="60%" top="70%" />
|
||||
<Svg icon="box" width={6} color="icon_darker" left="60%" top="15%" />
|
||||
</UpDown>
|
||||
<UpDownWide>
|
||||
<Svg icon="arrowUp" hiddenMobile width={16} color="icon_blue" left="80%" top="10%" />
|
||||
<Svg icon="triangle" width={12} stroke color="icon_brightest" left="90%" top="50%" />
|
||||
<Svg icon="circle" width={16} color="icon_darker" left="70%" top="90%" />
|
||||
<Svg icon="triangle" width={16} stroke color="icon_darkest" left="30%" top="65%" />
|
||||
<Svg icon="cross" width={16} stroke color="icon_pink" left="28%" top="15%" />
|
||||
<Svg icon="circle" width={6} color="icon_darkest" left="75%" top="10%" />
|
||||
<Svg icon="upDown" hiddenMobile width={8} color="icon_darkest" left="45%" top="10%" />
|
||||
</UpDownWide>
|
||||
<Svg icon="circle" hiddenMobile width={24} color="icon_darker" left="5%" top="70%" />
|
||||
<Svg icon="circle" width={6} color="icon_darkest" left="4%" top="20%" />
|
||||
<Svg icon="circle" width={12} color="icon_darkest" left="50%" top="60%" />
|
||||
<Svg icon="upDown" width={8} color="icon_darkest" left="95%" top="90%" />
|
||||
<Svg icon="upDown" hiddenMobile width={24} color="icon_darker" left="40%" top="80%" />
|
||||
<Svg icon="triangle" width={8} stroke color="icon_darker" left="25%" top="5%" />
|
||||
<Svg icon="circle" width={64} color="icon_green" left="95%" top="5%" />
|
||||
<Svg icon="box" hiddenMobile width={64} color="icon_purple" left="5%" top="90%" />
|
||||
<Svg icon="box" width={6} color="icon_darkest" left="10%" top="10%" />
|
||||
<Svg icon="box" width={12} color="icon_darkest" left="40%" top="30%" />
|
||||
<Svg icon="hexa" width={16} stroke color="icon_darker" left="10%" top="50%" />
|
||||
<Svg icon="hexa" width={8} stroke color="icon_darker" left="80%" top="70%" />
|
||||
</Divider>
|
||||
<Content sx={{ variant: `texts.bigger` }} speed={0.4} offset={offset} factor={factor}>
|
||||
<Inner>
|
||||
<Intro />
|
||||
</Inner>
|
||||
</Content>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default Hero
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import * as React from "react"
|
||||
import { Global } from "@emotion/react"
|
||||
import SEO from "./seo"
|
||||
|
||||
type LayoutProps = { children: React.ReactNode; className?: string }
|
||||
|
||||
const Layout = ({ children, className = `` }: LayoutProps) => (
|
||||
<React.Fragment>
|
||||
<Global
|
||||
styles={(theme) => ({
|
||||
"*": {
|
||||
boxSizing: `inherit`,
|
||||
"&:before": {
|
||||
boxSizing: `inherit`,
|
||||
},
|
||||
"&:after": {
|
||||
boxSizing: `inherit`,
|
||||
},
|
||||
},
|
||||
html: {
|
||||
fontSize: `18px`,
|
||||
WebkitTextSizeAdjust: `100%`,
|
||||
},
|
||||
img: {
|
||||
borderStyle: `none`,
|
||||
},
|
||||
pre: {
|
||||
fontFamily: `monospace`,
|
||||
fontSize: `1em`,
|
||||
},
|
||||
"[hidden]": {
|
||||
display: `none`,
|
||||
},
|
||||
"::selection": {
|
||||
backgroundColor: theme.colors.primary,
|
||||
color: theme.colors.background,
|
||||
},
|
||||
})}
|
||||
/>
|
||||
<SEO />
|
||||
<main className={className}>{children}</main>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
export default Layout
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
/** @jsx jsx */
|
||||
import { jsx } from "theme-ui"
|
||||
|
||||
type ProjectCardProps = {
|
||||
link: string
|
||||
title: string
|
||||
children: React.ReactNode
|
||||
bg: string
|
||||
}
|
||||
|
||||
const ProjectCard = ({ link, title, children, bg }: ProjectCardProps) => (
|
||||
<a
|
||||
href={link}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
sx={{
|
||||
width: `100%`,
|
||||
boxShadow: `lg`,
|
||||
position: `relative`,
|
||||
textDecoration: `none`,
|
||||
borderRadius: `lg`,
|
||||
px: 4,
|
||||
py: [4, 5],
|
||||
color: `white`,
|
||||
background: bg || `none`,
|
||||
transition: `all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important`,
|
||||
"&:hover": {
|
||||
color: `white !important`,
|
||||
transform: `translateY(-5px)`,
|
||||
boxShadow: `xl`,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div sx={{ opacity: 0.85, textShadow: `0 2px 10px rgba(0, 0, 0, 0.3)` }}>{children}</div>
|
||||
<div
|
||||
sx={{
|
||||
textTransform: `uppercase`,
|
||||
letterSpacing: `wide`,
|
||||
pt: 4,
|
||||
fontSize: [4, 5],
|
||||
fontWeight: `medium`,
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
|
||||
export default ProjectCard
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
/** @jsx jsx */
|
||||
import { jsx } from "theme-ui"
|
||||
import Divider from "../elements/divider"
|
||||
import Inner from "../elements/inner"
|
||||
import Content from "../elements/content"
|
||||
import Svg from "./svg"
|
||||
import { UpDown, UpDownWide } from "../styles/animations"
|
||||
// @ts-ignore
|
||||
import ProjectsMDX from "../sections/projects"
|
||||
|
||||
const Projects = ({ offset, factor = 2 }: { offset: number; factor?: number }) => (
|
||||
<div>
|
||||
<Divider
|
||||
bg="linear-gradient(to right, SlateBlue 0%, DeepSkyBlue 100%)"
|
||||
sx={{ clipPath: `polygon(0 15%, 100% 25%, 100% 85%, 0 75%)` }}
|
||||
speed={-0.2}
|
||||
offset={1.1}
|
||||
factor={factor}
|
||||
/>
|
||||
<Content speed={0.4} offset={offset + 0.2} factor={factor}>
|
||||
<Inner>
|
||||
<div
|
||||
sx={{
|
||||
display: `grid`,
|
||||
gridGap: [4, 4, 4, 5],
|
||||
gridTemplateColumns: [`1fr`, `1fr`, `repeat(2, 1fr)`],
|
||||
h2: { gridColumn: `-1/1`, color: `white !important` },
|
||||
}}
|
||||
>
|
||||
<ProjectsMDX />
|
||||
</div>
|
||||
</Inner>
|
||||
</Content>
|
||||
<Divider speed={0.1} offset={offset} factor={factor}>
|
||||
<UpDown>
|
||||
<Svg icon="box" width={6} color="icon_brightest" left="85%" top="75%" />
|
||||
<Svg icon="upDown" width={8} color="icon_teal" left="70%" top="20%" />
|
||||
<Svg icon="triangle" width={8} stroke color="icon_orange" left="25%" top="5%" />
|
||||
<Svg icon="circle" hiddenMobile width={24} color="icon_brightest" left="17%" top="60%" />
|
||||
</UpDown>
|
||||
<UpDownWide>
|
||||
<Svg icon="arrowUp" hiddenMobile width={16} color="icon_green" left="20%" top="90%" />
|
||||
<Svg icon="triangle" width={12} stroke color="icon_brightest" left="90%" top="30%" />
|
||||
<Svg icon="circle" width={16} color="icon_yellow" left="70%" top="90%" />
|
||||
<Svg icon="triangle" hiddenMobile width={16} stroke color="icon_teal" left="18%" top="75%" />
|
||||
<Svg icon="circle" width={6} color="icon_brightest" left="75%" top="10%" />
|
||||
<Svg icon="upDown" hiddenMobile width={8} color="icon_green" left="45%" top="10%" />
|
||||
</UpDownWide>
|
||||
<Svg icon="circle" hiddenMobile width={6} color="icon_brightest" left="4%" top="20%" />
|
||||
<Svg icon="circle" width={12} color="icon_pink" left="80%" top="60%" />
|
||||
<Svg icon="box" width={6} color="icon_orange" left="10%" top="10%" />
|
||||
<Svg icon="box" width={12} color="icon_yellow" left="29%" top="26%" />
|
||||
<Svg icon="hexa" width={16} stroke color="icon_red" left="75%" top="30%" />
|
||||
<Svg icon="hexa" width={8} stroke color="icon_yellow" left="80%" top="70%" />
|
||||
</Divider>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default Projects
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import * as React from "react"
|
||||
import { Helmet } from "react-helmet"
|
||||
import { withPrefix } from "gatsby"
|
||||
import useSiteMetadata from "../hooks/use-site-metadata"
|
||||
|
||||
type Props = {
|
||||
title?: string
|
||||
description?: string
|
||||
pathname?: string
|
||||
image?: string
|
||||
children?: React.ReactNode
|
||||
}
|
||||
|
||||
const SEO = ({ title = ``, description = ``, pathname = ``, image = ``, children = null }: Props) => {
|
||||
const site = useSiteMetadata()
|
||||
|
||||
const {
|
||||
siteTitle,
|
||||
siteTitleAlt: defaultTitle,
|
||||
siteUrl,
|
||||
siteDescription: defaultDescription,
|
||||
siteLanguage,
|
||||
siteImage: defaultImage,
|
||||
author,
|
||||
} = site
|
||||
|
||||
const seo = {
|
||||
title: title || defaultTitle,
|
||||
description: description || defaultDescription,
|
||||
url: `${siteUrl}${pathname || ``}`,
|
||||
image: `${siteUrl}${image || defaultImage}`,
|
||||
}
|
||||
return (
|
||||
<Helmet title={title} defaultTitle={defaultTitle} titleTemplate={`%s | ${siteTitle}`}>
|
||||
<html lang={siteLanguage} />
|
||||
<meta name="description" content={seo.description} />
|
||||
<meta name="image" content={seo.image} />
|
||||
<meta property="og:title" content={seo.title} />
|
||||
<meta property="og:url" content={seo.url} />
|
||||
<meta property="og:description" content={seo.description} />
|
||||
<meta property="og:image" content={seo.image} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image:alt" content={seo.description} />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={seo.title} />
|
||||
<meta name="twitter:url" content={seo.url} />
|
||||
<meta name="twitter:description" content={seo.description} />
|
||||
<meta name="twitter:image" content={seo.image} />
|
||||
<meta name="twitter:image:alt" content={seo.description} />
|
||||
<meta name="twitter:creator" content={author} />
|
||||
<meta name="gatsby-theme" content="@lekoarts/gatsby-theme-cara" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href={withPrefix(`/favicon-32x32.png`)} />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href={withPrefix(`/favicon-16x16.png`)} />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href={withPrefix(`/apple-touch-icon.png`)} />
|
||||
{children}
|
||||
</Helmet>
|
||||
)
|
||||
}
|
||||
|
||||
export default SEO
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
/** @jsx jsx */
|
||||
import * as React from "react"
|
||||
import { jsx } from "theme-ui"
|
||||
import { hidden } from "../styles/utils"
|
||||
|
||||
const icons = {
|
||||
triangle: {
|
||||
shape: (
|
||||
<polygon
|
||||
strokeWidth="1px"
|
||||
strokeLinejoin="round"
|
||||
strokeMiterlimit="10"
|
||||
points="14.921,2.27 28.667,25.5 1.175,25.5 "
|
||||
/>
|
||||
),
|
||||
viewBox: `0 0 30 30`,
|
||||
},
|
||||
circle: {
|
||||
shape: (
|
||||
<path d="M15,30A15,15,0,1,1,30,15,15,15,0,0,1,15,30ZM15,6.23A8.77,8.77,0,1,0,23.77,15,8.77,8.77,0,0,0,15,6.23Z" />
|
||||
),
|
||||
viewBox: `0 0 30 30`,
|
||||
},
|
||||
arrowUp: {
|
||||
shape: (
|
||||
<React.Fragment>
|
||||
<path d="M28.74,20.81H1.26a1.26,1.26,0,0,1-1-2L14.16.5a1.25,1.25,0,0,1,1-.5h0a1.24,1.24,0,0,1,1,.51L29.75,18.8a1.25,1.25,0,0,1-1,2ZM3.81,18.29H26.22L15.16,3.37Z" />
|
||||
{` `}
|
||||
<path d="M28.74,42H1.26a1.28,1.28,0,0,1-1.13-.71A1.26,1.26,0,0,1,.26,40l13.9-18.29a1.28,1.28,0,0,1,1-.5h0a1.24,1.24,0,0,1,1,.51L29.75,40a1.26,1.26,0,0,1,.12,1.32A1.28,1.28,0,0,1,28.74,42ZM3.81,39.47H26.22L15.16,24.55Z" />
|
||||
</React.Fragment>
|
||||
),
|
||||
viewBox: `0 0 30 42`,
|
||||
},
|
||||
upDown: {
|
||||
shape: (
|
||||
<React.Fragment>
|
||||
<path d="M28.74,44.58a1.28,1.28,0,0,1-1-.51L15.16,27.13l-12.89,17a1.26,1.26,0,1,1-2-1.53l13.9-18.29a1.34,1.34,0,0,1,1-.5,1.24,1.24,0,0,1,1,.51L29.75,42.56a1.27,1.27,0,0,1-1,2Z" />
|
||||
<path d="M14.83,20.82h0a1.28,1.28,0,0,1-1-.52L.25,2a1.27,1.27,0,0,1,2-1.51L14.84,17.45,27.73.5a1.26,1.26,0,0,1,2,1.53L15.84,20.32A1.28,1.28,0,0,1,14.83,20.82Z" />
|
||||
</React.Fragment>
|
||||
),
|
||||
viewBox: `0 0 30 44.58`,
|
||||
},
|
||||
box: {
|
||||
shape: (
|
||||
<path d="M28,2V28H2V2H28m.13-2H1.88A1.88,1.88,0,0,0,0,1.88V28.13A1.88,1.88,0,0,0,1.88,30H28.13A1.87,1.87,0,0,0,30,28.13V1.88A1.88,1.88,0,0,0,28.13,0Z" />
|
||||
),
|
||||
viewBox: `0 0 30 30`,
|
||||
},
|
||||
hexa: {
|
||||
shape: (
|
||||
<polygon
|
||||
strokeLinejoin="round"
|
||||
strokeMiterlimit="10"
|
||||
points="27.5,21.904 15,28.809 2.5,21.904 2.5,8.095 15,1.19 27.5,8.095 "
|
||||
/>
|
||||
),
|
||||
viewBox: `0 0 30 30`,
|
||||
},
|
||||
cross: {
|
||||
shape: (
|
||||
<path
|
||||
strokeWidth="3px"
|
||||
d="M60.5,50l34.8-34.8c2.9-2.9,2.9-7.6,0-10.5c-2.9-2.9-7.6-2.9-10.5,0L50,39.5L15.2,4.7c-2.9-2.9-7.6-2.9-10.5,0 c-2.9,2.9-2.9,7.6,0,10.5L39.5,50L4.7,84.8c-2.9,2.9-2.9,7.6,0,10.5c1.4,1.4,3.3,2.2,5.2,2.2s3.8-0.7,5.2-2.2L50,60.5l34.8,34.8 c1.4,1.4,3.3,2.2,5.2,2.2c1.9,0,3.8-0.7,5.2-2.2c2.9-2.9,2.9-7.6,0-10.5L60.5,50z"
|
||||
/>
|
||||
),
|
||||
viewBox: `0 0 100 100`,
|
||||
},
|
||||
}
|
||||
|
||||
type IconType = "triangle" | "circle" | "arrowUp" | "upDown" | "box" | "hexa" | "cross"
|
||||
|
||||
type SVGProps = {
|
||||
stroke?: boolean
|
||||
color?: string | number | any
|
||||
width: number
|
||||
icon: IconType
|
||||
left: string
|
||||
top: string
|
||||
hiddenMobile?: boolean
|
||||
}
|
||||
|
||||
const Svg = ({ stroke = false, color = ``, width, icon, left, top, hiddenMobile = false }: SVGProps) => (
|
||||
<svg
|
||||
sx={{
|
||||
position: `absolute`,
|
||||
stroke: stroke ? `currentColor` : `none`,
|
||||
fill: stroke ? `none` : `currentColor`,
|
||||
display: hiddenMobile ? hidden : `block`,
|
||||
color,
|
||||
width,
|
||||
left,
|
||||
top,
|
||||
}}
|
||||
viewBox={icons[icon].viewBox}
|
||||
>
|
||||
{icons[icon].shape}
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default Svg
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
/** @jsx jsx */
|
||||
import { jsx } from "theme-ui"
|
||||
import { ParallaxLayer } from "@react-spring/parallax"
|
||||
|
||||
type ContentProps = {
|
||||
speed: number
|
||||
offset: number
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
factor?: number
|
||||
}
|
||||
|
||||
const Content = ({ speed, offset, children, className = ``, factor = 1 }: ContentProps) => (
|
||||
<ParallaxLayer
|
||||
sx={{
|
||||
padding: [3, 4, 4, 5],
|
||||
display: `flex`,
|
||||
flexDirection: `column`,
|
||||
alignItems: `center`,
|
||||
justifyContent: `center`,
|
||||
zIndex: 50,
|
||||
}}
|
||||
speed={speed}
|
||||
offset={offset}
|
||||
factor={factor}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</ParallaxLayer>
|
||||
)
|
||||
|
||||
export default Content
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
/** @jsx jsx */
|
||||
import { jsx } from "theme-ui"
|
||||
import { ParallaxLayer } from "@react-spring/parallax"
|
||||
|
||||
type DividerProps = {
|
||||
speed: number
|
||||
offset: number
|
||||
children?: React.ReactNode
|
||||
bg?: string
|
||||
fill?: string
|
||||
clipPath?: string
|
||||
className?: string
|
||||
factor?: number
|
||||
}
|
||||
|
||||
const Divider = ({
|
||||
speed,
|
||||
offset,
|
||||
factor = 1,
|
||||
bg = ``,
|
||||
fill = ``,
|
||||
clipPath = ``,
|
||||
children = null,
|
||||
className = ``,
|
||||
}: DividerProps) => (
|
||||
<ParallaxLayer
|
||||
sx={{
|
||||
position: `absolute`,
|
||||
width: `full`,
|
||||
height: `full`,
|
||||
background: bg,
|
||||
backgroundColor: bg,
|
||||
"#contact-wave": {
|
||||
color: fill,
|
||||
fill: `currentColor`,
|
||||
},
|
||||
clipPath,
|
||||
}}
|
||||
speed={speed}
|
||||
offset={offset}
|
||||
factor={factor}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</ParallaxLayer>
|
||||
)
|
||||
|
||||
export default Divider
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
/** @jsx jsx */
|
||||
import { jsx } from "theme-ui"
|
||||
|
||||
type InnerProps = {
|
||||
className?: string
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
const Inner = ({ className = ``, children }: InnerProps) => (
|
||||
<div sx={{ width: [`full`, `full`, `full`, `full`, `full`, `2/3`], textAlign: `left` }} className={className}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
||||
export default Inner
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import * as React from "react"
|
||||
import ProjectCard from "../components/project-card"
|
||||
|
||||
const components = {
|
||||
// eslint-disable-next-line react/display-name
|
||||
ProjectCard: ({ link, title, bg, children, ...props }) => (
|
||||
<ProjectCard {...props} link={link} title={title} bg={bg}>
|
||||
{children}
|
||||
</ProjectCard>
|
||||
),
|
||||
}
|
||||
|
||||
export default components
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
import { merge } from "theme-ui"
|
||||
import { tailwind } from "@theme-ui/presets"
|
||||
|
||||
const theme = merge(tailwind, {
|
||||
initialColorModeName: `dark`,
|
||||
config: {
|
||||
useCustomProperties: true,
|
||||
},
|
||||
colors: {
|
||||
primary: tailwind.colors.orange[4],
|
||||
secondary: tailwind.colors.indigo[6],
|
||||
text: tailwind.colors.gray[3],
|
||||
heading: tailwind.colors.white,
|
||||
background: `#141821`,
|
||||
divider: tailwind.colors.gray[8],
|
||||
textMuted: tailwind.colors.gray[5],
|
||||
icon_brightest: tailwind.colors.white,
|
||||
icon_darker: tailwind.colors.gray[7],
|
||||
icon_darkest: tailwind.colors.gray[8],
|
||||
icon_red: tailwind.colors.red[6],
|
||||
icon_blue: tailwind.colors.blue[6],
|
||||
icon_orange: tailwind.colors.orange[5],
|
||||
icon_yellow: tailwind.colors.yellow[5],
|
||||
icon_pink: tailwind.colors.pink[5],
|
||||
icon_purple: tailwind.colors.purple[6],
|
||||
icon_green: tailwind.colors.green[5],
|
||||
modes: {
|
||||
light: {
|
||||
text: tailwind.colors.gray[8],
|
||||
heading: tailwind.colors.black,
|
||||
primary: tailwind.colors.orange[7],
|
||||
background: tailwind.colors.gray[1],
|
||||
divider: tailwind.colors.gray[2],
|
||||
textMuted: tailwind.colors.gray[6],
|
||||
icon_brightest: tailwind.colors.gray[2],
|
||||
icon_darker: tailwind.colors.gray[4],
|
||||
icon_darkest: tailwind.colors.gray[6],
|
||||
},
|
||||
},
|
||||
},
|
||||
breakpoints: [`400px`, `600px`, `900px`, `1200px`, `1600px`],
|
||||
footer: {
|
||||
textAlign: `center`,
|
||||
display: `block`,
|
||||
position: `absolute`,
|
||||
bottom: 0,
|
||||
color: `textMuted`,
|
||||
px: [2, 3],
|
||||
py: [3, 4],
|
||||
},
|
||||
styles: {
|
||||
root: {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
boxSizing: `border-box`,
|
||||
textRendering: `optimizeLegibility`,
|
||||
WebkitFontSmoothing: `antialiased`,
|
||||
MozOsxFontSmoothing: `grayscale`,
|
||||
color: `text`,
|
||||
backgroundColor: `background`,
|
||||
a: {
|
||||
color: `primary`,
|
||||
textDecoration: `none`,
|
||||
transition: `all 0.3s ease-in-out`,
|
||||
"&:hover": {
|
||||
color: `primary`,
|
||||
textDecoration: `none`,
|
||||
},
|
||||
},
|
||||
},
|
||||
p: {
|
||||
fontSize: [1, 2],
|
||||
letterSpacing: `-0.003em`,
|
||||
lineHeight: `body`,
|
||||
"--baseline-multiplier": 0.179,
|
||||
"--x-height-multiplier": 0.35,
|
||||
color: `text`,
|
||||
},
|
||||
blockquote: {
|
||||
marginLeft: 0,
|
||||
p: {
|
||||
fontSize: [2, 3],
|
||||
fontWeight: `medium`,
|
||||
color: `heading`,
|
||||
},
|
||||
},
|
||||
h1: {
|
||||
fontSize: [6, 7, 8],
|
||||
mt: 2,
|
||||
mb: 3,
|
||||
textShadow: `rgba(255, 255, 255, 0.15) 0px 5px 35px`,
|
||||
letterSpacing: `wide`,
|
||||
color: `heading`,
|
||||
},
|
||||
h2: {
|
||||
fontSize: [4, 5, 6],
|
||||
mt: 2,
|
||||
mb: 2,
|
||||
color: `heading`,
|
||||
},
|
||||
h3: {
|
||||
fontSize: [3, 4, 5],
|
||||
mt: 3,
|
||||
color: `heading`,
|
||||
},
|
||||
h4: {
|
||||
fontSize: [2, 3, 4],
|
||||
color: `heading`,
|
||||
},
|
||||
h5: {
|
||||
fontSize: [1, 2, 3],
|
||||
color: `heading`,
|
||||
},
|
||||
h6: {
|
||||
fontSize: 1,
|
||||
mb: 2,
|
||||
color: `heading`,
|
||||
},
|
||||
},
|
||||
layout: {
|
||||
container: {
|
||||
maxWidth: `5xl`,
|
||||
},
|
||||
},
|
||||
buttons: {
|
||||
toggle: {
|
||||
color: `background`,
|
||||
border: `none`,
|
||||
backgroundColor: `text`,
|
||||
cursor: `pointer`,
|
||||
alignSelf: `center`,
|
||||
px: 3,
|
||||
py: 2,
|
||||
ml: 3,
|
||||
},
|
||||
},
|
||||
texts: {
|
||||
bigger: {
|
||||
p: {
|
||||
fontSize: [2, 3, 4],
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export default theme
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import { graphql, useStaticQuery } from "gatsby"
|
||||
|
||||
type UseSiteMetadataProps = {
|
||||
site: {
|
||||
siteMetadata: {
|
||||
siteTitle: string
|
||||
siteTitleAlt: string
|
||||
siteHeadline: string
|
||||
siteUrl: string
|
||||
siteDescription: string
|
||||
siteLanguage: string
|
||||
siteImage: string
|
||||
author: string
|
||||
[key: string]: unknown
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const useSiteMetadata = () => {
|
||||
const data = useStaticQuery<UseSiteMetadataProps>(graphql`
|
||||
query {
|
||||
site {
|
||||
siteMetadata {
|
||||
siteTitle
|
||||
siteTitleAlt
|
||||
siteHeadline
|
||||
siteUrl
|
||||
siteDescription
|
||||
siteLanguage
|
||||
siteImage
|
||||
author
|
||||
}
|
||||
}
|
||||
}
|
||||
`)
|
||||
|
||||
return data.site.siteMetadata
|
||||
}
|
||||
|
||||
export default useSiteMetadata
|
||||
|
|
@ -0,0 +1 @@
|
|||
declare module 'gatsby-plugin-mdx'
|
||||
|
|
@ -1,184 +1,20 @@
|
|||
import * as React from "react"
|
||||
import { Parallax } from "@react-spring/parallax"
|
||||
import Layout from "../components/layout"
|
||||
import Hero from "../components/hero"
|
||||
import Projects from "../components/projects"
|
||||
import About from "../components/about"
|
||||
import Contact from "../components/contact"
|
||||
|
||||
// styles
|
||||
const pageStyles = {
|
||||
color: "#232129",
|
||||
padding: 96,
|
||||
fontFamily: "-apple-system, Roboto, sans-serif, serif",
|
||||
}
|
||||
const headingStyles = {
|
||||
marginTop: 0,
|
||||
marginBottom: 64,
|
||||
maxWidth: 320,
|
||||
}
|
||||
const headingAccentStyles = {
|
||||
color: "#663399",
|
||||
}
|
||||
const paragraphStyles = {
|
||||
marginBottom: 48,
|
||||
}
|
||||
const codeStyles = {
|
||||
color: "#8A6534",
|
||||
padding: 4,
|
||||
backgroundColor: "#FFF4DB",
|
||||
fontSize: "1.25rem",
|
||||
borderRadius: 4,
|
||||
}
|
||||
const listStyles = {
|
||||
marginBottom: 96,
|
||||
paddingLeft: 0,
|
||||
}
|
||||
const listItemStyles = {
|
||||
fontWeight: 300,
|
||||
fontSize: 24,
|
||||
maxWidth: 560,
|
||||
marginBottom: 30,
|
||||
}
|
||||
|
||||
const linkStyle = {
|
||||
color: "#8954A8",
|
||||
fontWeight: "bold",
|
||||
fontSize: 16,
|
||||
verticalAlign: "5%",
|
||||
}
|
||||
|
||||
const docLinkStyle = {
|
||||
...linkStyle,
|
||||
listStyleType: "none",
|
||||
marginBottom: 24,
|
||||
}
|
||||
|
||||
const descriptionStyle = {
|
||||
color: "#232129",
|
||||
fontSize: 14,
|
||||
marginTop: 10,
|
||||
marginBottom: 0,
|
||||
lineHeight: 1.25,
|
||||
}
|
||||
|
||||
const docLink = {
|
||||
text: "Documentation",
|
||||
url: "https://www.gatsbyjs.com/docs/",
|
||||
color: "#8954A8",
|
||||
}
|
||||
|
||||
const badgeStyle = {
|
||||
color: "#fff",
|
||||
backgroundColor: "#088413",
|
||||
border: "1px solid #088413",
|
||||
fontSize: 11,
|
||||
fontWeight: "bold",
|
||||
letterSpacing: 1,
|
||||
borderRadius: 4,
|
||||
padding: "4px 6px",
|
||||
display: "inline-block",
|
||||
position: "relative",
|
||||
top: -2,
|
||||
marginLeft: 10,
|
||||
lineHeight: 1,
|
||||
}
|
||||
|
||||
// data
|
||||
const links = [
|
||||
{
|
||||
text: "Tutorial",
|
||||
url: "https://www.gatsbyjs.com/docs/tutorial/",
|
||||
description:
|
||||
"A great place to get started if you're new to web development. Designed to guide you through setting up your first Gatsby site.",
|
||||
color: "#E95800",
|
||||
},
|
||||
{
|
||||
text: "How to Guides",
|
||||
url: "https://www.gatsbyjs.com/docs/how-to/",
|
||||
description:
|
||||
"Practical step-by-step guides to help you achieve a specific goal. Most useful when you're trying to get something done.",
|
||||
color: "#1099A8",
|
||||
},
|
||||
{
|
||||
text: "Reference Guides",
|
||||
url: "https://www.gatsbyjs.com/docs/reference/",
|
||||
description:
|
||||
"Nitty-gritty technical descriptions of how Gatsby works. Most useful when you need detailed information about Gatsby's APIs.",
|
||||
color: "#BC027F",
|
||||
},
|
||||
{
|
||||
text: "Conceptual Guides",
|
||||
url: "https://www.gatsbyjs.com/docs/conceptual/",
|
||||
description:
|
||||
"Big-picture explanations of higher-level Gatsby concepts. Most useful for building understanding of a particular topic.",
|
||||
color: "#0D96F2",
|
||||
},
|
||||
{
|
||||
text: "Plugin Library",
|
||||
url: "https://www.gatsbyjs.com/plugins",
|
||||
description:
|
||||
"Add functionality and customize your Gatsby site or app with thousands of plugins built by our amazing developer community.",
|
||||
color: "#8EB814",
|
||||
},
|
||||
{
|
||||
text: "Build and Host",
|
||||
url: "https://www.gatsbyjs.com/cloud",
|
||||
badge: true,
|
||||
description:
|
||||
"Now you’re ready to show the world! Give your Gatsby site superpowers: Build and host on Gatsby Cloud. Get started for free!",
|
||||
color: "#663399",
|
||||
},
|
||||
]
|
||||
|
||||
// markup
|
||||
const IndexPage = () => {
|
||||
return (
|
||||
<main style={pageStyles}>
|
||||
<title>Home Page</title>
|
||||
<h1 style={headingStyles}>
|
||||
Congratulations
|
||||
<br />
|
||||
<span style={headingAccentStyles}>— you just made a Gatsby site! </span>
|
||||
<span role="img" aria-label="Party popper emojis">
|
||||
🎉🎉🎉
|
||||
</span>
|
||||
</h1>
|
||||
<p style={paragraphStyles}>
|
||||
Edit <code style={codeStyles}>src/pages/index.js</code> to see this page
|
||||
update in real-time.{" "}
|
||||
<span role="img" aria-label="Sunglasses smiley emoji">
|
||||
😎
|
||||
</span>
|
||||
</p>
|
||||
<ul style={listStyles}>
|
||||
<li style={docLinkStyle}>
|
||||
<a
|
||||
style={linkStyle}
|
||||
href={`${docLink.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}
|
||||
>
|
||||
{docLink.text}
|
||||
</a>
|
||||
</li>
|
||||
{links.map(link => (
|
||||
<li key={link.url} style={{ ...listItemStyles, color: link.color }}>
|
||||
<span>
|
||||
<a
|
||||
style={linkStyle}
|
||||
href={`${link.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}
|
||||
>
|
||||
{link.text}
|
||||
</a>
|
||||
{link.badge && (
|
||||
<span style={badgeStyle} aria-label="New Badge">
|
||||
NEW!
|
||||
</span>
|
||||
)}
|
||||
<p style={descriptionStyle}>{link.description}</p>
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<img
|
||||
alt="Gatsby G Logo"
|
||||
src="data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 110 20 10 10 0 010-20zm0 2c-3.73 0-6.86 2.55-7.75 6L14 19.75c3.45-.89 6-4.02 6-7.75h-5.25v1.5h3.45a6.37 6.37 0 01-3.89 4.44L6.06 9.69C7 7.31 9.3 5.63 12 5.63c2.13 0 4 1.04 5.18 2.65l1.23-1.06A7.959 7.959 0 0012 4zm-8 8a8 8 0 008 8c.04 0 .09 0-8-8z' fill='%23639'/%3E%3C/svg%3E"
|
||||
/>
|
||||
</main>
|
||||
const Cara = () => (
|
||||
<Layout>
|
||||
<Parallax pages={5}>
|
||||
<Hero offset={0} factor={1} />
|
||||
<Projects offset={1} factor={2} />
|
||||
<About offset={3} factor={1} />
|
||||
<Contact offset={4} factor={1} />
|
||||
</Parallax>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
export default IndexPage
|
||||
export default Cara
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
## About
|
||||
|
||||
> The English language can not fully capture the depth and complexity of my thoughts. So I'm incorporating Emoji into my speech to better express myself. Winky face.
|
||||
|
||||
You know the way you feel when you see a picture of two otters holding hands? That's how you're gonna feel every day. My mother cried the day I was born because she knew she’d never be prettier than me. You should make me your campaign manager. I was born for politics. I have great hair and I love lying. Captain? The kids want to know where Paulie the Pigeon is. I told them he got sucked up into an airplane engine, is that all right?
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
## Get in touch
|
||||
|
||||
Say [Hi](plizNoSp4m@domain.tld) or find me on other platforms: [Dribbble](https://dribbble.com/LekoArts) & [Twitter](https://www.twitter.com/lekoarts_de)
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Hello, I'm Aakanksha.
|
||||
|
||||
I'm creating noice web experiences for the next generation of consumer-facing companies
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
## Projects
|
||||
|
||||
<ProjectCard
|
||||
title="Tips & Tricks for Gatsby"
|
||||
link="https://www.lekoarts.de/gatsby/tips-and-tricks-for-gatsby?utm_source=cara&utm_medium=Theme"
|
||||
bg="linear-gradient(to right, #D4145A 0%, #FBB03B 100%)"
|
||||
>
|
||||
A collection of short, but useful quick tips shared by me and the community
|
||||
about Gatsby. From GraphQL over local development to deployment.
|
||||
</ProjectCard>
|
||||
<ProjectCard
|
||||
title="Setting up a yarn Workspace"
|
||||
link="https://www.lekoarts.de/javascript/setting-up-a-yarn-workspace-with-typescript-eslint-and-cypress?utm_source=cara&utm_medium=Theme"
|
||||
bg="linear-gradient(to right, #662D8C 0%, #ED1E79 100%)"
|
||||
>
|
||||
A robust solution for multi-package repositories.
|
||||
</ProjectCard>
|
||||
<ProjectCard
|
||||
title="Adding a Draft Feature to Gatsby"
|
||||
link="https://www.lekoarts.de/garden/adding-a-draft-feature-to-gatsby?utm_source=cara&utm_medium=Theme"
|
||||
bg="linear-gradient(to right, #009245 0%, #FCEE21 100%)"
|
||||
>
|
||||
A solution with the createSchemaCustomization API.
|
||||
</ProjectCard>
|
||||
<ProjectCard
|
||||
title="Theme UI Plugin for Figma"
|
||||
link="https://www.lekoarts.de/design/introducing-the-theme-ui-plugin-for-figma?utm_source=cara&utm_medium=Theme"
|
||||
bg="linear-gradient(to right, #D585FF 0%, #00FFEE 100%)"
|
||||
>
|
||||
The Theme UI plugin for Figma allows for a workflow where Theme UI is the
|
||||
starting point both for design & development.
|
||||
</ProjectCard>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
/** @jsx jsx */
|
||||
import * as React from "react"
|
||||
import { keyframes, css, jsx } from "@emotion/react"
|
||||
|
||||
const wave = keyframes`
|
||||
0% {
|
||||
d: path("M 0 100 Q 250 50 400 200 Q 550 350 800 300 L 800 0 L 0 0 L 0 100 Z");
|
||||
}
|
||||
50% {
|
||||
d: path("M 0 100 Q 200 150 400 200 Q 600 250 800 300 L 800 0 L 0 0 L 0 100 Z");
|
||||
}
|
||||
100% {
|
||||
d: path("M 0 100 Q 150 350 400 200 Q 650 50 800 300 L 800 0 L 0 0 L 0 100 Z");
|
||||
}
|
||||
`
|
||||
|
||||
const upDown = keyframes`
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
transform: translateY(30px);
|
||||
}
|
||||
`
|
||||
|
||||
const upDownWide = keyframes`
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
transform: translateY(200px);
|
||||
}
|
||||
`
|
||||
|
||||
const upDownAnimation = css`
|
||||
${upDown} 4s ease-in-out infinite alternate;
|
||||
`
|
||||
|
||||
const upDownWideAnimation = css`
|
||||
${upDownWide} 18s ease-in-out infinite alternate;
|
||||
`
|
||||
|
||||
export function UpDown({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div
|
||||
css={css`
|
||||
animation: ${upDownAnimation};
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function UpDownWide({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div
|
||||
css={css`
|
||||
animation: ${upDownWideAnimation};
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const waveAnimation = (length: string) => `${wave} ${length} linear infinite alternate`
|
||||
|
|
@ -0,0 +1 @@
|
|||
export const hidden = [`none`, `none`, `block`]
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import * as React from "react"
|
||||
import { Parallax } from "@react-spring/parallax"
|
||||
import Layout from "../components/layout"
|
||||
import Hero from "../components/hero"
|
||||
import Projects from "../components/projects"
|
||||
import About from "../components/about"
|
||||
import Contact from "../components/contact"
|
||||
|
||||
const Cara = () => (
|
||||
<Layout>
|
||||
<Parallax pages={5}>
|
||||
<Hero offset={0} factor={1} />
|
||||
<Projects offset={1} factor={2} />
|
||||
<About offset={3} factor={1} />
|
||||
<Contact offset={4} factor={1} />
|
||||
</Parallax>
|
||||
</Layout>
|
||||
)
|
||||
|
||||
export default Cara
|
||||
Loading…
Reference in New Issue