repomix-output.txt

This file is a merged representation of the entire codebase, combining all repository files into a single document.
Generated by Repomix on: 2024-12-04T18:16:43.731Z

================================================================
File Summary
================================================================

Purpose:
--------
This file contains a packed representation of the entire repository's contents.
It is designed to be easily consumable by AI systems for analysis, code review,
or other automated processes.

File Format:
------------
The content is organized as follows:
1. This summary section
2. Repository information
3. Repository structure
4. Multiple file entries, each consisting of:
  a. A separator line (================)
  b. The file path (File: path/to/file)
  c. Another separator line
  d. The full contents of the file
  e. A blank line

Usage Guidelines:
-----------------
- This file should be treated as read-only. Any changes should be made to the
  original repository files, not this packed version.
- When processing this file, use the file path to distinguish
  between different files in the repository.
- Be aware that this file may contain sensitive information. Handle it with
  the same level of security as you would the original repository.

Notes:
------
- Some files may have been excluded based on .gitignore rules and Repomix's
  configuration.
- Binary files are not included in this packed representation. Please refer to
  the Repository Structure section for a complete list of file paths, including
  binary files.

Additional Info:
----------------

For more information about Repomix, visit: https://github.com/yamadashy/repomix

================================================================
Repository Structure
================================================================
.gitignore
astro.config.mjs
netlify.toml
package.json
public/_redirects
README.md
robots.txt
scripts/createBlogPost.ts
src/components/blog/BlogImage.astro
src/components/common/AnimateableText.astro
src/components/common/BaseHead.astro
src/components/common/ConnectItem.astro
src/components/common/CubesBackground.astro
src/components/common/Footer.astro
src/components/common/Header.astro
src/components/common/HeaderLink.astro
src/components/common/Page.astro
src/components/common/SvgItem.astro
src/components/home/StackItem.astro
src/components/portfolio/PortfolioItem.astro
src/components/workExperience/WorkExperienceItem.astro
src/consts.ts
src/content/blog/my-first-blog-post/index.md
src/content/config.ts
src/env.d.ts
src/layouts/BlogPost.astro
src/pages/404.astro
src/pages/blog/[...slug].astro
src/pages/blog/index.astro
src/pages/index.astro
src/pages/portfolio.astro
src/pages/work-experience.astro
src/styles/global.css
src/types/common.ts
src/utils/gitDates.ts
src/utils/imageUtils.ts
src/utils/seoSchema.ts
tailwind.config.js
tsconfig.json

================================================================
Repository Files
================================================================

================
File: .gitignore
================
# generated types
.astro/

# dependencies
node_modules/

# logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
/dist

# environment variables
.env
.env.production

# macOS-specific files
.DS_Store

================
File: astro.config.mjs
================
import { defineConfig } from "astro/config";
import mdx from "@astrojs/mdx";
import sitemap from "@astrojs/sitemap";
import tailwind from "@astrojs/tailwind";

export default defineConfig({
  site: "https://jub.dk",
  integrations: [
    mdx(),
    sitemap({
      filter: (page) => !page.includes("/blog/drafts/"),
      changefreq: "weekly",
      priority: 0.7,
      lastmod: new Date(),
    }),
    tailwind(),
  ],
  image: {
    service: { entrypoint: "astro/assets/services/sharp" },
    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    formats: ["avif", "webp"],
    minimumCacheTTL: 60 * 60 * 24 * 7, // 1 week
    quality: 80,
  },
  compressHTML: true,
  build: {
    inlineStylesheets: "auto",
  },
});

================
File: netlify.toml
================
[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"
    Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
    Permissions-Policy = "camera=(), microphone=(), geolocation=()"
    Content-Security-Policy = """
      default-src 'self';
      script-src 'self' 'unsafe-inline' https://analytics.wip.dk https://cdnjs.cloudflare.com;
      style-src 'self' 'unsafe-inline';
      img-src 'self' data: https:;
      font-src 'self' data:;
      connect-src 'self' https://analytics.wip.dk;
      frame-ancestors 'none';
      form-action 'self';
      base-uri 'self';
      object-src 'none';
      worker-src 'none';
      manifest-src 'self';
      """

[[headers]]
  for = "/assets/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

================
File: package.json
================
{
  "name": "portfolio",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro",
    "create-blog": "tsx scripts/createBlogPost.ts"
  },
  "dependencies": {
    "@astrojs/mdx": "^4.0.1",
    "@astrojs/rss": "^4.0.9",
    "@astrojs/sitemap": "^3.2.1",
    "@astrojs/tailwind": "^5.1.3",
    "@tailwindcss/typography": "^0.5.15",
    "astro": "^5.0.1",
    "sharp": "^0.33.5",
    "tailwindcss": "^3.3.3"
  },
  "devDependencies": {
    "@types/node": "^22.10.1",
    "node-html-parser": "^6.1.6",
    "prettier-plugin-astro": "^0.8.1",
    "tsx": "^4.19.2",
    "typescript": "^5.7.2"
  }
}

================
File: public/_redirects
================
/js/script.pageview-props.tagged-events.js https://analytics.wip.dk/js/script.pageview-props.tagged-events.js 200
/api/event https://analytics.wip.dk/api/event 200

