tilenfaganel.com

Personal site and blog of Tilen Faganel

Built with Gatsby 5, React 18, and styled-components, deployed to Netlify.

Tech Stack

• Framework: Gatsby 5 + React 18
• Styling: styled-components v6 with styled-system v5 props
• Typography: gatsby-plugin-typography
• Icons: Font Awesome (brands + solid)
• Images: gatsby-plugin-image (AVIF/WebP)
• Markdown: gatsby-transformer-remark + PrismJS syntax highlighting
• Deployment: Netlify (static hosting + Netlify Forms)

Project Structure

src/
  pages/
    index.js              # Homepage — profile, bio, contact links
    404.js                # Custom 404 page
    about/                # About page with detailed bio
    posts/                # Blog posts (Markdown)
      authors.yaml        # Author definitions
      YYYY-MM-DD-slug/    # One folder per post
        index.md          # Post content + frontmatter
        cover.jpg         # Cover image
  templates/
    blog-post.js          # Blog post template (currently inactive)
  components/
    Layout/               # Root layout with ThemeProvider
    Header/               # Navigation bar
    Footer/               # Site footer
    Seo/                  # SEO/meta tags component
    ContactMe/            # Social links (GitHub, X, LinkedIn, email)
    Subscribe/            # Email subscribe form (Netlify Forms)
    Primitives/           # Styled-system components (Box, Flex, Heading, etc.)
  utils/
    theme.js              # Design tokens (colors, spacing, breakpoints)
    typography.js         # Typography config + dark mode CSS variables

Prerequisites

• Node.js 24.19.0 (pinned via .mise.toml / .nvmrc)
• npm

Getting Started

npm install
npm run develop

The dev server starts at http://localhost:8000.

Scripts

Command	Description
npm run develop	Start local dev server
npm run build	Production build
npm run clean	Clear .cache and public
npm run format	Format source files with Prettier

Features

• Automatic dark mode — CSS-variable-driven, follows prefers-color-scheme. No toggle needed.
• Responsive design — Breakpoints at 40em, 52em, 64em with responsive array syntax.
• SEO — Open Graph, Twitter cards, favicons, and meta tags via a custom Seo component.
• Email subscribe — Netlify Forms integration with honeypot spam protection.
• Code highlighting — PrismJS with Monokai-style theme.

License

MIT