edit theme for my own siye

.gitea/workflows/build-image.yml

@@ -0,0 +1,48 @@
+name: Build and Push Docker Image
+
+on:
+  push:
+    branches:
+      - main
+      - master
+
+env:
+  REGISTRY: ${{ gitea.server_url }}
+  IMAGE_NAME: ${{ gitea.repository }}
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to Gitea Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ gitea.actor }}
+          password: ${{ secrets.REGISTRY_TOKEN }}
+
+      - name: Extract metadata (tags, labels)
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=ref,event=branch
+            type=sha,prefix=
+            type=raw,value=latest,enable=${{ gitea.ref == format('refs/heads/{0}', 'main') || gitea.ref == format('refs/heads/{0}', 'master') }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

Dockerfile

@@ -0,0 +1,34 @@
+# Stage 1: Build
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Install pnpm
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
+# Copy package files
+COPY package.json pnpm-lock.yaml ./
+
+# Install dependencies
+RUN pnpm install --frozen-lockfile
+
+# Copy source files
+COPY . .
+
+# Build the site
+RUN pnpm build
+
+# Stage 2: Serve with nginx
+FROM nginx:alpine AS runner
+
+# Copy built files
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Expose port
+EXPOSE 80
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

docker-compose.yml

@@ -0,0 +1,6 @@
+services:
+  portfolio:
+    build: .
+    ports:
+      - "8080:80"
+    restart: unless-stopped

nginx.conf

@@ -0,0 +1,55 @@
+server {
+    listen 80;
+    listen [::]:80;
+    server_name _;
+    
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_proxied any;
+    gzip_types
+        text/plain
+        text/css
+        text/xml
+        text/javascript
+        application/javascript
+        application/json
+        application/xml
+        application/rss+xml
+        application/atom+xml
+        image/svg+xml;
+
+    # Static file caching
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+        access_log off;
+    }
+
+    # HTML files - no cache for dynamic updates
+    location ~* \.html$ {
+        expires -1;
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
+    }
+
+    # Main location block
+    location / {
+        try_files $uri $uri/ $uri.html =404;
+    }
+
+    # Custom error pages
+    error_page 404 /404.html;
+    location = /404.html {
+        internal;
+    }
+}

pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+ignoredBuiltDependencies:
+  - '@biomejs/biome'
+  - '@tailwindcss/oxide'
+  - esbuild
+  - sharp

src/collections/experiences.json

@@ -1,17 +1,16 @@
 [
 	{
-		"dates": "June 2018 · Present",
-		"role": "Web & Product Designer",
-		"company": "Company Name",
-		"description": "Leading the design of user-centric web applications and dating platforms.",
-		"logo": "/assets/experiences/company.jpg"
+		"dates": "2024 - Present",
+		"role": "President",
+		"company": "HEC IA",
+		"description": "Technical workshops on AI tools for business students.",
+		"logo": "/assets/experiences/hec-ia.png"
 	},
 	{
-		"dates": "July 2016 · June 2017",
-		"role": "Web & Product Designer",
-		"company": "Company Name",
-		"description": "Spearheaded the design and development of e-commerce websites and online marketplaces.",
-		"logo": "/assets/experiences/company.jpg"
+		"dates": "2023 - Present",
+		"role": "Freelance Developer",
+		"company": "Self-employed",
+		"description": "Fullstack development. Python, Golang, automation.",
+		"logo": "/assets/experiences/freelance.png"
 	}
-
 ]

src/collections/featuredwork.json

@@ -1,58 +1,26 @@
 [
 	{
-		"name": "RicoOG",
-		"description": "OG Inspiration Library",
-		"tags": ["Open Graph", "Design", "Library"],
-		"image": "/assets/works/ricoog.jpg",
-		"video": "/assets/works/ricoog.mp4",
-		"url": "https://ricoog.com/",
+		"name": "Homelab Infrastructure",
+		"description": "Self-hosted production infrastructure",
+		"tags": ["Kubernetes", "Proxmox", "Docker", "Monitoring"],
+		"image": "/assets/works/homelab.jpg",
+		"url": "/work/homelab",
 		"isShow": true
 	},
 	{
-		"name": "GradientsHub",
-		"description": "Gradient Resources & Tools",
-		"tags": ["Gradient","Resources","Tools"],
-		"image": "/assets/works/gradientshub.jpg",
-		"video": "/assets/works/gradientshub.mp4",
-		"url": "https://gradientshub.com"
+		"name": "HEC IA",
+		"description": "AI workshops for business students",
+		"tags": ["Education", "AI", "Workshops"],
+		"image": "/assets/works/hec-ia.jpg",
+		"url": "/work/hec-ia",
+		"isShow": true
 	},
 	{
-		"name": "Luon Models",
-		"description": "Company Website",
-		"tags": ["Company","Website","Branding"],
-		"image": "/assets/works/luonmodels.jpg",
-		"video": "/assets/works/luonmodels.mp4",
-		"url": "https://luonmodels.netlify.app/"
-	},
-	{
-		"name": "Ricoui",
-		"description": "Designer Portfolio",
-		"tags": ["Designer","Portfolio","Open Source"],
-		"image": "/assets/works/ricoui.jpg",
-		"video": "/assets/works/ricoui.mp4",
-		"url": "/work/ricoblog2024"
-
-	},
-	{
-		"name": "3D Valentines Assets",
-		"description": "Blender Design Resources & Assets",
-		"tags": ["3D","Resources","Assets"],
-		"image": "/assets/works/3d-valentines.jpg",
-		"video": "/assets/works/3d-valentines.mp4",
-		"url": "/work/3dvalentine"
-	},
-	{
-		"name": "UIUXDECK",
-		"description": "Design Resources & Tools",
-		"tags": ["Design","Resources","Tools"],
-		"image": "/assets/works/uiuxdeck.jpg",
-		"url": "http://uiuxdeck.com/"
-	},
-	{
-		"name": "Inspoweb",
-		"description": "Web Inspiration Library",
-		"tags": ["Inspiration","Web Collection"],
-		"image": "/assets/works/inspoweb.jpg",
-		"url": "https://inspoweb.com/"
+		"name": "Freelance Development",
+		"description": "Fullstack development and automation",
+		"tags": ["Python", "Golang", "Automation"],
+		"image": "/assets/works/freelance.jpg",
+		"url": "/work/freelance",
+		"isShow": true
 	}
 ]

src/collections/menu.json

@@ -4,11 +4,7 @@
 		"url": "/"
 	},
 	{
-		"name": "Writing",
-		"url": "/blog"
-	},
-	{
-		"name": "Works",
+		"name": "Projects",
 		"url": "/works"
 	},
 	{

src/collections/social.json

@@ -2,67 +2,17 @@
 	{
 		"id": 1,
 		"name": "Github",
-        "username": "ricocc",
+		"username": "vorpax",
 		"image": "/assets/social/social-github.jpg",
-		"url": "https://github.com/ricocc/"
+		"url": "https://github.com/vorpax",
+		"isShow": true
 	},
-
 	{
 		"id": 2,
-		"name": "Xiaohongshu",
-        "username": "ricouii",
-		"image": "/assets/social/social-xiaohongshu.jpg",
-		"url": "https://www.xiaohongshu.com/user/profile/5f2b6903000000000101f51f"
-	},
-
-    {
-        "id": 3,
-		"name": "Twitter",
-        "username": "ricouii",
-		"image": "/assets/social/social-twitter.jpg",
-		"url": "https://x.com/ricouii"
-	},
-
-    {
-        "id": 4,
-		"name": "Gumroad",
-        "username": "ricoui",
-		"image": "/assets/social/social-gumroad.jpg",
-		"url": "https://ricoui.gumroad.com/"
-	},
-
-    {
-        "id": 5,
-		"name": "Behance",
-        "username": "ricoui",
-		"image": "/assets/social/social-behance.jpg",
-		"url": "https://www.behance.net/ricoui"
-	},
-
-    {
-        "id": 6,
-		"name": "figma",
-        "username": "ricocc",
-		"image": "/assets/social/social-figma.jpg",
-		"url": "https://www.figma.com/@ricocc",
-        "isShow": false
-	},
-
-    {
-        "id": 7,
-		"name": "Dribbble",
-        "username": "ricoui",
-		"image": "/assets/social/social-dribbble.jpg",
-		"url": "https://dribbble.com/ricoui"
-	},
-
-    {
-        "id": 8,
-		"name": "Email",
-        "username": "ricocc",
-		"image": "/assets/social/social-email.jpg",
-		"url": "mailto:ricocc@qq.com"
+		"name": "LinkedIn",
+		"username": "alexandre-houard",
+		"image": "/assets/social/social-linkedin.jpg",
+		"url": "https://www.linkedin.com/in/alexandre-houard-686960279/",
+		"isShow": true
 	}
-
-
 ]

src/collections/works.json

@@ -1,58 +1,26 @@
 [
 	{
-		"name": "RicoOG",
-		"description": "OG Inspiration Library",
-		"tags": ["Open Graph", "Design", "Library"],
-		"image": "/assets/works/ricoog.jpg",
-		"video": "/assets/works/ricoog.mp4",
-		"url": "https://ricoog.com/",
+		"name": "Homelab Infrastructure",
+		"description": "Self-hosted production infrastructure",
+		"tags": ["Kubernetes", "Proxmox", "Docker", "Monitoring"],
+		"image": "/assets/works/homelab.jpg",
+		"url": "/work/homelab",
 		"isShow": true
 	},
 	{
-		"name": "GradientsHub",
-		"description": "Gradient Resources & Tools",
-		"tags": ["Gradient","Resources","Tools"],
-		"image": "/assets/works/gradientshub.jpg",
-		"video": "/assets/works/gradientshub.mp4",
-		"url": "https://gradientshub.com"
+		"name": "HEC IA",
+		"description": "AI workshops for business students",
+		"tags": ["Education", "AI", "Workshops"],
+		"image": "/assets/works/hec-ia.jpg",
+		"url": "/work/hec-ia",
+		"isShow": true
 	},
 	{
-		"name": "Luon Models",
-		"description": "Agency Company Website",
-		"tags": ["Agency","Website"],
-		"image": "/assets/works/luonmodels.jpg",
-		"video": "/assets/works/luonmodels.mp4",
-		"url": "/work/luonmodels"
-	},
-	{
-		"name": "Ricoui",
-		"description": "Designer Portfolio",
-		"tags": ["Designer","Portfolio","Open Source"],
-		"image": "/assets/works/ricoui.jpg",
-		"video": "/assets/works/ricoui.mp4",
-		"url": "/work/ricoblog2024"
-
-	},
-	{
-		"name": "3D Valentines Assets",
-		"description": "Blender Design Resources & Assets",
-		"tags": ["3D","Resources","Assets"],
-		"image": "/assets/works/3d-valentines.jpg",
-		"video": "/assets/works/3d-valentines.mp4",
-		"url": "/work/3dvalentine"
-	},
-	{
-		"name": "UIUXDECK",
-		"description": "Design Resources & Tools",
-		"tags": ["Design","Resources","Tools"],
-		"image": "/assets/works/uiuxdeck.jpg",
-		"url": "http://uiuxdeck.com/"
-	},
-	{
-		"name": "Inspoweb",
-		"description": "Web Inspiration Library",
-		"tags": ["Inspiration","Web Collection"],
-		"image": "/assets/works/inspoweb.jpg",
-		"url": "https://inspoweb.com/"
+		"name": "Freelance Development",
+		"description": "Fullstack development and automation",
+		"tags": ["Python", "Golang", "Automation"],
+		"image": "/assets/works/freelance.jpg",
+		"url": "/work/freelance",
+		"isShow": true
 	}
 ]