/* /index.html 200

================
File: README.md
================
# Portfolio Showcase 🚀

Welcome to my Portfolio repository! This is where I showcase my tech stack, highlight the projects I've worked on, and provide access to my CV.

## Features:

- **Tech Stack:** Explore the technologies and tools that I'm proficient in.
- **Project Showcase:** Dive into the details of the exciting projects I've had the pleasure of working on.
- **CV:** Get to know my professional journey and qualifications through my Curriculum Vitae.

> **Note:** Icons used in this portfolio are provided by [Simple Icons](https://simpleicons.org/).

Made with :heart: in Aalborg, Denmark

================
File: robots.txt
================
User-agent: *
Allow: /
Disallow: /api/

# Prevent indexing of specific file types
Disallow: /*.json$
Disallow: /*.xml$

# Allow image indexing
Allow: /*.jpg$
Allow: /*.jpeg$
Allow: /*.png$
Allow: /*.webp$

# Sitemaps
Sitemap: https://jub.dk/sitemap-index.xml

================
File: scripts/createBlogPost.ts
================
import { promises as fs } from 'fs';
import path from 'path';
import readline from 'readline';

const BLOG_DIR = path.join(process.cwd(), 'src', 'content', 'blog');
const PUBLIC_BLOG_ASSETS = path.join(process.cwd(), 'public', 'assets', 'blog');

interface BlogPostDetails {
    title: string;
    slug: string;
    description: string;
    keywords: string[];
}

async function promptUser(): Promise<BlogPostDetails> {
    const rl = readline.createInterface({
        input: process.stdin,
        output: process.stdout
    });

    const question = (query: string): Promise<string> =>
        new Promise(resolve => rl.question(query, resolve));

    const title = await question('Enter blog post title: ');

    const defaultSlug = title
        .toLowerCase()
        .replace(/[^a-zA-Z0-9\s]/g, '')
        .replace(/\s+/g, '-');

    const slugInput = await question(`Enter slug (press enter to use "${defaultSlug}"): `);
    const slug = slugInput.trim() || defaultSlug;

    const description = await question('Enter blog post description: ');

    const defaultKeywords = ['software development', 'web development', 'programming'];
    const keywordsInput = await question(`Enter keywords (comma-separated, press enter for defaults: ${defaultKeywords.join(', ')}): `);
    const keywords = keywordsInput.trim()
        ? keywordsInput.split(',').map(k => k.trim())
        : defaultKeywords;

    rl.close();

    return { title, slug, description, keywords };
}

async function createBlogPost(details: BlogPostDetails) {
    const postDir = path.join(BLOG_DIR, details.slug);

    // Create blog post directory
    await fs.mkdir(postDir, { recursive: true });

    // Ensure public blog assets directory exists
    await fs.mkdir(PUBLIC_BLOG_ASSETS, { recursive: true });

    // Create frontmatter content
    const currentDate = new Date().toISOString().split('T')[0];
    const frontmatter = `---
title: '${details.title}'
description: '${details.description}'
pubDate: '${currentDate}'
# updatedDate: '${currentDate}'
draft: true
keywords: [${details.keywords.map(k => `'${k}'`).join(', ')}]
# heroImage: '/blog/${details.slug}/hero.webp'
# heroAlt: 'Alt text for hero image'
---

Write your blog post content here...

## Images
Add images to your blog post:

1. Place your images in \`public/assets/blog/${details.slug}/\`
2. For hero image:
   - Add the image to \`public/assets/blog/${details.slug}/hero.webp\`
   - Uncomment and update heroImage & heroAlt in frontmatter
3. Reference images in your content:
   \`\`\`markdown
   ![Image description](/assets/blog/${details.slug}/your-image.webp)
   \`\`\`

## SEO Optimization
This blog post includes:
- ✅ Title and description
- ✅ Keywords for better search visibility
- ⏳ Hero image (pending)
- ⏳ Content (pending)

## Before Publishing
1. Add your content
2. Add and configure hero image
3. Review and update keywords if needed
4. Set draft: false when ready to publish
5. If making major updates later, uncomment and update the updatedDate

## Image Optimization Tips
- Use .webp format for better performance
- Optimize images before adding them
- Include meaningful alt text
- Recommended hero image size: 1200x630px (optimal for social sharing)
`;

    // Create index.md with frontmatter
    await fs.writeFile(path.join(postDir, 'index.md'), frontmatter);

    // Create blog-specific assets directory in public folder
    const publicPostDir = path.join(PUBLIC_BLOG_ASSETS, details.slug);
    await fs.mkdir(publicPostDir, { recursive: true });

    // Create a README in the public assets directory
    const assetsReadme = `# Blog Assets for "${details.title}"

Store your blog post images here.

## Directory Structure
/public/assets/blog/${details.slug}/
├── hero.webp        # Main image for the blog post
└── other-images/    # Additional images used in the post

## Recommendations
- Use .webp format
- Optimize images before adding them
- Recommended hero image size: 1200x630px
- Keep filenames descriptive but simple
- Include meaningful alt text when referencing images

## Reference Images in Markdown
\`\`\`markdown
![Image description](/assets/blog/${details.slug}/your-image.webp)
\`\`\`

## Tools for Image Optimization
- squoosh.app - Browser-based image optimization
- imageoptim.com - Desktop app for macOS
- tinypng.com - Online PNG and JPEG compression`;

    await fs.writeFile(path.join(publicPostDir, 'README.md'), assetsReadme);

    return {
        postDir,
        assetsDir: publicPostDir
    };
}

async function main() {
    try {
        console.log('🚀 Creating new blog post...\n');

        const details = await promptUser();
        const { postDir, assetsDir } = await createBlogPost(details);

        console.log('\n✅ Blog post created successfully!');
        console.log('\nDirectories created:');
        console.log('Content:', postDir);
        console.log('Assets:', assetsDir);
        console.log('\nNext steps:');
        console.log('1. Add your content to index.md');
        console.log(`2. Add images to ${assetsDir}`);
        console.log('3. Review and update SEO elements (keywords, description)');
        console.log('4. Set draft: false when ready to publish');
        console.log('\nPro tips:');
        console.log('- Use .webp format for images');
        console.log('- Optimize images before adding them');
        console.log('- Hero image size: 1200x630px (optimal for social sharing)');

    } catch (error) {
        console.error('\n❌ Error creating blog post:', error);
        process.exit(1);
    }
}

main();

================
File: src/components/blog/BlogImage.astro
================
---
import { Image } from 'astro:assets';
import type { ImageMetadata } from 'astro';
import type { ImageProps } from '../../types/common';

interface Props extends ImageProps {
  format?: 'webp' | 'avif';
  quality?: number;
}

const { src, alt } = Astro.props;

// Import all images from assets directory
const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/**/*.{jpeg,jpg,png,gif,webp}', { eager: true });

// Function to get image path
function getImagePath(src: string) {
    // Handle absolute paths from src/assets
    if (src.startsWith('/src/assets/')) {
        return src;
    }
    // Handle paths without /src/assets prefix
    if (src.startsWith('/')) {
        return `/src/assets${src}`;
    }
    // Handle relative paths
    return `/src/assets/${src}`;
}

const imagePath = getImagePath(src);
const resolvedImage = images[imagePath]?.default;

if (!resolvedImage) {
    console.warn(`Image not found: ${imagePath}`);
    console.warn('Available images:', Object.keys(images));
}
---
{resolvedImage ? (
  <Image
    src={resolvedImage}
    alt={alt}
    width={800}
    height={resolvedImage.height * (800 / resolvedImage.width)}
    format="webp"
    quality={80}
    loading="lazy"
    class="rounded-lg"
    onerror="this.onerror=null;this.src='/assets/fallback-image.webp';"
  />
) : (
  <div class="bg-gray-800 rounded-lg p-4 text-center">
    <span class="text-gray-400">Image not available</span>
  </div>
)}

================
File: src/components/common/AnimateableText.astro
================
<div class="flex flex-row gap-1 relative mt-1 mx-auto md:mx-0 w-full justify-center md:justify-start">
    <p class="text-2xl">I'm a</p>
    <p class="text-2xl text-primary relative overflow-hidden" id="animateableText"></p>
</div>

<script>
class TextAnimator {
    private element: HTMLElement | null;
    private texts: string[];
    private currentIndex: number;
    private delay: number;
    private isAnimating: boolean;

    constructor(elementId: string, texts: string[], delay: number) {
        this.element = document.getElementById(elementId);
        this.texts = texts;
        this.currentIndex = 0;
        this.delay = delay;
        this.isAnimating = false;
    }

    animate() {
        if (!this.element) return;

        // Update text content
        this.element.textContent = this.texts[this.currentIndex];
        
        // Reset animation by removing and re-adding the pseudo-element class
        this.element.classList.remove('animate-typing');
        void this.element.offsetWidth; // Force reflow
        this.element.classList.add('animate-typing');

        // Prepare for next text
        this.currentIndex = (this.currentIndex + 1) % this.texts.length;

        // Schedule next animation
        setTimeout(() => this.animate(), this.delay);
    }

    start() {
        if (this.element) {
            this.element.classList.add('animate-typing');
            this.animate();
        }
    }
}

// Initialize when document is ready
document.addEventListener('DOMContentLoaded', () => {
    const animator = new TextAnimator('animateableText', [
        "fullstack developer",
        "devOps engineer",
        "home automation tinker",
        "dark mode enthusiast",
    ], 5000);
    
    animator.start();
});
</script>

