chore: hide post

chore(deps): bump astro from 5.13.5 to 5.15.3

astro.config.mjs

@@ -5,6 +5,8 @@ import astroIcon from "astro-icon"
 import mdx from '@astrojs/mdx';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
+import rehypeSlug from "rehype-slug";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
 
 // https://astro.build/config
 export default defineConfig({
@@ -16,7 +18,17 @@ export default defineConfig({
   base: "/",
   markdown: {
     remarkPlugins: [remarkMath],
-    rehypePlugins: [rehypeKatex],
+    rehypePlugins: [rehypeKatex, rehypeSlug,
+      [
+        rehypeAutolinkHeadings,
+        {
+          behavior: "wrap",
+          properties: {
+            class: "heading-anchor", // optional for styling
+          },
+        },
+      ],
+    ],
     shikiConfig: {
       theme: "vesper",
     }

package.json

@@ -13,15 +13,17 @@
     "start": "node ./dist/server/entry.mjs"
   },
   "dependencies": {
-    "@astrojs/mdx": "^4.3.4",
+    "@astrojs/cloudflare": "^12.6.10",
-    "@astrojs/cloudflare": "^12.6.6",
+    "@astrojs/mdx": "^4.3.10",
     "@tailwindcss/vite": "^4.1.11",
-    "astro": "^5.13.4",
+    "astro": "^5.15.4",
     "astro-icon": "^1.1.5",
     "katex": "^0.16.22",
     "lucide-astro": "^0.536.0",
     "lucide-react": "^0.536.0",
+    "rehype-autolink-headings": "^7.1.0",
     "rehype-katex": "^7.0.1",
+    "rehype-slug": "^6.0.0",
     "remark-math": "^6.0.0",
     "serve": "^14.2.4",
     "tailwindcss": "^4.1.11"

src/content.config.ts

@@ -10,8 +10,24 @@ const workshop = defineCollection({
             pubDate: z.coerce.date(),
             updatedDate: z.coerce.date().optional(),
             heroImage: image().optional(),
-            tags: z.array(z.string()).optional()
+            tags: z.array(z.string()).optional(),
+            private: z.boolean().optional()
         }),
 });
 
-export const collections = { workshop };
+const log = defineCollection({
+    loader: glob({ base: './src/content/log', pattern: '**/*.{md,mdx}' }),
+    schema: ({ image }) =>
+        z.object({
+            title: z.string(),
+            description: z.string(),
+            pubDate: z.coerce.date(),
+            updatedDate: z.coerce.date().optional(),
+            heroImage: image().optional(),
+            tags: z.array(z.string()).optional(),
+            private: z.boolean().optional()
+        }),
+});
+
+
+export const collections = { workshop, log };

src/content/log/an-unconventional-university.md

@@ -0,0 +1,108 @@
+---
+title: 'An Unconventional University'
+description: 'My thoughts on Epitech after a year, and my next steps.'
+pubDate: '2025-08-03'
+tags: ['education', 'compsci', 'university']
+heroImage: "../images/an-unconventional-university.png"
+private: true
+---
+
+# Epitech, An Unconventional University
+
+It’s a strange thing to admit, but my first year at Epitech has been a weird kind of paradox.
+
+On the one hand, it’s been a massive success. I got in late 2023, started in the fall of 2024, and dived right into the project-first world I thought I wanted. And I am, genuinely, learning a *ton* about how to build software.
+
+But on the other hand, it’s felt like a complete mismatch. I'm discovering that when you strip away all the "boring" stuff, the math, the physics, the formal theory,you're left with an education that feels incomplete. It feels like I'm only getting half the story. And that missing half is, ironically, the part I'm starting to realize I really, really miss.
+
+## The University
+
+Epitech (which stands for École pour l’informatique et les nouvelles technologies) has multiple campuses around France and in other countries; I’m attending the one in Barcelona, which was the closest to me. A brief summary of my first year should give you a decent idea of how things work there. (It was formerly called the European Institute of Technology, which, in my opinion, sounds way cooler.)
+
+Right at the very beginning, the first and only module or course we have is called the C Pool, or hell. It’s a 5-week super-intensive course, and students usually spend 10-14h a day on campus, 6 days a week. It’s called Pool because the goal is to swim (and drown) in new information. The passing requirement is really low.
+
+There are almost no exams at Epitech. The way they evaluate is based on the projects and exercises of each module. In the Pool, for the first three weeks, each day we had a new set of exercises that had to be delivered 48h after. The second part of the Pool is the first Epitech project: recoding, from scratch, without using the standard library of C, the `printf()` function.
+
+Projects in Epitech are divided in 4 parts:
+
+* **Kick-off:** Presentation of the project (limitations, expected results…).
+* **Bootstrap:** Small guided activity that helps the students get the first step of the project.
+* **Follow-up:** A 2 to 20-minute meeting with a teacher or assistant to evaluate the current state of the project.
+* **Defense:** Presentation of the project to a teacher. The teacher will ask questions related to any section of the code, checking for codebase knowledge and understanding, and looking for any reason to believe any member of the team has cheated (copying, using LLMs, etc.)
+
+When the Pool ends, we have some modules to pick from.
+
+**Semester 1:**
+* Mathematics (basic Python implementation of mathematical formulae and concepts)
+* Unix (recoding of Unix commands from scratch, such as ls, sudo or top)
+* Elementary (DSA)
+* Graphics (usually the most fun, as it is videogame and UI tools programming)
+* …
+
+**Semester 2:**
+* Mathematics
+* Unix
+* Graphics
+* Cybersecurity
+* Data Analysis
+* …
+
+With a couple of exceptions, there are no exams. No lessons. Just a project, and yourself. Teachers (or rather, pedagogical team members which tend to be older students), are always there to help out with some issues, but not all of them, as they want the student to succeed on their own.
+
+## My Opinion
+
+**Methodology**
+
+The method works, I guess. For the ones who are 100% passionate about just programming, it’s probably perfect. It definitely prepares you for the “real world” in that sense. And don’t get me wrong, I love programming, I really do. I’ve had a lot of fun and I really enjoyed many of the projects I’ve done throughout my first year. Smashing my head against the wall and compiling the same code all over again hoping it works, it’s really enjoyable for me. Not sarcasm, I promise.
+
+But Epitech it’s not for me. Not completely.
+
+Maybe I’m just weird, but I miss the theory. I miss the “why.” Epitech is all “how.” How to build this, how to use that tool, how to recode that command. I love programming, but back in high school I also loved mathematics, I loved physics, and I’ve been fascinated by astronomy since I was a kid. Epitech’s model doesn’t really give me the opportunity to get in touch with that part, the part that loves the formal sciences. So I guess maybe that’s what’s lacking. It feels like I’m learning to be a great carpenter, but I’m never taught the physics of why a specific joint is strong or the chemistry of the wood, and I also want to know that.
+
+I won’t leave the university. My family and I have already put in quite an economic effort to get me here, and just leaving after one year feels wrong. So, it’s time to self-study. It’s kind of ironic, isn’t it? Being at a university but having to teach yourself all the foundational theory on the side.
+
+It’s really hard to self-study, especially when you’re already swamped with Epitech projects. But I really want to try. I just find myself missing… well, the other stuff. I want to learn about mathematics, and physics, and just understand more about the universe. That’s the stuff that really scratches that part of my brain, and I haven’t had much of that this year. So that’s the new plan: keep up with Epitech’s project world, but start teaching myself that other stuff on the side, just out of curiosity. And hey, if it happens to pair well with programming, awesome. If not, that’s fine too.
+
+**Teamwork, or Something Like It**
+
+I should also mention that almost none of this is solo. From the C Pool onwards, you’re constantly thrown into group projects, sometimes with friends, sometimes with people you’ve never met. This is a huge part of the “real world” prep. You learn to use Git really fast, or you fail.
+
+You also learn… let’s say “people skills.” You have to deal with different personalities: the person who doesn’t pull their weight, the one who wants to control everything, and the one who’s just on a different wavelength. It’s a massive source of stress, maybe even more than the code itself. Sometimes it’s great and you find people you really click with, other times it’s a complete disaster. But I’ll admit, you learn a lot about communication and (not) losing your mind before a deadline. It’s another one of those things that’s probably good for me, even if I don’t always enjoy it.
+
+**Campus**
+
+This might not be important to everyone I’ve talked to, but the vibes are important as well. How you feel when you’re there, you know? The Barcelona campus is… tiny. And why shouldn’t it be? The promotion size ranges between 25 and 45 students a year, so that makes sense. It’s also modern because, well, tech school. But it feels more like a youth activity center where people go to play board games and foosball (I think that’s the English word for *futbolín*). It really reminds me of the one I have in my hometown. The colors of the walls, the kind of tables and chairs… it feels really “teenager”.
+
+Of course, this is because of movies and books and stuff, but I just don’t feel that “college vibe.” The people aren’t pulling all-nighters at the campus for an exam the next day. The work is still insane, we definitely pull all-nighters, just at home, but the campus itself is just like an office that’s open during the day.
+
+Lately, I’ve found that I can access public university libraries, like the one at Universitat Pompeu Fabra (UPF). I especially love the Dipòsit de les Aigües building on their Ciutadella campus. It’s this incredible old building, a former water tower, with super high brick arches. From the moment I walk onto that campus until I leave, I finally get that university feeling I was missing.
+
+**Don’t say it…**
+
+Don’t say it. I know.
+
+I’ve been replaying the last two years in my head a lot lately. And I’m pretty sure I probably (no, surely) made a mistake. And it’s an expensive one in terms of money, which makes me feel guilty, and in terms of time, which just makes me feel a bit lost.
+
+And I’m sure it comes from a whole chain of smaller mistakes and bad assumptions. Back in high school, I was so focused on “I like computers, I should be a programmer” that I didn’t really stop to think about what else I liked. I just wanted to get my hands on the code. When I found Epitech, I saw the marketing for a “modern” school with no exams, all practical projects, and a “Bachelor + Master’s” degree.
+
+And I *fell* for it. It’s not that I wasn’t aware of what I was getting into. I knew it was all-practical. But I was so aligned with that "future of tech" vibe at that point that I convinced myself it was all I needed. I didn’t ask the right questions *of myself*. I didn’t stop to understand what “no theory” would actually *feel* like, day-to-day. I just… didn’t listen to that quieter part of me, the kid who loved astronomy and physics and just knowing how things worked. I thought I had to choose one or the other.
+
+I know. I’m aware. And now I keep replaying the alternative, the “normal” path.
+
+I probably should have stayed on the normal course. Gone to a normal public university, like the UPF where I sneak in to use the library. I could have enrolled in a Physics or a Math degree. I’d be sitting in massive lecture halls right now, actually learning the “why,” and I’d be stressed and complaining about exams and theoretical homework just like everyone else.
+
+And you know what? I’d still be learning to code. I’m 100% sure of it. I’d be doing that on my own, at night, for fun. I’d be building my own projects, finding coding challenges online, and probably joining a robotics club or something. I’m that kind of person anyway.
+
+That path probably would have been harder in some ways, but it would have been my kind of hard. It would have scratched that part of my brain and taught me how to code. I’d be building the foundation and the practical skills at the same time, just in a different order.
+
+But I didn’t. I chose this way around. So, I guess it is what it is.
+
+## So, What’s Next?
+
+So that’s my first year. Epitech is exactly what it claims to be: an unconventional university. It’s less a school in the traditional sense and more of a non-stop programming bootcamp stretched over five years.
+
+My next step is Year 2. I’ve heard it’s more of the same, just with C++, more advanced projects, and probably even less sleep. I’m going to stick with it. I’m still learning a ton about how to be a competent, self-sufficient programmer. That part is working.
+
+But I’ll be running my own curriculum in parallel. My ‘real’ university experience is going to be a double-degree: Epitech by day, and the physics and math books from the UPF library by night. I need to know the “why” just as much as the “how.”
+
+It’s an unconventional plan, I guess. But it feels right for an unconventional university.

src/content/log/tech.md

@@ -3,6 +3,7 @@ title: 'My tech'
 description: 'My tech'
 pubDate: '2025-08-03'
 tags: []
+private: true
 ---
 
 Yinyoo KZ ZSN Pro (Blue with mic)

src/content/workshop/test-post.md

@@ -1,147 +0,0 @@
----
-title: 'Writing an HTTP server in C'
-description: 'Lorem ipsum dolor sit amet really long descriptionbla bla bka la bla'
-pubDate: '2025-08-03'
-tags: ['c', 'programming', 'socket']
-heroImage: "../images/OIP.sWCvltMZF_s3mjA5sL-RdgHaE8.jpg"
----
-
-
-# Lorem Ipsum: A Comprehensive Guide
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. **Ut enim ad minim veniam**, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
-## The Origins of Lorem Ipsum
-
-Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-### Historical Context
-
-*Sed ut perspiciatis unde omnis* iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-
-> "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentibus voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident."
-> 
-> — Marcus Tullius Cicero
-
-#### Key Features
-
-Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt:
-
-- **Primary advantage**: Lorem ipsum has been the industry's standard dummy text
-- **Secondary benefit**: It uses a Latin-like language which is more natural
-- **Tertiary aspect**: The distribution of letters approximates English
-- **Additional feature**: Available in multiple variations and lengths
-
-##### Numbered List Example
-
-Here's how you might implement lorem ipsum in your workflow:
-
-1. Choose your desired length (short, medium, or long)
-2. Select the starting phrase (**Lorem ipsum dolor sit amet**)
-3. Generate additional paragraphs as needed
-4. Apply formatting using standard markdown syntax
-5. Review and adjust for your specific use case
-
-###### Technical Specifications
-
-The standard Lorem Ipsum passage includes these characteristics:
-
-- Contains approximately 500 words
-- Uses pseudo-Latin derived from Cicero's work
-- Maintains readable character distribution
-- Includes both common and uncommon letter combinations
-
-## Code Examples
-
-Here's a simple function to generate lorem ipsum text:
-
-```javascript
-function generateLoremIpsum(wordCount = 50) {
-  const words = [
-    'lorem', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur',
-    'adipiscing', 'elit', 'sed', 'do', 'eiusmod', 'tempor'
-  ];
-  
-  let result = '';
-  for (let i = 0; i < wordCount; i++) {
-    result += words[Math.floor(Math.random() * words.length)];
-    if (i < wordCount - 1) result += ' ';
-  }
-  
-  return result.charAt(0).toUpperCase() + result.slice(1) + '.';
-}
-```
-
-You can also use inline code like `generateLoremIpsum(25)` within your paragraphs.
-
-## Data Tables
-
-Here's a comparison of different lorem ipsum generators:
-
-| Generator | Word Count | Languages | Custom Options |
-|-----------|------------|-----------|----------------|
-| Lorem Ipsum Generator | 50-500 | Latin | ✅ |
-| Hipster Ipsum | 25-200 | English | ✅ |
-| Bacon Ipsum | 100-300 | English | ❌ |
-| Cat Ipsum | 75-250 | Mixed | ✅ |
-
-## Advanced Formatting
-
-### Text Styling Examples
-
-This text contains **bold formatting** and *italic emphasis*. You can also combine them for ***bold and italic*** text. For technical documentation, you might need to show ~~deleted text~~ or <u>underlined content</u>.
-
-Sometimes you need to highlight important information with ==marked text== or show keyboard shortcuts like <kbd>Ctrl</kbd> + <kbd>C</kbd>.
-
-### Definition Lists
-
-Lorem Ipsum
-: Placeholder text commonly used in the printing and typesetting industry
-
-Dolor Sit Amet
-: The second phrase in the standard Lorem Ipsum passage
-
-Consectetur Adipiscing
-: Latin words meaning "to pursue" and "to obtain"
-
-### Details and Summary
-
-<details>
-<summary>Click to expand: More about Lorem Ipsum</summary>
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
-This hidden content demonstrates how collapsible sections work within the styling system.
-</details>
-
-## Mathematical and Scientific Notation
-
-The quadratic formula is expressed as $$ax² + bx + c = 0$$, where the solutions are found using $$x = (-b ± √(b²-4ac))/2a$$.
-
-Chemical formulas like H₂O and CO₂ use subscript notation, while mathematical expressions might use superscript like $$E = mc²$$.
-
-## Links and References
-
-For more information about lorem ipsum, you can visit [Lorem Ipsum Generator](https://www.lipsum.com/) or check out the [Wikipedia article on Lorem Ipsum](https://en.wikipedia.org/wiki/Lorem_ipsum).
-
-You might also find these internal links helpful:
-- [Section on Origins](#the-origins-of-lorem-ipsum)
-- [Code Examples](#code-examples)
-- [Data Tables](#data-tables)
-
----
-
-## Conclusion
-
-Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. The versatility of Lorem Ipsum makes it an invaluable tool for designers, developers, and content creators worldwide.
-
-<small>*This document was created as a comprehensive test of markdown styling capabilities. All Lorem Ipsum text is used for demonstration purposes only.*</small>
-
-### Footnotes and Citations
-
-According to recent studies¹, Lorem Ipsum remains the most widely used placeholder text in the design industry. Various alternatives² have emerged, but none have achieved the same level of adoption.
-
----
-
-*¹ Design Industry Survey 2023*  
-*² Alternative includes Hipster Ipsum, Bacon Ipsum, and Cat Ipsum*

src/pages/about.astro

@@ -3,7 +3,7 @@ import "../styles/global.css"
 import Layout from "../layouts/Layout.astro"
 import NavigationCard from "../components/NavigationCard.astro"
 import ExperienceCard from '../components/ExperienceCard.astro';
-import { PencilRuler, LibraryBig, NotepadText, GraduationCap, Wrench, Feather, Briefcase, Mail, Github, Linkedin, ExternalLink } from 'lucide-astro';
+import { PencilRuler, LibraryBig, ScrollText, GraduationCap, Wrench, Feather, Briefcase, Mail, Github, Linkedin, ExternalLink } from 'lucide-astro';
 
 const navItems = [
   {
@@ -19,10 +19,10 @@ const navItems = [
     content: "Books and papers and resources I use to learn. What I read, and why it matters."
   },
   {
-    href: "/notes",
+    href: "/log",
-    icon: NotepadText,
+    icon: ScrollText,
-    heading: "Notes", 
+    heading: "Log", 
-    content: "My explorations into the fundamental nature of everything."
+    content: "Progress notes across study, work, and self, and some reflections."
   }
 ];
 

src/pages/background.astro

@@ -0,0 +1,57 @@
+---
+import "../styles/global.css"
+import Layout from "../layouts/Layout.astro"
+import NavigationCard from '../components/NavigationCard.astro';
+import { Fingerprint, PencilRuler, LibraryBig, ScrollText } from 'lucide-astro';
+
+const navItems = [
+  {
+    href: "/about",
+    icon: Fingerprint,
+    heading: "About",
+    content: "Who am I, my academic and professional background, what drives this work."
+  },
+  {
+    href: "/workshop", 
+    icon: PencilRuler,
+    heading: "Workshop",
+    content: "From the theory to the implementation. What I build to understand."
+  },
+  {
+    href: "/library",
+    icon: LibraryBig, 
+    heading: "Library",
+    content: "Books and papers and resources I use to learn. What I read, and why it matters."
+  },
+  {
+    href: "/log",
+    icon: ScrollText,
+    heading: "Log", 
+    content: "Progress notes across study, work, and self, and some reflections."
+  }
+];
+---
+<Layout>
+  <br>
+  <br>
+  <br>
+  <br>
+  <br>
+  <br>
+  <br>
+  <br>
+  <br>
+  <br>
+  <br>
+<section class="max-w-4xl mb-20 sm:mb-28 ml-[35rem]">
+  <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-700 pl-6">
+    <p class="text-2xl sm:text-3xl font-semibold text-neutral-900 dark:text-neutral-100 font-serif leading-relaxed">
+        "May the <i> git --force </i> be with you"
+    </p>
+    <footer class="mt-4 text-neutral-600 dark:text-neutral-400 text-lg italic">
+        — Ben K., probably.
+    </footer>
+  </blockquote>
+</section>
+
+</Layout>

src/pages/index.astro

@@ -2,7 +2,7 @@
 import "../styles/global.css"
 import Layout from "../layouts/Layout.astro"
 import NavigationCard from '../components/NavigationCard.astro';
-import { Fingerprint, PencilRuler, LibraryBig, NotepadText } from 'lucide-astro';
+import { Fingerprint, PencilRuler, LibraryBig, ScrollText } from 'lucide-astro';
 
 const navItems = [
   {
@@ -24,10 +24,10 @@ const navItems = [
     content: "Books and papers and resources I use to learn. What I read, and why it matters."
   },
   {
-    href: "/notes",
+    href: "/log",
-    icon: NotepadText,
+    icon: ScrollText,
-    heading: "Notes", 
+    heading: "Log",
-    content: "My explorations into the fundamental nature of everything."
+    content: "Progress notes across study, work, and self, and some reflections."
   }
 ];
 ---

src/pages/log/[...slug].astro

@@ -3,7 +3,7 @@ import { type CollectionEntry, getCollection, render } from 'astro:content';
 import PostLayout from '../../layouts/PostLayout.astro';
 
 export async function getStaticPaths() {
-	const posts = await getCollection('workshop');
+	const posts = await getCollection('log');
 	return posts.map((post) => ({
 		params: { slug: post.id },
 		props: post,

src/pages/log/index.astro

@@ -0,0 +1,96 @@
+---
+import "../../styles/global.css"
+import Layout from "../../layouts/Layout.astro"
+import { getCollection } from 'astro:content';
+import { Image } from 'astro:assets';
+
+const posts = (await getCollection('log'))
+  .filter(post => !post.data.private)
+  .sort(
+    (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
+  );
+---
+
+<Layout>
+  <section class="max-w-7xl mb-10 sm:mb-14">
+    <h1 class="text-4xl sm:text-5xl font-bold mb-6 text-neutral-900 dark:text-neutral-100">Log</h1>
+    <p class="text-md text-neutral-600 dark:text-neutral-400 leading-relaxed text-justify max-w-3xl">
+      I used to think I was following a plan. Then I realized I’d mostly been running on momentum, studying, coding, doing, without really asking why. At some point, I stopped feeling in charge of my own path; everything became reaction. A reaction to schedules, deadlines, expectations.
+      <br>
+			Lately, I’ve been trying to rebuild some structure. To slow down, learn on purpose, and make sense of where all this effort is actually going. This log is part of that process,a way to connect the dots between theory and practice, body and mind, direction and doubt.
+      <br>
+       It’s how I’m trying to turn scattered effort into something deliberate again.
+    </p>
+  </section>
+
+  {/* Grid layout for posts */}
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
+    {posts.map((post) => (
+      <article class="group rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 hover:shadow-lg transition-all duration-300 overflow-hidden flex flex-col">
+        <a href={`/log/${post.id}/`} class="block flex flex-col h-full">
+          {/* Hero Image */}
+          {post.data.heroImage && (
+            <div class="aspect-video overflow-hidden">
+              <Image
+                src={post.data.heroImage} 
+                alt={post.data.title}
+                width={800}
+                height={450}
+                class="w-full h-full object-cover grayscale group-hover:grayscale-0 group-hover:scale-105 transition-all duration-300"
+                loading="lazy"
+              />
+            </div>
+          )}
+          <div class="p-4 sm:p-6 flex flex-col flex-grow">
+            {/* Title */}
+            <h2 class="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-neutral-100 group-hover:text-neutral-700 dark:group-hover:text-neutral-300 transition-colors mb-2 line-clamp-2">
+              {post.data.title}
+            </h2>
+            {post.data.description && (
+              <p class="text-sm sm:text-base text-neutral-600 dark:text-neutral-400 mb-4 line-clamp-3 leading-relaxed flex-grow">
+                {post.data.description}
+              </p>
+            )}
+            {post.data.tags && post.data.tags.length > 0 && (
+              <div class="flex flex-wrap gap-1.5 mb-4">
+                {post.data.tags.slice(0, 3).map((tag) => (
+                  <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors">
+                    #{tag}
+                  </span>
+                ))}
+                {post.data.tags.length > 3 && (
+                  <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-700 text-neutral-500 dark:text-neutral-400">
+                    +{post.data.tags.length - 3}
+                  </span>
+                )}
+              </div>
+            )}
+            {post.data.pubDate && (
+              <div class="flex items-center text-xs sm:text-sm text-neutral-500 dark:text-neutral-400 mt-auto">
+                <svg class="w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                </svg>
+                <time datetime={post.data.pubDate.toISOString()}>
+                  {new Date(post.data.pubDate).toLocaleDateString('en-US', {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric'
+                  })}
+                </time>
+                {post.data.updatedDate && (
+                  <span class="ml-1 sm:ml-2 text-xs hidden sm:inline">
+                    (Updated {new Date(post.data.updatedDate).toLocaleDateString('en-US', {
+                      year: 'numeric',
+                      month: 'short',
+                      day: 'numeric'
+                    })})
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+        </a>
+      </article>
+    ))}
+  </div>
+</Layout>

src/pages/notes/index.astro

@@ -1,39 +0,0 @@
-<!-- ---
-import "../../styles/global.css"
-import Layout from "../../layouts/Layout.astro"
-import { getCollection } from 'astro:content';
-
-const posts = (await getCollection('workshop')).sort(
-	(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
-);
----
-
-<Layout>
-  <section class="max-w-3xl mb-10 sm:mb-14">
-    <h1 class="text-4xl sm:text-5xl font-bold mb-6 text-neutral-900 dark:text-neutral-100">Workshop</h1>
-    <p class="text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed text-justify">
-      I'm a second year computer science student at the European Institute of Technology, still trying to figure out my place but enjoying the journey through systems programming, webdev and other fields. Outside of code, my favorite writer is Isaac Asimov, my favorite piece of music is Spiegel im Spiegel, and my favorite book is The Witches by Roald Dahl. My favorite star is Vega because it was once our north star and will be again in about 12,000 years - something poetic about that cycle. And that's pretty much everything you need to know about me, except maybe my tea preferences, but we'll save that for another time...    </p>
-  </section>
-
-  <ul class="space-y-4">
-    {posts.map((post) => (
-      <li class="p-4 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 hover:shadow-md transition-shadow">
-        <a href={`/workshop/${post.id}/`} class="block">
-          <h4 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors">
-            {post.data.title}
-          </h4>
-          {post.data.pubDate && (
-            <p class="text-sm text-neutral-500 dark:text-neutral-400 mt-1">
-              {new Date(post.data.pubDate).toLocaleDateString()}
-            </p>
-          )}
-        </a>
-      </li>
-    ))}
-  </ul>
-</Layout> -->
----
-import WorkInProgress from "../../components/WorkInProgress.astro"
----
-
-<WorkInProgress />

src/pages/workshop/index.astro

@@ -4,7 +4,9 @@ import Layout from "../../layouts/Layout.astro"
 import { getCollection } from 'astro:content';
 import { Image } from 'astro:assets';
 
-const posts = (await getCollection('workshop')).sort(
+const posts = (await getCollection('workshop'))
+  .filter(post => !post.data.private)
+  .sort(
     (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
   );
 ---
@@ -13,7 +15,7 @@ const posts = (await getCollection('workshop')).sort(
   <section class="max-w-7xl mb-10 sm:mb-14">
     <h1 class="text-4xl sm:text-5xl font-bold mb-6 text-neutral-900 dark:text-neutral-100">Workshop</h1>
     <p class="text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed text-justify max-w-3xl">
-      I'm a second year computer science student at the European Institute of Technology, still trying to figure out my place but enjoying the journey through systems programming, webdev and other fields. Outside of code, my favorite writer is Isaac Asimov, my favorite piece of music is Spiegel im Spiegel, and my favorite book is The Witches by Roald Dahl. My favorite star is Vega because it was once our north star and will be again in about 12,000 years - something poetic about that cycle. And that's pretty much everything you need to know about me, except maybe my tea preferences, but we'll save that for another time...
+      I like to experiment, investigate and make mistakes. Here I archive my projects, ideas and failures.
     </p>
   </section>
 
@@ -30,26 +32,21 @@ const posts = (await getCollection('workshop')).sort(
                 alt={post.data.title}
                 width={800}
                 height={450}
-                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                class="w-full h-full object-cover grayscale group-hover:grayscale-0 group-hover:scale-105 transition-all duration-300"
                 loading="lazy"
               />
             </div>
           )}
-          
           <div class="p-4 sm:p-6 flex flex-col flex-grow">
             {/* Title */}
             <h2 class="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-neutral-100 group-hover:text-neutral-700 dark:group-hover:text-neutral-300 transition-colors mb-2 line-clamp-2">
               {post.data.title}
             </h2>
-            
-            {/* Subtitle/Description */}
             {post.data.description && (
               <p class="text-sm sm:text-base text-neutral-600 dark:text-neutral-400 mb-4 line-clamp-3 leading-relaxed flex-grow">
                 {post.data.description}
               </p>
             )}
-            
-            {/* Tags */}
             {post.data.tags && post.data.tags.length > 0 && (
               <div class="flex flex-wrap gap-1.5 mb-4">
                 {post.data.tags.slice(0, 3).map((tag) => (
@@ -64,8 +61,6 @@ const posts = (await getCollection('workshop')).sort(
                 )}
               </div>
             )}
-            
-            {/* Publication Date */}
             {post.data.pubDate && (
               <div class="flex items-center text-xs sm:text-sm text-neutral-500 dark:text-neutral-400 mt-auto">
                 <svg class="w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">

src/styles/global.css

@@ -276,3 +276,29 @@ h1, h2, h3 {
     @apply bg-gray-100 text-black border-gray-300;
   }
 }
+
+.heading-anchor {
+  position: relative;
+  text-decoration: none !important;
+  color: inherit !important;
+}
+
+.heading-anchor::after {
+  content: "#";
+  opacity: 0;
+  margin-left: 0.4em;
+  font-size: 0.9em;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.heading-anchor:hover::after {
+  opacity: 1;
+}
+
+.heading-anchor:focus,
+.heading-anchor:focus-visible,
+.heading-anchor:focus-within {
+  outline: none !important;
+  box-shadow: none !important;
+  border: none !important;
+}