initial commit

.gitignore

@@ -0,0 +1,24 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+    "recommendations": ["astro-build.astro-vscode"],
+    "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "command": "./node_modules/.bin/astro dev",
+            "name": "Development server",
+            "request": "launch",
+            "type": "node-terminal"
+        }
+    ]
+}

README.md

@@ -0,0 +1,20 @@
+# Sito di Arianna Misuraca
+
+## Usage
+
+```bash
+npm install
+```
+
+```bash
+npm run dev
+```
+
+```bash
+npm run build
+```
+
+```bash
+rsync -azvP ./dist/ misuraca@poisson.phc.dm.unipi.it:/home/misuraca/public_html/
+```
+

astro.config.mjs

@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config'
+
+// https://astro.build/config
+export default defineConfig({
+    base: '/~misuraca',
+    trailingSlash: 'always',
+})

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "poisson-arianna",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@fontsource/berkshire-swash": "^5.0.20",
+    "@fontsource/corinthia": "^5.0.20",
+    "@fontsource/indie-flower": "^5.0.19",
+    "@fontsource/patrick-hand": "^5.0.20",
+    "astro": "^4.12.2"
+  }
+}

public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

src/components/Sidebar.astro

@@ -0,0 +1,34 @@
+<nav class="sidebar">
+    <input id="mobile-menu-toggle" type="checkbox" />
+    <label for="mobile-menu-toggle">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+            ><path
+                d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z"
+                fill="currentColor"></path><path
+                d="M2 12.0322C2 11.4799 2.44772 11.0322 3 11.0322H21C21.5523 11.0322 22 11.4799 22 12.0322C22 12.5845 21.5523 13.0322 21 13.0322H3C2.44772 13.0322 2 12.5845 2 12.0322Z"
+                fill="currentColor"></path><path
+                d="M3 17.0645C2.44772 17.0645 2 17.5122 2 18.0645C2 18.6167 2.44772 19.0645 3 19.0645H21C21.5523 19.0645 22 18.6167 22 18.0645C22 17.5122 21.5523 17.0645 21 17.0645H3Z"
+                fill="currentColor"></path></svg
+        >
+    </label>
+
+    <div class="nav-top">
+        <slot name="top">
+            <a href="/~misuraca/">
+                <img src="/~misuraca/sunflower.png" alt="girasole" />
+            </a>
+        </slot>
+    </div>
+    <div class="nav-links">
+        <a href="/~misuraca/appunti/" class="nav-item">Appunti</a>
+        <a href="/~misuraca/link-utili/" class="nav-item">Link Utili</a>
+        <a href="/~misuraca/foto/" class="nav-item">Foto</a>
+        <a href="/~misuraca/interessi/" class="nav-item">Interessi</a>
+        <a href="/~misuraca/about/" class="nav-item">About</a>
+    </div>
+    <div class="nav-bottom">
+        <slot name="bottom">
+            <img src="/~misuraca/gatto-1.png" alt="gatto 1" />
+        </slot>
+    </div>
+</nav>

src/content/appunti/analisi-1.md

@@ -0,0 +1,5 @@
+---
+title: Analisi 1
+---
+
+Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum, sit.

src/content/link-utili.md

