add custom files
This commit is contained in:
parent
d49ec98ef2
commit
c0ebb768b3
|
|
@ -1,7 +1,29 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
siteMetadata: {
|
siteMetadata: {
|
||||||
siteUrl: "https://www.yourdomain.tld",
|
siteTitle: `Akkkiiii site`,
|
||||||
title: "aki_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"
|
"clean": "gatsby clean"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"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",
|
"gatsby": "^3.11.1",
|
||||||
"react": "^17.0.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 * 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 Cara = () => (
|
||||||
const pageStyles = {
|
<Layout>
|
||||||
color: "#232129",
|
<Parallax pages={5}>
|
||||||
padding: 96,
|
<Hero offset={0} factor={1} />
|
||||||
fontFamily: "-apple-system, Roboto, sans-serif, serif",
|
<Projects offset={1} factor={2} />
|
||||||
}
|
<About offset={3} factor={1} />
|
||||||
const headingStyles = {
|
<Contact offset={4} factor={1} />
|
||||||
marginTop: 0,
|
</Parallax>
|
||||||
marginBottom: 64,
|
</Layout>
|
||||||
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 = {
|
export default Cara
|
||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default IndexPage
|
|
||||||
|
|
|
||||||
|
|
@ -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