Personal website/portfolio based on Gatsby, React, theme-ui, Netlify, Netlify CMS and with focus on accessibility and SEO. JAMstack site!

You can check this website at kseniaavdeeva.art.

---

Features

• 🚥 Netlify as deployment service
• 📝 NetlifyCMS as content management system
• 🤩 Page Transitions, component-based (with no-js support)
• 👮‍♂️ IntersectionObserver, component-based (with polyfill)
• 🌿 React Context for global UI state, with SSR
• 💅 theme-ui and gatsby-plugin-theme-ui for build app based on constraint-based design principles
• 💯 Optimized with Google Lighthouse (including test)
• 🔥 Code Splitting of JS (component based)
• 🔪 Inline SVG support
• ⚙️ One config file for site-wide settings
• 💙 Most social + meta tags in one component
• 🖼 All favicons generated, only one icon file needed
• 🌐 Offline support
• 📄 Manifest support
• 🗺 Sitemap support
• 🌗 Night mode support
• 😎 Prettier for code style
• ⛑ Renovate support
• 🐙 Schema JSONLD
• 🔎 size-plugin to keep an eye on your bundle sizes
• 👨‍🏫 ESLint (based on eslint-plugin-react)

Do you have suggestions or feedback? Open an issue!

Lighthouse scores (on Netlify)

Usage

# Installation with `gatsby-cli`
gatsby new my-site https://github.com/aandrewww/kseniaavdeeva.art

# Installation with `git clone`
git clone [email protected]:aandrewww/kseniaavdeeva.art.git my-site
cd my-site
npm install

# To develop
npm run develop

# To build
npm run build

# To test SSR (for Lighthouse etc.)
npm run ssr

# To format JS
npm run format

# To generate favicons (included in `build`)
npm run build:favicons

# Up Dependencies
npm run up

Configuration

Find the site-wide configuration in site-config.js.

module.exports = {
  siteTitle: 'Ksenia Avdeeva | Protfolio',
  siteTitleShort: 'Portfolio',
  siteDescription: 'Ksenia avdeeva | Portfolio',
  siteUrl: 'https://kseniaavdeeva.art',
  themeColor: '#000',
  backgroundColor: '#fff',
  pathPrefix: null,
  logo: path.resolve(__dirname, 'src/images/icon.png'),
  social: {
    twitter: '',
    fbAppId: '',
  },
  googleAnalyticsId: process.env.GA_ID || '',
};

🚨 Don't forget to update your robots.txt inside static/!

Folder structure

├── gatsby-browser.js # Specify how Gatsby renders pages in the browser
├── gatsby-config.js # Gatsby config, mostly taken from `site-config.js`
├── gatsby-node.js # Modify webpack config
├── gatsby-ssr.js # Specify how Gatsby builds pages
├── site-config.js # Global settings for the whole site, used by multiple scripts
├── static # Content, data, content images and netlifycms admin folders
├── src
│   ├── cms # Components for preview in NetlifyCMS
│   ├── components # Different components for pages
│   ├── constants # Site-wide constants
│   ├── containers # Container components if store is needed
│   ├── gatsby-plugin-theme-ui # Folder with theme-ui configs
│   ├── helpers # Different helpers
│   ├── images # Images needed by the site/theme (not content)
│   ├── pages # Website pages
│   ├── store # Store and provider of a React.createContext instance
│   └── templates # Templates for pages
└── scripts
    ├── lighthouse.test.js # Tests the site specified inside `site-config.js` with Google Lighthouse (WIP)
    └── favicons.js # Generates favicons and manifest using one png only.

Author

• Andrew Avdeev