initial commit

biome.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.6.4/schema.json",
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": true,
+    "indentStyle": "space"
+  },
+  "javascript": {
+    "formatter": {
+      "enabled": true,
+      "jsxQuoteStyle": "single",
+      "semicolons": "asNeeded",
+      "quoteStyle": "single",
+      "lineWidth": 170
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "all": true,
+      "style": {
+        "recommended": true,
+        "noDefaultExport": "off"
+      }
+    },
+    "ignore": ["node_modules"]
+  },
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  }
+}

eleventy.config.js

@@ -0,0 +1,34 @@
+import pluginWebc from '@11ty/eleventy-plugin-webc'
+import mdit from 'markdown-it'
+
+export default function (config) {
+  // markdown parser
+  const markdownLib = mdit({
+    html: true,
+    breaks: false,
+    linkify: true,
+  }).disable('code')
+
+  config.setLibrary('md', markdownLib)
+
+  // webc templates
+  config.addPlugin(pluginWebc, {
+    components: 'src/layouts/components/*.webc',
+  })
+
+  config.addPassthroughCopy({
+    'src/assets': '/',
+    './node_modules/view-transitions-polyfill/dist/view-transitions-polyfill.js': '/scripts/vtpolyfill.js',
+    // 'src/admin': 'admin',
+  })
+
+  return {
+    markdownTemplateEngine: 'md',
+    dir: {
+      input: 'src/content',
+      includes: '../layouts',
+      data: '../data',
+      output: 'dist',
+    },
+  }
+}

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "alex.portfolio",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "eleventy --serve"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git.suroh.tk/suroh/alex.portfolio.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@11ty/eleventy": "^3.0.0",
+    "@11ty/eleventy-plugin-webc": "^0.11.2",
+    "markdown-it": "^14.1.0",
+    "view-transitions-polyfill": "^1.0.3"
+  }
+}

src/assets/scripts/main.js

@@ -0,0 +1 @@
+

src/assets/styles/main.css