<style>
    #animateableText {
        min-height: 1.5em;
    }

    .animate-typing {
        position: relative;
    }

    .animate-typing::before {
        content: "";
        position: absolute;
        display: inline-block;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: var(--color-body, #1f2022);
        border-left: 2px solid var(--color-primary, #4070f4);
        animation: textAnimation 5s steps(24) infinite;
        animation-delay: 300ms;
    }

    @keyframes textAnimation {
        40%, 60% {
            left: 100%;
        }
        100% {
            left: 0%
        }
    }

    :global(.dark) .animate-typing::before {
        background-color: var(--color-body-dark, #1f2022);
        border-left-color: var(--color-primary-dark, #4070f4);
    }
</style>

================
File: src/components/common/BaseHead.astro
================
---
import { SITE_TITLE } from '../../consts';
import { generateSchemaOrg } from '../../utils/seoSchema';
import defaultOgImage from '../../assets/julius.jpg';  // Import the default image
import type { SEOProps } from '../../types/common';

export interface Props extends SEOProps {}

const { 
    title, 
    description = "Julius Bendt - Fullstack developer, DevOps engineer and dark mode enthusiast",
    image, 
    type = 'website',
    publishedDate,
    modifiedDate,
    keywords = ["fullstack developer", "devops engineer", "software engineer", "web developer", "Julius Bendt"]
} = Astro.props;

const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const fullTitle = title ? `${title} | ${SITE_TITLE}` : SITE_TITLE;

// Use the image URL if provided, otherwise use the default image
const imageUrl = image ? new URL(image, Astro.site) : new URL(defaultOgImage.src, Astro.site);

const schemaOrg = generateSchemaOrg({
    type,
    title: fullTitle,
    description,
    url: canonicalURL.toString(),
    image: imageUrl.toString(),
    publishedDate,
    modifiedDate
});
---

<!-- Global Metadata -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.ico" />
<meta name="generator" content={Astro.generator} />

<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
<link rel="preconnect" href="https://analytics.wip.dk" />
<link rel="preconnect" href="https://cdnjs.cloudflare.com" />

<!-- Primary Meta Tags -->
<title>{fullTitle}</title>
<meta name="title" content={fullTitle} />
<meta name="description" content={description} />
<meta name="author" content="Julius Bendt" />
<meta name="keywords" content={keywords.join(', ')} />
<meta name="robots" content="index, follow" />
<link rel="canonical" href={canonicalURL} />

<!-- Open Graph / Facebook -->
<meta property="og:site_name" content={SITE_TITLE} />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content={type} />
<meta property="og:url" content={Astro.url} />
<meta property="og:title" content={fullTitle} />
<meta property="og:description" content={description} />
<meta property="og:image" content={imageUrl} />
<meta property="og:image:alt" content={`Image for ${fullTitle}`} />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<!-- <meta property="twitter:site" content="@juliusbendt" /> -->
<!-- <meta property="twitter:creator" content="@juliusbendt" /> -->
<meta property="twitter:url" content={Astro.url} />
<meta property="twitter:title" content={fullTitle} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={imageUrl} />

<!-- Article Specific Meta (only for blog posts) -->
{type === 'article' && publishedDate && (
    <meta property="article:published_time" content={publishedDate.toISOString()} />
)}
{type === 'article' && modifiedDate && (
    <meta property="article:modified_time" content={modifiedDate.toISOString()} />
)}

<!-- Structured Data -->
<script type="application/ld+json" set:html={JSON.stringify(schemaOrg)} />

<!-- Preload Fonts -->
<link
    rel="preload"
    href="/assets/font/Inter-Regular.ttf"
    as="font"
    type="font/ttf"
    crossorigin
/>

================
File: src/components/common/ConnectItem.astro
================
---
import SvgItem from './SvgItem.astro';

import type { LinkProps } from '../../types/common';

interface Props extends LinkProps {
  icon: string;
  fillColor: string;
  text: string;
}

const { 
    icon, 
    fillColor, 
    text, 
    href, 
    class: className = "",
    ariaLabel = `Connect on ${text}`
} = Astro.props;

// Determine if the link is external
const isExternal = href.startsWith('http');
---

<a 
    href={href}
    target={isExternal ? "_blank" : undefined}
    rel={isExternal ? "noopener noreferrer" : undefined}
    class:list={[
        "group relative",
        "inline-flex items-center gap-2",
        "px-3 py-2",
        "rounded-lg",
        "transition-all duration-300",
        "hover:bg-white/10",
        "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-body",
        className
    ]}
    aria-label={ariaLabel}
>
    <div class="flex items-center gap-2 transform group-hover:scale-105 transition duration-300 ease-in-out">
        <SvgItem 
            icon={icon}
            fillColor={fillColor}
            svgClass="w-5 h-5"
        />
        <span class="text-sm font-medium group-hover:text-primary transition-colors">
            {text}
        </span>
    </div>

    {isExternal && (
        <span 
            class="sr-only"
            aria-hidden="true"
        >
            (opens in new tab)
        </span>
    )}

    <!-- Tooltip -->
    <div 
        class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-sm
               bg-gray-900 text-white rounded opacity-0 invisible
               group-hover:opacity-100 group-hover:visible
               transition-all duration-200 pointer-events-none"
        role="tooltip"
    >
        Connect on {text}
        <div 
            class="absolute top-full left-1/2 transform -translate-x-1/2 -mt-1
                   border-4 border-transparent border-t-gray-900"
        >
        </div>
    </div>
</a>

<style>
    @keyframes ripple {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }

    /* Ensure the link takes up the right amount of space */
    a.group {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    /* Improve focus visibility */
    a.group:focus-visible {
        outline: 2px solid theme(colors.primary);
        outline-offset: 2px;
    }

    /* Custom animation for icon bounce */
    @media (prefers-reduced-motion: no-preference) {
        .group:hover svg {
            animation: iconBounce 0.5s ease-in-out;
        }
    }

    @keyframes iconBounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); }
    }
</style>

================
File: src/components/common/CubesBackground.astro
================
---
{/* Your imports */}
---

<div id="background-container" class="fixed inset-0 overflow-hidden pointer-events-none" style="z-index: -1;">
    <svg id="background-svg" width="100%" height="100%" style="position: absolute; top: 0; left: 0;">
        <!-- Shapes will be added here -->
    </svg>
</div>

<script>
console.log("Script starting...");

class Shape {
    element: SVGElement;
    x: number;
    y: number;
    rotation: number;
    rotationSpeed: number;
    moveSpeed: number;
    size: number;
    originalY: number;
    opacity: number;
    isResetting: boolean;

    constructor(svg: SVGSVGElement, index: number, startAtBottom = false) {
        this.size = Math.random() * 20 + 20;
        this.element = this.createCube();
        svg.appendChild(this.element);
        
        // Initial position
        this.x = Math.random() * window.innerWidth;
        if (startAtBottom) {
            // Start new shapes at the bottom
            this.y = window.innerHeight + this.size;
        } else {
            // Initial distribution for startup
            const section = window.innerHeight / 5;
            this.y = (index * section) + (Math.random() * section);
        }
        
        this.originalY = this.y;
        this.rotation = Math.random() * 360;
        this.rotationSpeed = (Math.random() - 0.5) * 0.1;
        this.moveSpeed = Math.random() * 0.05 + 0.02;
        this.opacity = 0.2;
        this.isResetting = false;
        
        this.element.style.fill = 'currentColor';
        this.element.style.opacity = this.opacity.toString();
        this.element.style.transition = 'opacity 1s ease-in-out';
        
        this.update(0);
    }

    createCube(): SVGElement {
        const cube = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        cube.setAttribute("width", this.size.toString());
        cube.setAttribute("height", this.size.toString());
        cube.setAttribute("rx", (this.size * 0.3).toString());
        return cube;
    }

    reset() {
        // Start fade out
        this.isResetting = true;
        this.element.style.opacity = "0";
        
        // After fade out, reset position
        setTimeout(() => {
            this.y = window.innerHeight + this.size;
            this.x = Math.random() * window.innerWidth;
            this.originalY = this.y;
            this.isResetting = false;
            
            // Fade back in after position reset
            setTimeout(() => {
                this.element.style.opacity = this.opacity.toString();
            }, 100);
        }, 1000);
    }

    update(scrollY: number) {

        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
            this.element.setAttribute("transform", `translate(${this.x} ${this.y})`);
            return;
        }

        if (this.isResetting) return;

        // Very slow upward movement
        this.y -= this.moveSpeed;
        this.rotation += this.rotationSpeed;

        // Start reset when shape is near the top
        if (this.y + this.size < 100 && !this.isResetting) {
            this.reset();
            return;
        }

        const scrollProgress = scrollY / (document.documentElement.scrollHeight - window.innerHeight);
        const parallaxY = scrollY * 0.15;
        const scrollEffect = Math.sin(scrollProgress * Math.PI * 2) * 20;

        const finalY = this.y + parallaxY + scrollEffect;
        const finalX = this.x + Math.sin(scrollProgress * Math.PI * 2 + this.x) * 5;

        this.element.setAttribute("transform", `
            translate(${finalX} ${finalY}) 
            rotate(${this.rotation} ${this.size/2} ${this.size/2})
        `);
    }
}

function initBackground() {
const svgElement = document.getElementById('background-svg');
    if (!svgElement || !(svgElement instanceof SVGSVGElement)) {
        console.error("SVG element not found or is not an SVGSVGElement!");
        return;
    }
    
    const numberOfShapes = 40;
    const shapes = Array.from({ length: numberOfShapes }, (_, i) => new Shape(svgElement as SVGSVGElement, i));
    
    let lastScrollY = window.scrollY;
    let ticking = false;

    function animate() {
        shapes.forEach(shape => shape.update(lastScrollY));
        requestAnimationFrame(animate);
    }

    window.addEventListener('scroll', () => {
        lastScrollY = window.scrollY;
        if (!ticking) {
            window.requestAnimationFrame(() => {
                shapes.forEach(shape => shape.update(lastScrollY));
                ticking = false;
            });
            ticking = true;
        }
    }, { passive: true });

    animate();
}

// Run initialization when the document is ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initBackground);
} else {
    initBackground();
}
</script>

<style is:global>
    #background-svg rect {
        fill: var(--color-primary);
    }

    @media (prefers-color-scheme: dark) {
        #background-svg rect {
            fill: var(--color-primary-dark, var(--color-primary));
        }
    }