src/components/sections/Explore.astro

@@ -1,15 +1,12 @@
 ---
 import SectionHeader from "@/components/elements/SectionHeader.astro";
-import Matter from "@/components/ui/Matter.astro";
-import Button from "@/components/ui/Button.astro";
-import Tools from "../ui/Tools.astro";
+import { Server, Code, GraduationCap } from "@lucide/astro";
+
 interface Props {
   title?: string;
   description?: string;
 }
-const {title, description
-} = Astro.props;
-
+const { title, description } = Astro.props;
 ---
 
 <section class="py-8 sm:py-12 md:py-16 md:pb-12 site-container">
@@ -19,141 +16,67 @@ const {title, description
 
     <div class="explore-content w-full relative mt-6 sm:mt-8">
         <div class="explore-list w-full relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
-            <!-- 第一列 -->
-            <div class="explore-column explore-column-1 w-full flex gap-3 sm:gap-4 flex-col">
-                <div class="explore-item bg-bg-secondary/75   dark:bg-bg-secondary-dark relative overflow-hidden rounded-xl border border-primary/15 dark:border-neutral-700/50 explore-item-1 h-[200px] sm:h-[220px] md:h-[264px]"
+            <!-- Infrastructure -->
+            <a href="/work/homelab" class="explore-item bg-bg-secondary/75 dark:bg-bg-secondary-dark relative overflow-hidden rounded-xl border border-primary/15 dark:border-neutral-700/50 h-[180px] sm:h-[200px] group"
               data-aos="fade-up-sm"
               data-aos-delay="500"
               data-aos-duration="600"
               data-aos-once="true">
                 <div class="content">
-                        <h3>Design & Code</h3>
-                        <p>Turning ideas into beautiful, functional experiences.</p>
-                        <!-- <div class="mt-2 btn opacity-0 transition duration-300 ease-in-out">
-                            <Button type="disabled" url="#" size="sm">
-                                Coming Soon
-                            </Button>
-                        </div> -->
+                    <h3>Infrastructure</h3>
+                    <p>Self-hosted homelab with Kubernetes, monitoring, and PKI.</p>
                 </div>
-                    <div class="absolute keyboard right-[-35%] sm:right-[-50%] md:right-[-58%] bottom-0 top-0 flex items-center self-center w-[300px] sm:w-[320px] md:w-[390px] h-auto">
-                        <img src="/assets/tools/keyboard.png" alt="Keyboard" class="w-full h-full object-cover">
+                <div class="absolute right-6 bottom-0 top-0 flex items-center opacity-20 group-hover:opacity-40 transition-opacity duration-300">
+                    <Server size={100} stroke-width={1} class="text-primary dark:text-primary-light" />
                 </div>
-                </div>
-                <div class="explore-item bg-bg-secondary/75   dark:bg-bg-secondary-dark  relative overflow-hidden rounded-xl border border-primary/15 dark:border-neutral-700/50 explore-item-2 h-[180px] sm:h-[200px]"
+            </a>
+
+            <!-- Development -->
+            <a href="/work/freelance" class="explore-item bg-bg-secondary/75 dark:bg-bg-secondary-dark relative overflow-hidden rounded-xl border border-primary/15 dark:border-neutral-700/50 h-[180px] sm:h-[200px] group"
               data-aos="fade-up-sm"
               data-aos-delay="600"
               data-aos-duration="600"
               data-aos-once="true">
                 <div class="content">
-                        <h3>Faves</h3>
-                        <p>Picked things I'm genuinely into.</p>
-                    </div>
-                    <div class="explore-figure game-container absolute right-0 bottom-0 top-0 w-full h-full">
-                        <div class="absolute game right-[-21%] bottom-0 top-0 mt-[-10%] flex items-center self-center w-auto h-[100px] sm:h-[120px] md:h-[130px] z-10" data-game="1">
-                            <img src="/assets/tools/game/05-game-cassette.png" alt="Game Cassette 5" class="w-full h-full object-cover self-center flex">
-                        </div>
-                        <div class="absolute game right-[-19%] bottom-0 top-0 mt-[-5%] flex items-center self-center w-auto h-[100px] sm:h-[120px] md:h-[130px] z-20" data-game="2">
-                            <img src="/assets/tools/game/04-game-cassette.png" alt="Game Cassette 4" class="w-full h-full object-cover self-center flex">
-                        </div>
-                        <div class="absolute game right-[-16%] bottom-0 top-0 mt-0 flex items-center self-center w-auto h-[100px] sm:h-[120px] md:h-[130px] z-30" data-game="3">
-                            <img src="/assets/tools/game/03-game-cassette.png" alt="Game Cassette 3" class="w-full h-full object-cover self-center flex">
-                        </div>
-                        <div class="absolute game right-[-13%] bottom-0 top-0 mt-[5%] flex items-center self-center w-auto h-[100px] sm:h-[120px] md:h-[130px] z-40" data-game="4">
-                            <img src="/assets/tools/game/02-game-cassette.png" alt="Game Cassette 2" class="w-full h-full object-cover self-center flex">
-                        </div>
-                        <div class="absolute game right-[-10%] bottom-0 top-0 mt-[10%] flex items-center self-center w-auto h-[100px] sm:h-[120px] md:h-[130px] z-50" data-game="5">
-                            <img src="/assets/tools/game/01-game-cassette.png" alt="Game Cassette 1" class="w-full h-full object-cover self-center flex">
-                        </div>
-                    </div>
+                    <h3>Development</h3>
+                    <p>Fullstack projects with Python, Golang, and modern tooling.</p>
                 </div>
+                <div class="absolute right-6 bottom-0 top-0 flex items-center opacity-20 group-hover:opacity-40 transition-opacity duration-300">
+                    <Code size={100} stroke-width={1} class="text-primary dark:text-primary-light" />
                 </div>
+            </a>
 
-            <!-- 第二列 -->
-            <div class="explore-column explore-column-2 w-full flex gap-3 sm:gap-4 flex-col">
-                <div class="explore-item bg-bg-secondary/75   dark:bg-bg-secondary-dark relative overflow-hidden rounded-xl border border-primary/15 dark:border-neutral-700/50 explore-item-3 h-[180px] sm:h-[200px]"
+            <!-- HEC IA -->
+            <a href="/work/hec-ia" class="explore-item bg-bg-secondary/75 dark:bg-bg-secondary-dark relative overflow-hidden rounded-xl border border-primary/15 dark:border-neutral-700/50 h-[180px] sm:h-[200px] group"
               data-aos="fade-up-sm"
               data-aos-delay="700"
               data-aos-duration="600"
               data-aos-once="true">
                 <div class="content">
-                        <h3>Writing</h3>
-                        <p>Style guides, design notes, and quick reads.</p>
-                        <div class="mt-2 btn opacity-0 transition duration-300 ease-in-out">
-                            <!-- <Button url="/blog" size="sm">
-                                Blog
-                            </Button> -->
-                        </div>
-                    </div>
-                    <div class="explore-figure computer absolute right-[5%] sm:right-[-10%] md:right-[-7%] bottom-[14%] w-[120px] sm:w-[130px] md:w-[148px] h-auto">
-                        <img src="/assets/tools/retro-computer.png" alt="Explore 1" class="w-full h-full object-cover z-10 relative">
-                        <div class="computer-screen absolute inset-0 w-[92px] sm:w-[100px] md:w-[116px] h-[76px] sm:h-[86px] md:h-[96px] top-[10.5%] left-[10%] rounded-[8px] rounded-b-[3px] overflow-hidden z-20">
-                          <video
-                            id="explore-computer-video"
-                            src="/assets/tools/dreamcore.mp4"
-                            poster="/assets/tools/dreamcore.jpg"
-                            autoplay
-                            loop
-                            muted
-                            playsinline
-                            webkit-playsinline
-                            preload="auto"
-                            controlslist="nodownload noplaybackrate nofullscreen noremoteplayback"
-                            disablepictureinpicture
-                            class="w-full h-full object-cover"
-                          ></video>
-                        </div>
-                    </div>
-                </div>
-                <div class="explore-item bg-bg-secondary/75   dark:bg-bg-secondary-dark explore-item-3 relative overflow-hidden rounded-xl border border-primary/15 dark:border-neutral-700/50 explore-item-4 h-[200px] sm:h-[220px] md:h-[264px]"
-  data-aos="fade-up-sm"
-  data-aos-delay="800"
-  data-aos-duration="600"
-  data-aos-once="true">
-                    <div class="content">
-                        <h3>My Tools</h3>
-                        <p>Design tools I built to speed up my workflow!</p>
-                    </div>
-                    <div class=" explore-figure absolute machine right-[5%] sm:right-[-10%] md:right-[-7%] bottom-0 top-0 flex items-center">
-                        <Tools />
-                    </div>
+                    <h3>HEC IA</h3>
+                    <p>Making AI accessible to business students through workshops.</p>
                 </div>
+                <div class="absolute right-6 bottom-0 top-0 flex items-center opacity-20 group-hover:opacity-40 transition-opacity duration-300">
+                    <GraduationCap size={100} stroke-width={1} class="text-primary dark:text-primary-light" />
                 </div>
+            </a>
 
 
-            <div class="explore-column explore-column-3 w-full col-span-1 sm:col-span-2 lg:col-span-1">
-                <div class="explore-item bg-bg-secondary/75   dark:bg-bg-secondary-dark explore-item-3 relative overflow-hidden rounded-xl border border-primary/15 dark:border-neutral-700/50 explore-item-5"
-  data-aos="fade-up-sm"
-  data-aos-delay="900"
-  data-aos-duration="600"
-  data-aos-once="true">
-                    <div
-                    class="explore-figure tool-stack-box relative rounded-xl overflow-hidden w-full h-[480px] sm:h-[400px] md:h-[480px]"
-                    data-aos="fade-up-sm"
-                    data-aos-delay="100"
-                    data-aos-duration="600"
-                    data-aos-once="true"
-                    >
-                        <Matter />
-                        <div class="absolute inset-0 flex items-center justify-center text-white opacity-50">
-                        </div>
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
 </section>
 
 <style>
-    .content{
+    .content {
         position: absolute;
         bottom: 0;
         left: 0;
         top: 0;
-        max-width: 45%;
-        padding-left:1rem;
-        padding-right:0.5rem;
+        max-width: 65%;
+        padding-left: 1rem;
+        padding-right: 0.5rem;
         display: flex;
-        align-items: self-start;
+        align-items: flex-start;
         flex-direction: column;
         justify-content: center;
         transition: all 0.3s ease-in-out;
@@ -162,23 +85,28 @@ const {title, description
 
     @media (min-width: 640px) {
         .content {
-            max-width: 55%;
-            padding-left:1.25rem;
+            max-width: 60%;
+            padding-left: 1.25rem;
         }
     }
 
     @media (min-width: 768px) {
         .content {
-            max-width: 50%;
-            padding-left:1.5rem;
+            max-width: 55%;
+            padding-left: 1.5rem;
         }
     }
 
-    .content h3{
+    .content h3 {
         font-size: 1.25rem;
         line-height: 1.1;
         margin-bottom: 0.5rem;
         font-family: var(--font-brand);
+        color: var(--color-neutral-800);
+    }
+
+    html.dark .content h3 {
+        color: var(--color-neutral-100);
     }
 
     @media (min-width: 640px) {
@@ -193,16 +121,18 @@ const {title, description
         }
     }
 
-    .content p{
+    .content p {
         font-size: 0.75rem;
-        line-height: 1.3;
+        line-height: 1.4;
         font-weight: 400;
-        color: var(--color-neutral-400);
+        color: var(--color-neutral-500);
         margin-bottom: 0;
     }
-    .html .dark .content p{
-        color: var(--color-neutral-300);
+
+    html.dark .content p {
+        color: var(--color-neutral-400);
     }
+
     @media (min-width: 640px) {
         .content p {
             font-size: 0.8125rem;
@@ -215,7 +145,7 @@ const {title, description
         }
     }
 
-    .explore-item{
+    .explore-item {
         position: relative;
         border-radius: 1rem;
         overflow: hidden;
@@ -223,337 +153,15 @@ const {title, description
         display: flex;
         justify-content: start;
         align-items: center;
-    }
-    .explore-item:hover .btn{
-        opacity: 1;
+        transition: all 0.3s ease-in-out;
     }
 
-
-    @media (min-width: 768px) {
-        .explore-item-1:hover .keyboard{
-            right: -48%;
+    a.explore-item:hover {
+        border-color: var(--color-primary);
+        transform: translateY(-2px);
     }
 
-        .explore-item-3:hover .computer{
-            right: 5%;
-        }
-
-        .explore-item-4:hover .machine{
-            right: 5%;
-        }
-    }
-
-
-    @media (max-width: 767px) {
-        .explore-item-1:hover .keyboard{
-            right: -70%;
-        }
-
-        .explore-item-3:hover .computer{
-            right: -5%;
-        }
-
-        .explore-item-4:hover .machine{
-            right: -5%;
-        }
-    }
-    @media (max-width: 767px) {
-        .machine{
-            transform: scale(0.9);
-        }
-    }
-    .computer{
-        cursor: pointer;
-        transition: all .5s ease-in-out;
-        z-index: 10;
-    }
-
-    .keyboard,.game,.machine{
-        cursor: pointer;
-        transition: all .5s ease-in-out;
-        z-index: 10;
-    }
-
-
-    .game-container {
-        perspective: 1000px;
-        overflow: visible !important;
-    }
-    .explore-figure{
-        z-index: 50;
-    }
-
-
-    .explore-item-2 {
-        overflow: hidden;
-    }
-
-
-    .explore-column-1 {
-        overflow: visible;
-    }
-
-    .explore-list {
-        overflow: visible;
-    }
-
-    .explore-content {
-        overflow: visible;
-    }
-
-
-    .explore-item-2 .game {
-        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    }
-
-
-    @media (min-width: 768px) {
-        .explore-item-2:hover .game[data-game="1"] {
-            right: 8%;
-            transform: translateX(0) scale(1.0);
-            z-index: 10;
-        }
-
-        .explore-item-2:hover .game[data-game="2"] {
-            right: 17%;
-            transform: translateX(0) scale(1.02);
-            z-index: 20;
-        }
-
-        .explore-item-2:hover .game[data-game="3"] {
-            right: 26%;
-            transform: translateX(0) scale(1.05);
-            z-index: 30;
-        }
-
-        .explore-item-2:hover .game[data-game="4"] {
-            right: 35%;
-            transform: translateX(0) scale(1.02);
-            z-index: 40;
-        }
-
-        .explore-item-2:hover .game[data-game="5"] {
-            right: 42%;
-            transform: translateX(0) scale(1.0);
-            z-index: 50;
-        }
-    }
-
-
-    @media (max-width: 767px) {
-        .explore-item-2:hover .game[data-game="1"] {
-            right: 0%;
-            transform: translateX(0) scale(0.95);
-            z-index: 10;
-        }
-
-        .explore-item-2:hover .game[data-game="2"] {
-            right: 10%;
-            transform: translateX(0) scale(0.97);
-            z-index: 20;
-        }
-
-        .explore-item-2:hover .game[data-game="3"] {
-            right: 20%;
-            transform: translateX(0) scale(1.0);
-            z-index: 30;
-        }
-
-        .explore-item-2:hover .game[data-game="4"] {
-            right: 30%;
-            transform: translateX(0) scale(0.97);
-            z-index: 40;
-        }
-
-        .explore-item-2:hover .game[data-game="5"] {
-            right: 40%;
-            transform: translateX(0) scale(0.95);
-            z-index: 50;
-        }
-    }
-
-
-    .explore-item-2 .game:hover {
-        transform: scale(1.1) !important;
-        z-index: 100 !important;
-        filter: drop-shadow(0 8px 16px rgba(0,0,0,0.25));
-        transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    }
-
-
-    .explore-item-2 .game:active {
-        transform: scale(0.9) !important;
-        transition: all 0.1s ease;
-    }
-
-
-    @media (hover: none) {
-        .explore-item-2 .game {
-            transform: scale(0.9);
-        }
-
-        .explore-item-2 .game[data-game="1"] {
-            right: 0%;
-            z-index: 10;
-        }
-
-        .explore-item-2 .game[data-game="2"] {
-            right: 10%;
-            z-index: 20;
-        }
-
-        .explore-item-2 .game[data-game="3"] {
-            right: 20%;
-            z-index: 30;
-        }
-
-        .explore-item-2 .game[data-game="4"] {
-            right: 30%;
-            z-index: 40;
-        }
-
-        .explore-item-2 .game[data-game="5"] {
-            right: 40%;
-            z-index: 50;
-        }
+    html.dark a.explore-item:hover {
+        border-color: var(--color-primary-dark);
     }
 </style>
-
-<script is:inline>
-  (() => {
-
-    const videoId = 'explore-computer-video';
-    const video = document.getElementById(videoId);
-    if (!video || !(video instanceof HTMLVideoElement)) return;
-
-
-    let isPlaying = false;
-    let observer = null;
-    let playAttempts = 0;
-    const MAX_PLAY_ATTEMPTS = 3;
-
-
-    video.muted = true;
-    video.playsInline = true;
-    video.setAttribute('playsinline', '');
-    video.setAttribute('webkit-playsinline', '');
-    video.removeAttribute('controls');
-
-
-    function tryPlay() {
-
-      if (isPlaying || playAttempts >= MAX_PLAY_ATTEMPTS) return;
-
-      playAttempts++;
-
-      const playPromise = video.play();
-
-      if (playPromise !== undefined) {
-        playPromise
-          .then(() => {
-            isPlaying = true;
-            playAttempts = 0; // 成功后重置计数
-            console.log('Video started playing successfully');
-          })
-          .catch((error) => {
-            isPlaying = false;
-            console.debug(`Video autoplay attempt ${playAttempts} failed:`, error.name);
-
-            // 如果是用户交互问题，等待用户交互后重试
-            if (error.name === 'NotAllowedError') {
-              handleUserInteraction();
-            }
-          });
-      }
-    }
-
-
-    function handleUserInteraction() {
-      const interactionEvents = ['touchstart', 'click', 'scroll'];
-
-      function onInteraction() {
-        tryPlay();
-
-        interactionEvents.forEach(event => {
-          document.removeEventListener(event, onInteraction);
-        });
-      }
-
-      interactionEvents.forEach(event => {
-        document.addEventListener(event, onInteraction, { once: true, passive: true });
-      });
-    }
-
-
-    function setupIntersectionObserver() {
-      observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting) {
-
-              if (video.paused) {
-                playAttempts = 0; // reset count
-                tryPlay();
-              }
-            } else {
-              // leave viewport, pause to save resources
-              if (!video.paused) {
-                video.pause();
-                isPlaying = false;
-              }
-            }
-          });
-        },
-        {
-          root: null,
-          rootMargin: '50px', // preload
-          threshold: 0.1
-        }
-      );
-
-      observer.observe(video);
-    }
-
-    /**
-     * Handle page visibility changes
-     */
-    function handleVisibilityChange() {
-      if (!document.hidden && !video.paused) {
-        // Page is visible again and video should play
-        const rect = video.getBoundingClientRect();
-        const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
-
-        if (isInViewport) {
-          playAttempts = 0;
-          tryPlay();
-        }
-      }
-    }
-
-    // Initialize
-    function init() {
-      // Wait for video metadata to load
-      if (video.readyState >= 2) {
-        // HAVE_CURRENT_DATA
-        tryPlay();
-      } else {
-        video.addEventListener('loadeddata', tryPlay, { once: true });
-      }
-
-      // Setup viewport observer
-      setupIntersectionObserver();
-
-      // Listen for page visibility changes
-      document.addEventListener('visibilitychange', handleVisibilityChange);
-
-      // Special handling for mobile devices
-      if (/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
-        console.log('Mobile device detected, setting up additional handlers');
-        handleUserInteraction();
-      }
-    }
-
-    // Start
-    init();
-  })();
-</script>

src/components/sections/Header.astro

@@ -1,5 +1,6 @@
 ---
-import { Mail, Moon, SunMedium,Download } from "@lucide/astro";
+import { Moon, SunMedium } from "@lucide/astro";
+import { siteConfig } from "@/config/site.js";
 import menus from "@/collections/menu.json";
 import Button from "@/components/ui/Button.astro";
 import Logo from "@/components/ui/Logo.astro";
@@ -109,19 +110,19 @@ import Logo from "@/components/ui/Logo.astro";
           }
         </div>
 
-        <!-- Contact Button (Mobile) -->
+        <!-- GitHub Button (Mobile) -->
         <div class="relative z-10 w-full px-5 mt-3 sm:hidden">
-          <Button url="javascript:void(0);" type="fill" className="m-auto w-full justify-center ">
-            Resume <Download size={16} />
+          <Button url={siteConfig.social.github} type="fill" className="m-auto w-full justify-center ">
+            GitHub
           </Button>
         </div>
       </div>
 
       <!-- Desktop Actions -->
       <div class="relative hidden sm:flex items-center gap-2 ml-4 lg:ml-6">
-        <!-- Contact Button (Desktop) -->
-        <Button url="javascript:void(0);" type="fill" className="md:flex mx-1">
-          Resume <Download size={16} />
+        <!-- GitHub Button (Desktop) -->
+        <Button url={siteConfig.social.github} type="fill" className="md:flex mx-1">
+          GitHub
         </Button>
 
         <span class="separator-line  hidden sm:inline-block bg-[rgba(183,202,255,0.5)] mt-[20px] -translate-y-1/2 w-px h-[20px]"></span>

src/config/site.js

@@ -1,75 +1,45 @@
 // Get site URL from environment variable, use default value if not set
-// Note: Please set the correct PUBLIC_SITE_URL in .env file after first deployment
-const SITE_URL = import.meta.env.PUBLIC_SITE_URL || 'https://portfolio.ricoui.com/';
+const SITE_URL = import.meta.env.PUBLIC_SITE_URL || 'https://vorpax.dev';
 
 export const siteConfig = {
-	title: "Ricoui Portfolio",
-	author: "Ricoui",
+	title: "Alexandre | Vorpax",
+	author: "Alexandre",
 	url: SITE_URL,
-	mail: "hello@ricoui.com",
-	// resume add your resume file path here: /assets/resume.pdf
-	resume: "https://ricoui.com/",
+	mail: "contact at vorpax dot dev",
+	resume: "/assets/resume.pdf",
 	utm: {
 		source: `${SITE_URL}`,
 		medium: "referral",
 		campaign: "navigation",
 	},
 	meta:{
-		title: "Ricoui Portfolio",
-		description: "I'm Rico, a web designer passionate about both design and code. Currently developing a personal product for the design community.",
-		keywords: "web designer, portfolio, design, code, personal website",
+		title: "Alexandre | Business x Engineering x Infrastructure",
+		description: "M1 HEC Paris | President HEC IA | Freelance Fullstack Developer | Infrastructure Enthusiast",
+		keywords: "portfolio, developer, infrastructure, homelab, HEC Paris, engineering, fullstack",
 		image: `${SITE_URL}/og.jpg`,
-		twitterHandle: "ricouii",
+		twitterHandle: "",
 	},
-	// social links
 	social:{
-		twitter: "https://x.com/ricouii",
-		twitterName: "ricouii",
-		github: "https://github.com/ricocc",
-		blog: "https://ricoui.com",
-		xiaohongshu:"https://www.xiaohongshu.com/user/profile/5f2b6903000000000101f51f"
+		github: "https://github.com/vorpax",
+		linkedin: "https://www.linkedin.com/in/alexandre-houard-686960279/",
 	},
 };
 
-// Footer
+// Footer social links
 export const socialLinks = [
-	{
-		name: 'Twitter',
-		url: 'https://x.com/ricouii',
-		  icon: `<svg class="ic-twitter icon" width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z" fill="currentColor"></path></svg>`
-	},
 	{
 		name: 'Github',
-		url: 'https://github.com/ricocc/',
-		icon: `<svg t="1730125604816" class="icon ic-github ic-social" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12741" width="256" height="256"><path d="M511.957333 21.333333C241.024 21.333333 21.333333 240.981333 21.333333 512c0 216.832 140.544 400.725333 335.573334 465.664 24.490667 4.394667 32.256-10.069333 32.256-23.082667 0-11.690667 0.256-44.245333 0-85.205333-136.448 29.610667-164.736-64.64-164.736-64.64-22.314667-56.704-54.4-71.765333-54.4-71.765333-44.586667-30.464 3.285333-29.824 3.285333-29.824 49.194667 3.413333 75.178667 50.517333 75.178667 50.517333 43.776 75.008 114.816 53.333333 142.762666 40.789333 4.522667-31.658667 17.152-53.376 31.189334-65.536-108.970667-12.458667-223.488-54.485333-223.488-242.602666 0-53.546667 19.114667-97.322667 50.517333-131.669334-5.034667-12.330667-21.930667-62.293333 4.778667-129.834666 0 0 41.258667-13.184 134.912 50.346666a469.802667 469.802667 0 0 1 122.88-16.554666c41.642667 0.213333 83.626667 5.632 122.88 16.554666 93.653333-63.488 134.784-50.346667 134.784-50.346666 26.752 67.541333 9.898667 117.504 4.864 129.834666 31.402667 34.346667 50.474667 78.122667 50.474666 131.669334 0 188.586667-114.730667 230.016-224.042666 242.090666 17.578667 15.232 33.578667 44.672 33.578666 90.453334v135.850666c0 13.141333 7.936 27.605333 32.853334 22.869334C862.250667 912.597333 1002.666667 728.746667 1002.666667 512 1002.666667 240.981333 783.018667 21.333333 511.957333 21.333333z" p-id="12742"></path></svg>`
+		url: 'https://github.com/vorpax',
+		icon: `<svg class="icon ic-github ic-social" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="256" height="256"><path d="M511.957333 21.333333C241.024 21.333333 21.333333 240.981333 21.333333 512c0 216.832 140.544 400.725333 335.573334 465.664 24.490667 4.394667 32.256-10.069333 32.256-23.082667 0-11.690667 0.256-44.245333 0-85.205333-136.448 29.610667-164.736-64.64-164.736-64.64-22.314667-56.704-54.4-71.765333-54.4-71.765333-44.586667-30.464 3.285333-29.824 3.285333-29.824 49.194667 3.413333 75.178667 50.517333 75.178667 50.517333 43.776 75.008 114.816 53.333333 142.762666 40.789333 4.522667-31.658667 17.152-53.376 31.189334-65.536-108.970667-12.458667-223.488-54.485333-223.488-242.602666 0-53.546667 19.114667-97.322667 50.517333-131.669334-5.034667-12.330667-21.930667-62.293333 4.778667-129.834666 0 0 41.258667-13.184 134.912 50.346666a469.802667 469.802667 0 0 1 122.88-16.554666c41.642667 0.213333 83.626667 5.632 122.88 16.554666 93.653333-63.488 134.784-50.346667 134.784-50.346666 26.752 67.541333 9.898667 117.504 4.864 129.834666 31.402667 34.346667 50.474667 78.122667 50.474666 131.669334 0 188.586667-114.730667 230.016-224.042666 242.090666 17.578667 15.232 33.578667 44.672 33.578666 90.453334v135.850666c0 13.141333 7.936 27.605333 32.853334 22.869334C862.250667 912.597333 1002.666667 728.746667 1002.666667 512 1002.666667 240.981333 783.018667 21.333333 511.957333 21.333333z" fill="currentColor"></path></svg>`
 	},
 	{
-	  name: 'ZCool',
-	  url: 'https://www.zcool.com.cn/u/13170647',
-	  icon: `<svg t="1713091842741" class="ic-zcool ic-social icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5776" width="22" height="22"><path d="M352.512 352.427C249.088 375.595 170.667 478.208 170.667 594.56a251.861 251.861 0 0 0 499.328 46.848 85.333 85.333 0 0 1 48.17-61.739c20.566-9.514 38.827-20.224 54.784-31.744-36.821-25.728-50.602-79.445-20.053-120.917a418.133 418.133 0 0 0 59.35-113.11c-46.251 21.76-98.134 39.937-156.502 53.974-53.803 12.928-102.059-27.221-105.216-77.397-50.347 24.405-113.92 43.093-198.059 61.952z m469.12 125.184c49.75 0 81.75-18.091 117.077-25.046-13.866 61.782-64.042 148.907-184.789 204.587a337.195 337.195 0 0 1-668.544-62.55c0-155.562 105.259-293.375 248.49-325.418 167.297-37.504 243.371-66.859 301.953-183.85 29.397 56.874 29.397 123.391 0 199.551 120.149-28.586 216.49-79.018 289.024-151.381 0 204.885-77.739 306.603-103.211 344.107zM572.459 645.376c24.917 6.23 24.917 35.499 24.917 43.52v43.563c0 23.978-14.592 32.981-36.01 32.981H330.367c-20.267-3.67-31.317-14.72-31.317-33.152v-40.533c0-20.267 9.216-34.987 18.389-46.08L451.968 501.93H321.152c-12.885 0-22.101-9.216-22.101-25.771-1.878-31.36 3.669-81.067 27.605-92.16 3.712 0 3.712 5.547 3.712 7.381-3.712 7.382 0 12.886 9.216 12.886h165.803c36.864 0 58.965 0 71.893-3.67 5.547-1.834 9.216 0 7.381 5.547-3.712 12.885-1.877 27.605-1.877 40.533 0 42.368 0 58.966-33.152 92.118L435.371 664.107l121.6-0.086c13.482 0 15.53-6.229 15.53-18.645z" p-id="5777" fill="currentColor"></path></svg>`
-	},
-
-	{
-	  name: 'Behance',
-	  url: 'https://www.behance.net/ricoui',
-	  icon: `<svg class="ic-behance ic-social" width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-		<g clip-path="url(#clip0_1771_115)">
-		<path fill-rule="evenodd" clip-rule="evenodd" d="M6.71692 14.0126C6.41937 14.1494 6.00062 14.2186 5.46449 14.2186H2.46336V11.0969H5.50708C6.03611 11.1017 6.44885 11.1682 6.74258 11.2951C7.26834 11.5236 7.52931 11.9413 7.52931 12.5514C7.52931 13.271 7.25906 13.7563 6.71692 14.0126ZM2.46336 6.57746H5.15439C5.74566 6.57746 6.23266 6.63878 6.61592 6.76037C7.05814 6.93648 7.27926 7.29602 7.27926 7.84268C7.27926 8.33273 7.1111 8.67551 6.77698 8.86944C6.44067 9.06336 6.00445 9.16032 5.46941 9.16032H2.46336V6.57746ZM8.22813 9.96904C8.85817 10.1871 9.33315 10.5309 9.6569 11.0021C9.97683 11.4722 10.1379 12.0446 10.1379 12.7175C10.1379 13.4115 9.95445 14.0341 9.58593 14.5839C9.35335 14.9482 9.06181 15.2558 8.7113 15.5048C8.31767 15.7915 7.85306 15.9859 7.31529 16.0929C6.77807 16.1987 6.19717 16.2501 5.56932 16.2501H0V4.54544H5.97278C7.48017 4.56641 8.54697 4.98203 9.17591 5.79232C9.55317 6.29024 9.74262 6.88511 9.74262 7.57905C9.74262 8.29238 9.55317 8.86839 9.171 9.30288C8.95699 9.54555 8.64306 9.7683 8.22813 9.96904ZM12.7798 6.54758V5.09105H18.0762V6.54758H12.7798ZM19.1874 9.05104C19.5652 9.56573 19.8076 10.1627 19.9179 10.8409C19.9828 11.2371 20.0085 11.8121 19.9976 12.5595H13.3385C13.3784 13.4269 13.6934 14.036 14.2961 14.385C14.6603 14.602 15.0992 14.711 15.6141 14.711C16.1562 14.711 16.5995 14.5784 16.9391 14.3143C17.1264 14.1707 17.2907 13.9725 17.4321 13.7189H19.872C19.8076 14.2309 19.5111 14.7535 18.9865 15.2834C18.1681 16.124 17.0215 16.5454 15.548 16.5454C14.3311 16.5454 13.2577 16.1911 12.3296 15.4804C11.3971 14.7713 10.9336 13.6151 10.9336 12.0155C10.9336 10.5154 11.3534 9.36499 12.192 8.56466C13.0328 7.7659 14.1203 7.3639 15.4601 7.3639C16.2561 7.3639 16.9719 7.49965 17.6095 7.77009C18.2483 8.04001 18.7735 8.4677 19.1874 9.05104ZM13.3975 11.0658H17.5167C17.4731 10.4646 17.259 10.0102 16.8801 9.69728C16.4969 9.38648 16.0252 9.23134 15.4612 9.23134C14.8497 9.23134 14.372 9.39644 14.0346 9.72611C13.6972 10.0558 13.4843 10.5023 13.3975 11.0658Z" fill="currentColor"></path>
-		</g>
-		<defs>
-		<clipPath id="clip0_1771_115">
-		<rect width="20" height="20" fill="currentColor"></rect>
-		</clipPath>
-		</defs>
-	  </svg>`
+		name: 'LinkedIn',
+		url: 'https://www.linkedin.com/in/alexandre-houard-686960279/',
+		icon: `<svg class="icon ic-linkedin ic-social" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="256" height="256"><path d="M847.7 112H176.3c-35.5 0-64.3 28.8-64.3 64.3v671.4c0 35.5 28.8 64.3 64.3 64.3h671.4c35.5 0 64.3-28.8 64.3-64.3V176.3c0-35.5-28.8-64.3-64.3-64.3zM365 798H229V404h136v394zm-68-448c-43.6 0-79-35.4-79-79s35.4-79 79-79 79 35.4 79 79-35.4 79-79 79zm519 448H680V607c0-45.6-0.8-104.2-63.5-104.2-63.5 0-73.3 49.6-73.3 100.9V798H407V404h130.4v53.9h1.8c18.2-34.4 62.6-70.7 128.8-70.7 137.9 0 163.3 90.7 163.3 208.6V798z" fill="currentColor"></path></svg>`
 	},
 	{
 		name: 'RSS',
 		url: '/rss.xml',
-		icon: `<svg t="1730123988138" class="icon ic-rss ic-social " viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11766" width="256" height="256"><path d="M329.143 768q0 45.714-32 77.714t-77.714 32-77.715-32-32-77.714 32-77.714 77.715-32 77.714 32 32 77.714z m292.571 70.286q1.143 16-9.714 27.428-10.286 12-26.857 12H508q-14.286 0-24.571-9.428T472 844.57q-12.571-130.857-105.429-223.714T142.857 515.43q-14.286-1.143-23.714-11.429t-9.429-24.571v-77.143q0-16.572 12-26.857 9.715-9.715 24.572-9.715h2.857q91.428 7.429 174.857 46T472 515.43q65.143 64.571 103.714 148t46 174.857z m292.572 1.143q1.143 15.428-10.286 26.857-10.286 11.428-26.286 11.428H796q-14.857 0-25.429-10T759.43 843.43Q752.57 720.57 701.714 610T569.43 418t-192-132.286T144 227.43q-14.286-0.572-24.286-11.143t-10-24.857v-81.715q0-16 11.429-26.285 10.286-10.286 25.143-10.286H148q149.714 7.428 286.571 68.571t243.143 168q106.857 106.286 168 243.143t68.572 286.572z" p-id="11767"></path></svg>`
+		icon: `<svg class="icon ic-rss ic-social" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="256" height="256"><path d="M329.143 768q0 45.714-32 77.714t-77.714 32-77.715-32-32-77.714 32-77.714 77.715-32 77.714 32 32 77.714z m292.571 70.286q1.143 16-9.714 27.428-10.286 12-26.857 12H508q-14.286 0-24.571-9.428T472 844.57q-12.571-130.857-105.429-223.714T142.857 515.43q-14.286-1.143-23.714-11.429t-9.429-24.571v-77.143q0-16.572 12-26.857 9.715-9.715 24.572-9.715h2.857q91.428 7.429 174.857 46T472 515.43q65.143 64.571 103.714 148t46 174.857z m292.572 1.143q1.143 15.428-10.286 26.857-10.286 11.428-26.286 11.428H796q-14.857 0-25.429-10T759.43 843.43Q752.57 720.57 701.714 610T569.43 418t-192-132.286T144 227.43q-14.286-0.572-24.286-11.143t-10-24.857v-81.715q0-16 11.429-26.285 10.286-10.286 25.143-10.286H148q149.714 7.428 286.571 68.571t243.143 168q106.857 106.286 168 243.143t68.572 286.572z" fill="currentColor"></path></svg>`
 	},
-
-
 ];
-
-

src/content/post/design-style-guide-neo-brutalism/index.mdx

@@ -1,158 +0,0 @@
----
-title: Design Style Guide - Neo Brutalism
-publishDate: 2025-06-26
-read: 10
-description: Design Style Guide - Neo Brutalism
-tags:
-  - Design Style
-  - Neo-Brutalism
-  - Neo Brutalism
-img: "/assets/blog/cover-neobrutalism.jpg"
-img_alt: "Neo Brutalism"
----
-
-In the previous article, we discussed the basics of Brutalism. Now we come to my favorite chapter - the previous article was even a setup for this one. Let's talk about "Neo-Brutalism" and its derived design styles.
-
-Previous article: <a href="/blog/web-design-style-guide-brutalism" target="_blank">Web Design Style Guide: Brutalism</a>
-
-In fact, popular design works currently classified as Brutalism can mostly be categorized as Neo-Brutalism. Compared to the "no design" philosophy that original Brutalism insisted on, today it still belongs to a relatively niche design culture. Neo-Brutalism, however, is more widely accepted and loved, extensively applied in independent creators' portfolio websites, creative marketing campaigns, brand planning, and experimental digital art projects.
-
-![Searching for neo-brutalism keywords shows popular visual design works](./01.jpg)
-
- <small class="block text-center"> Searching for neo-brutalism keywords shows popular visual design works </small>
-
-## Neo-Brutalism
-
-Neo-Brutalism: Also written as Neu-Brutalism or New Brutalism.
-
-The rise of the internet era has accelerated everything, driving technological innovation, aesthetic evolution, and cultural change. The characteristics of the digital age need no further elaboration. Simply put, the rise of Neo-Brutalism is related to the rebellious spirit of the digital age. Designers and artists drew inspiration from mid-20th century architectural Brutalism, bringing its rugged, raw aesthetics to the modern digital stage in the form of "Neo-Brutalism," challenging current mainstream design culture and pursuing authentic, unprocessed, even "anti-UX" expression.
-
-![neobrutalism.dev](./02-neobrutalism.jpg)
-
- <small class="block text-center">  <a href="https://www.neobrutalism.dev/" target="_blank">neobrutalism.dev</a> - Open-source component library with Neo-Brutalist style component system</small>
-
-### Neo-Brutalism Style Characteristics
-
-Neo-Brutalism is the modern revival of Brutalism in digital design, especially prominent in web design and UI/UX fields. It inherits architectural Brutalism's "exposed structure" and function-first philosophy, combined with modern technology and digital media characteristics, forming a unique visual and interaction style. Characteristics in web and UI design include:
-
-* Conflicting color schemes: Often uses bright, vivid tones like black-white, red-green-blue color combinations, creating strong visual impact, abandoning soft gradients.
-* Thick outlines and heavy shadows: Black outline strokes and shadows seem to inherit the rugged aesthetic of architecture.
-* Flat design: Designs often consist of flat elements, illustrations, patterns, and huge text blocks, these elements may bring a sense of chaos.
-* Special typography: Typography plays a very important role in Neo-Brutalism, being the element that dominates its visual effect.
-* Unique illustrations and animations: Neo-Brutalist illustrations and component design themes are more diverse. Illustration and animation designs are mostly strongly visual styles.
-* Function over form: Anti-UX interaction experience, advocating minimalism, inheriting the utilitarian essence of Brutalist architecture.
-
-![Sepideh Yazdi Neo-Brutalist visual style UI design work](./03.webp)
-
- <small class="block text-center"> Sepideh Yazdi Neo-Brutalist visual style UI design work </small>
-
-![gumroad](./04.jpg)
-
- <small class="block text-center"> <a href="https://gumroad.com/" target="_blank">gumroad</a> design style is also a leader in Neo-Brutalist design </small>
-
-The core of original Brutalism is "no design, no decoration." What makes Neo-Brutalism particularly interesting to me is that it presents a paradox in digital design:
-
-Although it inherits Brutalism's ruggedness and imperfection, in visual presentation, it often demonstrates a prominent "intentional design sense" through deliberate irregularity and strong contrast. The unconventional visual language manifests in results as intentional design sense and strong visual impact, which actually makes Neo-Brutalism increasingly popular and sought after in the digital age - the contradiction between anti-design attitude and design-heavy outcomes.
-
-![mux](./05.jpg)
-
- <small class="block text-center"> The Internet's video API - <a href="https://www.mux.com/" target="_blank">mux.com</a></small>
-
-![sui.io](./06-sui-io-overflow.jpg)
- <small class="block text-center"> <a href="https://sui.io/overflow" target="_blank">sui.io/overflow</a></small>
-
-Neo-Brutalism is commonly used by independent designers, creative agencies, brands, events, fashion and other scenarios, highlighting individuality and anti-mainstream style to attract young users, actually becoming part of mainstream design. Of course, design projects are absolutely complex systems. In fact, we rarely completely classify a project or website into a certain design school. We look at the complete content it expresses from design concepts, logic, and visuals.
-
-![Colorfolio X](./07.jpg)
-
- <small class="block text-center"> Colorfolio X personal portfolio website template </small>
-
-Neo-Brutalism's visual style and philosophy are particularly good choices for brands. Strong visual style and cultural characteristics make users remember the brand deeply and attract like-minded people.
-
-![lepuzz](./08.jpg)
-
-  <small class="block text-center"> Wonderfully weird world Le Puzz - <a href="https://lepuzz.com/" target="_blank">lepuzz.com</a> </small>
-
-![goodeatn](./09-goodeatn.jpg)
-
-  <small class="block text-center">Plant snack brand - <a href="https://goodeatn.com/" target="_blank">goodeatn.com</a></small>
-
-![budapestpark](./10-budapestpark-hu.jpg)
-
- <small class="block text-center">Budapest Park - <a href="https://www.budapestpark.hu/en" target="_blank">budapestpark.hu</a> </small>
-
-![byooooob](./11-byooooob.jpg)
-
-<small class="block text-center"> <a href="https://www.byooooob.com/" target="_blank">byooooob.com</a> </small>
-
-
-
-## The Development History of Brutalism
-
-As we know, in design history, the cycle of nostalgia and revival is almost an eternal theme. Each era's design trends are re-examined and honored at some point in the future. We talked about Brutalism born in the mid-20th century - its unique philosophy was considered revolutionary at the time because it challenged traditional aesthetics, attempting to respond to social needs in an honest and direct way.
-
-However, Brutalism was not "popular" from the beginning. It had some influence in the mid-20th century (especially in public buildings like schools, libraries, government buildings), but was also heavily criticized for its "cold," "oppressive" and unadorned appearance.
-
-![Geisel](./12-brazilfox.jpg)
-<small class="block text-center"> Geisel Library </small>
-
-*Geisel Library* is a landmark building designed by William Leonard Pereira in the late 1960s, a striking example of Brutalist architecture.
-
-Historically, its development has been up and down:
-
-* Mid-20th century (1950s-1970s): Brutalism emerged in the context of post-war reconstruction, mainly used for public buildings in Europe and North America (such as schools, government buildings), symbolizing modernism's pursuit of functionality and social equality. Its "cold" and unadorned appearance was both revolutionary and controversial.
-
-* Late 20th century (1980s-early 2000s): With the rise of Postmodernism, Brutalism was criticized for its monotony and lack of humanized design, many buildings were abandoned or renovated, gradually marginalized.
-
-* 21st century (2010s to present): With nostalgic sentiment and re-examination of modernism, Brutalism has gradually revived, especially in digital design and visual art fields, evolving into "Neo-Brutalism." This revival is not a simple reproduction, but combines modern aesthetics with anti-mainstream cultural demands.
-
-Therefore, Brutalism's ups and downs reflect changes in design trends and social values. The advent of the digital age provided a broader stage for Neo-Brutalism. Designers reinterpreted its rugged aesthetics through graphic, web and UI design, transforming it from cold, raw architectural language into personality-filled visual expression.
-
-
-
-## The Future of Neo-Brutalism
-
-As digital design continues to evolve, Neo-Brutalism may further integrate into mainstream design language, becoming a more widely applied style. Especially as it merges with other retro styles or emerging trends, creating more diversified design possibilities, such as Cyber Brutalism, Postmodern Brutalism, etc. This is actually easy to understand - the rebellious spirit and rugged aesthetics of Brutalism have their soil in every era. "The more advanced, the more primitive." Highly digitized, fast-paced society instead stimulates desire for imperfection and authenticity.
-
-### Cyber Brutalism
-
-The emergence of Cyber Brutalism stems from the digital age's enthusiasm for Cyberpunk culture, and Neo-Brutalism's emphasis on "unfinished feeling" and "exposed structure." Cyberpunk culture's depiction of future technology and social alienation resonates with Neo-Brutalism's rugged aesthetics, especially in design demands for emerging technology fields like virtual reality (VR), augmented reality (AR) and Metaverse. Designers hope to create a visual language that is both futuristic and primitively rugged by combining the two.
-
-It can be felt in films and games, such as the "Blade Runner" film series and the game "Cyberpunk 2077."
-
-![Image](./14.webp)
-
-<small class="block text-center"> "Blade Runner 2049" </small>
-
-![Image](./14.jpg)
-
-
-
-### Industrial Brutalism
-
-Strictly speaking, this is not a widely recognized or formally named design school. Brutalism itself already emphasized "function first" and "material authenticity" in the 1950s-70s, while industrial style further strengthened this utilitarian aesthetic in contemporary interior design and product design. Therefore, "Industrial Brutalism" can be seen as the convergence of Brutalism's original philosophy with modern industrial style popular trends.
-
-Especially in recent years, industrial style has become popular in interior design (such as loft apartments, cafes) and product design (such as vintage mechanical equipment).
-
-In visual culture, manifestations of this style can be traced back to last century's science fiction films, such as: "Alien" (1979) series, "The Terminator" (1984) series, etc. The films' depictions of future worlds, and mechanical world visions, combined with cold metallic texture and decaying industrial scenes, also reflect Industrial Brutalism's visual language. Of course, the films' aesthetic style itself is complex and diverse, cannot be simply classified, but from their aesthetics and visual language, corresponding elements and expressions can be found.
-
-### Final Words
-
-Looking back at last century's sci-fi films, due to computer effects level limitations, most visual effects were made using real materials. Compared to today's CG images, this highlights a raw, authentic texture.
-
-While these aren't strictly Brutalist works, they all embody some of Brutalism's core philosophies to some extent. These works' visual language connection with Brutalism is more reflected in design philosophy and aesthetic pursuit rather than direct style imitation. Their influence is more reflected in inspiring designers to explore similar visual language, which is connected to Brutalism's spirit of pursuing authenticity and functionality.
-
-
-### Preview
-
-In the next chapter, I'm still choosing topics, might want to talk about Retro-futurism or Cyberpunk-related styles, and need to think about how to write them properly.
-
-Retro-futurism philosophy is very interesting, "looking at the future from the past and looking at the past from the future," whether in philosophy or visual style, it's an interesting and philosophically deep design trend.
-
-![Berlin05](./15-Berlin05-wki-tent.jpg)
-
-For example, the upcoming "Fantastic Four: First Steps" has a background story set in a retro-futuristic world inspired by the 1960s. Looking forward to a retro-futuristic visual feast.
-
-![Retro-futurism](./16.jpg)
-
-![Berlin05](./17.webp)

src/content/post/design-style-guide-retro-and-vintage/index.mdx

@@ -1,145 +0,0 @@
----
-title: Design Style Guide - Retro Design
-publishDate: 2025-07-09
-read: 9
-description: Design Style Guide - Retro
-tags:
-  - Retro & Vintage
-  - Web Design
-  - Design Style
-img: "/assets/blog/cover-retro.jpg"
-img_alt: ""
----
-
-Hello everyone, I'm Rico. Before continuing our journey through design styles, we need to first understand Retroism.
-
-Time moves forward, yet people can't help but reminisce about the past - design trends are no exception. This is a universal phenomenon in human culture and psychology: nostalgia. No matter how society progresses or technology innovates, people often find emotional comfort, identity, or cultural roots by looking back at the past.
-
-In the design field, this phenomenon is particularly evident, because design is not only an embodiment of function, but also a carrier of culture, emotion, and zeitgeist - progress and nostalgia coexist. In design history, the cycle of nostalgia and revival is almost an eternal theme. Each era's design trends are re-examined and honored at some future moment.
-
-![01.jpg](01.jpg)
-
-
-<small class="block text-center"> "Once Upon a Time in Hollywood" poster </small>
-
-![seasoned.koto.studio.jpg](02.jpg)
-
-<small class="block text-center"> <a href="https://seasoned.koto.studio/" target="_blank">Seasoned brand design studio - seasoned.koto.studio</a> </small>
-
-
-
-**Retro design is a design style that evokes nostalgia by borrowing visual elements, colors, typography, and overall atmosphere from specific past eras. It centers on retrospection and tribute to history, typically creating familiarity and emotional resonance by recreating the aesthetic characteristics of a certain era.**
-
-When we talk about retro design, it can refer both to a specific style and to an overall concept. Retro design is not a single form, but a broad design category. It can point to different eras, such as the Art Deco style of the 1920s, the Psychedelic Style of the 70s, or the Neon Style of the 80s. It can be said that retro design encompasses all historical content on the past timeline, and in different geographical locations and cultural backgrounds, it presents even more diverse appearances.
-
-![03.jpg](03.jpg)
-<small class="block text-center"> <a href="https://rtrfm.com.au/" target="_blank">RTRFM - The Sound Alternative</a> </small>
-
-
-![malaproject.jpg](04.jpg)
-<small class="block text-center"> <a href="https://malaproject.com/" target="_blank">Retro restaurant website - MaLaProject</a> </small>
-
-
-So what does retro design style look like? Let's take a brief look at some representative retro designs:
-
-### 1. 1920s-30s: Art Deco
-
-This was an era full of luxury, modernity, and geometric beauty. Art Deco merged the mechanical aesthetics of the late Industrial Revolution with the simple lines of early modernism, emphasizing symmetry, streamlined design, and luxurious decorative details. It features geometric shapes, fan decorations, stepped compositions, and materials like metal, marble, and ivory, with bold color combinations of gold, black, silver, and emerald green.
-
-This style remains popular in contemporary high-end brand design, such as luxury packaging, wedding invitations, or high-end event invitations. Its refinement and symmetry give designs a solemn and elegant temperament.
-
-![009.jpg](05.jpg)
-
-### 2. 1950s: Nostalgic Advertising Style
-
-(Vintage & Retro Advertising) If the 20s-30s were synonymous with luxury and modernity, then the 50s were symbols of warmth and hope. Post-war economic recovery filled people's lives with vitality and optimism, and design styles reflected this social atmosphere. 50s design features hand-drawn illustrations, soft tones (like pink, light blue, cream yellow), and rounded fonts, commonly seen in food packaging, restaurant menus, and advertising posters.
-
-Design from this period is full of family atmosphere, with a sense of intimacy and human touch. Retro posters, classic car advertisements, and neon signs all convey a relaxed and pleasant lifestyle. Today, this style is often used by brands hoping to convey "classic" or "traditional" values.
-
-![Nostalgic advertising.jpg](06.jpg)
-
-
-### 3. 1970s: Hippie and Psychedelic Style
-
-(Psychedelic Art)
-
-The 70s were a rebellious and free era, a spirit manifested in design through bold colors, psychedelic patterns, and exaggerated fonts. Psychedelic style design is often full of visual impact, with gradients and lighting effects making images appear dreamlike and unreal.
-
-This style's design is commonly seen in music album covers, posters, and trendy art works, representing the 70s younger generation's pursuit of freedom and individuality. Today, psychedelic style is widely applied to music festival visual design, trendy apparel, and brand images related to youth culture - its bold, unrestrained character remains an important inspiration source for many designers.
-
-![3-2.jpg](08.jpg)
-
-### 4. 1980s: Neon and Futurism
-
-(Neon Retro Futurism)
-
-The 80s were the intersection of technology and pop culture. This era's design is marked by bright neon colors, geometric shapes, and digitized futurism. Neon signs, CRT monitor scan line effects, and grid backgrounds became classic 80s design symbols.
-
-This style was widely used in music videos, video game covers, and movie posters (like "Blade Runner") at the time, becoming a symbol of 80s pop culture. Today, this style has been rediscovered and applied to tech website design, video game UI, trendy apparel brands, and sci-fi film visuals, both evoking the past and inspiring imagination about the future.
-
-
-![lost-in-space.gif](09.gif)
-<small class="block text-center"> <a href="https://loox.app/lost-in-space" target="_blank">loox.app/lost-in-space</a> </small>
-
-
-![Neon](10.jpg)
-<small class="block text-center"> <a href="https://sunsetrace.ginrin.com/" target="_blank">sunsetrace.ginrin.com</a> </small>
-
-
-![Fluorescent nights and faded memories](11.jpg)
-<small class="block text-center"> <a href="https://www.instagram.com/thelostvibe0/" target="_blank">Fluorescent nights and faded memories</a> </small>
-
-
-### 5. 1990s: Retro Tech
-
-(Retro Tech / Y2K aesthetic)
-
-The 90s were the internet's infancy, with design full of early tech symbols like pixel style, low-resolution images, and simple interfaces. The classic Windows 95 interface and early webpage layouts became representative of this period.
-
-![RadioPapi FM](12.jpg)
-<small class="block text-center"> <a href="https://www.radiopapi.fm/" target="_blank">RadioPapi FM website's retro design</a> </small>
-
-This style also spawned the "Y2K" (**Year 2000 Kilo**) design language, combining futuristic tech sense with the rough aesthetics of the internet's early days, commonly seen in graphic design, web design, and game UI. Today, Y2K style has been rediscovered and applied to trendy brands, electronic music album covers, and youthful digital product design, evoking nostalgia for the internet's early days.
-
-![Y2K.jpg](13.jpg)
-
-Besides these era-specific retro styles, some regional styles also occupy important positions in retro design.
-
-For example, Bauhaus style originated in early 20th century Germany and is one of the founders of modern design. Bauhaus emphasizes simplicity and functionality, using geometric shapes, basic colors, and sans-serif fonts extensively in design, becoming an inspiration source for minimalist design.
-
-![nodcoding](14.jpg)
-<small class="block text-center"> <a href="https://nodcoding.com/" target="_blank">Bauhaus style - nodcoding.com</a> </small>
-
-
-![Nike x The Bauhaus](15.jpg)
-<small class="block text-center"> <a href="https://nikebauhaus.vercel.app/" target="_blank">Nike x The Bauhaus </a> </small>
-
-### Showa Retro (昭和レトロ/Showa Retro)
-
-Japanese retro style displays unique Eastern charm, such as Showa Retro, which merges Japanese and Western elements with bright colors and nostalgic atmosphere. The design color scheme tends toward strong, deep, rich colors, creating intense visual impact and special Eastern cultural charm.
-
-![Showa Retro](16.jpg)
-
-<small class="block text-center"> "Showa 40 Year Man" magazine cover</small>
-
-
-### Distinguishing Vintage and Retro
-
-When describing retroism, we often use Vintage and Retro, which refer to different concepts.
-
-- **Vintage**
-
-Refers to items or designs that genuinely come from a past era, usually with certain historical value and collectible significance, emphasizing authenticity, directly from a past era, possibly bearing marks of time. Vintage is typically used to describe actual old items (like antique furniture, old clothes, old records) or design styles. For example, an original 1950s poster.
-
-![pitokmm-it.jpg](17.jpg)
-<small class="block text-center"> <a href="http://pitokmm.it/" target="_blank">Pitok Motor Museum </a> </small>
-
-- **Retro** refers to imitating or borrowing design styles from a past era, but not genuinely from that era - rather modern re-creation. Although inspired by history, the work itself is modern, emphasizing tribute and recreation of past styles, but usually incorporating modern elements, adapting to contemporary aesthetics and functional needs.
-
-Simply put, Vintage is "genuine old items," while Retro is "modern retro design."
-
-### **Summary**
-
-Retro design style is a design method that evokes nostalgia by recreating aesthetic characteristics of specific past eras. It's widely applied in graphic design, UI design, and web design, with different era retro styles each having unique features. Its greatest charm lies in its ability to touch people's nostalgic emotions by recreating past aesthetic symbols, evoking emotional resonance through reminiscing about the past, while giving design more spiritual value.
-
-Understanding retroism, we know that every coordinate point on the past timeline, due to its specific era culture and historical characteristics, produced specific era styles. And nostalgic sentiment mixes and combines past era styles with the present, deriving more interesting design works - this is what we want to focus on exploring in the future. These products merging different eras, cultures, designs, and other diverse achievements are so magical. Hope to enjoy this journey exploring design styles together with everyone.

src/content/post/design-style-guide-spacepunk/index.mdx

@@ -1,120 +0,0 @@
----
-title: Understanding the Niche Style - Spacepunk
-publishDate: 2025-08-10
-read: 12
-description: Design Style Guide - Spacepunk
-tags:
-  - Spacepunk
-  - Spacepunk
-  - Design Style
-img: "/assets/blog/cover-spacepunk.jpg"
-img_alt: ""
----
-
-I'm Rico, welcome to Punk aesthetics.
-
-The spiritual core of Punk is **rebellion and deconstruction**. Beyond the familiar Cyberpunk and Steampunk, there's also Spacepunk, Classic Punk, Post-Apocalyptic Punk, Dieselpunk, Atompunk, Biopunk, and more. Almost any word can combine with "Punk" to derive a unique aesthetic style.
-
-Let's first discuss the relatively niche Spacepunk.
-
-Definition - Punk, cited from Wikipedia:
-
-> Punk culture is a subculture that originated in Britain in the 1970s, initially expressed through minimalist rock music, later developing into a comprehensive cultural movement integrating music, fashion, and ideology. Its core spirit includes rebelliousness, subversiveness, and anarchism, often expressing protest against social injustice through raw melodies, straightforward lyrics, and anti-traditional fashion.
-
-## Spacepunk and NASA-Punk
-
-"Spacepunk" is a style combining space sci-fi themes with the "Punk" spirit, merging punk's rebellious, anti-establishment themes with the futuristic aesthetics and technology of space exploration. It typically features retro-futuristic style, drawing inspiration from the space race era, exploring themes of technological advancement, cosmic adventure, and social rebellion in space settings.
-
-![](./001.jpg)
-
-<small class="block text-center"> Raygun Gothic illustration - With exaggerated lines and bold imagination, depicting extremely futuristic space scenes, is the prototype of early Spacepunk visuals.</small>
-
-Although the term "Space Punk" has no exact proposal time, its prototype can be traced back to the 1979 film "Alien," and gradually became popular and widely recognized as an independent style label after the 2002 TV series "Firefly" aired. The "Guardians of the Galaxy" series also carries some "punk" characteristics.
-
-Additionally, Bethesda Game Studios explicitly proposed the concept of "NASA-Punk" during the development of "Starfield" (2023 game), defining the game's art style. The art team mentioned that "NASA Punk" inspiration comes from NASA spacecraft design and human space history, aiming to create a retro-futuristic feel based on realistic technology.
-
-![](./002-a-collection-of-my-best-starfield.jpg)
-
-<small class="block text-center"> "Starfield" game screenshot - Self-positioned as "NASA Punk" aesthetic - by reddit </small>
-
-But actually, there's a difference between the two. Spacepunk inherits punk culture's rebellious and dystopian spirit, focusing on marginalized groups' struggles; NASA Punk embodies optimistic exploration spirit, a retro-futurism based on existing aerospace technology, with weaker critical intensity than typical Spacepunk.
-
-## Historical Context
-
-### I. 1960–1970: Emergence Under the Space Race
-
-In the 1960s, the space race was in full swing. Humanity was filled with infinite optimism and longing for space. The development of aerospace technology provided possibilities for exploring extraterrestrial worlds. Spacepunk began to emerge in this context, presenting a highly idealized techno-romantic style.
-
-![](./003.jpg)
-
-<small class="block text-center"> Apollo 11 moon landing</small>
-
-Works from this period are more like the "spiritual predecessor of Spacepunk" — they cultivated the visual foundation of "space exploration" but hadn't yet integrated "punk's rebellious core." The design style manifested as **highly idealized techno-romanticism**.
-
-In design style, during this period, spacecraft mostly adopted sleek streamlined designs, abandoning redundant decoration to pursue resistance-free travel between stars, highlighting extreme pursuit of speed and efficiency. Colors were dominated by bright metallic tones, paired with orange, creating a visually hopeful atmosphere. Details emphasized technology's precision, such as bubble helmet's transparent material, neat cable layouts on spacesuits, demonstrating trust in technical perfection while incorporating imagination of commercialization elements.
-
-![](./004-2001.jpg)
-
-<small class="block text-center">"2001: A Space Odyssey" 1968</small>
-
-This stage, driven by the space race, presented idealized, romanticized characteristics, integrating humanity's infinite longing for space into design - a perfect fusion of technology and dreams.
-
-![](./005-2001.jpg)
-
-<small class="block text-center"> "2001: A Space Odyssey" 1968 - Its bold innovation and visual approach influenced subsequent sci-fi and space films, widely recognized as a milestone in film history.</small>
-
-### II. 1980–1990: Development After Cold War Cooling
-
-As the Cold War cooled, the space race's heat gradually subsided, and humanity's fantasies about space gained more realistic coldness. Spacepunk aesthetics entered a "ruins" phase, with visual elements beginning to show decay and weathering. Works from this period began to have a "dystopian" undertone, with some cases' "roughness" and "questioning of authority" approaching Spacepunk.
-
-Spacecraft were no longer perfectly streamlined, but bore real traces of wear and tear - damaged, mottled components, rusted, peeling metal shells telling of space environment's harshness and spacecraft's wear. Colors leaned toward gray, faded tones, lacking the 60s' brightness and vitality, adding depression and heaviness, making space no longer distant but full of real-life texture. This reflects society's diminished enthusiasm for space exploration post-reality mindset, and concerns about technical limitations and resource depletion.
-
-Works from this period had more life atmosphere and loneliness, manifesting as **combination of industrial realism and decay aesthetics**.
-
-![](006-Starship-Troopers.jpg)
-
-<small class="block text-center"> "Starship Troopers" (1997) - Though not pure Spacepunk, provides system critique perspective through militarism extremism, I believe it also has some Spacepunk visual experience and characteristics.</small>
-
-![](007-Serenity.jpg)
-
-<small class="block text-center"> "Serenity"</small>
-
-After Cold War cooling, Spacepunk shed utopian glory, presenting in a more realistic, colder posture. Decayed visual elements and integrated life scenes fully display space exploration's hardship and loneliness - a realistic return to space fantasy.
-
-### III. To Present: Digital Ruins and Retro Future
-
-Entering the 21st century to present, digital technology development and technological progress have brought new characteristics to cognition and assumptions about space and the future. Compared to previous styles, digital information, new crafts, and technological humanistic concepts have become new cores. Combined with nostalgic sentiment for last century's aerospace era, from a broad concept, it's easier to associate with **Retro-Futurism** we previously mentioned.
-
-Works from this period need to simultaneously satisfy "digital and retro mashup" and "questioning current order," avoiding simply equating "space theme + retro elements" with Spacepunk.
-
-**Design style from this period manifests as collision and fusion of digital technology and retro industry.**
-
-Modular design and information technology became mainstream. Spacecraft design better fits contemporary technical thought and emphasis on information technology, containing more fantastical future tech sense under nostalgic machine exteriors. In colors, while retaining classic tones like titanium white and aerospace orange, retro filter effects are added, imitating last century's image effects, giving images retro grain and haziness.
-
-![](008-starfield-game-art.jpg)
-
-<small class="block text-center">"Starfield" game 2023 - Proposed "NASA Punk" as the game's art style</small>
-
-Material use is more diverse. Design emphasizes "honest industrial style," combining some Brutalist concepts, clearly presenting spacecraft structure and history to people. Meanwhile, digital ruin elements often appear, such as retro industrial products coexisting with advanced digital technology, creating a unique temporal dislocation atmosphere. From modern works, it's more diversified.
-
-![](009-alien-isolation.jpg)
-
-<small class="block text-center">"Alien Isolation" game image</small>
-
-![](010-Space-Sweepers.jpg)
-
-<small class="block text-center">"Guardians of the Galaxy" "Space Sweepers" 2021 - Set in 2092, "Victory" is a spaceship specializing in cleaning space debris, crew members are lower-class groups making a living in space. With space as background, focusing on lower-class marginal characters' survival, conforms to Spacepunk's emphasis on lower-class narrative.</small>
-
-![](011-Guardians-of-the-Galaxy.jpg)
-
-<small class="block text-center">"Guardians of the Galaxy" screenshot - Although more "retro pop culture collage + lower-class resistance + anti-authority," it also possesses Spacepunk thought core.</small>
-
-## Summary
-
-This chapter's case selection made me hesitant. On one hand, it's niche, lacking overly distinct works that can fully express "Spacepunk = visual style + rebellious spirit + space narrative" trinity characteristics. On the other hand, it's hard to show its core spirit from single static visuals alone.
-
-Though Spacepunk belongs to punk style branches like Cyberpunk and Steampunk, each has unique characteristics. "Space background" is just Spacepunk's carrier. Its core is the combination of punk spirit and space setting, attempting to deconstruct "space exploration's" romantic imagination through rebellious narrative, rough aesthetics, and lower-class perspective.
-
-Modern Spacepunk is more diversified, not just simply "space theme + retro elements," but through these visual and narrative elements, raising profound questions about contemporary technological development, social structure, and human future, while maintaining nostalgic sentiment for space exploration history.
-
-I'm Rico, thanks for reading!

src/content/post/personal-website-selection-guide-for-designers/index.mdx

@@ -1,177 +0,0 @@
----
-title: How to Choose a Personal Website for Designers? A Guide + Selected Open Source Templates
-publishDate: 2025-05-20
-read: 14
-description: Personal Website Selection Guide for Designers
-tags:
-  - Designer's Site
-  - Personal Website
-  - Portfolio
-img: "/assets/blog/cover-portfolio-site.jpg"
-img_alt: "How to choose a personal website for designers? Check out this guide + selected open source templates"
----
-
-## AI Coding and Personal Websites
-
-With the popularity of AI coding, the development threshold has genuinely lowered. Discussions about personal websites have gained more attention recently, with many articles teaching how to use AI to create personal websites and blogs. However, most final products are too rough, merely setting up a static webpage framework, lacking functionality and performance considerations.
-
-So what qualities should a complete and quality personal website or blog possess? After all, for designers, a personal website is not just "a place to put work," but also a showcase of their design ability and aesthetic vision. For beginners learning development, building a personal website is the best practical scenario for understanding frontend logic and familiarizing with development workflow.
-
-Today let's discuss some common questions about personal websites - which type of website to choose? How to match technology stack with requirements? How to weigh no-code versus self-deployment, etc. At the end, I'll share carefully selected open-source personal website and blog templates.
-
-## Common Personal Website Types
-
-The core value of personal websites is "matching needs with scenarios" — different identities and goals require completely different website types. Different purposes correspond to different functional and visual needs. Especially for designers, choosing the right type maximizes portfolio display effectiveness. Current mainstream personal websites can be divided into three categories, covering most needs:
-
-**1. Content Sharing (including blogs, technical notes)**
-
-Centered on "conveying information, accumulating knowledge," not limited to pure text. Suitable for copywriters, developers, or industry observers, also includes daily records, mainly text creation. It emphasizes "content readability" and "search convenience."
-
-**Suitable for**
-
-- Developers (sharing technical tutorials, troubleshooting notes);
-- Industry observers (outputting design trends, workplace perspectives);
-- Copywriters/Creators (daily reflections, short content accumulation).
-
-**2. Portfolio Showcase (Designers/Creators' First Choice)**
-
-Making "work" the absolute protagonist, the goal is "letting visitors intuitively see your professional ability." It's not just "displaying work," but "explaining work value clearly" - the core showcase vehicle for designers, illustrators, and product managers.
-
-**Suitable for**
-
-- Visual/UI/UX designers (showcasing interface design, interaction prototypes);
-- Illustrators/Motion designers (high-resolution work collections, creative process);
-- Independent developers (personal project demos, product prototypes).
-
-**3. Personal Brand Comprehensive (Integrating all core information)**
-
-Equivalent to a "personal official website," integrating portfolio, blog, personal bio, contact information and other functions, suitable for professionals with clear personal brand positioning (like independent designers, freelance consultants). Its core is shaping a three-dimensional personal image. Functionally, it needs to combine both advantages, while visually maintaining overall style unity, avoiding fragmentation between different modules.
-
-**Suitable for**
-
-- Independent designers/Freelancers (letting clients see work, case experience, service range simultaneously);
-- Career advancers (integrating project experience, technical blog, personal honors, for job seeking or cooperation negotiations);
-- Multi-field creators (like "designer + photographer," needing to showcase two types of work simultaneously).
-
-## How to Choose Technology Stack
-
-Choosing a technology stack is essentially "need matching." You don't need to master all tools, but need to choose "tools that solve problems and have long-term value." Many people fall into "technology anxiety," but actually for personal websites, small scale, low technical difficulty, belongs to lightweight small projects. Technology error tolerance is very high.
-
-**First clarify your core needs**
-
-Before choosing a technology stack, ask yourself three questions:
-
-- What is your website's core function? (Is it displaying static work, or needing dynamic interaction?)
-- Do you need subsequent maintenance and feature iteration? (Need frequent content module updates and modifications)
-- Do you want to learn new skills through building a website? (Like designers wanting to understand frontend basics)
-
-For example, if you just want to display a static portfolio, don't need complex interaction, low update frequency, simple HTML+CSS+JS is sufficient. More mature lightweight solutions (like Astro, Hugo) are more suitable. If you want to add complex functions and interactions, you can choose frontend frameworks like React, Vue. Choose according to need, and communicate technology stack solutions with AI.
-
-### **Recommended Technology Stacks: React, Vue, Astro**
-
-For designers and beginners, the core advantages of popular technology stacks are "low learning cost, rich community resources and tutorials, high long-term value."
-
-- **Rich learning resources**: These technology stacks have mature communities. Whether official documentation, Bilibili tutorials, or AI Coding, you can quickly find answers. For example, the most popular UI framework Shadcn/UI has rich templates and theme resources, plus mature AI support.
-- **Designer-friendly**: React and Vue's "component-based development" is strongly supported by design tools like Figma. You can use tools to convert design components to code, directly connecting design to code path. Astro focuses on "Static Site Generation (SSG)," achieving both fast static page loading and supporting embedded dynamic components (like interaction modules written in React), balancing "performance" and "flexibility," focusing on implementation.
-- **Long-term value**: Designers "understanding basic frontend" helps at work. For example, being able to read HTML/CSS structure, understand interaction implementation logic, master React, Vue and other development basics not only facilitates efficient communication with development teams, but also helps better implement your design ideas.
-
-Besides the recommended technology stacks above, there are also WordPress, Hugo, Ghost, Hexo and other solutions on the market. Their positioning and characteristics differ greatly. Considering article length, you can explore specific details yourself. For designers, I don't particularly recommend them. If readers are pure content creators, they can still be considered.
-
-Simply put, if you want to balance design freedom and learning cost, **Astro** is the optimal solution (static pages load fast, supports embedding React/Vue and other frameworks, low entry threshold). If you want to deeply learn frontend, **React/Vue** has more long-term value. If you completely don't want to touch code and can accept payment, you can use no-code platforms (Framer, Webflow, Figma Site, etc.), but long-term, self-deployed static sites are more worry-free.
-
-## About No-Code Platforms VS Self-Deployment
-
-Currently two mainstream approaches: no-code platforms (Framer, Figma Site, Webflow) and self-deployment, each with pros and cons.
-
-### No-Code Platforms - Require payment, convenient but not free enough
-
-Advantages are obvious: No need to write code, build websites through visual design platforms, and have built-in CMS management systems, convenient for editing content. Especially Figma Site can directly convert Figma design drafts into websites. For designers, low learning cost, suitable for those wanting to quickly build a temporary showcase page.
-
-But there are also disadvantages:
-
-- **Too platform-dependent**: For example, using Framer, sites are completely hosted on the platform, cannot be used apart from the platform. The longer the operation, the higher the migration time and cost.
-- **Payment cost not low**: Basic free version has limited functionality, like only 3 works allowed, has platform watermark. Want custom domain, remove watermark, add advanced interactions, multi-language, all need paid plans, monthly from tens to hundreds, long-term use is expensive.
-- **Poor flexibility**: Many platforms' templates can't change core logic, limited customization functions, content may also be subject to platform review restrictions.
-
-### Self-Deployment - Free and full control, but high learning cost
-
-"Self-deployment" sounds complex, but actually means "find templates yourself/write code, put the website on server," like using free platforms like Cloudflare, Vercel, GitHub Pages for deployment.
-
-Advantages especially suitable for designers:
-
-- **Maximum freedom**: Can add whatever functions you want, like adding 3D preview for work, adding complex interactions and animations, even embedding self-made interaction prototypes, completely unrestricted by platforms, can 100% implement your design ideas.
-- **Low cost**: Most deployment platforms (Vercel, Netlify, Cloudflare) are free, custom domain costs only tens per year, and free function quotas are sufficient for personal use, much cheaper than no-code platforms long-term.
-- **Learn development skills**: Even if you only know design, following tutorials to build a self-deployed site once, you can also learn frontend basics, domain resolution, traffic, framework advantages, etc. Many companies recruiting designers now also prioritize those who understand some technology, equivalent to an extra bonus point.
-
-Disadvantages are also direct: **High learning cost, time and energy consuming**. For example, need to understand HTML/CSS basics, know how to modify template content, how to deploy websites to servers. Now there are many excellent open-source templates, following documentation and AI assistance can also successfully go online, just a bit slower than no-code.
-
-Of course, not everyone is suitable for self-deployment: If you only temporarily need a showcase page, time-pressed, low requirements, then no-code platforms are sufficient. But if you want to make a personal site a long-term personal brand, then self-deployment is definitely more worth investing in.
-
-"No money needed," "Website exquisite with full functionality," "No need to learn any code" — this is impossible. Want worry-free? Pay. Payment can solve any difficulties you encounter, including but not limited to purchasing mature templates, paid consulting, paid development, etc. Want the free route? Spend more thought. The essence of paid versus free is weighing "using money for time" or "using time for money."
-
-## **Selected Open Source Template Recommendations**
-
-Finally, sharing 5 carefully selected open-source personal site templates I've chosen, all considered from multiple dimensions like "aesthetics, functionality, uniqueness," suitable for designers wanting to self-deploy. Whether design or code, they have high reference and learning value - see what good works are, then learn how to do them.
-
-A reminder: These templates require basic coding ability (AI assistance can help start), not suitable for complete beginners or those unwilling to learn development. Although there's detailed documentation, it takes time to research and learn. Going online will definitely be rewarding.
-
-### Cali's Personal Website (⭐1.9K)
-
-![cali.jpg](cali.jpg)
-
-- Website: [https://cali.so/](https://cali.so/)
-- Open Source: [https://github.com/CaliCastle/cali.so](https://github.com/CaliCastle/cali.so)
-- Deployment Docs: [https://cali.so/blog/guide-for-cloning-my-site](https://cali.so/blog/guide-for-cloning-my-site)
-- Tutorial Video: [https://www.bilibili.com/video/BV1kH4y157xg/](https://www.bilibili.com/video/BV1kH4y157xg/)
-- Tech Stack: Next.js + Tailwind CSS + Sanity + Neon + Resend + Clerk + Upstash
-- Highlights: Comprehensive features, maximum design details. Many website interactions and animations are great, worth experiencing carefully. Has very detailed tutorial documentation and teaching videos. Functionality includes comment system, project list, message wall, email, backend management system, etc.
-- Difficulty: Relatively complex tech stack, higher deployment difficulty.
-
-### Onur Dev (⭐2.3K)
-
-![onur-dev.jpg](onur-dev.jpg)
-
-![onur-dev-2.jpg](onur-dev-2.jpg)
-
-- Website: [https://onur.dev/](https://onur.dev/)
-- Open Source: [https://github.com/suyalcinkaya/onur.dev](https://github.com/suyalcinkaya/onur.dev)
-- Tech Stack: React + Tailwind CSS + Contentful
-- Highlights: Comprehensive features, suitable for designer+developer identity, including blog articles, life records, timeline, and simple bookmark navigation. Very minimalist design, but module layout and functionality are practical.
-
-### Naresh Khatri 3D Personal Website (⭐557)
-
-![nareshkhatri.jpg](nareshkhatri.jpg)
-
-- Website: [https://www.nareshkhatri.site/](https://www.nareshkhatri.site/)
-- Open Source: [https://github.com/Naresh-Khatri/3d-portfolio](https://github.com/Naresh-Khatri/3d-portfolio)
-- Tech Stack: Three.js (3D rendering library) + React + Next.js + Tailwind
-- Highlights: Strong 3D interactive visual impact — entire page is 3D space, can drag to rotate viewing angle, works displayed as 3D cards, click to see details; suitable for UI/UX, motion designers
-
-### Sudip Portfolio Website
-
-![sudip.jpg](sudip.jpg)
-
-![sudip2.jpg](sudip2.jpg)
-
-- Website: [https://portfolio-metaloopa.vercel.app/](https://portfolio-metaloopa.vercel.app/)
-- Open Source: [https://github.com/metal-oopa/personal-portfolio](https://github.com/metal-oopa/personal-portfolio)
-- Tech Stack: React
-- Highlights: Dark style + dynamic interaction, rich interaction and visual effects, work page added "text gradual reveal animation on hover," very thoughtful details. Functionality supports work categorization, personal skill display, projects, and contact form, suitable for designers who like dark style.
-
-### ThoughtLite
-
-![thoughtlite-1.jpg](thoughtlite-1.jpg)
-
-![thoughtlite-2.jpg](thoughtlite-2.jpg)
-
-- Website: [https://ttio.cc/](https://ttio.cc/)
-- Open Source: [https://github.com/tuyuritio/astro-theme-thought-lite](https://github.com/tuyuritio/astro-theme-thought-lite)
-- Tech Stack: Astro + Tailwind CSS (static loading fast, responsive adaptation good)
-- Highlights: Personal recommendation, minimalist design lightweight blog, simple tech stack, easy to start, focuses on text creation, supports Markdown editing and dark mode switching. Clean modern aesthetics, fast loading speed (SSG optimization), and supports multiple languages. Very good experience for text creation.
-
-
-## Finally
-
-AI can indeed help us develop quickly, but truly brand-effective and valuable personal sites are never rushed out, but polished out - polishing features, details, polishing out your own style. If you're a designer, might as well spend time trying self-deployment, even just starting from modifying open-source templates. What goes online in the end is not just a website, but your exploration of "design + technology." After all, the feeling of being able to 100% implement your own ideas is really satisfying.
-
-If you encounter problems during site building, feel free to add me as a friend, let's communicate together.