@@ -0,0 +1,85 @@
+@import 'reset.css';
+
+@view-transition {
+  navigation: auto;
+}
+
+:root {
+  --font-family: 'Inter', sans-serif;
+  --font-size: 1em;
+
+  --primary-400: #fcf807;
+  --primary-300: #fff961;
+  --primary-200: #fffb92;
+  --primary-100: #fffca9;
+
+  --tonal-900: #1f221c;
+  --tonal-700: #343731;
+  --tonal-400: #4a4c47;
+  --tonal-300: #61635f;
+  --tonal-200: #797b77;
+  --tonal-100: #939491;
+
+  --neutral-900: #040e17;
+  --neutral-200: #868a8e;
+  --neutral-100: #fafcf7;
+
+  color-scheme: light dark;
+}
+
+body {
+  --menu-padding: 1em;
+  --menu-width: 10vw;
+  --menu-content-width:calc(var(--menu-width) - calc(var(--menu-padding) * 2));
+
+  font-family: var(--font-family, sans-serif);
+  line-height: 1.12;
+
+  color: light-dark(var(--neutral-900), var(--neutral-100));
+  background-color: light-dark(var(--neutral-100), var(--neutral-900));
+
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+alx-nav {
+  display: block;
+  view-transition-name: main-nav;
+  max-width: 10vw;
+
+  transition: max-width 0.5s ease;
+}
+
+alx-nav.minimised {
+  max-width: 3em;
+}
+
+alx-themetoggle {
+  position: absolute;
+  top: 1em;
+  right: 1em;
+}
+
+body.dark {
+  color-scheme: dark;
+}
+
+body.light {
+  color-scheme: light;
+}
+
+main {
+  display: grid;
+  grid-auto-flow: row;
+  align-content: start;
+  gap: 1em;
+  padding: 1em;
+
+  view-transition-name: main-content;
+
+  p {
+    max-width: 70ch;
+  }
+}
+
+

src/assets/styles/reset.css

@@ -0,0 +1,173 @@
+/*
+  Made by Elly Loel - https://ellyloel.com/
+  With inspiration from:
+    - Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
+    - Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
+    - Adam Argyle - https://unpkg.com/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE
+
+  Notes:
+    - `:where()` is used to lower specificity for easy overriding.
+*/
+
+* {
+  /* Remove default margin on everything */
+  margin: 0;
+  /* Remove default padding on everything */
+  padding: 0;
+  /* Calc `em` based line height, bigger line height for smaller font size and smaller line height for bigger font size: https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */
+  line-height: calc(0.25rem + 1em + 0.25rem);
+}
+
+/* Use a more-intuitive box-sizing model on everything */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+/* Remove border and set sensible defaults for backgrounds, on all elements except fieldset progress and meter */
+*:where(:not(fieldset, progress, meter)) {
+  border-width: 0;
+  border-style: solid;
+  background-origin: border-box;
+  background-repeat: no-repeat;
+}
+
+html {
+  /* Allow percentage-based heights in the application */
+  block-size: 100%;
+  /* Making sure text size is only controlled by font-size */
+  -webkit-text-size-adjust: none;
+}
+
+/* Smooth scrolling for users that don't prefer reduced motion */
+@media (prefers-reduced-motion: no-preference) {
+  html:focus-within {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  /* https://marco.org/2012/11/15/text-rendering-optimize-legibility */
+  text-rendering: optimizeSpeed;
+  /* Allow percentage-based heights in the application */
+  min-block-size: 100%;
+  /* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter#example_2 */
+  /* scrollbar-gutter: stable both-edges; Removed until this bug is fixed: https://bugs.chromium.org/p/chromium/issues/detail?id=1318404#c2 */
+}
+
+/* Improve media defaults */
+:where(img, svg, video, canvas, audio, iframe, embed, object) {
+  display: block;
+}
+:where(img, svg, video) {
+  block-size: auto;
+  max-inline-size: 100%;
+}
+
+/* Remove stroke and set fill colour to the inherited font colour */
+:where(svg) {
+  stroke: none;
+  fill: currentColor;
+}
+
+/* SVG's without a fill attribute */
+:where(svg):where(:not([fill])) {
+  /* Remove fill and set stroke colour to the inherited font colour */
+  stroke: currentColor;
+  fill: none;
+  /* Rounded stroke */
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Set a size for SVG's without a width attribute */
+:where(svg):where(:not([width])) {
+  inline-size: 5rem;
+}
+
+/* Remove built-in form typography styles */
+:where(input, button, textarea, select),
+:where(input[type="file"])::-webkit-file-upload-button {
+  color: inherit;
+  font: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+}
+
+/* Change textarea resize to vertical only and block only if the browser supports that */
+:where(textarea) {
+  resize: vertical;
+}
+@supports (resize: block) {
+  :where(textarea) {
+    resize: block;
+  }
+}
+
+/* Avoid text overflows */
+:where(p, h1, h2, h3, h4, h5, h6) {
+  overflow-wrap: break-word;
+}
+
+/* Fix h1 font size inside article, aside, nav, and section */
+h1 {
+  font-size: 2em;
+}
+
+/* Position list marker inside */
+:where(ul, ol) {
+  list-style-position: inside;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+:where(ul, ol)[role="list"] {
+  list-style: none;
+}
+
+/* More readable underline style for anchor tags without a class. This could be set on anchor tags globally, but it can cause conflicts. */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make it clear that interactive elements are interactive */
+:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
+  cursor: pointer;
+  touch-action: manipulation;
+}
+:where(input[type="file"]) {
+  cursor: auto;
+}
+:where(input[type="file"])::-webkit-file-upload-button,
+:where(input[type="file"])::file-selector-button {
+  cursor: pointer;
+}
+
+/* Animate focus outline */
+@media (prefers-reduced-motion: no-preference) {
+  :focus-visible {
+    transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
+  }
+  :where(:not(:active)):focus-visible {
+    transition-duration: 0.25s;
+  }
+}
+:where(:not(:active)):focus-visible {
+  outline-offset: 5px;
+}
+
+/* Make sure users can't select button text */
+:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"]),
+:where(input[type="file"])::-webkit-file-upload-button,
+:where(input[type="file"])::file-selector-button {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  user-select: none;
+  text-align: center;
+}
+
+/* Disabled cursor for disabled buttons */
+:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"])[disabled] {
+  cursor: not-allowed;
+}

src/content/about.md

@@ -0,0 +1,11 @@
+---
+title: About
+layout: single
+---
+
+My work focuses on merging artistic practices with critical pedagogy. Through my work, I question social systems and foster awareness by engaging audiences with the immediate realities and tensions of identity, migration, and community. Using video, installations, and archival work, I capture everyday experiences, inviting viewers into narratives that reflect resilience, adaptation, and belonging.
+
+Currently, my research project aims to develop educational tools that integrate critical, intercultural perspectives, reshaping traditional frameworks to promote sustainable, reflective engagement in both art and education. My approach emphasizes local knowledge and community as essential to learning—a commitment that began in Peru and continues through collaboration with diverse audiences in France.
+
+☁︎ alex eguiluz
+paris,2024

src/content/art/index.md

@@ -0,0 +1,4 @@
+---
+layout: page
+navPage: /art
+---

src/content/index.md

@@ -0,0 +1,8 @@
+---
+title: Alexandra Eguiluz
+layout: single
+---
+
+## something
+
+here

src/content/research/index.md

@@ -0,0 +1,4 @@
+---
+layout: page
+navPage: research
+---

src/layouts/base.webc

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>WebC Example</title>
+
+    <link rel="icon" href="/favicon.png">
+
+    <!-- styles -->
+    <link href="/styles/main.css" rel="stylesheet" webc:keep>
+
+    <!-- scripts -->
+    <script src="/scripts/vtpolyfill.js" webc:keep></script>
+
+    <!-- components -->
+    <style @raw="getBundle('css')" webc:keep></style>
+    <script type="module" @raw="getBundle('js')" webc:keep></script>
+  </head>
+  <body>
+    <alx-nav navpage="/">
+      <ul role="list">
+        <li>
+          Art
+          <ul role="list">
+            <li>link1</li>
+            <li>link2</li>
+            <li>link3</li>
+            <li>link4</li>
+            <li>link5</li>
+          </ul>
+        </li>
+        <li>
+          <a href="/research">Research</a>
+        </li>
+        <li><a href="/about">About</a></li>
+      </ul>
+    </alx-nav>
+
+    <template webc:nokeep @raw="content"></template>
+
+    <alx-themetoggle></alx-themetoggle>
+  </body>
+</html>

src/layouts/components/alx-nav.webc

@@ -0,0 +1,57 @@
+<nav>
+  <button>toggle</button>
+
+  <slot></slot>
+</nav>
+
+<style webc:scoped>
+nav {
+  display: grid;
+  justify-content: end;
+  align-content: start;
+  grid-auto-flow: row;
+  gap: var(--menu-padding);
+  outline: thin solid light-dark(var(--tonal-100), var(--tonal-900));
+  padding: var(--menu-padding);
+  overflow: hidden;
+  height: 100%;
+}
+
+ul {
+  display: block;
+  min-width: var(--menu-content-width);
+}
+
+button {
+  display: block;
+  min-width: var(--menu-content-width);
+}
+</style>
+
+<script type="module" webc:scoped>
+customElements.define('alx-nav', class extends HTMLElement {
+  static observedAttributes = ['navpage']
+
+  navPage = ''
+
+  connectedCallback() {
+    const path = window.location.pathname?.length > 1 ? window.location.pathname.replace(/\/$/, '') : window.location.pathname
+    if (path !== this.navPage) {
+      this.classList.add('minimised')
+    }
+
+    this.querySelector('button').addEventListener('click', () => {
+      this.classList.toggle('minimised')
+    })
+  }
+
+  attributeChangedCallback(name, ov, nv) {
+    switch (name) {
+      case 'navpage':
+        this.navPage = nv
+        break
+    }
+  }
+
+})
+</script>

src/layouts/components/alx-themetoggle.webc

@@ -0,0 +1,69 @@
+<script type='module'>
+customElements.define('alx-themetoggle', class extends HTMLElement {
+  currentTheme
+  preferDark
+
+  LIGHT_LABEL = 'light'
+  DARK_LABEL = 'dark'
+
+  constructor() {
+    super()
+
+    this.preferDark = window.matchMedia('(prefers-color-scheme: dark)')
+  }
+
+  connectedCallback() {
+    const checkbox = this.querySelector('input')
+    this.currentTheme = localStorage.getItem('theme')
+
+    if (this.preferDark.matches) {
+      document.body.classList.remove(this.DARK_LABEL)
+      if (this.currentTheme == this.LIGHT_LABEL) {
+        document.body.classList.add(this.LIGHT_LABEL)
+      }
+    } else {
+      document.body.classList.remove(this.LIGHT_LABEL)
+      checkbox.checked = true
+      if (this.currentTheme == this.DARK_LABEL) {
+        document.body.classList.add(this.DARK_LABEL)
+      }
+    }
+
+    checkbox.checked = this.currentTheme === this.DARK_LABEL
+
+    checkbox.addEventListener('click', () => {
+      let theme
+
+      if (this.preferDark.matches) {
+        if (checkbox.checked) {
+          document.body.classList.remove(this.LIGHT_LABEL)
+        } else {
+          document.body.classList.add(this.LIGHT_LABEL)
+        }
+        theme = document.body.classList.contains(this.LIGHT_LABEL)
+          ? 'light'
+          : 'dark'
+      } else {
+        if (checkbox.checked) {
+          document.body.classList.add(this.DARK_LABEL)
+        } else {
+          document.body.classList.remove(this.DARK_LABEL)
+        }
+        theme = document.body.classList.contains(this.DARK_LABEL)
+          ? 'dark'
+          : 'light'
+      }
+
+      localStorage.setItem('theme', theme)
+    })
+  }
+})
+
+</script>
+
+<template webc:nokeep>
+  <label for='theme'>Dark</label>
+  <input type='checkbox' name='theme' id='theme'>
+</template>
+
+<style webc:scoped></style>

src/layouts/page.webc

@@ -0,0 +1,10 @@
+---
+layout: base
+---
+
+
+<main>
+  <h1 @text="title"></h1>
+
+  <template webc:nokeep @raw="content"></template>
+</main>

src/layouts/single.webc

@@ -0,0 +1,9 @@
+---
+layout: base
+---
+
+<main>
+  <h1 @text="title"></h1>
+
+  <template webc:nokeep @raw="content"></template>
+</main>