</style>

================
File: src/components/common/Footer.astro
================
---
const today = new Date();
---

<footer class="sticky top-[100vh] px-8 py-4 text-center md:text-right ">
	<span class="md:float-right sm:place-content-center">To fork a version of this portfolio, please visit the <a href="https://github.com/Julius-Bendt/portfolio/" target="_blank" class="text-primary" href="#">  Github repository</a></span>
</footer>

================
File: src/components/common/Header.astro
================
---
import HeaderLink from './HeaderLink.astro';
import { SITE_TITLE } from '../../consts';

const navigationLinks = [
    { href: '/', text: 'Home', ariaLabel: 'Navigate to home page' },
    { href: '/portfolio', text: 'Portfolio', ariaLabel: 'View portfolio of work' },
    { href: '/work-experience', text: 'Work experience', ariaLabel: 'View work experience' },
    { href: '/blog', text: 'Blog', ariaLabel: 'Read blog posts' }
] as const;
---

<header role="banner" class="relative z-50">
    <nav class="hidden md:flex bg-bodyAccent text-white shadow-lg" aria-label="Main navigation">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center">
                    <span class="text-lg font-bold" role="heading" aria-level="1">
                        Julius H. Bendt 💻
                    </span>
                </div>

                <div class="flex items-center space-x-4" role="navigation">
                    {navigationLinks.map(link => (
                        <HeaderLink 
                            href={link.href}
                            class="group flex items-center p-4 hover:bg-gray-700 transition-all rounded-md"
                            aria-label={link.ariaLabel}
                        >
                            <span>{link.text}</span>
                        </HeaderLink>
                    ))}
                </div>
            </div>
        </div>
    </nav>

    <div class="md:hidden">
        <nav 
            id="mobileMenu" 
            class="hidden fixed inset-x-0 bottom-0 text-white shadow-lg transform transition-all duration-300 ease-in-out opacity-0 translate-y-full z-[60]"
            aria-label="Mobile navigation"
            role="navigation"
        >
            <div class="flex flex-col p-4 bg-bodyAccent rounded-t-lg">
                {navigationLinks.map(link => (
                    <HeaderLink 
                        href={link.href}
                        class="flex items-center p-4 hover:bg-gray-700 transition-all relative z-[60]"
                        aria-label={link.ariaLabel}
                    >
                        <span>{link.text}</span>
                    </HeaderLink>
                ))}
            </div>
        </nav>

        <div 
            id="menuOverlay"
            class="hidden fixed inset-0 bg-navbar dark:bg-dark-navbar bg-opacity-95 dark:bg-opacity-95 z-[45]"
            aria-hidden="true"
        >
        </div>

        <button
            id="menuButton"
            class="fixed bottom-4 right-4 z-[80] p-4 rounded-2xl bg-primary dark:bg-primary-dark text-white hover:bg-opacity-90 transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 w-14 h-14 flex items-center justify-center"
            aria-label="Toggle navigation menu"
            aria-expanded="false"
            aria-controls="mobileMenu"
        >
            <div class="burger-icon w-6 flex flex-col items-end gap-1.5" aria-hidden="true">
                <span class="h-0.5 w-6 bg-white transform transition-all duration-300 ease-in-out rounded-full"></span>
                <span class="h-0.5 w-6 bg-white transform transition-all duration-300 ease-in-out rounded-full"></span>
                <span class="h-0.5 w-4 bg-white transform transition-all duration-300 ease-in-out rounded-full"></span>
            </div>
        </button>
    </div>
</header>

<script>
    const menuButton = document.getElementById('menuButton');
    const mobileMenu = document.getElementById('mobileMenu');
    const menuOverlay = document.getElementById('menuOverlay');
    const burgerIcon = menuButton?.querySelector('.burger-icon');

    if (menuButton && mobileMenu && menuOverlay && burgerIcon) {
        let isOpen = false;

        const toggleMenu = () => {
            isOpen = !isOpen;
            burgerIcon.classList.toggle('active');
            menuButton.setAttribute('aria-expanded', isOpen.toString());
            
            if (isOpen) {
                mobileMenu.classList.remove('hidden');
                menuOverlay.classList.remove('hidden');
                mobileMenu.offsetHeight;
                mobileMenu.classList.add('active');
            } else {
                mobileMenu.classList.remove('active');
                setTimeout(() => {
                    mobileMenu.classList.add('hidden');
                    menuOverlay.classList.add('hidden');
                }, 300);
            }
        };

        menuButton.addEventListener('click', (e) => {
            e.stopPropagation();
            toggleMenu();
        });

        document.addEventListener('click', (event) => {
            if (isOpen && !menuButton.contains(event.target as Node) && 
                !mobileMenu.contains(event.target as Node)) {
                toggleMenu();
            }
        });

        window.addEventListener('resize', () => {
            if (window.innerWidth >= 768 && isOpen) {
                toggleMenu();
            }
        });

        const menuItems = mobileMenu.querySelectorAll('a');
        menuItems.forEach(item => {
            item.addEventListener('click', () => {
                toggleMenu();
            });
        });
    }
</script>

================
File: src/components/common/HeaderLink.astro
================
---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"a">;

const { href, class: className, ...props } = Astro.props;

const { pathname } = Astro.url;
const isActive = href === pathname || href === pathname.replace(/\/$/, "");
---

<a
  href={href}
  class:list={[className, { "text-primary font-bold": isActive }]}
  {...props}
>
  <slot />
</a>

================
File: src/components/common/Page.astro
================
---
import BaseHead from "./BaseHead.astro";
import Header from "./Header.astro";
import Footer from "./Footer.astro";
import type { SEOProps } from '../../types/common';

interface Props extends SEOProps {
  class?: string;
}

const { class: className, ...seoMetadata } = Astro.props;
---

<!doctype html>
<html lang="en" class="dark">
    <head>
        <BaseHead {...seoMetadata} />
        <script
            defer
            data-domain="jub.dk"
            src="https://jub.dk/js/script.pageview-props.tagged-events.js"
        ></script>
        <script>
            // @ts-ignore
            window.plausible =
                // @ts-ignore
                window.plausible ||
                function () {
                    // @ts-ignore
                    (window.plausible.q = window.plausible.q || []).push(arguments);
                };
        </script>
    </head>
    <body class="bg-body text-gray-100">
        <div class:list={["mx-auto min-h-screen overflow-x-hidden flex flex-col", className]}>
            <Header />
            <main class="my-4 flex gap-10 flex-col md:px-[8rem] px-[1rem]">
                <slot />
            </main>
            <Footer />
        </div>
    </body>
</html>

================
File: src/components/common/SvgItem.astro
================
---
import { parse } from 'node-html-parser';

export interface Props {
    icon: string;
    fillColor: string;
    svgClass?: string;
}

async function getSVG(icon: string) {
    const files = import.meta.glob('/public/assets/**/*.svg', {
        eager: true,
        query: '?raw',
        import: 'default'
    });

    const filepath = `/public/assets/${icon}.svg`;
    
    if (!(filepath in files)) {
        throw new Error(`${filepath} not found`);
    }

    const root = parse(files[filepath] as string);
    const svg = root.querySelector('svg');
    
    if (!svg) {
        throw new Error(`No SVG element found in ${filepath}`);
    }

    const { attributes, innerHTML } = svg;

    return {
        attributes,
        innerHTML,
    };
}

const { 
    icon, 
    fillColor,
    svgClass = "icon h-auto w-2/5 mx-auto my-2 object-cover aspect-square group-hover:scale-125 transition duration-500 ease-in-out",
    ...attributes 
} = Astro.props as Props;

const { attributes: baseAttributes, innerHTML } = await getSVG(icon);
const svgAttributes = { ...baseAttributes, ...attributes };
---

<svg
    class={svgClass}
    {...svgAttributes}
    set:html={innerHTML}
    style={`fill:${fillColor}`}
/>

================
File: src/components/home/StackItem.astro
================
---
import SvgItem from '../common/SvgItem.astro';
export interface Props {
	icon: string;
  name: string;
  fillColor:string;
}

const { icon,  name, fillColor = "#FF2D20", ...attributes } = Astro.props as Props;

---

  <div
class="bg-bodyAccent p-3 rounded-md group"
>

