feat: ease images out

.prettierrc.mjs

@@ -21,7 +21,11 @@ export default {
   useTabs: false,
   vueIndentScriptAndStyle: false,
   // Astro
-  plugins: ['prettier-plugin-astro', 'prettier-plugin-tailwindcss'],
+  plugins: [
+    'prettier-plugin-astro',
+    'prettier-plugin-svelte',
+    'prettier-plugin-tailwindcss'
+  ],
   overrides: [
     {
       files: '*.astro',

astro.config.mjs

@@ -1,19 +1,25 @@
 import { defineConfig } from 'astro/config'
+import svelte from '@astrojs/svelte'
 import tailwind from '@astrojs/tailwind'
 import metadata from 'astro-meta-tags'
 import insights from 'astro-page-insight'
 import betterImage from 'astro-better-image-service'
 import compress from '@playform/compress'
 
 /** @type {import('astro').AstroUserConfig} */
+// https://astro.build/config
 export default defineConfig({
   site: 'https://maisonquiroga.art',
   compressHTML: true,
   integrations: [
+    svelte(),
     tailwind(),
     metadata(),
     insights(),
     betterImage(),
-    compress({ Image: false, SVG: false })
+    compress({
+      Image: false,
+      SVG: false
+    })
   ]
 })

declarations.d.ts

@@ -0,0 +1,2 @@
+declare module 'eslint-config-prettier'
+declare module 'eslint-plugin-tailwindcss'

eslint.config.cjs

@@ -27,9 +27,21 @@ module.exports = [
       }
     }
   },
+  {
+    files: ['**/*.svelte'],
+    languageOptions: {
+      parser: require('svelte-eslint-parser'),
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+        project: './tsconfig.json',
+        extraFileExtensions: ['.svelte']
+      }
+    }
+  },
   {
     rules: {
       '@stylistic/comma-dangle': 'off',
+      'functional/no-let': 'off',
       'tailwindcss/no-custom-classname': 'off'
     }
   }

package.json

@@ -3,19 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "astro": "astro",
-    "start": "astro dev",
+    "dev": "astro dev",
     "format": "prettier . --write",
     "check:astro": "astro check",
     "check:eslint": "eslint . --fix",
-    "check:stylelint": "stylelint '**/*.{css,astro}' --fix",
+    "check:stylelint": "stylelint '**/*.{css,astro,svelte}' --fix",
     "build": "astro check && astro build",
     "preview": "astro preview",
     "prepare": "husky"
   },
   "devDependencies": {
     "@archoleat/stylelint-config-extended-scss": "^1.6.9",
     "@astrojs/check": "^0.8.3",
+    "@astrojs/svelte": "^5.7.0",
     "@astrojs/tailwind": "^5.1.0",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
@@ -36,13 +36,16 @@
     "postcss-html": "^1.7.0",
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-svelte": "^3.2.6",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "stylelint": "^16.8.1",
     "stylelint-config-astro": "^1.0.4",
     "stylelint-config-cloudfour-suit": "^10.0.0",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-sass-guidelines": "^12.0.0",
     "stylelint-config-tailwindcss": "^0.0.7",
+    "svelte": "^4.2.18",
+    "svelte-eslint-parser": "^0.41.0",
     "tailwindcss": "^3.4.7",
     "typescript": "^5.5.4"
   },

src/components/Bio.astro

@@ -1,62 +1,11 @@
 ---
-import { Image } from 'astro:assets'
-import resolveConfig from 'tailwindcss/resolveConfig'
-import tailwindConfig from '../../tailwind.config'
+import BioArticle from '@components/BioArticle.svelte'
+import BioFigure from '@components/BioFigure.astro'
 
-const { theme } = resolveConfig(tailwindConfig)
-const { screens } = theme
-const widths = [320, 256, 160, 128]
-const sizes = `
-  ${widths[0]}px,
-  (min-width: ${screens.sm}) ${widths[1]}px,
-  (min-width: ${screens.md}) ${widths[2]}px,
-  (min-width: ${screens.lg}) ${widths[3]}px
-`
-const {
-  title,
-  text,
-  figure: { src, alt, caption }
-} = Astro.props
+const { title, text, figure } = Astro.props
 ---
 
 <section class='Bio'>
