kaboom

2026-06-22 05:51:46 +03:00
commit 03f9319b3a
32 changed files with 11008 additions and 0 deletions
--- a/.envrc
+++ b/.envrc
@@ -0,0 +1,2 @@
+use nix
+dotenv_if_exists .env.local
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,13 @@
+node_modules/
+dist/
+.pnp
+.pnp.js
+.env
+.env.*
+!.env.example
+*.tsbuildinfo
+.DS_Store
+**/.gitkeep
+.cache
+/.astro/
+/.direnv/
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -0,0 +1,53 @@
+# Portfolio Website — Linda Adel
+
+Oil painting artist portfolio. Astro 6 SSG with Keystatic CMS.
+
+## Stack
+
+- **Astro 6.4.8** — static output (`output: "static"`)
+- **Keystatic** — local git-backed CMS, loaded only in dev via `NODE_ENV=development`
+- **React** — only for Keystatic admin UI (`@astrojs/react`)
+- **TypeScript**, **plain CSS** (no Tailwind)
+- Pastel pink-purple palette (see `global.css` vars)
+
+## Key Files
+
+| File | Purpose |
+|------|---------|
+| `astro.config.mjs` | Astro config — react + conditional Keystatic integration |
+| `keystatic.config.ts` | CMS schema — paintings collection + about singleton |
+| `src/content.config.ts` | Custom loaders for both collections (reads `.yaml` directly) |
+| `src/site-config.ts` | All site strings: name, email, tagline, location, etc. |
+| `src/styles/global.css` | All styles — pastel palette, responsive breakpoints |
+
+## Content Layer — Pure YAML, No Frontmatter
+
+Both collections use **pure `.yaml` files** (no `---` frontmatter). Keystatic's `format: "yaml"` (the default) expects the entire file to be valid YAML. Astro uses custom loaders that parse YAML directly.
+
+**Paintings** (`src/content/paintings/*.yaml`): `title`, `image`, `year`, `medium`, `dimensions`, `featured`, `description` — all top-level YAML keys. Custom `yamlGlobLoader` discovers `.yaml` files, parses each, stores by filename stem as entry ID.
+
+**About** (`src/content/about/index.yaml`): `photo`, `bio` as top-level YAML keys. Custom `about-loader` reads the single file. Bio paragraphs split on `\n\n`.
+
+## Why Custom Loaders
+
+Keystatic's `format: "md"` passes entire files to js-yaml, which **throws on `---` frontmatter delimiters** ("expected a single document"). Using `format: "yaml"` avoids this, but Astro's built-in loaders don't support `.yaml` files. Custom loaders bridge the gap.
+
+Shared `yamlGlobLoader(base, pattern, ctx)` function in `src/content.config.ts` handles discovery, parsing, and hot reload for any YAML-based collection.
+
+## Dev Workflow
+
+```sh
+npm run dev       # NODE_ENV=development astro dev
+npm run build     # static build (Keystatic excluded)
+npm run preview   # preview static build
+```
+
+Keystatic admin at `/keystatic` — only available in dev mode.
+
+## Important
+
+- Restart dev server after changing `keystatic.config.ts` (Vite caches it). If things break, delete `node_modules/.vite/` and `.astro/`.
+- All content files are pure YAML — **no `---` frontmatter**. Don't add it.
+- Don't use Keystatic `fields.document()` — Astro's content layer doesn't support `.mdoc` extension.
+- All artist-facing strings in `src/site-config.ts` — edit there, not in templates.
+- Dev command: `NODE_ENV=development astro dev` — required for Keystatic integration to load.
--- a/22
+++ b/22
@@ -0,0 +1,22 @@
+.PHONY: dev build preview check lint clean install
+
+install:
+	npm install
+
+dev:
+	npm run dev
+
+build:
+	npm run build
+
+preview:
+	npm run preview
+
+check:
+	npm run check
+
+lint:
+	npm run check
+
+clean:
+	rm -rf dist/ .astro/ node_modules/
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -0,0 +1,12 @@
+import { defineConfig } from "astro/config";
+import react from "@astrojs/react";
+
+export default defineConfig({
+  output: "static",
+  integrations: [
+    react(),
+    ...(process.env.NODE_ENV === "development"
+      ? [(await import("@keystatic/astro")).default()]
+      : []),
+  ],
+});
--- a/keystatic.config.ts
+++ b/keystatic.config.ts
@@ -0,0 +1,49 @@
+import { config, collection, fields, singleton } from "@keystatic/core";
+
+export default config({
+  storage: {
+    kind: "local",
+  },
+  collections: {
+    paintings: collection({
+      label: "Paintings",
+      slugField: "title",
+      path: "src/content/paintings/*",
+      schema: {
+        title: fields.slug({ name: { label: "Title" } }),
+        image: fields.image({
+          label: "Image",
+          description: "Photograph of the painting",
+        }),
+        year: fields.integer({ label: "Year" }),
+        medium: fields.text({ label: "Medium" }),
+        dimensions: fields.text({ label: "Dimensions" }),
+        description: fields.text({
+          label: "Description",
+          multiline: true,
+        }),
+        featured: fields.checkbox({
+          label: "Featured",
+          defaultValue: false,
+        }),
+      },
+    }),
+  },
+  singletons: {
+    about: singleton({
+      label: "About",
+      path: "src/content/about/index",
+      format: "yaml",
+      schema: {
+        photo: fields.image({
+          label: "Photo",
+          description: "Artist portrait",
+        }),
+        bio: fields.text({
+          label: "Bio",
+          multiline: true,
+        }),
+      },
+    }),
+  },
+});
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "portfolio-website",
+  "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "packageManager": "npm@11.2.0",
+  "scripts": {
+    "dev": "NODE_ENV=development astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "keystatic": "keystatic"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/react": "^5.0.7",
+    "@keystatic/astro": "^5.0.4",
+    "@keystatic/core": "^0.5.40",
+    "astro": "^6.4.8",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "typescript": "^5.7.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3"
+  }
+}
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" fill="#f8f6f3" rx="2"/>
+  <circle cx="16" cy="16" r="10" fill="#8b4513" opacity="0.3"/>
+  <circle cx="16" cy="16" r="6" fill="#8b4513" opacity="0.5"/>
+  <circle cx="16" cy="16" r="3" fill="#8b4513" opacity="0.8"/>
+</svg>
--- a/public/images/artist-photo.svg
+++ b/public/images/artist-photo.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" fill="none">
+  <rect width="300" height="300" fill="#E8E0D8" rx="150"/>
+  <ellipse cx="150" cy="130" rx="55" ry="60" fill="#D0C0B0" opacity="0.6"/>
+  <ellipse cx="150" cy="200" rx="80" ry="70" fill="#C0B0A0" opacity="0.5"/>
+  <circle cx="135" cy="120" r="5" fill="#8B7B6B" opacity="0.4"/>
+  <circle cx="165" cy="120" r="5" fill="#8B7B6B" opacity="0.4"/>
+  <path d="M135 145 Q150 155 165 145" stroke="#9B8B7B" stroke-width="2" fill="none" opacity="0.5"/>
+  <ellipse cx="150" cy="100" rx="50" ry="20" fill="#B0A090" opacity="0.3"/>
+</svg>
--- a/public/images/coastal-breeze.svg
+++ b/public/images/coastal-breeze.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 800" fill="none">
+  <rect width="600" height="800" fill="#D4E4E0"/>
+  <rect x="0" y="0" width="600" height="320" fill="#E8EEF0"/>
+  <ellipse cx="200" cy="80" rx="120" ry="40" fill="#F5F8FA" opacity="0.6"/>
+  <rect x="0" y="320" width="600" height="480" fill="#4A7C8C"/>
+  <rect x="0" y="320" width="600" height="460" fill="#3A6B7A" opacity="0.6"/>
+  <rect x="0" y="340" width="600" height="440" fill="#2B5A6A" opacity="0.4"/>
+  <rect x="0" y="380" width="600" height="400" fill="#1A4A5A" opacity="0.3"/>
+  <ellipse cx="200" cy="330" rx="200" ry="30" fill="#B8D4D0" opacity="0.4"/>
+  <rect x="0" y="600" width="600" height="200" fill="#5A7A5A" opacity="0.5"/>
+  <rect x="0" y="620" width="600" height="180" fill="#4A6A4A" opacity="0.6"/>
+  <path d="M0 640 Q50 620 100 635 Q150 650 200 630 Q250 615 300 640 Q350 660 400 635 Q450 615 500 640 Q550 660 600 635 L600 800 L0 800 Z" fill="#3A5A3A" opacity="0.4"/>
+  <rect x="50" y="610" width="3" height="30" fill="#3A5A3A" opacity="0.5" rx="1"/>
+  <rect x="120" y="615" width="2" height="25" fill="#4A6A4A" opacity="0.4" rx="1"/>
+  <rect x="200" y="608" width="3" height="32" fill="#3A5A3A" opacity="0.5" rx="1"/>
+  <rect x="350" y="612" width="2" height="28" fill="#4A6A4A" opacity="0.4" rx="1"/>
+  <ellipse cx="450" cy="200" rx="60" ry="30" fill="#F5F8FA" opacity="0.3"/>
+  <ellipse cx="450" cy="195" rx="40" ry="20" fill="#FAFCFF" opacity="0.2"/>
+</svg>
--- a/public/images/golden-hour.svg
+++ b/public/images/golden-hour.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 800" fill="none">
+  <rect width="600" height="800" fill="#F5F0EB"/>
+  <ellipse cx="450" cy="200" rx="180" ry="120" fill="#E8A87C" opacity="0.8"/>
+  <ellipse cx="460" cy="180" rx="140" ry="90" fill="#F4C7A0" opacity="0.6"/>
+  <rect x="0" y="480" width="600" height="320" fill="#8B7355" opacity="0.3"/>
+  <rect x="0" y="520" width="600" height="280" fill="#6B5340" opacity="0.4"/>
+  <rect x="0" y="560" width="600" height="240" fill="#4A3B2F" opacity="0.5"/>
+  <circle cx="480" cy="160" r="50" fill="#FFE0B2" opacity="0.5"/>
+  <ellipse cx="480" cy="165" r="40" fill="#FFF3E0" opacity="0.4"/>
+  <rect x="100" y="440" width="80" height="100" fill="#3D2B1F" opacity="0.6" rx="2"/>
+  <rect x="200" y="420" width="60" height="120" fill="#3D2B1F" opacity="0.4" rx="2"/>
+  <rect x="380" y="430" width="70" height="110" fill="#3D2B1F" opacity="0.5" rx="2"/>
+</svg>
--- a/public/images/morning-light.svg
+++ b/public/images/morning-light.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 800" fill="none">
+  <rect width="600" height="800" fill="#E8E6E1"/>
+  <rect x="0" y="0" width="240" height="800" fill="#C5C0B6" opacity="0.5"/>
+  <rect x="0" y="0" width="20" height="800" fill="#A0998F" opacity="0.6"/>
+  <rect x="240" y="0" width="360" height="800" fill="#F0EDE8"/>
+  <polygon points="240,200 360,200 300,80" fill="#D0CBC0" opacity="0.4"/>
+  <rect x="300" y="280" width="8" height="200" fill="#7A7062"/>
+  <rect x="270" y="480" width="60" height="40" fill="#6B6358" rx="2"/>
+  <rect x="280" y="490" width="40" height="100" fill="#5A5247" rx="1"/>
+  <circle cx="310" cy="340" r="60" fill="#B8B0A4" opacity="0.15"/>
+  <rect x="260" y="550" width="20" height="20" fill="#4A7C59" rx="2" opacity="0.8"/>
+  <rect x="285" y="540" width="16" height="30" fill="#4A7C59" rx="2" opacity="0.6"/>
+  <rect x="310" y="545" width="14" height="25" fill="#3A6B49" rx="2" opacity="0.7"/>
+  <ellipse cx="340" cy="200" rx="120" ry="80" fill="#E8DCC8" opacity="0.3"/>
+</svg>
--- a/shell.nix
+++ b/shell.nix
@@ -0,0 +1,12 @@
+{ pkgs ? import <nixpkgs> {} }:
+
+pkgs.mkShell {
+  buildInputs = with pkgs; [
+    nodejs_26
+    gnumake
+  ];
+
+  shellHook = ''
+    export COREPACK_ENABLE_STRICT=0
+  '';
+}
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -0,0 +1,9 @@
+---
+import { SITE } from "../site-config";
+---
+
+<footer class="footer">
+  <div class="container">
+    &copy; {new Date().getFullYear()} {SITE.name}. All rights reserved.
+  </div>
+</footer>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -0,0 +1,28 @@
+---
+import { SITE } from "../site-config";
+const currentPath = Astro.url.pathname;
+const links = [
+  { href: "/", label: "Home" },
+  { href: "/gallery", label: "Gallery" },
+  { href: "/about", label: "About" },
+  { href: "/contact", label: "Contact" },
+];
+---
+
+<header class="header">
+  <div class="container header-inner">
+    <div class="header-title">
+      <a href="/">{SITE.name}</a>
+    </div>
+    <nav class="header-nav">
+      {links.map(({ href, label }) => (
+        <a
+          href={href}
+          aria-current={currentPath === href ? "page" : undefined}
+        >
+          {label}
+        </a>
+      ))}
+    </nav>
+  </div>
+</header>
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -0,0 +1,26 @@
+---
+import { SITE } from "../site-config";
+
+export interface Props {
+  image: string;
+  title: string;
+  subtitle: string;
+}
+
+const { image, title, subtitle } = Astro.props;
+---
+
+<section class="hero">
+  <div class="container hero-grid">
+    <div class="hero-image">
+      <img src={image} alt={title} width="600" height="800" loading="eager" />
+    </div>
+    <div class="hero-content">
+      <h1>{title}</h1>
+      <p class="subtitle">{subtitle}</p>
+      <p>
+        {SITE.tagline} Based in {SITE.location}.
+      </p>
+    </div>
+  </div>
+</section>
--- a/src/components/PaintingCard.astro
+++ b/src/components/PaintingCard.astro
@@ -0,0 +1,33 @@
+---
+export interface Props {
+  slug: string;
+  title: string;
+  image: string;
+  year: number;
+  medium: string;
+  dimensions: string;
+}
+
+const { slug, title, image, year, medium, dimensions } = Astro.props;
+---
+
+<article class="painting-card fade-in">
+  <a href={`/paintings/${slug}`}>
+    <div class="painting-card-image">
+      <img
+        src={image}
+        alt={title}
+        width="600"
+        height="800"
+        loading="lazy"
+        decoding="async"
+      />
+    </div>
+    <div class="painting-card-body">
+      <h2 class="painting-card-title">{title}</h2>
+      <p class="painting-card-meta">
+        {year} &middot; {medium} &middot; {dimensions}
+      </p>
+    </div>
+  </a>
+</article>
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -0,0 +1,124 @@
+import fs from "node:fs";
+import { fileURLToPath } from "node:url";
+import { defineCollection, z } from "astro:content";
+
+async function parseYAML(content) {
+  const { load } = await import("js-yaml");
+  return load(content);
+}
+
+async function yamlGlobLoader(base, pattern, { store, parseData, config, logger, watcher }) {
+  const { glob: tinyglobby } = await import("tinyglobby");
+  let baseDir = new URL(base, config.root);
+  if (!baseDir.pathname.endsWith("/")) baseDir.pathname = `${baseDir.pathname}/`;
+  const files = await tinyglobby(pattern, { cwd: fileURLToPath(baseDir) });
+  const ids = new Set();
+  for (const file of files) {
+    const fileUrl = new URL(file, baseDir);
+    const filePath = fileURLToPath(fileUrl);
+    const content = fs.readFileSync(filePath, "utf-8");
+    let data;
+    try { data = await parseYAML(content); } catch (e) { logger.error(`Error parsing ${file}: ${e.message}`); continue; }
+    if (!data || typeof data !== "object" || Array.isArray(data)) { logger.warn(`Skipping ${file}: not a YAML object`); continue; }
+    const id = file.replace(/\.\w+$/, "");
+    ids.add(id);
+    try {
+      const parsedData = await parseData({ id, data, filePath });
+      store.set({ id, data: parsedData });
+    } catch (e) { logger.error(`Schema validation error for ${file}: ${e.message}`); }
+  }
+  for (const existingId of store.keys()) {
+    if (!ids.has(existingId)) store.delete(existingId);
+  }
+  if (watcher) {
+    watcher.add(fileURLToPath(baseDir));
+    const rescan = async () => {
+      const fresh = await tinyglobby(pattern, { cwd: fileURLToPath(baseDir) });
+      const freshIds = new Set();
+      for (const file of fresh) {
+        const filePath = fileURLToPath(new URL(file, baseDir));
+        const content = fs.readFileSync(filePath, "utf-8");
+        try {
+          const data = await parseYAML(content);
+          if (data && typeof data === "object" && !Array.isArray(data)) {
+            const id = file.replace(/\.\w+$/, "");
+            freshIds.add(id);
+            const parsedData = await parseData({ id, data, filePath });
+            store.set({ id, data: parsedData });
+          }
+        } catch (e) { logger.error(`Error reloading ${file}: ${e.message}`); }
+      }
+      for (const existingId of store.keys()) {
+        if (!freshIds.has(existingId)) store.delete(existingId);
+      }
+    };
+    watcher.on("change", rescan);
+    watcher.on("add", rescan);
+    watcher.on("unlink", rescan);
+  }
+}
+
+const paintings = defineCollection({
+  loader: {
+    name: "paintings-loader",
+    load: (ctx) => yamlGlobLoader("src/content/paintings", "**/*.yaml", ctx),
+  },
+  schema: z.object({
+    title: z.string(),
+    image: z.string(),
+    year: z.number(),
+    medium: z.string(),
+    dimensions: z.string(),
+    featured: z.boolean().default(false),
+    description: z.string().optional(),
+  }),
+});
+
+const about = defineCollection({
+  loader: {
+    name: "about-loader",
+    load: async ({ store, parseData, config, logger, watcher }) => {
+      const url = new URL("src/content/about/index.yaml", config.root);
+      const filePath = fileURLToPath(url);
+      if (!fs.existsSync(filePath)) {
+        logger.warn("About file not found at src/content/about/index.yaml");
+        return;
+      }
+      const content = fs.readFileSync(filePath, "utf-8");
+      let data;
+      try { data = await parseYAML(content); } catch (e) {
+        logger.error(`Error parsing about file: ${e.message}`);
+        return;
+      }
+      if (!data || typeof data !== "object" || Array.isArray(data)) {
+        logger.error("About file must contain a YAML object");
+        return;
+      }
+      const parsedData = await parseData({ id: "index", data });
+      store.set({ id: "index", data: parsedData });
+      if (watcher) {
+        watcher.add(filePath);
+        const onChange = async (changedPath) => {
+          if (changedPath !== filePath) return;
+          const newContent = fs.readFileSync(filePath, "utf-8");
+          try {
+            const newData = await parseYAML(newContent);
+            if (newData && typeof newData === "object" && !Array.isArray(newData)) {
+              const newParsedData = await parseData({ id: "index", data: newData });
+              store.set({ id: "index", data: newParsedData });
+              logger.info("Reloaded about data");
+            }
+          } catch (e) { logger.error(`Error reloading about file: ${e.message}`); }
+        };
+        watcher.on("change", onChange);
+        watcher.on("add", onChange);
+      }
+    },
+  },
+  schema: z.object({
+    photo: z.string().optional(),
+    bio: z.string().optional(),
+  }),
+});
+
+export const collections = { paintings, about };
--- a/src/content/about/index.yaml
+++ b/src/content/about/index.yaml
@@ -0,0 +1,4 @@
+bio: |-
+  Your local awesome red head with the unique and messy style :3
+
+  She said she wanna fuck and I was like... "really? :3" 
--- a/src/content/paintings/coastal-breeze.yaml
+++ b/src/content/paintings/coastal-breeze.yaml
@@ -0,0 +1,11 @@
+title: Coastal Breeze
+image: /images/coastal-breeze.svg
+year: 2023
+medium: Oil on panel
+dimensions: 18" x 24"
+description: >-
+  A windswept coastal vista painted en plein air. Layers of sea green, teal, and
+  cerulean build the restless ocean, while the sky shifts from pale blue to soft
+  grey at the horizon. The foreground grasses are rendered with quick, gestural
+  marks that echo the movement of the breeze.
+featured: true
--- a/src/content/paintings/golden-hour.yaml
+++ b/src/content/paintings/golden-hour.yaml
@@ -0,0 +1,7 @@
+title: Golden Hour
+image: /images/golden-hour.svg
+year: 2024
+medium: Oil on canvas
+dimensions: 30" x 40"
+description: best ever
+featured: false
--- a/src/content/paintings/morning-light.yaml
+++ b/src/content/paintings/morning-light.yaml
@@ -0,0 +1,7 @@
+title: "Morning Light"
+image: "/images/morning-light.svg"
+year: 2024
+medium: "Oil on linen"
+dimensions: "24\" x 30\""
+featured: false
+description: "Soft morning light filters through a window, casting cool blue shadows across a simple interior scene. The palette is restrained — pale greys, muted blues, and warm whites — punctuated by the deep green of a potted plant. Painted from life in a single sitting."
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -0,0 +1,27 @@
+---
+interface Props {
+  title?: string;
+  description?: string;
+}
+
+const { title = "Portfolio", description = "Oil paintings" } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title}</title>
+    <meta name="description" content={description} />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="stylesheet" href="/src/styles/global.css" />
+  </head>
+  <body>
+    <slot name="header" />
+    <main>
+      <slot />
+    </main>
+    <slot name="footer" />
+  </body>
+</html>
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -0,0 +1,46 @@
+---
+import { SITE, siteTitle } from "../site-config";
+import BaseLayout from "../layouts/BaseLayout.astro";
+import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
+import { getEntry } from "astro:content";
+
+const about = await getEntry("about", "index");
+const bio = about?.data?.bio;
+---
+
+<BaseLayout title={siteTitle("About")} description="About the artist">
+  <Fragment slot="header">
+    <Header />
+  </Fragment>
+
+  <section class="about-page">
+    <div class="container">
+      <div class="about-layout">
+        <div class="about-photo">
+          <img
+            src={about?.data?.photo ?? "/images/artist-photo.svg"}
+            alt={SITE.name}
+            width="300"
+            height="300"
+            loading="lazy"
+          />
+        </div>
+        <div class="about-bio">
+          <h1>About</h1>
+          {bio ? (
+            bio.split("\n\n").map((p) => <p>{p}</p>)
+          ) : (
+            <p>
+              {SITE.tagline} Based in {SITE.location}.
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <Fragment slot="footer">
+    <Footer />
+  </Fragment>
+</BaseLayout>
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -0,0 +1,27 @@
+---
+import { SITE, siteTitle } from "../site-config";
+import BaseLayout from "../layouts/BaseLayout.astro";
+import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
+---
+
+<BaseLayout title={siteTitle("Contact")} description="Get in touch">
+  <Fragment slot="header">
+    <Header />
+  </Fragment>
+
+  <section class="contact-page">
+    <h1>Contact</h1>
+    <p>
+      For inquiries about commissions, exhibitions, or purchasing original works,
+      please reach out via email.
+    </p>
+    <a class="contact-email" href={`mailto:${SITE.email}`}>
+      {SITE.email}
+    </a>
+  </section>
+
+  <Fragment slot="footer">
+    <Footer />
+  </Fragment>
+</BaseLayout>
--- a/src/pages/gallery.astro
+++ b/src/pages/gallery.astro
@@ -0,0 +1,56 @@
+---
+import { SITE, siteTitle } from "../site-config";
+import BaseLayout from "../layouts/BaseLayout.astro";
+import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
+import PaintingCard from "../components/PaintingCard.astro";
+import { getCollection } from "astro:content";
+
+const paintings = await getCollection("paintings");
+---
+
+<BaseLayout title={siteTitle("Gallery")} description={SITE.description}>
+  <Fragment slot="header">
+    <Header />
+  </Fragment>
+
+  <section style="padding: 2rem 0 4rem;">
+    <div class="container">
+      <div class="gallery-header">
+        <h1>Gallery</h1>
+        <p>A selection of recent works</p>
+      </div>
+      <div class="gallery-grid">
+        {paintings.map((entry) => (
+          <PaintingCard
+            slug={entry.id}
+            title={entry.data.title}
+            image={entry.data.image}
+            year={entry.data.year}
+            medium={entry.data.medium}
+            dimensions={entry.data.dimensions}
+          />
+        ))}
+      </div>
+    </div>
+  </section>
+
+  <Fragment slot="footer">
+    <Footer />
+  </Fragment>
+</BaseLayout>
+
+<script>
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("visible");
+          observer.unobserve(entry.target);
+        }
+      }
+    },
+    { threshold: 0.1 }
+  );
+  document.querySelectorAll(".fade-in").forEach((el) => observer.observe(el));
+</script>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -0,0 +1,65 @@
+---
+import { SITE, siteTitle } from "../site-config";
+import BaseLayout from "../layouts/BaseLayout.astro";
+import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
+import Hero from "../components/Hero.astro";
+import PaintingCard from "../components/PaintingCard.astro";
+import { getCollection } from "astro:content";
+
+const paintings = await getCollection("paintings");
+const featured = paintings.find((p) => p.data.featured);
+---
+
+<BaseLayout title={siteTitle(SITE.title)} description={SITE.description}>
+  <Fragment slot="header">
+    <Header />
+  </Fragment>
+
+  {featured && (
+    <Hero
+      image={featured.data.image}
+      title={featured.data.title}
+      subtitle={`${featured.data.title}, ${featured.data.year}`}
+    />
+  )}
+
+  <section style="padding: 1rem 0 4rem;">
+    <div class="container">
+      <div style="text-align: center; margin-bottom: 2.5rem;">
+        <h2 style="font-family: var(--font-serif); font-size: 1.75rem; font-weight: 400;">All Paintings</h2>
+      </div>
+      <div class="gallery-grid">
+        {paintings.map((entry) => (
+          <PaintingCard
+            slug={entry.id}
+            title={entry.data.title}
+            image={entry.data.image}
+            year={entry.data.year}
+            medium={entry.data.medium}
+            dimensions={entry.data.dimensions}
+          />
+        ))}
+      </div>
+    </div>
+  </section>
+
+  <Fragment slot="footer">
+    <Footer />
+  </Fragment>
+</BaseLayout>
+
+<script>
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("visible");
+          observer.unobserve(entry.target);
+        }
+      }
+    },
+    { threshold: 0.1 }
+  );
+  document.querySelectorAll(".fade-in").forEach((el) => observer.observe(el));
+</script>
--- a/src/pages/paintings/[...slug].astro
+++ b/src/pages/paintings/[...slug].astro
@@ -0,0 +1,56 @@
+---
+import { siteTitle } from "../../site-config";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Header from "../../components/Header.astro";
+import Footer from "../../components/Footer.astro";
+import { getCollection } from "astro:content";
+
+export async function getStaticPaths() {
+  const paintings = await getCollection("paintings");
+  return paintings.map((entry) => ({
+    params: { slug: entry.id },
+    props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { data } = entry;
+---
+
+<BaseLayout
+  title={siteTitle(data.title)}
+  description={`${data.title}, ${data.year}, ${data.medium}`}
+>
+  <Fragment slot="header">
+    <Header />
+  </Fragment>
+
+  <article class="painting-detail">
+    <div class="container">
+      <div class="painting-detail-image">
+        <img
+          src={data.image}
+          alt={data.title}
+          width="800"
+          height="1067"
+          loading="eager"
+        />
+      </div>
+      <div class="painting-detail-info">
+        <h1>{data.title}</h1>
+        <div class="painting-detail-meta">
+          <span>{data.year}</span>
+          <span>{data.medium}</span>
+          <span>{data.dimensions}</span>
+        </div>
+        {data.description && (
+          <div class="painting-detail-description">{data.description}</div>
+        )}
+      </div>
+    </div>
+  </article>
+
+  <Fragment slot="footer">
+    <Footer />
+  </Fragment>
+</BaseLayout>
--- a/src/site-config.ts
+++ b/src/site-config.ts
@@ -0,0 +1,13 @@
+export const SITE = {
+  name: "Linda Adel",
+  title: "Oil Paintings",
+  email: "laladel0@gmail.com",
+  description: "Portfolio of oil paintings by Linda Adel",
+  tagline: "Exploring the shifting qualities of natural light through oil painting.",
+  location: "Alexandria, Egypt",
+  url: "/",
+};
+
+export function siteTitle(...parts: string[]) {
+  return parts.length ? `${parts.join(" — ")} — ${SITE.name}` : SITE.name;
+}
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -0,0 +1,379 @@
+:root {
+  --bg: #f0e0ea;
+  --surface: #ffffff;
+  --text: #1a1120;
+  --text-muted: #7a5a75;
+  --border: #e8d0e4;
+  --accent: #d4a0c0;
+  --accent-light: #e8bcd4;
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
+  --radius: 4px;
+  --max-width: 1200px;
+  --content-width: 720px;
+  --font-sans: system-ui, -apple-system, sans-serif;
+  --font-serif: Georgia, "Times New Roman", serif;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  min-height: 100vh;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+a:hover { color: var(--accent-light); }
+
+h1, h2, h3, h4 {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  line-height: 1.3;
+}
+
+.container {
+  width: 100%;
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 0 1.5rem;
+}
+
+/* Header */
+.header {
+  padding: 1.5rem 0;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+}
+.header-inner {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+.header-title {
+  font-family: var(--font-serif);
+  font-size: 1.5rem;
+  color: var(--text);
+  letter-spacing: -0.02em;
+}
+.header-title a { color: var(--text); }
+.header-title a:hover { color: var(--accent); }
+.header-nav {
+  display: flex;
+  gap: 2rem;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.header-nav a { color: var(--text-muted); }
+.header-nav a:hover,
+.header-nav a[aria-current="page"] {
+  color: var(--text);
+}
+
+/* Footer */
+.footer {
+  padding: 3rem 0;
+  border-top: 1px solid var(--border);
+  text-align: center;
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  margin-top: 6rem;
+}
+
+/* Hero */
+.hero {
+  padding: 4rem 0 3rem;
+}
+.hero-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  align-items: center;
+}
+.hero-image {
+  aspect-ratio: 3 / 4;
+  overflow: hidden;
+  background: var(--border);
+  border-radius: var(--radius);
+}
+.hero-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.6s ease;
+}
+.hero-image:hover img { transform: scale(1.03); }
+.hero-content h1 {
+  font-size: 2.5rem;
+  margin-bottom: 0.5rem;
+}
+.hero-content .subtitle {
+  font-family: var(--font-serif);
+  font-size: 1.125rem;
+  color: var(--text-muted);
+  font-style: italic;
+  margin-bottom: 1.5rem;
+}
+.hero-content p {
+  font-size: 1rem;
+  line-height: 1.7;
+  color: var(--text-muted);
+}
+
+/* Gallery grid */
+.gallery-header {
+  padding: 3rem 0 2rem;
+  text-align: center;
+}
+.gallery-header h1 {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+.gallery-header p {
+  color: var(--text-muted);
+  font-size: 0.9375rem;
+}
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 2rem;
+}
+
+/* Painting card */
+.painting-card {
+  background: var(--surface);
+  border-radius: var(--radius);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  cursor: pointer;
+}
+.painting-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+}
+.painting-card-image {
+  aspect-ratio: 3 / 4;
+  overflow: hidden;
+  background: var(--border);
+}
+.painting-card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.4s ease;
+}
+.painting-card:hover .painting-card-image img {
+  transform: scale(1.06);
+}
+.painting-card-body {
+  padding: 1.25rem;
+}
+.painting-card-title {
+  font-family: var(--font-serif);
+  font-size: 1.125rem;
+  margin-bottom: 0.25rem;
+}
+.painting-card-meta {
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+}
+
+/* Painting detail */
+.painting-detail {
+  padding: 3rem 0;
+}
+.painting-detail-image {
+  max-width: 800px;
+  margin: 0 auto 2rem;
+  border-radius: var(--radius);
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+}
+.painting-detail-info {
+  max-width: var(--content-width);
+  margin: 0 auto;
+  text-align: center;
+}
+.painting-detail-info h1 {
+  font-size: 2rem;
+  margin-bottom: 0.75rem;
+}
+.painting-detail-meta {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+.painting-detail-meta span {
+  white-space: nowrap;
+}
+.painting-detail-description {
+  font-size: 1rem;
+  line-height: 1.8;
+  color: var(--text-muted);
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+/* About */
+.about-page {
+  padding: 3rem 0;
+}
+.about-layout {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: 3rem;
+  align-items: start;
+  max-width: var(--content-width);
+  margin: 0 auto;
+}
+.about-photo {
+  aspect-ratio: 1;
+  overflow: hidden;
+  border-radius: 50%;
+  background: var(--border);
+}
+.about-photo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.about-bio {
+  font-size: 1rem;
+  line-height: 1.8;
+  color: var(--text-muted);
+}
+.about-bio h1 {
+  font-size: 2rem;
+  margin-bottom: 1.5rem;
+  color: var(--text);
+}
+
+/* Contact */
+.contact-page {
+  padding: 3rem 0;
+  max-width: var(--content-width);
+  margin: 0 auto;
+  text-align: center;
+}
+.contact-page h1 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+.contact-page p {
+  color: var(--text-muted);
+  margin-bottom: 2rem;
+  font-size: 1rem;
+  line-height: 1.7;
+}
+.contact-email {
+  display: inline-block;
+  font-family: var(--font-serif);
+  font-size: 1.5rem;
+  color: var(--accent);
+  padding: 1rem 2rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  transition: all 0.2s;
+}
+.contact-email:hover {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+
+/* Fade-in animation */
+.fade-in {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+}
+.fade-in.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .hero-grid {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+  .hero-content h1 { font-size: 2rem; }
+  .hero-image { aspect-ratio: 4 / 3; }
+  .gallery-grid {
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: 1.5rem;
+  }
+  .about-layout {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+  .about-photo {
+    max-width: 200px;
+    margin: 0 auto;
+  }
+  .painting-detail-image {
+    max-width: 100%;
+  }
+  .painting-detail-meta {
+    gap: 1rem;
+  }
+  .header-inner {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  .header-nav {
+    gap: 1.25rem;
+    font-size: 0.8125rem;
+  }
+  .contact-email {
+    font-size: 1.125rem;
+    padding: 0.75rem 1.5rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero { padding: 2rem 0; }
+  .hero-content h1 { font-size: 1.75rem; }
+  .gallery-grid {
+    grid-template-columns: 1fr;
+    gap: 1.25rem;
+  }
+  .container { padding: 0 1rem; }
+  .painting-detail-meta {
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+  }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "jsx": "preserve"
+  },
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}