Idavill · Idavill · Nov 23, 2025 · Nov 21, 2025 · Nov 21, 2025 · Nov 21, 2025
diff --git a/docs/assets/index-BgJcEMba.js b/docs/assets/index-BgJcEMba.js
diff --git a/docs/assets/index-Dfap8nBR.css b/docs/assets/index-Dfap8nBR.css
diff --git a/docs/images/dots_1.png b/docs/images/dots_1.png
diff --git a/docs/images/dots_3.png b/docs/images/dots_3.png
diff --git a/docs/images/dots_4.png b/docs/images/dots_4.png
diff --git a/docs/images/flax-s.png b/docs/images/flax-s.png
diff --git a/docs/images/flax2.png b/docs/images/flax2.png
diff --git a/docs/images/flax2_20.jpg b/docs/images/flax2_20.jpg
diff --git a/docs/images/uf-square_1.png b/docs/images/uf-square_1.png
diff --git a/docs/images/uf_square-2.png b/docs/images/uf_square-2.png
diff --git a/docs/images/uf_square_3.png b/docs/images/uf_square_3.png
diff --git a/docs/index.html b/docs/index.html
@@ -14,8 +14,8 @@
 
     <!-- favicon (use vite's built-in handling) -->
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <script type="module" crossorigin src="/work/assets/index-DgYLXCrh.js"></script>
-    <link rel="stylesheet" crossorigin href="/work/assets/index-C8TGd1Cb.css">
+    <script type="module" crossorigin src="/work/assets/index-BgJcEMba.js"></script>
+    <link rel="stylesheet" crossorigin href="/work/assets/index-Dfap8nBR.css">
   </head>
   <body>
     <div id="pfive-container-background"></div>

diff --git a/docs/assets/index-C8TGd1Cb.css → old_docs/assets/index-C8TGd1Cb.css b/docs/assets/index-C8TGd1Cb.css → old_docs/assets/index-C8TGd1Cb.css
diff --git a/docs/assets/index-DgYLXCrh.js → old_docs/assets/index-DgYLXCrh.js b/docs/assets/index-DgYLXCrh.js → old_docs/assets/index-DgYLXCrh.js
diff --git a/docs/icon/1.png → old_docs/icon/1.png b/docs/icon/1.png → old_docs/icon/1.png
diff --git a/docs/icon/2.png → old_docs/icon/2.png b/docs/icon/2.png → old_docs/icon/2.png
diff --git a/docs/icon/3.png → old_docs/icon/3.png b/docs/icon/3.png → old_docs/icon/3.png
diff --git a/old_docs/icon/Frame 78.svg b/old_docs/icon/Frame 78.svg
diff --git a/old_docs/icon/Frame 79.svg b/old_docs/icon/Frame 79.svg
diff --git a/old_docs/icon/close.svg b/old_docs/icon/close.svg
diff --git a/old_docs/icon/dotdot.svg b/old_docs/icon/dotdot.svg
diff --git a/old_docs/icon/expand.svg b/old_docs/icon/expand.svg
diff --git a/old_docs/icon/mail.svg b/old_docs/icon/mail.svg
diff --git a/old_docs/icon/up.svg b/old_docs/icon/up.svg
diff --git a/docs/images/18.2.jpeg → old_docs/images/18.2.jpeg b/docs/images/18.2.jpeg → old_docs/images/18.2.jpeg
diff --git a/old_docs/images/6-small.jpg b/old_docs/images/6-small.jpg
diff --git a/docs/images/6.jpg → old_docs/images/6.jpg b/docs/images/6.jpg → old_docs/images/6.jpg
diff --git a/old_docs/images/fauna2.gif b/old_docs/images/fauna2.gif
diff --git a/old_docs/images/flax-s_20-small.jpg b/old_docs/images/flax-s_20-small.jpg
diff --git a/old_docs/images/flax-s_20.jpg b/old_docs/images/flax-s_20.jpg
diff --git a/old_docs/images/mm.gif b/old_docs/images/mm.gif
diff --git a/old_docs/images/sentinel.gif b/old_docs/images/sentinel.gif
diff --git a/old_docs/images/td.png b/old_docs/images/td.png
diff --git a/old_docs/images/uf-s-4.png b/old_docs/images/uf-s-4.png
diff --git a/old_docs/images/uf-s-6.png b/old_docs/images/uf-s-6.png
diff --git a/old_docs/images/uf-s-7.png b/old_docs/images/uf-s-7.png
diff --git a/old_docs/index.html b/old_docs/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ida Villadsen Portfolio</title>
+
+    <!-- external assets (fine to keep absolute) -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.8.0/p5.js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Aladin&family=Bungee+Spice&family=Bytesized&family=Faculty+Glyphic&family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&family=Inria+Serif:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Koulen&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Slab:wght@100&display=swap" rel="stylesheet">
+    <meta charset="UTF-8" />
+
+    <!-- favicon (use vite's built-in handling) -->
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <script type="module" crossorigin src="/work/assets/index-DgYLXCrh.js"></script>
+    <link rel="stylesheet" crossorigin href="/work/assets/index-C8TGd1Cb.css">
+  </head>
+  <body>
+    <div id="pfive-container-background"></div>
+
+    <!-- relative paths for local scripts -->
+    <script src="./sketch/sketch.js"></script>
+    <script src="./sketch/topSketch.js"></script>
+
+    <div id="root"></div>
+
+    <!-- vite will rewrite this properly in production -->
+  </body>
+</html>
diff --git a/old_docs/sketch/sketch.js b/old_docs/sketch/sketch.js
@@ -0,0 +1,149 @@
+let pageHeight = 1000;
+let pageWidth = 100;
+let isReady = true;
+let canvas4;
+let mousePressed = false;
+let particles = [];
+let img;
+
+particlebackground = function (p) {
+  let particles = [];
+  let res = 50;
+  p.preload = function () {
+    img = p.loadImage("/work/images/6-small.jpg");
+    pageHeight = p.select("body").height;
+    pageWidth = p.select("body").width;
+    img.resize(pageWidth, pageHeight);
+  };
+  p.setup = function () {
+    // pageHeight = p.select("body").height;
+    // pageWidth = p.select("body").width;
+    canvas4 = p
+      .createCanvas(pageWidth, pageHeight)
+      .parent("pfive-container-background");
+    canvas4.position(0, 0);
+    canvas4.style("z-index", "1");
+    p.noStroke();
+    // paintParticles();
+    // img.resize(pageWidth, pageHeight); // pageHeight
+  };
+  p.draw = function () {
+    paintParticles();
+  };
+  paintParticles = function () {
+    for (let i = 0; i < particles.length; i++) {
+      particles[i].update();
+      particles[i].draw();
+    }
+    if (isReady) {
+      placeParticles();
+      canvas4.style("opacity", "1");
+      isReady = false;
+    }
+  };
+  p.windowResized = function () {
+    resizeTimeout = setTimeout(() => {
+      clearAllParticles();
+      isReady = true;
+      pageHeight = p.select("body").height;
+      pageWidth = p.select("body").width;
+      p.resizeCanvas(pageWidth, pageHeight);
+      if (img !== undefined) {
+        img.resize(pageWidth, pageHeight);
+      }
+      paintParticles();
+      // console.log("window resized and particles repainted!");
+    }, 300); // Adjust delay as needed
+  };
+
+  function clearAllParticles() {
+    particles = [];
+  }
+  function placeParticles() {
+    for (let i = 0; i < p.width; i += res) {
+      for (let j = 0; j < p.height; j += res) {
+        let x = (i / p.width) * img.width;
+        let y = (j / p.height) * img.height;
+        let c = img.get(x, y);
+
+        if (c[0] + c[1] + c[2] != 255 * 3) {
+          particles.push(
+            new Particle(
+              p,
+              i, //+ p.noise(i * 100, j * 100) * 10,
+              j, //+ p.noise(-i * 100, -j * 100) * 10,
+              c,
+              res
+            )
+          );
+        }
+      }
+    }
+  }
+
+  class Particle {
+    constructor(p, x, y, color, res) {
+      this.res = res;
+      this.p = p;
+      this.x = x;
+      this.y = y;
+
+      this.homeX = x;
+      this.homeY = y;
+
+      this.color = color;
+
+      // Add random velocity
+      this.vx = this.p.random(-10, 2);
+      this.vy = this.p.random(-10, 2);
+    }
+
+    fly() {
+      this.x += this.vx;
+      this.y += this.vy;
+
+      // Bounce off edges
+      if (this.x < 0 || this.x > this.p.width) this.vx *= -1;
+      if (this.y < 0 || this.y > this.p.height) this.vy *= -1;
+    }
+
+    shuffle() {
+      this.x = this.p.random(this.p.width);
+      this.y = this.p.random(this.p.height);
+    }
+
+    update() {
+      this.fly();
+      // mouse
+      let mouseD = this.p.dist(this.x, this.y, this.p.mouseX, this.p.mouseY);
+      let mouseA = this.p.atan2(this.y - this.p.mouseY, this.x - this.p.mouseX);
+      // let mouseD = this.p.dist(this.x, this.y, 1, 1);
+      // let mouseA = this.p.atan2(1, 1);
+
+      // home
+      let homeD = this.p.dist(this.x, this.y, this.homeX, this.homeY);
+      let homeA = this.p.atan2(this.homeY - this.y, this.homeX - this.x);
+      // forces
+      let mouseF = this.p.constrain(this.p.map(mouseD, 0, 200, 10, 0), 0, 10);
+      //console.log(mouseF);
+      //let mouseF = this.p.map(mouseD, 0, 100, 10, 0);
+      let homeF = this.p.map(homeD, 0, 100, 0, 10);
+
+      let vx = this.p.cos(mouseA) * mouseF * 2;
+      vx += this.p.cos(homeA) * homeF;
+
+      let vy = this.p.sin(mouseA) * mouseF * 2;
+      vy += this.p.sin(homeA) * homeF;
+
+      this.x += vx;
+      this.y += vy;
+    }
+
+    draw() {
+      this.p.fill(this.color);
+      this.p.ellipse(this.x, this.y, this.res, this.res);
+    }
+  }
+};
+
+new p5(particlebackground);
diff --git a/old_docs/sketch/topSketch.js b/old_docs/sketch/topSketch.js
@@ -0,0 +1,51 @@
+let generalMargin = 30;
+let flat;
+// let textured_output;
+let bungeeFont;
+let color;
+let amount = 100;
+
+function s1(p) {
+  p.preload = function () {
+    // bungeeFont = p.loadFont("images/BungeeSpice-Regular.ttf");
+    // textured_output = p.loadModel(
+    //   "images/textured_output.obj",
+    //   true,
+    //   () => {
+    //     console.log("Model loaded successfully");
+    //   },
+    //   (err) => {
+    //     console.error("Error loading model:", err);
+    //   }
+    // );
+  };
+
+  p.setup = function () {
+    canvas1 = p.createCanvas(500, 500, p.WEBGL).parent("#topSketch");
+    canvas1.style("display", "flex");
+    p.pixelDensity(1);
+
+    color = p.color(100, 0, 255);
+  };
+  p.draw = function () {
+    p.background(240, 0, 200, 10);
+    p.push();
+    // p.ambientLight(10, 100, 220); // blue
+    // p.ambientLight(170, 80, 40); // orange
+    // p.ambientLight(10, 120, 120); // tyrkis
+    p.ambientLight(10, 120, 150); // blue
+
+    const angle = p.frameCount * 0.02;
+    const lx = 150 * Math.cos(angle);
+    const ly = 200 * Math.sin(angle);
+    const lz = 100 * Math.sin(angle * 0.98);
+
+    p.directionalLight(255, 20, 100, lx, ly, lz);
+
+    // Draw your object
+    p.sphere(200, 25, 25);
+    p.pop();
+  };
+}
+
+new p5(s1);
diff --git a/public/icon/1.png b/public/icon/1.png
diff --git a/public/icon/2.png b/public/icon/2.png
diff --git a/public/icon/3.png b/public/icon/3.png
diff --git a/public/images/dots_1.png b/public/images/dots_1.png
diff --git a/public/images/dots_3.png b/public/images/dots_3.png
diff --git a/public/images/dots_4.png b/public/images/dots_4.png
diff --git a/public/images/uf-s-1.png b/public/images/uf-s-1.png
diff --git a/public/images/uf-s-2.png b/public/images/uf-s-2.png
diff --git a/public/images/uf-s-3.png b/public/images/uf-s-3.png
diff --git a/public/images/uf-s-5.png b/public/images/uf-s-5.png
diff --git a/public/images/urbanf1.png b/public/images/urbanf1.png
diff --git a/public/images/urbanf2.png b/public/images/urbanf2.png
diff --git a/public/images/urbanf4.png b/public/images/urbanf4.png
diff --git a/src/components/About/TopDescription.tsx b/src/components/About/TopDescription.tsx
@@ -12,7 +12,7 @@ export default function TopDescription({hover}:TopDescriptionType){
                 <GrAdd className="flex w-1/6 mb-5 md:mb-0"/>
                 <div className="flex w-full h-fit flex-col md:w-5/6">
                   <SharpiSection
-                    text={`Software developer with a playful design mindset <3`}
+                    text={`Software developer with a playful design mindset.`}
                     backgroundSize={`${hover ? "100% 100%" : "0% 100%"}`}
                   />
                   <p className="flex break-words w-full" >{`Passionate about building intuitive tools and user experiences, exploring creative technologies in the intersection of technology and design`}</p>

diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
@@ -14,7 +14,7 @@ export default function Carousel({ images }: CarouselProps) {
   return (
     <div className="relative">
       <div
-        className="carousel lg:rounded-l-xl lg:rounded-t-none rounded-t-xl overflow-x-hidden rounded-box w-full max-h-64 md:max-h-80 lg:max-h-full flex snap-x snap-mandatory"
+        className="carousel lg:rounded-l-xl lg:rounded-t-none rounded-t-xl overflow-x-hidden rounded-box w-full max-h-64 md:max-h-80 lg:max-h-200 flex snap-x snap-mandatory"
       >
         {images.main.map((img, index) => (
           <div

diff --git a/src/post-content/ProjectsList.json b/src/post-content/ProjectsList.json
@@ -6,19 +6,31 @@
         "number":1,
         "tags":["touchdesigner","python"],
         "title": "MEDITATION ON MATTER",
-        "short_description": "Drift through a living collage of textures and tones: whispers of soil, rustling leaves, distant water – field recordings and 3D scans gathered from real landscapes and arranged into an ambient world of stillness and growth.",
-        "description": "An audiovisual journey into the rhythms of plant life. Step into the garden and leave the noise of the festival behind for a moment. Meditation on Matter invites you to slow down and reconnect with your senses through a guided audiovisual meditation inspired by the quiet intelligence of plant life and all that sustains it. Drift through a living collage of textures and tones: whispers of soil, rustling leaves, distant water – field recordings and 3D scans gathered from real landscapes and arranged into an ambient world of stillness and growth. Taste the garden’s offerings, sip herbal tea, and let your awareness settle into the present. Forget your FOMO. Bring a friend, breathe deeply, and return to the grounding rhythm of simply being.",
+        "short_description": "Installation at Roskilde Festival 2025. Drift through a living collage of textures and tones: whispers of soil, rustling leaves, distant water – field recordings and 3D scans gathered from real landscapes and arranged into an ambient world of stillness and growth.",
+        "description": "An audiovisual journey into the rhythms of plant life. Step into the Roskilde Festivals GROW garden and leave the noise of the festival behind for a moment. Meditation on Matter invites you to slow down and reconnect with your senses through a guided audiovisual meditation inspired by the quiet intelligence of plant life and all that sustains it. Drift through a living collage of textures and tones: whispers of soil, rustling leaves, distant water – field recordings and 3D scans gathered from real landscapes and arranged into an ambient world of stillness and growth. Taste the garden’s offerings, sip herbal tea, and let your awareness settle into the present. Forget your FOMO. Bring a friend, breathe deeply, and return to the grounding rhythm of simply being.",
         "images":{
             "main":["images/mm.gif","images/td.png","images/fauna2.gif"],
             "fallback":["images/flax-s_20-small.jpg","images/flax-s_20-small.jpg","images/flax-s_20-small.jpg"]
         }
     },
+    {
+        "id":"675f9d70-3f4a-11ee-be56-0242ac120002",
+        "number":3,
+        "tags":["react","three.js"],
+        "title": "IDEADOTS 3D-LAB",
+        "short_description": "Web application for idea generation. Place your ideas in 3D space, connect them, and watch your thought network grow organically as you explore relationships between concepts.",
+        "description": "Ideadots 3D-Lab is an experimental tool for visual thinking and idea mapping. Place your ideas in 3D space, connect them, and watch your thought network grow organically as you explore relationships between concepts. Whether brainstorming, planning projects, or studying complex topics, Ideadots Lab helps you see connections and patterns that traditional note-taking methods might miss. Dive into your ideas from new angles and discover insights through spatial organization.",
+        "images": {
+            "main":["images/dots_1.png","images/dots_4.png","images/dots_3.png"],
+            "fallback":["images/flax-s_20-small.jpg"]
+        }
+    },
     {
         "id":"2a1e5f40-3f4a-11ee-be56-0242ac120002",
-        "number":2,
+        "number":4,
         "tags":["react","figma","python"],
         "title": "URBAN FREQUENCIES",
-        "short_description": "Through satellite imagery, climate indicators, and spatial analytics, six thematic maps construct a chronological narrative—from the subtle pulses of air and heat to the physical imprints of urban expansion and ecological presence.",
+        "short_description": "Application developed for Copenhagen Architecture Biennale. Through satellite imagery, climate indicators, and spatial analytics, six thematic maps construct a chronological narrative—from the subtle pulses of air and heat to the physical imprints of urban expansion and ecological presence.",
         "description": "This project reimagines environmental data as architectural storytelling. Through satellite imagery, climate indicators, and spatial analytics, six thematic maps construct a chronological narrative—from the subtle pulses of air and heat to the physical imprints of urban expansion and ecological presence. Each map transcends its technical function, becoming a spatial artifact that invites viewers to interpret the city as a dynamic, living organism in flux.",
         "images":{
             "main":["images/sentinel.gif","images/uf-s-4.png","images/uf-s-7.png","images/uf-s-6.png"],
@@ -27,15 +39,16 @@
     },
     {
         "id":"3c2f7e50-3f4a-11ee-be56-0242ac120002",
-        "number":3,
+        "number":5,
         "tags":["python","supabase"],
         "title": "FLAX IN NORTHERN JUTLAND",
-        "short_description": "By analyzing shipping records from 1650 to 1800, we aim to uncover patterns of trade, assess the scale and significance of textile imports, and situate these findings within their broader historical and economic context.",
+        "short_description": "Data analysis and historical research. By analyzing shipping records from 1650 to 1800, we aim to uncover patterns of trade, assess the scale and significance of textile imports, and situate these findings within their broader historical and economic context.",
         "description": "This project explores the historical journey of flax as a key commodity in textile production, focusing on its movement from the Baltic region to northern Jutland. By analyzing shipping records from 1650 to 1800, we aim to uncover patterns of trade, assess the scale and significance of textile imports, and situate these findings within their broader historical and economic context. The research will involve meticulous data cleaning and the development of insightful visualizations to illuminate the connections between maritime trade and regional textile manufacturing.",
         "images": {
             "main":["images/flax-s_20.jpg"],
             "fallback":["images/flax-s_20-small.jpg"]
         }
-    }],
+    }
+],
     "skills": ["python","touchdesigner","react","figma","supabase"]
 }