<div class="overflow-hidden aspect-video rounded-t-md relative">
<SvgItem
class="icon h-auto w-2/5 mx-auto my-2 object-cover aspect-square group-hover:scale-125 transition duration-500 ease-in-out"
    icon={`stack/${icon}`}
    fillColor={fillColor}
></SvgItem>
</div>

<p class="text-center">{ name }</p>
</div>

================
File: src/components/portfolio/PortfolioItem.astro
================
---
import { Image } from 'astro:assets';

import type { PortfolioItemProps } from '../../types/common';
export interface Props extends PortfolioItemProps {}

const { name, description, href, image, status = 'completed' } = Astro.props;

const statusColors = {
    'completed': 'bg-green-500',
    'in-progress': 'bg-yellow-500',
    'archived': 'bg-blue-500'
};

const statusText = {
    'completed': 'Completed',
    'in-progress': 'In Progress',
    'archived': 'Archived / Finished'
};
---

<article 
    class="bg-bodyAccent p-3 rounded-md flex flex-col gap-1 transform hover:-translate-y-1 transition-all duration-300 ease-in-out hover:shadow-lg"
    itemscope 
    itemtype="https://schema.org/Project"
>
    <div class="relative">
        <Image 
            src={`/assets/portfolio/${image}`}
            alt={`Screenshot or preview of ${name}`}
            width={800}
            height={600}
            class="rounded-md w-full h-[40vh] object-cover"
            loading="lazy"
            itemprop="image"
        />
        <span 
            class={`absolute top-2 right-2 px-2 py-1 rounded-full text-white text-sm ${statusColors[status]}`}
        >
            {statusText[status]}
        </span>
    </div>

    <h2 
        class="text-xl font-bold mt-2" 
        itemprop="name"
    >
        {name}
    </h2>

    <p 
        class="text-gray-300 flex-grow"
        itemprop="description"
        set:html={description}
    />

    {href && (
        <a 
            href={href}
            class="text-primary mt-4 inline-flex items-center group hover:underline"
            target="_blank"
            rel="noopener noreferrer"
            itemprop="url"
        >
            View Project
            <svg 
                class="w-4 h-4 ml-2 transform group-hover:translate-x-1 transition-transform" 
                fill="none" 
                stroke="currentColor" 
                viewBox="0 0 24 24"
            >
                <path 
                    stroke-linecap="round" 
                    stroke-linejoin="round" 
                    stroke-width="2" 
                    d="M9 5l7 7-7 7"
                />
            </svg>
        </a>
    )}
</article>

================
File: src/components/workExperience/WorkExperienceItem.astro
================
---
import { Image } from 'astro:assets';

export interface Props {
    name: string;
    yearRange: string;
    description: string;
    href: string | null;
}

const { name, description, href, yearRange} = Astro.props;
---

<article 
    class="bg-bodyAccent p-3 rounded-md flex flex-col gap-1 transform hover:-translate-y-1 transition-all duration-300 ease-in-out hover:shadow-lg"
    itemscope 
    itemtype="https://schema.org/Project"
>
    <div class="relative">
        <span 
            class={`absolute top-2 right-2 px-2 py-1 rounded-full text-white text-sm bg-green-500`}
        >
            {yearRange}
        </span>
    </div>

    <h2 
        class="text-xl font-bold mt-2" 
        itemprop="name"
    >
        {name}
    </h2>

    <p 
        class="text-gray-300 flex-grow"
        itemprop="description"
        set:html={description}
    />

    {href && (
        <a 
            href={href}
            class="text-primary mt-4 inline-flex items-center group hover:underline"
            target="_blank"
            rel="noopener noreferrer"
            itemprop="url"
        >
            Open workplace website
            <svg 
                class="w-4 h-4 ml-2 transform group-hover:translate-x-1 transition-transform" 
                fill="none" 
                stroke="currentColor" 
                viewBox="0 0 24 24"
            >
                <path 
                    stroke-linecap="round" 
                    stroke-linejoin="round" 
                    stroke-width="2" 
                    d="M9 5l7 7-7 7"
                />
            </svg>
        </a>
    )}
</article>

================
File: src/consts.ts
================
// Place any global data in this file.
// You can import this data from anywhere in your site by using the `import` keyword.

export const SITE_TITLE = 'Julius Bendt | Portfolio';
export const SITE_DESCRIPTION = 'Julius Bendt - Fullstack developer, DevOps enginner and dark mode entusiast';


export const techstacks = {

    "Backend technologies": [
        {
            name: ".NET",
            icon: "dotnet",
            fillColor: "#512BD4"
        },
        {
            name: "Node (TS)",
            icon: "tsnode",
            fillColor: "#3178C6"
        },
        {
            name: "Laravel",
            icon: "laravel",
            fillColor: "#FF2D20"
        },
        {
            name: "Php",
            icon: "php",
            fillColor: "#777BB4"
        },
        {
            name: "C#",
            icon: "csharp",
            fillColor: "#239120"
        },
    ],
    "Frontend technologies": [
        {
            name: "Vue",
            icon: "vuedotjs",
            fillColor: "#4FC08D"
        },
        {
            name: "Tailwind",
            icon: "tailwindcss",
            fillColor: "#06B6D4"
        },
        {
            name: "Vuetify",
            icon: "vuetify",
            fillColor: "#1867C0"
        },
        {
            name: "Astro",
            icon: "astro",
            fillColor: "#FF5D01"
        },
        {
            name: "Flutter",
            icon: "flutter",
            fillColor: "#02569B"
        },
        {
            name: "Dart",
            icon: "dart",
            fillColor: "#0175C2"
        },
    ],
    "Persistent technologies": [
        {
            name: "Redis",
            icon: "redis",
            fillColor: "#DC382D"
        },
        {
            name: "MySQL",
            icon: "mysql",
            fillColor: "#4479A1"
        },
        {
            name: "ElasticSearch",
            icon: "elasticsearch",
            fillColor: "#005571"
        },
    ],
    "Infrastructure as code (IaC)": [
        {
            name: "Terraform",
            icon: "terraform",
            fillColor: "#844FBA"
        }
    ],
    "Game development": [
        {
            name: "Unity",
            icon: "unity",
            fillColor: "#FFFFFF"
        }
    ]
}

export const portfolio = [
    {
        "name": "Wishshare",
        "description": "WishShare is my most refined project, leveraging Tailwind, Vue 3, Node.js, TypeScript, and Socket.IO to create a comprehensive wishlist platform. The application features a Playwright-based scraper supporting several webshops to streamline wish creation.<br><br>This project showcases my ability to build polished, full-stack applications while implementing practical features like web scraping and real-time updates for an enhanced user experience.",
        "href": "https://github.com/Julius-Bendt/Wishshare",
        "image": "stackflock.webp",
        "status": 'in-progress'
    },
    {
        "name": "Vaultify",
        "description": "Vaultify is a personal exploration into cryptography and end-to-end encryption, developed using Node.js, TypeScript, Vue 3, and Socket.IO.<br><br>This ongoing project demonstrates my commitment to understanding complex security concepts through practical implementation, while expanding my technical expertise in real-time communication and modern web technologies.",
        "href": null,
        "image": "vaultify.webp",
        "status": 'in-progress'

    },
    {
        "name": "Tid.jub.dk",
        "description": "I co-developed tid.jub.dk, a time management web application built with Vue 3 and TypeScript. The solution enables individual time tracking and organization across different tasks.<br><br>This self-initiated project demonstrates our ability to identify organizational needs and implement practical solutions using modern frontend technologies.",
        "href": "https://tid.jub.dk",
        "image": "tid.jub.dk.webp",
        "status": "completed"
    },
    {
        "name": "Open source packages for HomeBridge",
        "description": "I've developed several HomeKit integrations through Homebridge, expanding smart home capabilities for users. These projects include integrations for Hyperion (enabling ambient TV lighting control), Sonos sound systems, and configurable dummy switches with webhook functionality.<br><br>All integrations were built using TypeScript and Node.js, leveraging the Homebridge SDK to ensure reliable HomeKit compatibility. These projects demonstrate my ability to create robust, user-focused solutions while contributing to the open-source community.",
        "href": "https://github.com/Julius-Bendt?tab=repositories",
        "image": "homebridge.webp",
        "status": "completed"

    },
    {
        "name": "Stackflock",
        "description": "Stackflock's objective is to establish connections between developers and companies. It achieves this by providing a map-based interface that allows developers to locate companies within their geographical vicinity and filter them based on their technological stack.<br><br>This feature helps both developers and companies to gain insight into the growing technology trends within their locality.<br><br>The project should be considered archived",
        "href": "https://stackflock.jub.dk",
        "image": "stackflock.webp",
        "status": "archived"
    },
    {
        "name": "Power the evolution",
        "description": "Power The Evolution originated as a high school project, which subsequently progressed beyond its initial delivery stage with the continued involvement of myself and a friend.<br><br>The game received acclaim in the form of inclusion in Denmark's championship for game development and earned the \"Youth Against Global Warming\" award in 2018.",
        "href": null,
        "image": "power.webp",
        "status": "completed"
    },
];