-  <article class='Bio-article'>
-    <h1 class='Bio-article-h1'>{title}</h1>
-    <p class='Bio-article-p'>{text}</p>
-  </article>
-
-  <figure class='Bio-figure'>
-    <Image
-      class='Bio-figure-img'
-      src={src}
-      alt={alt}
-      width={widths[0]}
-      height={widths[0]}
-      sizes={sizes}
-      widths={widths}
-      loading='eager'
-    />
-    <figcaption class='Bio-figure-figcaption'>{caption}</figcaption>
-  </figure>
+  <BioArticle client:idle {title} {text} />
+  <BioFigure {...figure} />
 </section>
-
-<style>
-  .Bio-article {
-    @apply block sm:inline-block;
-    @apply w-full sm:w-1/2 md:w-2/3 lg:w-3/4;
-    @apply sm:pr-8;
-    @apply align-top;
-  }
-
-  .Bio-article-h1 {
-    @apply sr-only;
-  }
-
-  .Bio-figure {
-    @apply block sm:inline-block;
-    @apply w-full sm:w-1/2 md:w-1/3 lg:w-1/4;
-    @apply mb-0 ml-auto mr-auto mt-0 sm:m-0;
-    @apply pt-8 sm:pt-0.5;
-    @apply max-w-80 sm:max-w-64 md:max-w-40 lg:max-w-32;
-  }
-</style>

src/components/BioArticle.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  export let title: string
+  export let text: string
+</script>
+
+<article class="BioArticle">
+  <h1 class="BioArticle-h1">{title}</h1>
+  <p class="BioArticle-p">{text}</p>
+</article>
+
+<style>
+  .BioArticle {
+    @apply block sm:inline-block;
+    @apply w-full sm:w-1/2 md:w-2/3 lg:w-3/4;
+    @apply sm:pr-8;
+    @apply align-top;
+  }
+
+  .BioArticle-h1 {
+    @apply sr-only;
+  }
+</style>

src/components/BioFigure.astro

@@ -0,0 +1,41 @@
+---
+import tailwindConfig from '@root/tailwind.config'
+import resolveConfig from 'tailwindcss/resolveConfig'
+import { Image } from 'astro:assets'
+
+const { theme } = resolveConfig(tailwindConfig)
+const { screens } = theme
+const widths = [320, 256, 160, 128]
+const sizes = `
+  ${widths[0]}px,
+  (min-width: ${screens.sm}) ${widths[1]}px,
+  (min-width: ${screens.md}) ${widths[2]}px,
+  (min-width: ${screens.lg}) ${widths[3]}px
+`
+const { src, alt, caption } = Astro.props
+---
+
+<figure class='BioFigure'>
+  <Image
+    class='BioFigure-img'
+    src={src}
+    alt={alt}
+    width={widths[0]}
+    height={widths[0]}
+    sizes={sizes}
+    widths={widths}
+    loading='eager'
+  />
+  <figcaption class='Bio-figure-figcaption'>{caption}</figcaption>
+</figure>
+
+<style>
+  .BioFigure {
+    @apply animate-fade;
+    @apply block sm:inline-block;
+    @apply w-full sm:w-1/2 md:w-1/3 lg:w-1/4;
+    @apply mb-0 ml-auto mr-auto mt-0 sm:m-0;
+    @apply pt-8 sm:pt-0.5;
+    @apply max-w-80 sm:max-w-64 md:max-w-40 lg:max-w-32;
+  }
+</style>

src/components/Curriculum.astro → src/components/Curriculum.svelte

@@ -1,18 +1,17 @@
----
-const { title, items } = Astro.props
----
+<script lang="ts">
+  export let title: string
+  export let items: { year: number; text: string }[]
+</script>
 
-<section class='Curriculum'>
-  <h1 class='Curriculum-h1'>[{title}]</h1>
+<section class="Curriculum">
+  <h1 class="Curriculum-h1">[{title}]</h1>
 
