- React Spring (Used for Parallax effect)
- TailwindCSS & styled-components for styling
- Use the full power of TailwindCSS while generating small styles (as unused data gets deleted)
- Uses
tailwind.macro
(Babel macro) to have hot-reloading of Tailwind styles
- SEO
- Schema.org JSONLD
- OpenGraph Tags
- Twitter Tags
- Typefaces for quicker font loading
- Offline Support
- WebApp Manifest Support
- Responsive images
- The right image size for every screen size
- Traced SVG Loading (Lazy-Loading)
- WebP Support
npm run build
Copy the content of the public
folder to your webhost or use a website like Netlify which automates that for you.
You have multiple options to configure this project.
-
Use the
config/website.js
to configure data passed to the SEO component and other parts of the Gatsby site: -
Use the
tailwind.js
file to configure TailwindCSS. Their documentation explains it step-by-step. -
Modify the files in the
src/styles
directory. -
Modify the sections in the
src/views
directory. They contain the Dividers & SVG icons. -
You can also place the icons somewhere else on the page, modify their animation and hide them on smaller screens:
<SVG icon="triangle" hideMobile width={48} stroke={colors.orange} left="10%" top="20%" />
<SVG icon="hexa" width={48} stroke={colors.red} left="60%" top="70%" />
<SVG icon="box" width={6} fill={colors['grey-darker']} left="60%" top="15%" />
- For
icon
, you have the options:triangle, circle, arrowUp, upDown, box, hexa
- If you want the SVG to be hidden on mobile view, add
hideMobile
to the SVG component - You can define the width via the TailwindCSS width option
- The colors get defined via the TailwindCSS color option
- Please note that you will either have to define the color in
stroke
orfill
depending on the icon. For reference, have a look at the currently used SVGs
- Please note that you will either have to define the color in
- The options
left
andtop
position the icon relatively to its parent container - You can also wrap the SVGs with
<UpDown />
or<UpDownWide />
to animate them
The site self-hosts the fonts and therefore benefits from increased performance by using typefaces by Kyle Mathews.
The installed fonts can be found in src/components/Layout.jsx
:
You'll also need to configure fonts
in tailwind.js
to reflect the changes. You then can use the fonts with font-sans
and font-serif
.