export const workExperience = [
    {
        "name": "Solita DK",
        "description": "As a Developer, I specialize in .NET, Node.js, and TypeScript, delivering solutions primarily within the finance and transportation sectors. My expertise includes cloud infrastructure management using Azure and implementing CI/CD through GitHub pipelines.<br><br>I have experience with Infrastructure as Code using Terraform and have successfully integrated AI technologies into enterprise solutions. Working with clients in finance, infrastructure, and logistics has given me strong experience in building robust, scalable systems for complex business needs.",
        "href": "https://www.solita.fi/denmark/",
        "yearRange": "aug. 2023 - now",
    },
    {
        "name": "Homerunner",
        "description": "As a Developer at Homerunner, I worked with Laravel and Flutter to develop innovative solutions. My main focus was backend development, where I built and maintained microservices, implemented database models, and integrated APIs.<br><br>I also contributed to mobile app development using Flutter, creating user interfaces based on design specifications. Additionally, I gained experience with DevOps and Elasticsearch integration, working alongside an experienced team that fostered my technical growth.",
        "href": "https://www.homerunner.com/",
        "yearRange": "jun. 2022 - aug. 2023",
    },
    {
        "name": "Graitor",
        "description": "Graitor is a startup with a mission to foster environmental sustainability globally. The core of Graitor's business model involves incentivizing conscientious user behavior, specifically through the act of \"panting\", or the collection and delivery of empty cans and bottles.<br><br>Users receive points for engaging in this activity, which can be subsequently redeemed for an array of rewards including discounts, unique experiences, and complimentary merchandise",
        "href": "https://graitor.dk",
        "yearRange": "apr. 2019 - may 2022",
    },
    {
        "name": "Freelance developer",
        "description": "As a seasoned freelancer, I have acquired ample experience in diverse areas of software development such as game, app, and website development.<br><br>My client base primarily comprised of small and mid-sized enterprises for whom I provided my services. My experience as a freelancer has endowed me with the necessary skills to tackle complex projects and deliver results within the designated timelines.<br><br><b>please notice: I don't do freelance work anymore</b>",
        "href": null,
        "yearRange": "sep. 2018 - aug. 2020",
    },
    {
        "name": "Game development teacher",
        "description": "Gamelab is a activity for young people in the municipality of Aalborg who are interested in game development. I have been a member of Gamelab since 2015 till 2022.<br><br>In 2018, I was hired to teach high school students about game development, specifically in areas such as programming, design, graphics, sound, and time management.",
        "href": "https://aalborgungdomsskole.dk/gamelab/",
        "yearRange": "sep. 2018 - mar. 2022",
    },
]

================
File: src/content/blog/my-first-blog-post/index.md
================
---
title: "My First Blog Post"
description: "This is my first blog post using Astro and Markdown"
pubDate: "2024-12-03"
heroImage: "test.jpg"
heroAlt: "My First Blog Post"
draft: false
---

# My First Blog Post

Welcome to my first blog post! Here's how you can use various Markdown features:

## Headers

You can use different levels of headers (H1-H6)

## Text Formatting

You can write text in **bold** or _italic_

## Lists

1. First item
2. Second item
3. Third item

- Unordered item
- Another item
- And another

## Code Blocks

```typescript
const greeting = "Hello, World!";
console.log(greeting);
```

## Links and Images

You can [link to other pages (this redirects to 'home')](/)

![Alt text for images](./images/graitor.png)

## Blockquotes

> This is a blockquote. You can use it to emphasize text or quote someone.

================
File: src/content/config.ts
================
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
    type: 'content',
    schema: z.object({
        title: z.string(),
        description: z.string(),
        pubDate: z.string()
            .or(z.date())
            .transform((val) => new Date(val)),
        updatedDate: z.string()
            .or(z.date())
            .transform((val) => new Date(val))
            .optional(),
        // Instead of a string, we'll store the image path relative to src/assets
        heroImage: z.string().optional(), // e.g., "test.jpg" or "blog/my-post/test2.jpg"
        heroAlt: z.string().optional(),
        keywords: z.array(z.string()).default([
            "fullstack developer",
            "devops engineer",
            "software engineering",
            "web development"
        ]),
        draft: z.boolean().default(false),
    }),
});

export const collections = { blog };

================
File: src/env.d.ts
================
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />

================
File: src/layouts/BlogPost.astro
================
---
import type { CollectionEntry } from 'astro:content';
import Page from '../components/common/Page.astro';
import { Image } from 'astro:assets';
import type { ImageMetadata } from 'astro';
import BlogImage from '../components/blog/BlogImage.astro';

type Props = CollectionEntry<'blog'>['data'];

const { title, description, pubDate, updatedDate, heroImage, heroAlt, keywords } = Astro.props;

// Import all images from assets directory
const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/**/*.{jpeg,jpg,png,gif,webp}', { eager: true });

function formatDate(date: Date) {
    return date.toLocaleDateString('en-GB', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric'
    });
}

const formattedPublishDate = formatDate(pubDate);
const formattedUpdateDate = updatedDate ? formatDate(updatedDate) : null;

// Get hero image path
const heroImagePath = heroImage ? `/src/assets/${heroImage}` : '/src/assets/julius.jpg';
const resolvedHeroImage = images[heroImagePath]?.default;

// Create SEO image URL
const seoImagePath = heroImage || 'julius.jpg';

// Define custom components for markdown
export const components = {
    img: BlogImage
};
---

<Page
    title={title}
    description={description}
    type="article"
    publishedDate={pubDate}
    modifiedDate={updatedDate}
    image={seoImagePath}
    keywords={keywords}
>
    <article class="prose prose-invert mx-auto max-w-3xl">
        <div class="mb-8">
            {resolvedHeroImage && (
                <Image 
                    src={resolvedHeroImage} 
                    alt={heroAlt || `Hero image for ${title}`}
                    width={1200}
                    height={630}
                    format="webp"
                    quality={80}
                    class="rounded-xl w-full"
                    loading="eager"
                />
            )}
        </div>
        <div class="mb-8">
            <h1 class="text-4xl font-bold mb-4">{title}</h1>
            <div class="text-gray-400">
                <time>{formattedPublishDate}</time>
                {formattedUpdateDate && (
                    <div class="italic">
                        Last updated on <time>{formattedUpdateDate}</time>
                    </div>
                )}
            </div>
        </div>
        <div class="prose prose-invert prose-lg">
            <slot />
        </div>
    </article>
</Page>

================
File: src/pages/404.astro
================
---
import Page from '../components/common/Page.astro';
---

<Page title="404 - Page Not Found">
    <div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
        <h1 class="text-6xl font-bold text-primary mb-4">404</h1>
        <h2 class="text-2xl font-semibold mb-6">Page Not Found</h2>
        <p class="text-gray-400 mb-8">The page you're looking for doesn't exist or has been moved.</p>
        <a 
            href="/" 
            class="bg-primary text-black px-6 py-3 rounded-lg font-medium hover:bg-primary/90 transition-colors"
        >
            Return Home
        </a>
    </div>
</Page>

================
File: src/pages/blog/[...slug].astro
================
---
import { type CollectionEntry, getCollection } from 'astro:content';
import BlogPost from '../../layouts/BlogPost.astro';
import { getFileDates } from '../../utils/gitDates';

export async function getStaticPaths() {
    const posts = await getCollection('blog', ({ data }) => {
        return import.meta.env.PROD ? !data.draft : true;
    });
    
    return posts.map((post) => {
        const dates = getFileDates(`src/content/blog/${post.id}`);
        
        const postWithDates = {
            ...post,
            data: {
                ...post.data,
                pubDate: post.data.pubDate || dates.created,
                updatedDate: post.data.updatedDate || dates.modified
            }
        };
        
        return {
            params: { slug: post.slug },
            props: postWithDates,
        };
    });
}