-  {
-    items.map(({ year, text }) => (
-      <div class='Curriculum-col'>
-        <p class='Curriculum-col-row-left'>{year}</p>
-        <p class='Curriculum-col-row-right'>{text}</p>
-      </div>
-    ))
-  }
+  {#each items as { year, text }}
+    <div class="Curriculum-col">
+      <p class="Curriculum-col-row-left">{year}</p>
+      <p class="Curriculum-col-row-right">{text}</p>
+    </div>
+  {/each}
 </section>
 
 <style>

src/components/Head.astro

@@ -1,5 +1,5 @@
 ---
-import '../assets/styles/global.css'
+import '@styles/global.css'
 
 const { title, author, description } = Astro.props
 ---

src/components/Header.astro

@@ -1,5 +1,5 @@
 ---
-import Logo from './Logo.astro'
+import Logo from '@components/Logo.astro'
 
 const {
   logo: { alt, src }

src/components/Logo.astro

@@ -4,7 +4,6 @@ import { Image } from 'astro:assets'
 const { src, alt } = Astro.props
 const width = 80
 const height = 80
-const densities = [1.5, 2, 4, 8]
 ---
 
 <div class='Logo'>
@@ -14,13 +13,13 @@ const densities = [1.5, 2, 4, 8]
     alt={alt}
     width={width}
     height={height}
-    densities={densities}
     loading='eager'
   />
 </div>
 
 <style>
   .Logo {
+    @apply animate-fade;
     @apply -mb-20;
   }
 </style>

src/layouts/Home.astro

@@ -1,9 +1,9 @@
 ---
-import Head from '../components/Head.astro'
-import Header from '../components/Header.astro'
-import Nav from '../components/Nav.astro'
-import Footer from '../components/Footer.astro'
-import imgLogo from '../assets/images/logo.jpg'
+import Head from '@components/Head.astro'
+import Header from '@components/Header.astro'
+import Nav from '@components/Nav.astro'
+import Footer from '@components/Footer.astro'
+import imgLogo from '@images/logo.jpg'
 
 const head = {
   title: 'Maison Quiroga',

src/pages/index.astro

@@ -1,8 +1,8 @@
 ---
-import Home from '../layouts/Home.astro'
-import Bio from '../components/Bio.astro'
-import Curriculum from '../components/Curriculum.astro'
-import imgRoberto from '../assets/images/roberto.jpg'
+import Home from '@layouts/Home.astro'
+import Bio from '@components/Bio.astro'
+import Curriculum from '@components/Curriculum.svelte'
+import imgRoberto from '@images/roberto.jpg'
 
 const bio = {
   title: 'Biographie de Roberto Quiroga Valdovinos',
@@ -119,6 +119,6 @@ const cv = [
 ---
 
 <Home>
-  <Bio title={bio.title} text={bio.text} figure={bio.figure} />
-  {cv.map(({ title, items }) => <Curriculum title={title} items={items} />)}
+  <Bio {...bio} />
+  {cv.map(({ title, items }) => <Curriculum client:visible {title} {items} />)}
 </Home>

stylelint.config.cjs → stylelint.config.ts

@@ -1,6 +1,4 @@
-/** @type {import('stylelint').Config} */
-// eslint-disable-next-line functional/no-expression-statements, functional/immutable-data
-module.exports = {
+export default {
   extends: [
     '@archoleat/stylelint-config-extended-scss',
     'stylelint-config-sass-guidelines',

svelte.config.ts

@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@astrojs/svelte'
+
+export default {
+  preprocess: vitePreprocess()
+}

tailwind.config.ts

@@ -1,7 +1,7 @@
 import defaultTheme from 'tailwindcss/defaultTheme'
 
 export default {
-  content: ['./src/**/*.astro'],
+  content: ['./src/**/*.{astro,svelte}'],
   theme: {
     extend: {
       colors: {
@@ -10,6 +10,21 @@ export default {
       },
       fontFamily: {
         sans: ['AkzidenzGrotesk', ...defaultTheme.fontFamily.sans]
+      },
+      keyframes: {
+        fade: {
+          from: {
+            opacity: '0',
+            transform: 'translateY(10px)'
+          },
+          to: {
+            opacity: '1',
+            transform: 'translateY(0)'
+          }
+        }
+      },
+      animation: {
+        fade: 'fade 1s ease-out'
       }
     }
   }