@@ -0,0 +1,34 @@
+## Primo paragrafo
+
+![Gatto Matematica](/~misuraca/gatto-matematica.png)
+
+Questo è un paragrafo _di testo_.
+
+### Secondo paragrafo
+
+Questo è un **altro** paragrafo di testo.
+
+![Gatto Matematica](/~misuraca/gatto-matematica.png)
+
+#### Terzo paragrafo
+
+Questo è un terzo paragrafo di testo.
+
+![Gatto Matematica](/~misuraca/gatto-matematica.png)
+
+- Primo elemento
+
+- Secondo elemento
+
+- Terzo elemento [link](https://example.com)
+
+Questo è un terzo paragrafo di testo.
+
+![Gatto Matematica](/~misuraca/gatto-matematica.png)
+
+1. Primo elemento
+
+2. Secondo elemento
+
+3. Terzo elemento [link](https://example.com)
+

src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

src/layouts/Base.astro

@@ -0,0 +1,30 @@
+---
+import '../main.css'
+
+import Sidebar from '../components/Sidebar.astro'
+
+import '@fontsource/corinthia/latin.css'
+import '@fontsource/indie-flower/latin.css'
+import '@fontsource/patrick-hand/latin.css'
+import '@fontsource/berkshire-swash/latin.css'
+---
+
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Arianna Misuraca</title>
+    </head>
+    <body>
+        <Sidebar>
+            <slot name="sidebar-bottom" slot="bottom">
+                <img src="/~misuraca/gatto-1.png" alt="gatto 1" />
+            </slot>
+        </Sidebar>
+        <main>
+            <slot />
+        </main>
+        <div class="pattern"></div>
+    </body>
+</html>

src/main.css

@@ -0,0 +1,375 @@
+:root {
+    --font-corinthia: 'Corinthia', cursive;
+    --font-patrik-hand: 'Patrick Hand', cursive;
+    --font-indie-flower: 'Indie Flower', cursive;
+    --font-berkshire-swash: 'Berkshire Swash', cursive;
+}
+
+*,
+*::before,
+*::after {
+    font-family: inherit;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+html,
+body {
+    min-height: 100%;
+    height: 100%;
+}
+
+img {
+    display: block;
+}
+
+/* Components */
+
+.pattern {
+    background-image: url('/~misuraca/pattern-arianna-right.png');
+    /* background-repeat: no-repeat; */
+    background-repeat: repeat-y;
+    background-size: 400px;
+}
+
+.sidebar {
+    background: #5f432f;
+    color: #fde1c5;
+
+    height: 100vh;
+    max-height: 100vh;
+    overflow: hidden;
+
+    padding-top: 1rem;
+
+    width: 20%;
+    position: fixed;
+
+    display: grid;
+    grid-template-rows: minmax(auto, 10rem) 1fr minmax(auto, 10rem);
+    /* place-content: center; */
+    /* place-items: center; */
+
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.25);
+
+    z-index: 1;
+
+    & > .nav-top,
+    & > .nav-bottom {
+        width: 100%;
+        height: 100%;
+
+        & > a {
+            width: 100%;
+            height: 100%;
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+
+            object-fit: contain;
+        }
+    }
+
+    & > .nav-links {
+        place-self: center;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        gap: 2rem;
+
+        & > a {
+            text-align: center;
+
+            color: #fde1c5;
+            text-decoration: none;
+
+            font-family: var(--font-indie-flower);
+            font-size: 32px;
+            font-weight: 400;
+
+            letter-spacing: 0.25rem;
+
+            padding: 0.25rem 1rem;
+
+            &:hover {
+                background: rgba(255, 255, 255, 0.125);
+            }
+        }
+    }
+
+    #mobile-menu-toggle,
+    label {
+        display: none;
+    }
+
+    @media screen and (max-width: 768px) {
+        padding: 0;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+
+        & > .nav-top,
+        & > .nav-bottom {
+            display: none;
+        }
+
+        & > label {
+            width: 3rem;
+            min-height: 3rem;
+
+            display: grid;
+            place-content: center;
+
+            align-self: start;
+        }
+
+        &:has(#mobile-menu-toggle:not(:checked)) {
+            & > .nav-links {
+                display: none;
+            }
+        }
+
+        &:has(#mobile-menu-toggle:checked) {
+            width: 100%;
+
+            & > .nav-top,
+            & > .nav-bottom {
+                display: block;
+
+                max-width: 5rem;
+            }
+
+            & > .nav-links {
+                display: flex;
+                gap: 1rem;
+            }
+        }
+    }
+}
+
+.text {
+    display: block;
+
+    &.center {
+        text-align: center;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    p,
+    ul,
+    ol {
+        width: 100%;
+        max-width: 42rem;
+    }
+
+    p + p {
+        margin-top: 0.75rem;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4 {
+        font-family: var(--font-berkshire-swash);
+        font-weight: 400;
+
+        padding: 2rem 0 1rem;
+    }
+
+    li {
+        margin: 1rem 0;
+    }
+
+    a {
+        color: gold;
+        text-decoration: none;
+        /* font-weight: 600; */
+
+        &:hover {
+            color: rgb(255, 225, 56);
+            text-decoration: underline;
+        }
+    }
+
+    p:has(> img) {
+        max-width: 10rem;
+
+        & > img {
+            max-width: 10rem;
+        }
+
+        &:nth-child(even) {
+            float: right;
+            margin: 2rem -5rem 2rem 2rem;
+        }
+
+        &:nth-child(odd) {
+            float: left;
+            margin: 2rem 2rem 2rem -5rem;
+        }
+    }
+
+    @media screen and (max-width: 768px) {
+        font-size: 16px;
+
+        p:has(> img) {
+            max-width: 10rem;
+
+            & > img {
+                max-width: 10rem;
+                margin: 1rem auto;
+            }
+
+            &:nth-child(even) {
+                float: none !important;
+                margin: 1rem auto;
+            }
+
+            &:nth-child(odd) {
+                float: none !important;
+                margin: 1rem auto;
+            }
+        }
+    }
+}
+
+.photo-grid {
+    width: 100%;
+    padding: 0 3rem 0 6rem;
+
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+    gap: 3rem;
+
+    img {
+        transform: rotate(calc(5deg * sin(2 + var(--seed) * 80)));
+
+        width: 100%;
+        height: 100%;
+
+        object-fit: cover;
+    }
+
+    @media screen and (max-width: 768px) {
+        padding: 0;
+
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+    }
+}
+
+/* Structure */
+
+body {
+    background: #c59f7c;
+    color: #333;
+
+    font-family: var(--font-patrik-hand);
+
+    font-size: 24px;
+    font-weight: 400;
+    letter-spacing: 0.25rem;
+
+    display: grid;
+    grid-template-columns: 1fr 4fr 1fr;
+
+    & > .sidebar {
+        grid-column: 1 / 2;
+    }
+
+    & > main {
+        grid-column: 2 / 3;
+
+        display: flex;
+        flex-direction: column;
+        gap: 3rem;
+        align-items: center;
+
+        padding-bottom: 6rem;
+
+        img {
+            max-height: 50vh;
+            max-width: 100%;
+        }
+
+        & > img {
+            box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.25);
+        }
+
+        & > h1:first-child {
+            font-family: var(--font-berkshire-swash);
+            font-size: 80px;
+            font-weight: 400;
+
+            padding: 3rem 0 0;
+
+            text-align: center;
+
+            &.font-corinthia {
+                font-family: var(--font-corinthia);
+                font-weight: 800;
+            }
+
+            img {
+                display: inline-block;
+                vertical-align: middle;
+
+                height: 8rem;
+            }
+
+            @media screen and (max-width: 768px) {
+                padding: 2rem 0 0;
+                font-size: 52px;
+
+                img {
+                    height: 4rem;
+                }
+            }
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        p,
+        ul,
+        ol {
+            width: 100%;
+            max-width: 42rem;
+        }
+    }
+
+    & > .pattern {
+        grid-column: 3 / 4;
+    }
+
+    @media screen and (max-width: 768px) {
+        padding: 0;
+
+        grid-template-columns: 3rem 1fr 3rem;
+
+        & > .sidebar {
+            /* display: none; */
+
+            width: 3rem;
+        }
+
+        & > main {
+            padding: 1rem 0 3rem 1rem;
+        }
+
+        & > .pattern {
+            background-size: 200px;
+        }
+    }
+}

src/pages/about.astro

@@ -0,0 +1,17 @@
+---
+import Base from '../layouts/Base.astro'
+
+import { Content } from '../content/about.md'
+---
+
+<Base>
+    <img slot="sidebar-bottom" src="/~misuraca/bocca.png" alt="pi greco" style="width: 100%; height: 10rem;" />
+
+    <h1>
+        About
+        <img src="/~misuraca/wine-glass.png" alt="wine glass" />
+    </h1>
+    <div class="text center">
+        <Content />
+    </div>
+</Base>

src/pages/appunti.astro

@@ -0,0 +1,34 @@
+---
+import Base from '../layouts/Base.astro'
+
+const materie = import.meta.glob('../content/appunti/*.md')
+
+const materieSlugTitle = await Promise.all(
+    Object.values(materie).map(async materiaModule => {
+        // @ts-ignore
+        const { file, frontmatter } = await materiaModule()
+
+        const slug = file.match(/appunti\/(.*).md$/)[1]
+        return { title: frontmatter.title, slug }
+    })
+)
+---
+
+<Base>
+    <img slot="sidebar-bottom" src="/~misuraca/pi-greco.png" alt="pi greco" />
+
+    <h1>
+        Appunti
+
+        <img src="/~misuraca/libri.png" alt="libri" />
+    </h1>
+    <div class="text">
+        {
+            materieSlugTitle.map(({ title, slug }) => (
+                <a href={`/~misuraca/appunti/${slug}/`}>
+                    <h2>{title}</h2>
+                </a>
+            ))
+        }
+    </div>
+</Base>

src/pages/appunti/[materia].astro

@@ -0,0 +1,38 @@
+---
+import Base from '../../layouts/Base.astro'
+
+export async function getStaticPaths() {
+    const materie = import.meta.glob('../../content/appunti/*.md')
+
+    return await Promise.all(
+        Object.keys(materie).map(async filename => {
+            // @ts-ignore
+            const { Content, frontmatter, file } = await materie[filename]()
+
+            return {
+                params: {
+                    materia: file.replace(/\.md$/, '').split('/').pop(),
+                },
+                props: {
+                    frontmatter,
+                    Content,
+                },
+            }
+        })
+    )
+}
+
+const { Content, frontmatter } = Astro.props
+---
+
+<Base>
+    <img slot="sidebar-bottom" src="/~misuraca/pi-greco.png" alt="pi greco" />
+
+    <h1>
+        {frontmatter.title}
+        <img src="/~misuraca/libri.png" alt="libri" />
+    </h1>
+    <div class="text">
+        <Content />
+    </div>
+</Base>

src/pages/foto.astro

@@ -0,0 +1,19 @@
+---
+import { Image } from 'astro:assets'
+import Base from '../layouts/Base.astro'
+
+const photos = import.meta.glob('../assets/galleria/*')
+
+// @ts-ignore
+const images = (await Promise.all(Object.values(photos).map(imgModule => imgModule()))).map(img => img.default)
+---
+
+<Base>
+    <h1>
+        Foto
+        <img src="/~misuraca/foto.png" alt="foto" />
+    </h1>
+    <div class="photo-grid">
+        {images.map((img, index) => <img src={img.src} alt="una foto" style={`--seed: ${index}`} />)}
+    </div>
+</Base>

src/pages/index.astro

@@ -0,0 +1,9 @@
+---
+import Base from '../layouts/Base.astro'
+---
+
+<Base>
+    <h1 class="font-corinthia">Arianna Misuraca</h1>
+    <img src="/~misuraca/arianna-1.png" alt="arianna 1" />
+    <div class="text center">Non si tratta di vincere.<br />Si tratta di non mollare.<br />Se avete un sogno, lottate.</div>
+</Base>

src/pages/interessi.astro

@@ -0,0 +1,17 @@
+---
+import Base from '../layouts/Base.astro'
+
+import { Content } from '../content/interessi.md'
+---
+
+<Base>
+    <img slot="sidebar-bottom" src="/~misuraca/gazzelle.png" alt="link utili" />
+
+    <h1>
+        Interessi
+        <img src="/~misuraca/note.png" alt="music note" />
+    </h1>
+    <div class="text center">
+        <Content />
+    </div>
+</Base>

src/pages/link-utili.astro

@@ -0,0 +1,18 @@
+---
+import Base from '../layouts/Base.astro'
+
+import { Content } from '../content/link-utili.md'
+---
+
+<Base>
+    <img slot="sidebar-bottom" src="/~misuraca/gomitolo.png" alt="gomitolo" />
+
+    <h1>
+        Link Utili
+        <img slot="sidebar-bottom" src="/~misuraca/link-icon.png" alt="link utili" />
+    </h1>
+
+    <div class="text">
+        <Content />
+    </div>
+</Base>

tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/base"
+}