type Props = CollectionEntry<'blog'>;
const post = Astro.props;
const { Content } = await post.render();
---

<BlogPost {...post.data}>
    <Content />
</BlogPost>

================
File: src/pages/blog/index.astro
================
---
import { getCollection } from 'astro:content';
import Page from '../../components/common/Page.astro';
import { Image } from 'astro:assets';

// Import all images from assets directory
const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/**/*.{jpeg,jpg,png,gif,webp}', { eager: true });

const posts = await getCollection('blog', ({ data }) => {
    return import.meta.env.PROD ? !data.draft : true;
});

posts.sort((a, b) => {
    const dateA = new Date(a.data.pubDate);
    const dateB = new Date(b.data.pubDate);
    return dateB.getTime() - dateA.getTime();
});

const formatDate = (date: Date | string) => {
    const d = new Date(date);
    return d.toLocaleDateString('en-us', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
    });
};

// Helper function to get image for a post
function getPostImage(heroImage: string | undefined) {
    if (!heroImage) return null;
    const imagePath = `/src/assets/${heroImage}`;
    return images[imagePath]?.default;
}
---

<Page
    title="Blog"
    description="Technical insights, development experiences, and thoughts on software engineering, DevOps, and web development."
>
    <section class="max-w-6xl mx-auto">
        <h1 class="text-4xl font-bold mb-8">Blog</h1>
        <div class="grid md:grid-cols-2 gap-8">
            {posts.map((post) => {
                const postImage = getPostImage(post.data.heroImage);
                return (
                    <article class="bg-bodyAccent rounded-xl overflow-hidden hover:transform hover:-translate-y-1 transition-all duration-300">
                        <a href={`/blog/${post.slug}`}>
                            {postImage && (
                                <Image
                                    src={postImage}
                                    alt={post.data.heroAlt || `Hero image for ${post.data.title}`}
                                    width={600}
                                    height={300}
                                    format="webp"
                                    quality={60}
                                    class="w-full h-48 object-cover"
                                    loading="lazy"
                                    decoding="async"
                                />
                            )}
                            <div class="p-6">
                                <h2 class="text-2xl font-bold mb-2 text-primary">
                                    {post.data.title}
                                </h2>
                                <div class="text-gray-400 mb-4">
                                    <time>{formatDate(post.data.pubDate)}</time>
                                </div>
                                <p class="text-gray-300">
                                    {post.data.description}
                                </p>
                            </div>
                        </a>
                    </article>
                );
            })}
        </div>
    </section>
</Page>

================
File: src/pages/index.astro
================
---
import Page from '../components/common/Page.astro';
import { Image } from 'astro:assets';
import {techstacks} from "../consts";
import ConnectItem from '../components/common/ConnectItem.astro';
import AnimateableText from '../components/common/AnimateableText.astro';
import StackItem from '../components/home/StackItem.astro';
import CubesBackground from '../components/common/CubesBackground.astro';

interface ITechstack {
	name: string;
	technologies: Array<any>;
}

const techstack: ITechstack[] = Object.entries(techstacks).map(([name, technologies]) => ({
	name,
	technologies,
}));
---


<CubesBackground />
<Page
    title="Home"
    description="Julius Bendt - Fullstack developer, DevOps engineer, and home automation enthusiast. Explore my portfolio and technical expertise."
>
	<section 
		id="intro" 
		class="grid md:grid-cols-3 md:gap-12 grid-flow-row animate-fadeIn"
		aria-label="Introduction"
	>
		<div class="relative mx-auto md:mx-0 w-3/4 md:w-full">
			<Image
				src="/assets/julius.jpg"
				alt="Portrait of Julius Bendt"
				width={500}
				height={500}
				class="rounded-2xl w-full h-auto transition-transform duration-300 hover:scale-105"
			/>
		</div>
	
		<div class="flex flex-col justify-center md:col-span-2">
			<h1 class="text-5xl font-bold mx-auto md:mx-0 text-center md:text-left">
				Hey there, I'm Julius H. Bendt!
			</h1>
			<AnimateableText />
			
			<div class="flex flex-row flex-wrap gap-4 mt-4 md:mt-2 mx-auto md:mx-0">
				<p class="hidden md:block my-auto">Let's connect > </p>
				<ConnectItem 
					text="Github" 
					icon="icons/github" 
					fillColor="#ffffff" 
					href="https://github.com/Julius-Bendt"
				/>
				<ConnectItem 
					text="Linkedin" 
					icon="icons/linkedin" 
					fillColor="#0A66C2" 
					href="https://www.linkedin.com/in/julius-bendt"
				/>
				<ConnectItem 
					text="Leetcode" 
					icon="icons/leetcode" 
					fillColor="#FFA116" 
					href="https://leetcode.com/Julius-Bendt"
				/>
				<ConnectItem 
					class="hidden md:block" 
					text="Itch.io" 
					icon="icons/itchdotio" 
					fillColor="#FA5C5C" 
					href="https://bukz.itch.io"
				/>
			</div>
		</div>
	</section>

	<section 
		id="description"
		class="animate-fadeIn animation-delay-300"
		aria-label="About me"
	>
		<h2 class="text-2xl font-bold mb-2">About me</h2>
		<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
			<p>
				👋 Hello! I'm Julius Bendt, a fullstack developer who enjoys turning complex problems into elegant solutions. I bridge the gap between technical expertise and clear communication, making sure everyone - from developers to stakeholders - is on the same page.
			</p>
			<p>
				💻 My technical journey covers everything from crafting robust backends with .NET and Laravel to building smooth user experiences with Vue and TypeScript. I enjoy working across the entire stack, including mobile development with Flutter and infrastructure management with Terraform.
			</p>
			<p>
				⚡ When I'm not coding professionally, you'll find me exploring the intersection of technology and daily life through home automation projects, managing my homelab setup, or building SaaS products. I'm also an avid boulderer, proving that problem-solving isn't limited to the digital realm!
			</p>
			<p>
				🔧 My tech adventures are driven by a simple philosophy: <b>great software is about creating solutions that make a real difference</b>, whether it's optimizing database queries with PostgreSQL or crafting seamless user experiences with Tailwind.
			</p>

		</div>
	</section>

	<section 
		id="technologies"
		class="animate-fadeIn animation-delay-600"
		aria-label="Technologies"
	>
		<h2 class="text-2xl font-bold mb-2">Technologies I work with</h2>
		<p class="mb-8 text-lg">
			These are the technologies I have worked with on project - some work related, other as a hobby. 
		</p>

		{techstack.map(({ name, technologies }) => (
			<div class="mb-12">
				<h3 class="text-xl font-semibold mb-4">{name}</h3>
				<div class="grid md:grid-cols-6 grid-cols-2 md:gap-8 gap-4"> 
					{technologies.map((tech) => (
						<StackItem 
							name={tech.name} 
							icon={tech.icon} 
							fillColor={tech.fillColor}
						/>
					))}
				</div>
			</div>
		))}

		<p class="text-gray-400 text-sm mt-8">
			These awesome logos are provided by 
			<a 
				target="_blank" 
				class="text-primary hover:underline" 
				href="https://simpleicons.org/"
			>
				SimpleIcons
			</a>.
			<br>
			All copyright and trademarks belong to their respective owners.
		</p>
	</section>
</Page>

<style>


.animate-fadeIn {
	opacity: 0;
	animation: fadeIn 1s ease-out forwards;
}

.animation-delay-300 {
	animation-delay: 300ms;
}

.animation-delay-600 {
	animation-delay: 600ms;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
</style>

================
File: src/pages/portfolio.astro
================
---
import Page from '../components/common/Page.astro';
import { portfolio } from '../consts';
import PortfolioItem from '../components/portfolio/PortfolioItem.astro';


---
<Page
    title="Portfolio"
    description="Explore my latest projects and developments in web development, DevOps, and software engineering."
>
	<div class="flex flex-col">
		<h1 class="text-3xl font-bold">Portfolio</h1>
	<p class="mb-2">Here are some of my public projects</p>
	
	<div class="grid md:grid-cols-3 grid-cols-1 gap-4">
		{portfolio.map((item) => (
			<PortfolioItem 
			name={item.name}
			description={item.description}
			href={item.href}
			image={item.image}
			status={item.status as 'completed' | 'in-progress' | 'archived'}
			/>
			))}
	</div>
	</div>
</Page>

================
File: src/pages/work-experience.astro
================
---
import Page from '../components/common/Page.astro';
import { workExperience } from '../consts';
import WorkExperienceItem from '../components/workExperience/WorkExperienceItem.astro';


---
<Page
    title="Work Experience"
    description="My professional journey as a fullstack developer and DevOps engineer, featuring roles at various companies and projects."
>
	<div class="flex flex-col">
		<h1 class="text-3xl font-bold">Work experience</h1>
	<p class="mb-2">Here are the places I have worked</p>
	
	<div class="grid md:grid-cols-3 grid-cols-1 gap-4">
		{workExperience.map((item) => (
			<WorkExperienceItem 
			name={item.name}
			description={item.description}
			href={item.href}
			yearRange={item.yearRange}
			/>
			))}
	</div>
	</div>
</Page>

================
File: src/styles/global.css
================
::-webkit-scrollbar {
  width: 8px;
  border: 4px solid white;
}
::-webkit-scrollbar-thumb {
  background-color: #7f8c8d;
  background-clip: padding-box;
  border: 0.05em solid #eeeeee;
  border-radius: 16px;
}
::-webkit-scrollbar-thumb:hover {
  background: #95a5a6;
  border-radius: 10px;
}
::-webkit-scrollbar-track {
  background-color: #ecf0f1;
}

@font-face {
  font-family: "Inter";
  src: url("../../public/assets/font/Inter-Regular.ttf");
  font-display: swap;
}

================
File: src/types/common.ts
================
// src/types/common.ts
export interface BaseProps {
    class?: string;
    id?: string;
}

export interface ImageProps extends BaseProps {
    src: string;
    alt: string;
    width?: number;
    height?: number;
    loading?: 'lazy' | 'eager';
}

export interface LinkProps extends BaseProps {
    href: string;
    external?: boolean;
    ariaLabel?: string;
}

export interface SEOProps extends BaseProps {
    title?: string;
    description?: string;
    image?: string;
    type?: 'website' | 'article';
    publishedDate?: Date;
    modifiedDate?: Date;
    keywords?: string[];
}

export interface BlogPostProps extends SEOProps {
    pubDate: Date;
    updatedDate?: Date;
    draft?: boolean;
    keywords?: string[];
}

export interface PortfolioItemProps extends BaseProps {
    name: string;
    description: string;
    href: string | null;
    image: string;
    status: 'completed' | 'in-progress' | 'archived';
}

================
File: src/utils/gitDates.ts
================
import { execSync } from 'child_process';

interface GitDates {
    created: Date;
    modified?: Date;
    error?: string;
}

export function getFileDates(filepath: string): GitDates {
    if (!filepath) {
        return {
            created: new Date(),
            error: 'No filepath provided'
        };
    }

    try {
        // Check if file exists and is in git
        try {
            execSync(`git ls-files --error-unmatch "${filepath}"`, { stdio: 'pipe' });
        } catch (error) {
            return {
                created: new Date(),
                error: 'File not tracked in git'
            };
        }

        // Get creation date
        const creationDateBuffer = execSync(
            `git log --follow --format=%aI -- "${filepath}" | tail -1`,
            { stdio: 'pipe' }
        );
        const creationDate = creationDateBuffer.toString().trim();

        // Get modified date
        const modifiedDateBuffer = execSync(
            `git log -1 --format=%aI -- "${filepath}"`,
            { stdio: 'pipe' }
        );
        const modifiedDate = modifiedDateBuffer.toString().trim();

        return {
            created: creationDate ? new Date(creationDate) : new Date(),
            modified: modifiedDate && modifiedDate !== creationDate ? new Date(modifiedDate) : undefined
        };
    } catch (error) {
        const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
        console.error(`Git date error for ${filepath}:`, errorMessage);

        return {
            created: new Date(),
            error: `Failed to get git dates: ${errorMessage}`
        };
    }
}

export function isValidGitDate(date: Date): boolean {
    return date instanceof Date && !isNaN(date.getTime());
}

================
File: src/utils/imageUtils.ts
================
import type { ImageMetadata } from 'astro';

const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/**/*.{jpeg,jpg,png,gif,webp}', { eager: true });

export function getImageByPath(src: string): ImageMetadata | null {
    // Handle absolute paths from src/assets
    if (src.startsWith('/src/assets/')) {
        return images[src]?.default || null;
    }
    // Handle paths without /src/assets prefix
    if (src.startsWith('/')) {
        const path = `/src/assets${src}`;
        return images[path]?.default || null;
    }
    // Handle relative paths
    const path = `/src/assets/${src}`;
    return images[path]?.default || null;
}

export function getHeroImagePath(heroImage: string | undefined): string {
    return heroImage ? `/src/assets/${heroImage}` : '/src/assets/julius.jpg';
}

export function getFallbackAltText(title: string, type: 'hero' | 'content' = 'content'): string {
    return type === 'hero' ?
        `Hero image for ${title}` :
        `Image related to ${title}`;
}

================
File: src/utils/seoSchema.ts
================
interface SchemaOrgData {
    type: 'website' | 'article';
    title: string;
    description: string;
    url: string;
    image?: string;
    publishedDate?: Date;
    modifiedDate?: Date;
}

export function generateSchemaOrg(data: SchemaOrgData) {
    if (data.type === 'article') {
        return {
            "@context": "https://schema.org",
            "@type": "BlogPosting",
            "headline": data.title,
            "description": data.description,
            "image": data.image,
            "datePublished": data.publishedDate?.toISOString(),
            "dateModified": data.modifiedDate?.toISOString() || data.publishedDate?.toISOString(),
            "author": {
                "@type": "Person",
                "name": "Julius Bendt",
                "url": "https://jub.dk"
            }
        };
    }

    return {
        "@context": "https://schema.org",
        "@type": "Person",
        "name": "Julius Bendt",
        "url": "https://jub.dk",
        "jobTitle": "Fullstack Developer",
        "description": "Fullstack developer, DevOps engineer and dark mode enthusiast",
        "sameAs": [
            "https://github.com/Julius-Bendt",
            "https://www.linkedin.com/in/julius-bendt",
            "https://leetcode.com/Julius-Bendt",
            "https://wip.dk",
        ]
    };
}

================
File: tailwind.config.js
================
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  darkMode: "class",
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx,astro}"],
  theme: {
    fontFamily: {
      sans: ["Inter", "Helvetica", "Arial", "sans-serif"],
    },
    extend: {
      colors: {
        primary: "#ffc107",
        body: "#1f2022",
        bodyAccent: "#242C3A",
        nav: "#23304b",
        success: "#10B981",
        warning: "#F59E0B",
        info: "#3B82F6",
        error: "#EF4444",
      },
      typography: {
        invert: {
          css: {
            "--tw-prose-body": "#fff",
            "--tw-prose-headings": "#fff",
            "--tw-prose-links": "#ffc107",
            "--tw-prose-bold": "#fff",
            "--tw-prose-counters": "#9ca3af",
            "--tw-prose-bullets": "#4b5563",
            "--tw-prose-hr": "#374151",
            "--tw-prose-quotes": "#9ca3af",
            "--tw-prose-quote-borders": "#374151",
            "--tw-prose-captions": "#9ca3af",
            "--tw-prose-code": "#fff",
            "--tw-prose-pre-code": "#fff",
            "--tw-prose-pre-bg": "#1f2937",
            "--tw-prose-th-borders": "#374151",
            "--tw-prose-td-borders": "#374151",
          },
        },
      },
      animation: {
        "fade-in": "fadeIn 0.5s ease-out",
        "slide-in": "slideIn 0.5s ease-out",
        "bounce-slow": "bounce 3s infinite",
      },
      keyframes: {
        fadeIn: {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
        slideIn: {
          "0%": { transform: "translateY(20px)", opacity: "0" },
          "100%": { transform: "translateY(0)", opacity: "1" },
        },
      },
      spacing: {
        128: "32rem",
        144: "36rem",
      },
      borderRadius: {
        xl: "1rem",
        "2xl": "2rem",
      },
      boxShadow: {
        soft: "0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)",
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

================
File: tsconfig.json
================
{
  "extends": "astro/tsconfigs/base",
  "compilerOptions": {
    "strictNullChecks": true
  }
}