This section contains a summary of this file. This file contains a packed representation of the entire repository's contents. It is designed to be easily consumable by AI systems for analysis, code review, or other automated processes. The content is organized as follows: 1. This summary section 2. Repository information 3. Directory structure 4. Repository files (if enabled) 5. Multiple file entries, each consisting of: - File path as an attribute - Full contents of the file - This file should be treated as read-only. Any changes should be made to the original repository files, not this packed version. - When processing this file, use the file path to distinguish between different files in the repository. - Be aware that this file may contain sensitive information. Handle it with the same level of security as you would the original repository. - Some files may have been excluded based on .gitignore rules and Repomix's configuration - Binary files are not included in this packed representation. Please refer to the Repository Structure section for a complete list of file paths, including binary files - Files matching patterns in .gitignore are excluded - Files matching default ignore patterns are excluded - Files are sorted by Git change count (files with more changes are at the bottom) .gitea/ workflows/ build-image.yml debug.yml assets/ homelab.png lab.png logo.png public/ assets/ blog/ cover-brutalism.jpg cover-dreamcore.jpg cover-free-icon-library.jpg cover-neobrutalism.jpg cover-portfolio-site.jpg cover-retro.jpg cover-retrofuturism.jpg cover-spacepunk.jpg experiences/ company.jpg home/ color-picker.svg gradientshub.jpg social/ social-behance.jpg social-dribbble.jpg social-email.jpg social-figma.jpg social-gitea.png social-github.jpg social-gumroad.jpg social-linkedin.png social-twitter.jpg social-xiaohongshu.jpg stack/ astro.png bootstrap.png cloudflare.png css.png github.png html.png js.png netlify.png nextjs.png nodejs.png npm.png nuxtjs.png tailwind.png vercel.png vscode.png tools/ game/ 01-game-cassette.png 02-game-cassette.png 03-game-cassette.png 04-game-cassette.png 05-game-cassette.png logo/ ricoui.png tool-gradienthub.svg tool-inspoweb.png tool-ricoog.svg tool-todo.png tool-uiuxdeck.svg deck.png dreamcore.jpg dreamcore.mp4 keyboard.png mac.png mini-btn.png retro-computer.png retro-computer.svg spin-2.png spin-bar.png spin-bar.svg spin.png spin.svg tool-icon-bg.png works/ 3d-valentines.jpg 3d-valentines.mp4 gradientshub.jpg gradientshub.mp4 inspoweb.jpg luonmodels.jpg luonmodels.mp4 ricoog.jpg ricoog.mp4 ricoui.jpg ricoui.mp4 uiuxdeck.jpg avatar.png freelance.png hec-ia.png homelab.png logo copy.png logo.jpg logo.png fonts/ favicon.png InstrumentSerif-Italic.woff2 InstrumentSerif-Regular.woff2 Inter-Variable.woff2 og.jpg robots.txt src/ assets/ js/ main.js freelance.png homelab.png logo.jpg logo.png collections/ experiences.json featuredwork.json menu.json social.json works.json components/ cards/ BlogCard.astro SocialCard.astro WorkCard.astro elements/ AboutExperience.astro PageHeader.astro SectionHeader.astro SeparatorLine.astro home/ HeroCard.astro sections/ BlogSection.astro Explore.astro FeaturedWork.astro Footer.astro Header.astro WorksSection.astro ui/ AnimatedText.astro Button.astro Logo.astro Matter.astro Tools.astro TopBg.astro widgets/ ActionBar.astro Meta.astro OptimizedImage.astro Pagination.astro Toc.astro ToTop.astro TrackGa.astro config/ site.js layouts/ Layout.astro Meta.astro PageLayout.astro PostLayout.astro pages/ blog/ page/ [page].astro [...slug].astro index.astro work/ freelance.astro hec-ia.astro homelab.astro 404.astro about.astro index.astro infrastructure.astro rss.xml.js works.astro styles/ aos-custom.css article-enhancements.css article.css global.css types/ matter.d.ts content.config.js env.d.ts .editorconfig .env.example .gitignore astro.config.mjs CONTRIBUTING.md docker-compose.yml Dockerfile nginx.conf package.json pnpm-workspace.yaml README-zh.md README.md tailwind.config.mjs tsconfig.json This section contains the contents of the repository's files. name: Debug Context on: workflow_dispatch jobs: debug: runs-on: ubuntu-latest steps: - name: Print Gitea context run: | echo "server_url: ${{ gitea.server_url }}" echo "api_url: ${{ gitea.api_url }}" echo "repository: ${{ gitea.repository }}" User-agent: * Allow: / // Add your javascript here import AOS from 'aos'; window.darkMode = false; const stickyClasses = []; const unstickyClasses = []; const stickyClassesContainer = [ "shadow-[0px_1px_4px_0_rgba(25,33,61,0.06)]", "rounded-[20px]", "bg-[#ffffff]/65", "border-[#ffffff]/65", "dark:border-neutral-600/40", "dark:bg-neutral-900/60", "backdrop-blur-2xl", "backdrop-brightness-120", ]; const unstickyClassesContainer = [ "shadow-none", "border-transparent", "rounded-none", "bg-transparent", ]; let headerElement = null; document.addEventListener("DOMContentLoaded", () => { headerElement = document.getElementById("header"); if ( localStorage.getItem("dark_mode") && localStorage.getItem("dark_mode") === "true" ) { window.darkMode = true; showNight(); } else { showDay(); } stickyHeaderFuncionality(); applyMenuItemClasses(); evaluateHeaderPosition(); mobileMenuFunctionality(); // 初始化 AOS AOS.init({ duration: 400, easing: 'ease-out-cubic', once: true, offset: 20, delay: 0, }); }); // window.toggleDarkMode = function(){ // document.documentElement.classList.toggle('dark'); // if(document.documentElement.classList.contains('dark')){ // localStorage.setItem('dark_mode', true); // window.darkMode = true; // } else { // window.darkMode = false; // localStorage.setItem('dark_mode', false); // } // } window.stickyHeaderFuncionality = () => { window.addEventListener("scroll", () => { evaluateHeaderPosition(); }); }; window.evaluateHeaderPosition = () => { if (window.scrollY > 48) { headerElement.firstElementChild.classList.add(...stickyClassesContainer); headerElement.firstElementChild.classList.remove( ...unstickyClassesContainer, ); headerElement.classList.add(...stickyClasses); headerElement.classList.remove(...unstickyClasses); // document.getElementById("menu").classList.add("top-[75px]"); // document.getElementById("menu").classList.remove("top-[75px]"); } else { headerElement.firstElementChild.classList.remove(...stickyClassesContainer); headerElement.firstElementChild.classList.add(...unstickyClassesContainer); headerElement.classList.add(...unstickyClasses); headerElement.classList.remove(...stickyClasses); // document.getElementById("menu").classList.remove("top-[56px]"); // document.getElementById("menu").classList.add("top-[75px]"); } }; document.getElementById("darkToggle").addEventListener("click", () => { document.documentElement.classList.add("duration-300"); if (document.documentElement.classList.contains("dark")) { localStorage.removeItem("dark_mode"); showDay(true); } else { localStorage.setItem("dark_mode", true); showNight(true); } }); function showDay(animate) { document.getElementById("sun").classList.remove("setting"); document.getElementById("moon").classList.remove("rising"); let timeout = 0; if (animate) { timeout = 500; document.getElementById("moon").classList.add("setting"); } setTimeout(() => { document.getElementById("dayText").classList.remove("hidden"); document.getElementById("nightText").classList.add("hidden"); document.getElementById("moon").classList.add("hidden"); document.getElementById("sun").classList.remove("hidden"); if (animate) { document.documentElement.classList.remove("dark"); document.getElementById("sun").classList.add("rising"); } }, timeout); } function showNight(animate) { document.getElementById("moon").classList.remove("setting"); document.getElementById("sun").classList.remove("rising"); let timeout = 0; if (animate) { timeout = 500; document.getElementById("sun").classList.add("setting"); } setTimeout(() => { document.getElementById("nightText").classList.remove("hidden"); document.getElementById("dayText").classList.add("hidden"); document.getElementById("sun").classList.add("hidden"); document.getElementById("moon").classList.remove("hidden"); if (animate) { document.documentElement.classList.add("dark"); document.getElementById("moon").classList.add("rising"); } }, timeout); } window.applyMenuItemClasses = () => { const menuItems = document.querySelectorAll("#menu a"); for (let i = 0; i < menuItems.length ; i++) { if (menuItems[i].pathname=== window.location.pathname) { menuItems[i].classList.add("text-neutral-900", "dark:text-white"); } } //:class="{ 'text-neutral-900 dark:text-white': window.location.pathname == '{menu.url}', 'text-neutral-700 dark:text-neutral-400': window.location.pathname != '{menu.url}' }" }; function mobileMenuFunctionality() { document.getElementById("openMenu").addEventListener("click", () => { openMobileMenu(); }); document.getElementById("closeMenu").addEventListener("click", () => { closeMobileMenu(); }); } window.openMobileMenu = () => { document.getElementById("openMenu").classList.add("hidden"); document.getElementById("closeMenu").classList.remove("hidden"); document.getElementById("menu").classList.remove("hidden"); document.getElementById("mobileMenuBackground").classList.add("opacity-0"); document.getElementById("mobileMenuBackground").classList.remove("hidden"); setTimeout(() => { document .getElementById("mobileMenuBackground") .classList.remove("opacity-0"); }, 1); }; window.closeMobileMenu = () => { document.getElementById("closeMenu").classList.add("hidden"); document.getElementById("openMenu").classList.remove("hidden"); document.getElementById("menu").classList.add("hidden"); document.getElementById("mobileMenuBackground").classList.add("hidden"); }; --- const { content, layout = "vertical", "data-aos": dataAos, "data-aos-delay": dataAosDelay } = Astro.props; const { title, description, publishDate, tags = [] as string[], img, img_alt, slug, link } = content; const formattedDate = new Date(publishDate).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); const postLink = link || `/blog/${slug}`; // Check if horizontal layout const isHorizontal = layout === "horizontal"; ---

{img ? ( ${img_alt$ ) : (

)}

{formattedDate} {tags && tags.length > 0 && ( <> · {tags[0]} )}

{title}

{description && (

{description}

)}

--- import social from "@/collections/social.json"; const { displaySocialIds } = Astro.props; // 配置要显示的社交媒体 ID（留空则显示所有） //const displaySocialIds: number[] = [1, 2, 3]; // 只显示 ID 为 1, 2, 3 的社交媒体 // const displaySocialIds: number[] = []; // 显示所有（当数组为空时） const filteredSocial = social.filter(item => { if (item.isShow === false) return false; if (displaySocialIds.length > 0) { return displaySocialIds.includes(item.id); } return true; }); --- --- interface Props { name: string; // Required image: string; // Required url: string; // Required description?: string; // Optional tags?: string[]; // Optional video?: string; // Optional isShow?: boolean; // Optional, default true layout?: 'featured' | 'grid'; // featured is full width, grid is two columns index?: number; target?: string; // Optional, default "_blank" } const { name, description = '', url, image, tags = [], video, isShow = true, layout = 'grid', index = 0, target = "_blank" } = Astro.props; // Generate stable id for each video for precise playback control const videoId = `workcard-video-${index}-${name.replace(/[^a-z0-9]+/gi, '-').toLowerCase()}`; ---

{video ? (

) : (

)}

{name}

{tags && tags.length > 0 && (

{tags.map((tag) => ( {tag} ))}

)} {description && (

{description}

)}

{video && ( )} --- const { logo, dates, role, company, description } = Astro.props; ---

{dates}

{role}

{company}

{description}

--- import AnimatedText from "@/components/ui/AnimatedText.astro"; interface Props { title?: string ; description?: string ; tags?: string[] ; className?: string ; } const { title, description, tags = [], className = "" } = Astro.props; ---

{title && }

{description && (

)} {tags && tags.length > 0 && (

{tags.map((tag) => ( {tag} ))}

)}

--- interface Props { className?: string; // Custom CSS classes color?: string; // Color, defaults to neutral width?: "full" | "3/4" | "1/2" | "1/4"; // Width options spacing?: "sm" | "md" | "lg" | "xl"; // Spacing options thickness?: "thin" | "normal" | "thick"; // Thickness options } // Define default values const { className = "", color = "border-primary/25 dark:border-primary-light/25", width = "full", spacing = "md", thickness = "thin" } = Astro.props; // Width mapping const widthClasses = { "full": "w-full", "3/4": "w-3/4", "1/2": "w-1/2", "1/4": "w-1/4" }; // Spacing mapping const spacingClasses = { "sm": "my-2", "md": "my-4", "lg": "my-8", "xl": "my-12" }; // Thickness mapping const thicknessClasses = { "thin": "border-[0.5px]", "normal": "border-[1px]", "thick": "border-[2px]" }; --- --- // Define properties accepted by the component interface Props { imageUrl: string; // Required title?: string; // Optional, default "Home" link?: string; // Optional, can be empty } // Set default values and receive incoming properties const { imageUrl, title = "Home", link = "" } = Astro.props; ---

{title && (

{title}

)}

--- import projects from "@/collections/featuredwork.json"; import WorkCard from "@/components/cards/WorkCard.astro"; import SectionHeader from "@/components/elements/SectionHeader.astro"; import Button from "@/components/ui/Button.astro"; interface Props { title?: string; description?: string; showAll?: boolean; limit?: number; // 限制显示的项目数量 } interface Project { name: string; description?: string; image: string; url: string; tags?: string[]; video?: string; isShow?: boolean; } const { title = "Featured Work", description = "A selection of projects I've worked on. From web applications to design systems, each project represents a unique challenge and learning experience.", showAll = false, limit } = Astro.props; // 获取项目列表 let allProjects = projects as Project[]; // 根据 limit 或 showAll 来控制显示数量 if (limit !== undefined) { // 如果指定了 limit，使用 limit allProjects = projects.slice(0, limit) as Project[]; } else if (!showAll) { // 如果没有指定 limit，且 showAll 为 false，默认显示 6 个 allProjects = projects.slice(0, 6) as Project[]; } // 如果 showAll 为 true 且没有 limit，显示所有项目 // 前三个为特色项目（全宽） const featuredProjects = allProjects.slice(0, 3); // 其余为网格项目（两栏） const gridProjects = allProjects.slice(3); // 判断是否应该显示 "View All" 按钮 const shouldShowViewAll = limit !== undefined ? limit < projects.length : !showAll && projects.length> 6; ---

{featuredProjects.length > 0 && (

{featuredProjects .filter(project => project.isShow !== false) .map((project, index) => ( ))}

)} {gridProjects.length > 0 && (

{gridProjects .filter(project => project.isShow !== false) .map((project, index) => ( ))}

)} {shouldShowViewAll && (

)}

--- import Logo from "@/components/ui/Logo.astro"; import ToTop from "@/components/widgets/ToTop.astro"; import { siteConfig, socialLinks } from "@/config/site.js"; ---

{socialLinks.map((social) => ( ))}

--- import works from "@/collections/works.json"; import WorkCard from "@/components/cards/WorkCard.astro"; interface Props { limit?: number; // 限制显示的项目数量 } interface Work { name: string; description?: string; image: string; url: string; tags?: string[]; video?: string; isShow?: boolean; } const { limit } = Astro.props; // 获取项目列表 let allWorks = works as Work[]; // 如果指定了 limit，使用 limit if (limit !== undefined) { allWorks = works.slice(0, limit) as Work[]; } ---

{allWorks .filter(work => work.isShow !== false) .map((work, index) => ( ))}

--- interface Props { class?: string; content: string | Promise; duration?: number; delay?: number; stagger?: number; } let { content, duration = 0.6, delay = 0, stagger = 0.1, ...rest } = Astro.props; let processedContent = ""; if (content) { // @ts-expect-error const words = content.split(" "); // Split text into words processedContent = words .map( (word: string) => ` ${word}`, ) .join(" "); } ---

--- import { siteConfig } from "@/config/site.js"; interface Props { title?: string; description?: string; keywords?: string; url?: string; image?: string; twitterHandle?: string; } const { title = siteConfig.meta.title, description = siteConfig.meta.description, keywords = siteConfig.meta.keywords, url = siteConfig.url, image = siteConfig.meta.image, twitterHandle = siteConfig.social.twitterName, } = Astro.props; // 构建完整的页面标题 const metaTitle = title === siteConfig.meta.title ? title : `${title} | ${siteConfig.meta.title}`; const metaDescription = description || siteConfig.meta.description; const ogImage = image || siteConfig.meta.image; const canonicalUrl = url || siteConfig.url; --- {metaTitle} --- /** * OptimizedImage component is a modified version of Astro's built-in Image component. * It allows to optimize images inside public, src/assets and content folders. * To optimize remote images, follow: https://docs.astro.build/en/guides/images/#authorizing-remote-images */ import { Image } from "astro:assets"; interface InlineSvgProps { src: string; inlineSvg: true; alt?: string; width?: string; height?: string; class?: string; style?: any; [key: string]: any; } interface ImageProps { src: string; alt?: string; width?: number; height?: number; loading?: "eager" | "lazy" | null | undefined; decoding?: "async" | "auto" | "sync" | null | undefined; formats?: string[] | "auto" | "avif" | "jpeg" | "png" | "svg" | "webp"; class?: string; style?: any; [key: string]: any; } type Props = InlineSvgProps | ImageProps; // Destructuring Astro.props to get the component's props let { src, alt, inlineSvg, width, height, loading, decoding, formats, style, ...rest } = Astro.props; const isRemoteImage = src.startsWith("http://") || src.startsWith("https://"); let image = src as any; let SVG = "" as any; if (!isRemoteImage) { // Regular Images const images = import.meta.glob([ "/src/assets/**/*.{jpeg,jpg,png,avif,tiff,gif,webp,svg,gif}", "/public/**/*.{jpeg,jpg,png,avif,tiff,gif,webp,svg,gif}", "/src/content/**/*.{jpeg,jpg,png,avif,tiff,gif,webp,svg,gif}", ]); // Get Raw Image For Inline SVG const imagesRaw = import.meta.glob( [ "/src/assets/**/*.svg", "/src/content/**/*.svg", "/public/**/*.svg", ], { query: "raw", import: "default", }, ); if (inlineSvg && src.includes(".svg")) { const key = Object.keys(images).find((k) => k.includes(src)); SVG = key ? await imagesRaw[key]() : null; if (SVG.length > 1) { SVG = SVG.split(" tag if (SVG.length > 1) { // Convert rest object to a string of attributes const attributes = Object.entries(rest) .map(([key, value]) => `${key}=" ${value}"`) .join(" "); // Add the attributes to the --- const { currentPage, totalPages, collection } = Astro.props; // 生成页码数组 const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1); // 确定要显示的页码范围 const maxVisiblePages = 5; let startPage = Math.max(currentPage - Math.floor(maxVisiblePages / 2), 1); let endPage = Math.min(startPage + maxVisiblePages - 1, totalPages); if (endPage - startPage + 1 < maxVisiblePages) { startPage = Math.max(endPage - maxVisiblePages + 1, 1); } // 生成页面链接 const getPageLink = (pageNum: number): string => { if (pageNum === 1) { return `/${collection}/`; } return `/${collection}/page/${pageNum}`; }; ---

上一页
上一页
1
...
{pageNum}
...
{totalPages}
下一页
下一页

--- interface Heading { depth: number; slug: string; text: string; } interface HeadingNode extends Heading { children: HeadingNode[]; } const { headings = [] } = Astro.props as { headings: Heading[] }; function buildTree(list: Heading[]): HeadingNode[] { const root: HeadingNode[] = []; const stack: HeadingNode[] = []; list.forEach(h => { const node: HeadingNode = { ...h, children: [] }; while (stack.length && stack[stack.length - 1].depth >= h.depth) { stack.pop(); } if (stack.length === 0) { root.push(node); } else { stack[stack.length - 1].children.push(node); } stack.push(node); }); return root; } const tree = buildTree(headings); ---

TOC

{node.text} {node.children.length > 0 && (
- {c.text} {c.children.length > 0 && (
  - {cc.text}
  )}
)}

--- const GAID = import.meta.env.PUBLIC_GA4_ID; const UMAMIId = import.meta.env.PUBLIC_UMAMI_ID; // const GAID = ''; if (!GAID) { // console.error(" Google Analytics ID (PUBLIC_GA4_ID) is missing!"); } --- {GAID && ( <> )} {UMAMIId && ( )} --- import Meta from './Meta.astro'; import TopBg from " @/ components/ ui/ TopBg.astro"; import Footer from " @/ components/ sections/ Footer.astro"; import Header from " @/ components/ sections/ Header.astro"; import TrackGa from " @/ components/ widgets/ TrackGa.astro"; interface Props { title?: string | undefined; description?: string | undefined; keywords?: string | undefined; } const { title, description, keywords } = Astro.props; import " ../ styles/ global.css"; import " aos/ dist/ aos.css"; import " ../ styles/ aos-custom.css"; import '../styles/article.css'; import '../styles/article-enhancements.css'; ---

--- import Layout from " @/ layouts/ Layout.astro"; interface Props { title?: string | undefined; keywords?: string | undefined; description?: string | undefined; } const { title, description,keywords} = Astro.props; ---

--- import { getCollection, render } from " astro:content"; import PostLayout from " @/ layouts/ PostLayout.astro"; import Toc from '@/components/widgets/Toc.astro'; // 根据 Astro v5/v6，对于 SSG 模式下的动态路由，需要使用 getStaticPaths() // 来告诉 Astro 在构建时生成哪些页面 export async function getStaticPaths() { const postEntries = await getCollection(" post"); return postEntries.map((entry) => { // 根据 Astro v5 官方文档，entry.id 就是条目的唯一标识符 // 对于 [...slug] 路由，需要将 entry.id 转换为 slug 数组 // entry.id 已经是相对于集合根目录的路径，例如 " dir/ index" 或 " dir" // 注意：对于 [...slug] 路由，params.slug 应该是字符串，Astro 会自动处理 const slugString = entry.id; return { params: { slug: slugString }, props: { entry }, }; }); } // 使用 [...slug] 路由来处理包含斜杠的路径（官方推荐） // slug 参数是数组格式，需要转换为字符串来匹配 entry.id const { slug } = Astro.params; const slugString = Array.isArray(slug) ? slug.join('/') : (slug || ''); // 从 props 获取 entry（在 SSG 模式下通过 getStaticPaths 传递） const { entry } = Astro.props; // 如果找不到文章，返回 404 if (!entry) { return Astro.redirect("/ 404"); } const { Content, headings } = await render(entry); const filtered = headings.filter(h => h.depth <= 2); ---

{entry.data.tags && entry.data.tags.length > 0 ? ( entry.data.tags.map(tag => ( {tag} )) ) : ( Article )}

{entry.data.title}

{entry.data.publishDate.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })} {entry.data.read && ( <> {entry.data.read} min read )}

--- import PostLayout from " @/ layouts/ PostLayout.astro"; import PageHeader from " @/ components/ elements/ PageHeader.astro"; import SeparatorLine from " @/ components/ elements/ SeparatorLine.astro"; import { siteConfig } from " @/ config/ site.js"; ---

Stack

Backend: Python, Golang
Automation: Bash, scripting
Infrastructure: Docker, Linux

Services

Web application development
Automation and scripting
API development
DevOps and deployment

Contact

Interested in working together? Reach out at {siteConfig.mail}

Mission

Making AI accessible to business students. Technical workshops designed for non-technical profiles.

What We Do

Hands-on workshops on AI tools
Introduction to agentic AI
Practical ML workflows

Impact

Bridging the gap between business and tech. Helping future managers understand what's possible with AI.

The Story

What started as a simple Raspberry Pi running Pi-hole evolved into a full production-grade infrastructure. The goal was to learn by doing: understanding how enterprise systems work by building them myself.

Current Stack

Virtualization: Proxmox VE
Orchestration: Kubernetes
Containers: Docker
Monitoring: Grafana, Prometheus, InfluxDB
Reverse Proxy: Caddy, FRP
Auth: Authentik (OIDC)

What I Learned

Building infrastructure from scratch taught me more than any course could. Debugging network issues at 2am, recovering from failed upgrades, designing for redundancy - these experiences shaped how I approach technical problems.

--- import PageLayout from " @/ layouts/ PageLayout.astro"; import PageHeader from " @/ components/ elements/ PageHeader.astro"; import Button from " @/ components/ ui/ Button.astro"; ---

--- import Layout from " @/ layouts/ Layout.astro"; import { Server, Database, Shield, Globe, Activity, Lock } from " @lucide/ astro"; ---

Infrastructure

Technical overview of my homelab stack.

Virtualization

Proxmox VE - Hypervisor
Multiple VMs and LXC containers
ZFS storage pools

Orchestration

Kubernetes - Container orchestration
Docker - Containerization
GitOps deployment workflow

PKI & Security

step-ca - Internal Certificate Authority
Automated certificate provisioning
mTLS for service communication

DNS

Technitium - DNS Server
Split-horizon DNS
Internal service discovery

Monitoring

Grafana - Visualization
Prometheus - Metrics
InfluxDB - Time-series data

Access & Auth

Authentik - Identity Provider
OIDC/SAML SSO
Caddy - Reverse proxy
FRP - Tunnel access

Architecture Notes

Everything runs on-premise. Services communicate over an internal network with mTLS. External access goes through authenticated reverse proxy. Monitoring covers infrastructure and application metrics.

← Back to Homelab project

--- import WorksSection from " @/ components/ sections/ WorksSection.astro"; import PageLayout from " @/ layouts/ PageLayout.astro"; import PageHeader from " @/ components/ elements/ PageHeader.astro"; ---

// 1. 从 `astro:content` 导入工具函数 import { defineCollection, z } from ' astro:content'; // 2. 导入加载器 import { glob } from ' astro/ loaders'; // 3. 定义你的集合 const post = defineCollection({ // 使用 glob 加载器从 src/content/post 目录加载所有 .mdx 文件 loader: glob({ pattern: ' **/ *.{md,mdx}', base: ' ./ src/ content/ post' }), // Type-check frontmatter using a schema schema: z.object({ title: z.string(), description: z.string(), publishDate: z.coerce.date(), read: z.number().optional(), tags: z.array(z.string()).optional(), img: z.string().optional(), img_alt: z.string().optional(), featured: z.boolean().optional(), }), }); // 4. 导出一个 `collections` 对象来注册你的集合 export const collections = { post }; /// /// # EditorConfig is awesome: https://EditorConfig.org # top-most EditorConfig file root = true [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = false insert_final_newline = false # Site Configuration PUBLIC_SITE_URL=https://your-domain.com # Analytics # Google Analytics 4 ID (鏍煎紡: G-XXXXXXXXXX) PUBLIC_GA4_ID= # Umami Analytics ID (鏍煎紡: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx) PUBLIC_UMAMI_ID= # build output dist/ # generated types .astro/ # dependencies node_modules/ # logs npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* # environment variables .env .env.local .env.production .env.production.local # macOS-specific files .DS_Store # IDE .idea/ .vscode/ *.swp *.swo *~ # OS Thumbs.db .DS_Store # Temporary files *.tmp *.temp .cache/ # 贡献指南感谢你对这个项目的关注！我们欢迎所有形式的贡献。 ## 如何贡献 ### 报告 Bug 如果你发现了 bug，请： 1. 查看 [Issues](https://github.com/ricocc/ricoui-portfolio/issues) 确认该 bug 尚未被报告 2. 如果是一个新的 bug，请创建一个新的 Issue，包含： - 清晰的问题描述 - 复现步骤 - 预期行为 - 实际行为 - 截图（如果有） - 环境信息（浏览器、操作系统等） ### 提出新功能如果你有改进建议或新功能想法： 1. 查看现有 Issues 确认没有类似提议 2. 创建一个新的 Feature Request Issue，描述： - 功能描述 - 使用场景 - 可能的实现方案（可选） ### 提交代码 1. **Fork 项目** ```bash git clone https://github.com/your-username/ricoui-portfolio.git cd ricoui-portfolio ``` 2. **创建分支** ```bash git checkout -b feature/your-feature-name # 或 git checkout -b fix/your-bug-fix ``` 3. **安装依赖** ```bash pnpm install ``` 4. **进行修改** - 编写代码 - 确保代码通过检查：`pnpm check` - 测试你的修改 5. **提交更改** ```bash git add . git commit -m "feat: 添加新功能描述" # 或 git commit -m "fix: 修复bug描述" ``` 提交信息请遵循 [Conventional Commits](https://www.conventionalcommits.org/) 规范： - `feat:` 新功能 - `fix:` Bug 修复 - `docs:` 文档更新 - `style:` 代码格式调整（不影响功能） - `refactor:` 代码重构 - `perf:` 性能优化 - `test:` 测试相关 - `chore:` 构建/工具相关 6. **推送并创建 Pull Request** ```bash git push origin feature/your-feature-name ``` 然后在 GitHub 上创建 Pull Request。 ## 代码规范 - 使用 Biome 进行代码检查和格式化 - 运行 `pnpm check` 确保代码符合规范 - 保持代码简洁、可读 - 添加必要的注释 ## 开发环境 - Node.js >= 18 - pnpm (推荐) 或 npm/yarn - 现代浏览器（Chrome、Firefox、Safari、Edge） ## 测试在提交 PR 前，请确保： - [ ] 代码通过 `pnpm check` - [ ] 在本地运行 `pnpm dev` 测试正常 - [ ] 构建通过 `pnpm build` - [ ] 测试了不同的浏览器和设备 ## 问题？如果遇到问题，可以： - 查看 [Issues](https://github.com/ricocc/ricoui-portfolio/issues) - 创建新的 Issue 提问 - 联系维护者：hello@ricoui.com 再次感谢你的贡献！🎉 services: portfolio: build: . ports: - "8080:80" restart: unless-stopped # 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;"] 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; } } ignoredBuiltDependencies: - ' @biomejs/ biome' - ' @tailwindcss/ oxide' - esbuild - sharp /** @type {import(' tailwindcss').Config} */ export default { darkMode: "class", content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], theme: { extend: { }, }, plugins: [require("@tailwindcss/typography")], }; { "extends": "astro/tsconfigs/base", "compilerOptions": { "strictNullChecks": true, "baseUrl": ".", "paths": { "@/*": ["src/*"] }, "typeRoots": ["./node_modules/@types", "./src/types",".vscode", "dist"] } } [ { "name": "Home", "url": "/" }, { "name": "Projects", "url": "/works" }, { "name": "About", "url": "/about" } ] --- import AnimatedText from "@/components/ui/AnimatedText.astro"; const { title, description } = Astro.props; ---

{description && (

)}

--- import { getCollection } from "astro:content"; import Pagination from "@/components/widgets/Pagination.astro"; import BlogCard from "@/components/cards/BlogCard.astro"; import SectionHeader from "@/components/elements/SectionHeader.astro"; import Button from "@/components/ui/Button.astro"; import AnimatedText from "@/components/ui/AnimatedText.astro"; // 定义组件接收的属性 const { title = "Latest Articles", description = "", limit = 3, listPage = false, showViewAllButton = true, pagination = { enable: false, currentPage: 1 }, postsPerPage = 3 } = Astro.props; // 获取博客文章集合 const allPosts = await getCollection("post"); // 按发布日期排序文章 let posts = allPosts.sort( (a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf() ); // 查找特色文章 const featuredPost = posts.find((post) => post.data.featured); // 如果存在特色文章，从主列表中移除 if (featuredPost && listPage) { posts = posts.filter((post) => post.data.featured !== true); } // 计算总页数 const totalPages = Math.ceil(posts.length / postsPerPage); // 如果启用了分页，则只显示当前页的文章 if (pagination.enable) { const indexOfLastPost = pagination.currentPage * postsPerPage; const indexOfFirstPost = indexOfLastPost - postsPerPage; posts = posts.slice(indexOfFirstPost, indexOfLastPost); } else if (!listPage) { // 如果不是列表页，限制显示的文章数量 posts = posts.slice(0, limit); } // 为每篇文章添加链接属性 - 创建新对象而不是修改原对象 const postsWithLinks = posts.map(post => { // 根据 Astro v5 官方文档，entry.id 就是条目的唯一标识符 // 直接使用 entry.id 生成 URL，对于 [...slug] 路由，id 已经是正确的路径 const link = `/blog/${post.id}`; return { ...post, data: { ...post.data, link } }; }); // 为特色文章创建带链接的版本 const featuredPostWithLink = featuredPost ? { ...featuredPost, data: { ...featuredPost.data, link: `/blog/${featuredPost.id}` } } : null; --- {/* 特色文章部分 - 仅在列表页第一页显示 */} {listPage && featuredPostWithLink && pagination.currentPage === 1 && (

)}

{!listPage && title && ( )} {/* 列表页标题 */} {listPage && title && (

{title}

)}

{postsWithLinks && postsWithLinks.map((post, index) => ( ))}

{listPage && totalPages > 1 && ( )}

{/* "View All Articles" 按钮 - 仅在非列表页且启用时显示 */} {!listPage && showViewAllButton && (

)}

--- export interface Props { url: string; // Button link URL type?: "solid" | "fill" | "disabled"; // Button type, optional, default is "solid" className?: string; // Custom CSS classes target?: "_blank" | "_self" | "_parent" | "_top"; // Link target, default is "_self" size?: "xs" | "sm" | "md" | "lg" | "xl"; // Button size, optional, default is "md" } const { url, type = "solid", className = "", target = "_self", size = "md" } = Astro.props; // Define padding and font size for different button sizes const sizeClasses = { xs: { padding: "px-3 py-1.5", fontSize: "text-xs", borderRadius: "rounded-lg", }, sm: { padding: "px-4 py-2", fontSize: "text-sm", borderRadius: "rounded-lg", }, md: { padding: "px-5 py-[12px]", fontSize: "text-base", borderRadius: "rounded-xl", }, lg: { padding: "px-6 py-3.5", fontSize: "text-lg", borderRadius: "rounded-xl", }, xl: { padding: "px-8 py-4", fontSize: "text-xl", borderRadius: "rounded-2xl", }, }; // Get classes for current size const currentSizeClasses = sizeClasses[size]; --- {type === "solid" ? (

) : type === "fill" ? ( ) : type === "disabled" ? (

) : ( )}

--- ---

--- // local structural type to avoid version-specific imports type LogoInput = string | { src: string }; interface Props { logo?: LogoInput; // image url or object with src or single letter tags?: string[]; // multiple labels like ["Blog", "Open Source"] url?: string; // external site url github?: string; // optional github url visitLabel?: string; // primary button text className?: string; // extra classes for wrapper } const { logo = '', tags = [' Website'], url = ' #', github = '', visitLabel = ' Visit Site', className = '' } = Astro.props as Props; // Normalize logo: support URL string or Astro ImageMetadata object let logoSrc: string | null = null; if (typeof logo === ' string') { const isUrlLike = logo.startsWith('/') || logo.startsWith(' http') || /\.(png|jpe?g|webp|svg)$/i.test(logo); if (isUrlLike) logoSrc = logo; } else if (logo && typeof logo === ' object' && ' src' in (logo as any)) { logoSrc = (logo as any).src as string; } ---

{logoSrc ? ( logo

) : ( {typeof logo === ' string' && logo ? logo : ' W.'} )}

{tags && tags.map((t) => ( {t} ))} {github && ( )}

{visitLabel}

--- import { siteConfig } from ' @/ config/ site.js'; export interface Props { title?: string; description?: string; keywords?: string; url?: string; ogImage?: string; twitterHandle?: string; } const { title, description, keywords = "", url = siteConfig.url, // ogImage = "/og.jpg", twitterHandle = siteConfig.social.twitterName || '', } = Astro.props; --- {title} --- import Layout from "@/layouts/Layout.astro"; import PageHeader from "@/components/elements/PageHeader.astro"; import BlogSection from "@/components/sections/BlogSection.astro"; // 使用与分页页面相同的每页文章数量 const POSTS_PER_PAGE = 6; // 博客首页显示第一页内容 const currentPage = 1; ---

import rss from "@astrojs/rss"; import { getCollection } from "astro:content"; export async function GET(context) { const blog = await getCollection(' post'); return rss({ title: ' Rico Portfolio Template Astro', description: ' Astro Blog Template by Rico UI', site: context.site, items: blog.map((post) => { const link = `/blog/${post.id}/`; return { title: post.data.title, pubDate: post.data.publishDate, description: post.data.description, link, stylesheet: '/ rss/ pretty-feed-v3.xsl', }; }), }); } /* Self-hosted fonts */ @font-face { font-family: ' Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/ fonts/ Inter-Variable.woff2') format(' woff2'); } @font-face { font-family: ' Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/ fonts/ InstrumentSerif-Regular.woff2') format(' woff2'); } @font-face { font-family: ' Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/ fonts/ InstrumentSerif-Italic.woff2') format(' woff2'); } @import "tailwindcss"; /* Path relative to current CSS file */ @config "../../tailwind.config.mjs"; /* Define theme font mappings */ @theme { --font-brand: "Instrument Serif", ui-serif, Georgia, serif; --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --max-screen: 1200px; --inner-screen: 800px; --color-neutral-50: #f8fafc; --color-neutral-100: #f1f5f9; --color-neutral-200: #e2e8f0; --color-neutral-300: #cbd5e1; --color-neutral-400: #94a3b8; --color-neutral-500: #64748b; --color-neutral-600: #475569; --color-neutral-700: #334155; --color-neutral-800: #1e293b; --color-neutral-900: #0f172a; --color-neutral-950: #020617; /* Violet theme #707BC2 */ --color-primary: #707BC2; --color-primary-rgb: 112, 123, 194; --color-primary-strong: #5B67B3; --color-primary-dark: #8B94D4; --color-primary-light: #A5ADE0; --color-primary-light-dark: #9BA3D8; --color-primary-lighter: #B8BEE8; /* Article-specific variables */ --color-primary-bg: var(--color-bg-primary-light); --color-primary-bg-light: var(--color-bg-secondary); --color-btn-primary: #707BC2; --color-btn-primary-hover: #5B67B3; --color-btn-primary-dark: #8B94D4; --color-btn-primary-dark-hover: #707BC2; /* Accent colors */ --color-accent: #707BC2; --color-accent-light: #A5ADE0; /* Background colors */ --color-bg-primary: #f8fafc; --color-bg-secondary: #fff; --color-bg-primary-light: #f1f5f9; --color-bg-primary-deep: #f8fafc; --color-bg-primary-dark: #0f172a; --color-bg-secondary-dark: #1e293b; /* Text colors */ --color-text-primary: #5B67B3; --color-text-secondary: #475569; --color-text-tertiary: #64748b; --color-text-primary-dark: #A5ADE0; --color-text-secondary-dark: #cbd5e1; --color-text-tertiary-dark: #94a3b8; } /* Dark mode variable overrides */ html.dark { --color-primary-rgb: 139, 148, 212; --color-primary-light-dark: #8B94D4; --color-primary-lighter: #A5ADE0; --color-primary-bg: rgba(112, 123, 194, 0.15); --color-primary-bg-light: rgba(112, 123, 194, 0.05); } /* Add typography styles */ @layer components { .font-brand{ font-weight: 400!important; } .prose { max-width: 65ch; } .prose img { border-radius: 30px; } .container{ max-width: var(--max-screen); margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } .site-container { max-width: var(--max-screen); margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } .inner-container { max-width: var(--inner-screen); margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } .gradient-title { background: linear-gradient(to right, #707BC2, #3d4785); -webkit-background-clip: text; background-clip: text; color: transparent; } .gradient-title-light{ background: linear-gradient(to right, #A5ADE0, #707BC2); -webkit-background-clip: text; background-clip: text; color: transparent; } } html,body{ color: var(--color-text-secondary); } html.dark,html.dark body{ color: var(--color-text-secondary-dark); } h1,h2,h3{ color:var(--color-text-primary); } html.dark h1,html.dark h2,html.dark h3{ color:var(--color-text-primary-dark); } /* Custom CSS styles */ #sun { transform: rotate(0); } #moon { transform: rotate(0); } #darkToggle:hover #sun { transform: rotate(360deg); } #darkToggle:hover #moon { transform: rotate(45deg); } html.dark #darkToggle:hover .horizon { border-color: #718096 !important; } html{ font-family: var(--font-sans); scroll-behavior: smooth; } html.dark { color-scheme: dark; } .horizon .setting { animation: 1s ease 0s 1 setting; } .horizon .rising { animation: 1s ease 0s 1 rising; } @keyframes setting { 0% { transform: translate3d(0, 10px, 0); } 40% { transform: translate3d(0, -2px, 0); } to { transform: translate3d(0, 30px, 0); } } @keyframes rising { 0% { opacity: 0; transform: translate3d(0, 30px, 0); } 40% { opacity: 1; transform: translate3d(0, -2px, 0); } to { opacity: 1; transform: translate3d(0, 10px, 0); } } html::-webkit-scrollbar, body::-webkit-scrollbar, div::-webkit-scrollbar { width: 6px !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, div::-webkit-scrollbar-track { background: var(--color-neutral-200) !important; border-radius: 6px !important; -webkit-border-radius: 6px !important; -moz-border-radius: 6px !important; -ms-border-radius: 6px !important; -o-border-radius: 6px !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, div::-webkit-scrollbar-thumb { background: var(--color-primary-light) !important; border-radius: 6px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, div::-webkit-scrollbar-thumb:hover { background: var(--color-primary) !important; } html::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:active, div::-webkit-scrollbar-thumb:active { background: var(--color-primary-dark) !important; } import tailwindcss from "@tailwindcss/vite"; import { defineConfig } from "astro/config"; import mdx from "@astrojs/mdx"; import sitemap from "@astrojs/sitemap"; import { fileURLToPath } from "url"; import path from "path"; const __dirname = path.dirname(fileURLToPath(import.meta.url)); // Get the site URL from environment variables, or use the default value if not set // Note: After the first deployment, be sure to set the correct PUBLIC_SITE_URL in the .env file const siteUrl = import.meta.env.PUBLIC_SITE_URL || ' https:// portfolio.ricoui.com/'; // https://astro.build/config export default defineConfig({ site: siteUrl, base: '/', envPrefix: ' PUBLIC_', vite: { plugins: [tailwindcss()], resolve: { alias: { ' @': path.resolve(__dirname, ' ./ src') } } }, server: { port: 5200, }, integrations: [mdx(), sitemap()], }); { "name": "astro-rico-portfolio", "type": "module", "version": "1.0.0", "description": "A modern, high-performance portfolio website template for designers built with Astro. Features retro blue theme, dark mode, and beautiful animations.", "keywords": [ "astro", "portfolio", "designer", "website", "template", "tailwindcss", "blog", "dark-mode", "responsive" ], "author": { "name": "Ricoui", "email": "hello@ricoui.com", "url": "https://ricoui.com" }, "repository": { "type": "git", "url": "https://github.com/ricocc/ricoui-portfolio.git" }, "bugs": { "url": "https://github.com/ricocc/ricoui-portfolio/issues" }, "homepage": "https://github.com/ricocc/ricoui-portfolio#readme", "license": "Apache-2.0", "scripts": { "dev": "astro dev", "start": "astro dev", "build": "astro check && astro build", "preview": "astro preview", "astro": "astro", "check": "biome check --apply-unsafe ." }, "devDependencies": { "@astrojs/check": "^0.9.5", "@biomejs/biome": "1.7.3", "@tailwindcss/typography": "^0.5.13", "@types/matter-js": "^0.20.2", "astro": "^5.15.4", "postcss": "^8.4.31", "tailwindcss": "^4.1.14", "typescript": "^5.4.5", "vite": "^5.2.11" }, "dependencies": { "@astrojs/mdx": "^4.3.10", "@astrojs/rss": "^4.0.13", "@astrojs/sitemap": "^3.6.0", "@lucide/astro": "^0.546.0", "@tailwindcss/vite": "^4.1.14", "aos": "^2.3.4", "matter-js": "^0.20.0", "motion": "^12.23.24", "sharp": "^0.34.4" } } [ { "dates": "2024 - Present", "role": "President", "company": "HEC IA", "description": "Technical workshops on AI tools for business students.", "logo": "/assets/hec-ia.png" }, { "dates": "2023 - Present", "role": "Freelance Developer", "company": "Self-employed", "description": "Fullstack development. Python, Golang, automation.", "logo": "/assets/freelance.png" } ] [ { "name": "Homelab Infrastructure", "description": "Self-hosted production infrastructure", "tags": [ "Kubernetes", "Proxmox", "Docker", "Monitoring" ], "image": "/assets/homelab.png", "url": "/work/homelab", "isShow": true }, { "name": "HEC IA", "description": "AI workshops for business students", "tags": [ "Education", "AI", "Workshops" ], "image": "/assets/hec-ia.png", "url": "/work/hec-ia", "isShow": true }, { "name": "Freelance Development", "description": "Fullstack development and automation", "tags": [ "Python", "Golang", "Automation" ], "image": "/assets/freelance.png", "url": "/work/freelance", "isShow": true } ] --- import SectionHeader from "@/components/elements/SectionHeader.astro"; import { Server, Code, GraduationCap } from "@lucide/astro"; interface Props { title?: string; description?: string; } const { title, description } = Astro.props; ---

Infrastructure

Self-hosted homelab with Kubernetes, monitoring, and PKI.

Development

Fullstack projects with Python, Golang, and modern tooling.



            
            
                
                    HEC IA
                    Making AI accessible to business students through workshops.




---
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";
---




  
    
    
      
    

    
    
    

    
    
      
      
        
        
          
            
            
          
        

        
        
          
        

        
        
          
        
      

      
      
        
        
          
          
        

        
        
          {
            menus.map((menu) => {
              return (
                
                  {menu.name}
                
              )
            })
          }
        

        
        
          
        
      

      
      
        
        

        

        
        
          
            
            
          
          
            Light
            Dark
          
        
      
    
  





  

 --- import Layout from "@/layouts/Layout.astro"; import
  PageHeader from "@/components/elements/PageHeader.astro"; import BlogSection from
  "@/components/sections/BlogSection.astro"; import { getCollection } from "astro:content"; //
  定义每页显示的文章数量 export const POSTS_PER_PAGE = 6; // 根据 Astro v5/v6，对于 SSG 模式下的分页路由，仍然需要使用
  getStaticPaths() // 这是因为需要告诉 Astro 在构建时生成哪些页面 // 注意：params 必须是字符串类型（符合 v6 要求） export async
  function getStaticPaths() { const allPosts = await getCollection("post"); // 按发布日期排序文章 let posts =
  allPosts.sort( (a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf() ); //
  查找特色文章，在列表页需要从主列表中移除 const featuredPost = posts.find((post) => post.data.featured); if
  (featuredPost) { posts = posts.filter((post) => post.data.featured !== true); } //
  使用移除特色文章后的文章数量计算总页数 const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE); // 返回所有分页路径，确保
  params.page 是字符串类型（v6 要求） return Array.from({ length: totalPages }, (_, i) => { const page = i +
  1; return { params: { page: page.toString() }, props: { page: page.toString() } }; }); } // 从
  props 获取页码（在 SSG 模式下通过 getStaticPaths 传递） const { page } = Astro.props; const currentPage =
  parseInt(page); --- 
      
        
      
      
        
          
        
      
    
  

 --- import { ArrowUpRight, Code, Server, Building, Cloud,
  GraduationCap, } from "@lucide/astro"; import { siteConfig } from "@/config/site.js"; import
  experiences from "@/collections/experiences.json"; import social from "@/collections/social.json";
  import AboutExperience from "@/components/elements/AboutExperience.astro"; import Button from
  "@/components/ui/Button.astro"; import Layout from "@/layouts/Layout.astro"; import Toc from
  "@/components/widgets/Toc.astro"; // Manually define page table of contents structure const
  headings = [ { depth: 2, slug: "about-me", text: "About Me" }, { depth: 2, slug: "expertise",
  text: "Expertise" }, { depth: 2, slug: "experience", text: "Experience" }, { depth: 2, slug:
  "education", text: "Education" }, { depth: 2, slug: "lets-connect", text: "Let's Connect" }, ];
  const filtered = headings.filter(h => h.depth <= 3);

---


      
      
        
      

      
      
        
          
          
            
              
            
          

          
          
            
              
                About Me
              
              
            

            
              
                
  Alexandre
                |
                
                  
  @vorpax 
              
            

            "Bridging business strategy with technical implementation."

            
              
  {social .filter(item => item.isShow !== false) .map((item, index) => ( 
                  
                  
                    
  {item.name}
                    
                    
  @{item.username}
                    
                  
                
  )) } 
            

            

            
              Started in business prep school, now at HEC Paris. Self-taught in infrastructure and
  development. I bridge business strategy with technical implementation.
            

            
              
              
            

            
            
              Expertise
              
                
                
                  
                    
                    
  Infrastructure
                    
                  
                
                
                
                  
                    
                    
  Fullstack Development
                    
                  

                

                
                
                  
                    
                    
  Business Strategy
                    
                  
                
                
                
                  
                    
                    
  DevOps
                    
                  
                
              

            


            

            
              
                Experience
              
               { experiences.map((experience, index) => { return ( 
                  
                
 ) }) } 
            

            

            
              
                Education
              
              
                
                  
                  
                    HEC Paris
                    M1 - Master in
  Management
                  
                
                
                  
                  
                    Sorbonne
                      University
                    Bachelor's in
  Mathematics
                  
                
              
            

            

            
              Let's Connect
               Reach out on LinkedIn or check out
  my work on GitHub
  . 
               Email: {siteConfig.mail}
              
            
          

        

      

    


  


    [
    {
    "id": 1,
    "name": "Github",
    "username": "vorpax",
    "image": "/assets/social/social-github.jpg",
    "url": "https://github.com/vorpax",
    "isShow": true
    },
    {
    "id": 2,
    "name": "LinkedIn",
    "username": "alexandre-houard",
    "image": "/assets/social/social-linkedin.png",
    "url": "https://www.linkedin.com/in/alexandre-houard-686960279/",
    "isShow": true
    },
    {
    "id": 3,
    "name": "Gitea",
    "username": "vorpax",
    "image": "/assets/social/social-gitea.png",
    "url": "https://gitea.vorpax.dev/vorpax",
    "isShow": true
    }
    ]



    [
    {
    "name": "Homelab Infrastructure",
    "description": "Self-hosted production infrastructure",
    "tags": [
    "Kubernetes",
    "Proxmox",
    "Docker",
    "Monitoring"
    ],
    "image": "/assets/homelab.png",
    "url": "/work/homelab",
    "isShow": true
    },
    {
    "name": "HEC IA",
    "description": "AI workshops for business students",
    "tags": [
    "Education",
    "AI",
    "Workshops"
    ],
    "image": "/assets/hec-ia.png",
    "url": "/work/hec-ia",
    "isShow": true
    },
    {
    "name": "Freelance Development",
    "description": "Fullstack development and automation",
    "tags": [
    "Python",
    "Golang",
    "Automation"
    ],
    "image": "/assets/freelance.png",
    "url": "/work/freelance",
    "isShow": true
    }
    ]


 # Rico Portfolio - 设计师个人作品集网站 一个基于 Astro
  构建的现代化、高性能设计师个人作品集网站模板。采用复古蓝色主题，支持暗色模式，具有精美的动画效果和优秀的用户体验。
  ![Astro](https://img.shields.io/badge/Astro-5.15.4-FF5D01?logo=astro&logoColor=white) ![Tailwind
  CSS](https://img.shields.io/badge/Tailwind-4.1.14-38B2AC?logo=tailwind-css&logoColor=white)
  ![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg) ## ✨ 特性 - 🚀 **基于 Astro** -
  快速、轻量级的静态站点生成器 - 🎨 **现代化设计** - 复古蓝色主题，支持暗色/亮色模式切换 - 📱 **完全响应式** - 适配各种设备尺寸 - 🎭 **精美动画** - 使用
  AOS 和自定义动画效果 - 📝 **博客系统** - 支持 MDX 格式的博客文章 - 🎯 **作品展示** - 优雅的作品集展示页面 - 🔍 **SEO 优化** - 内置 SEO
  和社交媒体标签 - ⚡ **性能优化** - 图片优化、代码分割、懒加载 - 🌐 **国际化支持** - 易于扩展多语言支持 ## 🛠️ 技术栈 - **框架**:
  [Astro](https://astro.build) 5.15.4 (兼容 v6) - **样式**: [Tailwind CSS](https://tailwindcss.com)
  4.1.14 - **动画**: [AOS](https://michalsnik.github.io/aos/) - **物理引擎**:
  [Matter.js](https://brm.io/matter-js/) - **内容管理**: MDX - **类型检查**: TypeScript ## 📦 安装 ### 使用包管理器
  ```bash # 使用 pnpm (推荐) pnpm install # 使用 npm npm install # 使用 yarn yarn install ``` ### 环境变量配置 复制
  `.env.example` 文件为 `.env` 并填写相应的配置： ```bash cp .env.example .env ``` 编辑 `.env` 文件，填入你的配置： ```env #
  站点 URL（可选，但有默认值 https://your-domain.com） # 首次部署可以不设置，但建议尽快设置正确的域名以优化 SEO
  PUBLIC_SITE_URL=https://your-domain.com # 分析工具（可选） PUBLIC_GA4_ID=your-google-analytics-id
  PUBLIC_UMAMI_ID=your-umami-id ``` > **注意**：`PUBLIC_SITE_URL` 如果没有设置，会使用默认值
  `https://your-domain.com`。虽然不会报错，但建议在部署后尽快设置正确的域名，以确保 sitemap、RSS feed 和 SEO 元标签正常工作。 ## 🚀 开发
  ```bash # 启动开发服务器 npm run dev # 或 pnpm dev # 访问 http://localhost:4321 ``` ## 📦 构建 ```bash #
  构建生产版本 npm run build # 预览构建结果 npm run preview ``` ## 📁 项目结构 ``` ├── public/ # 静态资源 │ ├── assets/
  # 图片、视频等资源 │ └── favicon.png # 网站图标 ├── src/ │ ├── assets/ # 源代码资源 │ ├── collections/ #
  数据集合（作品、经历等） │ ├── components/ # Astro 组件 │ │ ├── cards/ # 卡片组件 │ │ ├── sections/ # 页面区块组件 │ │ ├──
  ui/ # UI 组件 │ │ └── widgets/ # 小部件 │ ├── config/ # 配置文件 │ ├── content/ # MDX 博客内容 │ ├── layouts/ #
  布局组件 │ ├── pages/ # 页面路由 │ ├── scripts/ # 脚本文件 │ └── styles/ # 样式文件 ├── astro.config.mjs # Astro
  配置 ├── tailwind.config.mjs # Tailwind 配置 └── package.json # 项目依赖 ``` ## 🎨 自定义配置 ### 修改网站信息 编辑
  `src/config/site.js` 文件，修改网站的基本信息： ```javascript export const siteConfig = { title: "Your
  Portfolio", author: "Your Name", url: "https://your-domain.com", // ... 更多配置 }; ``` ### 修改主题颜色 编辑
  `src/styles/global.css` 文件中的 CSS 变量： ```css @theme { --color-primary: #2d6dc3;
  --color-primary-dark: #3b7bd9; /* ... 更多颜色变量 */ } ``` ### 添加作品 在 `src/collections/works.json`
  中添加你的作品信息。 ### 添加博客文章 在 `src/content/post/` 目录下创建新的 MDX 文件。项目使用 Astro v5 Content Layer API 和
  `glob` 加载器来管理内容集合，确保与 Astro v6 兼容。 **注意**：此模板已完全升级到 Astro v5.15 标准，并兼容 Astro v6： - ✅ 使用新的 Content
  Layer API (`glob` 加载器) - ✅ 使用 `entry.id` 替代已弃用的 `entry.slug` - ✅ 使用 `render(entry)` 替代已弃用的
  `entry.render()` - ✅ 使用 `import.meta.env` 替代 `process.env` - ✅ 使用 `import.meta.glob()` 替代已弃用的
  `Astro.glob()` - ✅ 所有 `getStaticPaths()` 的 params 都是字符串类型（v6 要求） ## 使用素材 - **Programming
  Sticker**: [Figma
  rogramming-sticker-1-0](https://www.figma.com/community/file/1392100849031958853/programming-sticker-1-0)
  - **Bento Cards**：[Figma Bento Cards](https://www.figma.com/community/file/1231184483170475120) -
  **Social Cards**: [Figma Bento
  2.5d](https://www.figma.com/community/file/1232620929235403629/bento-2-5d-widgets) ## 📧 联系方式 -
  **作者**: Ricoui - **博客**: [ricoui.com](https://github.com/ricocc) - **邮箱**: hello@ricoui.com -
  **Twitter**: [@ricouii](https://x.com/ricouii) - **GitHub**: [@ricocc](https://github.com/ricocc)
  ## 💡 其他产品 - **Rico Blog** - 开源 :
  [https://github.com/ricocc/public-portfolio-site](https://github.com/ricocc/public-portfolio-site)
  - **OG Gallery**: [ricoog.com](https://ricoog.com/) ## 🙏 致谢 - [Astro](https://astro.build) -
  优秀的静态站点生成器 - [Tailwind CSS](https://tailwindcss.com) - 实用优先的 CSS 框架 ## 📝 更新日志 ### 最新更新 (2024) -
  **升级到 Astro 5.15.4** - 完全符合 Astro v5.15 标准，兼容 Astro v6 - **内容集合升级** - 使用新的 Content Layer
  API，移除了所有旧版 API - **API 现代化** - 所有已弃用的 API 已更新为最新标准 - **性能优化** - 优化了构建和运行时性能 查看
  [CHANGELOG.md](CHANGELOG.md) 了解完整版本更新历史。 ## 关于作者 我是Rico，网页/UI设计师，热衷于做些有趣和创意的作品。拥有 UI/UX
  设计工作经验，目前专注于网页设计和视觉落地，以及开发项目探索。我平时在博客Rico's Blog更新内容。也可以关注我的小红书
  [@Rico的设计漫想](https://www.xiaohongshu.com/user/profile/5f2b6903000000000101f51f) 和 推特
  [@ricouii](https://x.com/ricouii). 或者添加我的微信，交个朋友  ## 💜
  支持作者 如果觉得有所帮助的话，一点点支持就可以大大激励创作者的热情，感谢！  --- ⭐
  如果这个项目对你有帮助，请给一个 Star！


 # Rico Portfolio - Designer Portfolio Website > [中文文档](README-zh.md) | English
  A modern, high-performance designer portfolio website template built with Astro. Features a retro
  blue theme, dark mode support, beautiful animations, and excellent user experience.
  ![Astro](https://img.shields.io/badge/Astro-5.15.4-FF5D01?logo=astro&logoColor=white) ![Tailwind
  CSS](https://img.shields.io/badge/Tailwind-4.1.14-38B2AC?logo=tailwind-css&logoColor=white)
  ![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg) ## ✨ Features - 🚀 **Built
  with Astro** - Fast and lightweight static site generator - 🎨 **Modern Design** - Retro blue
  theme with dark/light mode toggle - 📱 **Fully Responsive** - Adapts to all device sizes - 🎭
  **Beautiful Animations** - Using AOS and custom animation effects - 📝 **Blog System** - Supports
  MDX format blog posts - 🎯 **Portfolio Showcase** - Elegant portfolio showcase pages - 🔍 **SEO
  Optimized** - Built-in SEO and social media tags - ⚡ **Performance Optimized** - Image
  optimization, code splitting, lazy loading - 🌐 **i18n Support** - Easy to extend for
  multi-language support ## 🛠️ Tech Stack - **Framework**: [Astro](https://astro.build) 5.15.4 (v6
  compatible) - **Styling**: [Tailwind CSS](https://tailwindcss.com) 4.1.14 - **Animations**:
  [AOS](https://michalsnik.github.io/aos/) - **Physics Engine**:
  [Matter.js](https://brm.io/matter-js/) - **Content Management**: MDX - **Type Checking**:
  TypeScript ## 📦 Installation ### Using Package Manager ```bash # Using pnpm (recommended) pnpm
  install # Using npm npm install # Using yarn yarn install ``` ### Environment Variables
  Configuration Copy `.env.example` to `.env` and fill in the corresponding configuration: ```bash
  cp .env.example .env ``` Edit the `.env` file and fill in your configuration: ```env # Site URL
  (optional, but has default value https://your-domain.com) # You can skip this on first deployment,
  but it's recommended to set the correct domain as soon as possible to optimize SEO
  PUBLIC_SITE_URL=https://your-domain.com # Analytics (optional)
  PUBLIC_GA4_ID=your-google-analytics-id PUBLIC_UMAMI_ID=your-umami-id ``` > **Note**: If
  `PUBLIC_SITE_URL` is not set, it will use the default value `https://your-domain.com`. While it
  won't cause errors, it's recommended to set the correct domain after deployment to ensure sitemap,
  RSS feed, and SEO meta tags work properly. ## 🚀 Development ```bash # Start development server
  npm run dev # or pnpm dev # Visit http://localhost:4321 ``` ## 📦 Build ```bash # Build for
  production npm run build # Preview build result npm run preview ``` ## 📁 Project Structure ```
  ├── public/ # Static assets │ ├── assets/ # Images, videos, etc. │ └── favicon.png # Site favicon
  ├── src/ │ ├── assets/ # Source assets │ ├── collections/ # Data collections (works, experiences,
  etc.) │ ├── components/ # Astro components │ │ ├── cards/ # Card components │ │ ├── sections/ #
  Section components │ │ ├── ui/ # UI components │ │ └── widgets/ # Widgets │ ├── config/ #
  Configuration files │ ├── content/ # MDX blog content │ ├── layouts/ # Layout components │ ├──
  pages/ # Page routes │ ├── scripts/ # Script files │ └── styles/ # Style files ├──
  astro.config.mjs # Astro configuration ├── tailwind.config.mjs # Tailwind configuration └──
  package.json # Project dependencies ``` ## 🎨 Customization ### Modify Site Information Edit the
  `src/config/site.js` file to modify the site's basic information: ```javascript export const
  siteConfig = { title: "Your Portfolio", author: "Your Name", url: "https://your-domain.com", //
  ... more configuration }; ``` ### Modify Theme Colors Edit the CSS variables in the
  `src/styles/global.css` file: ```css @theme { --color-primary: #2d6dc3; --color-primary-dark:
  #3b7bd9; /* ... more color variables */ } ``` ### Add Works Add your work information in
  `src/collections/works.json`. ### Add Blog Posts Create new MDX files in the `src/content/post/`
  directory. The project uses Astro v5 Content Layer API with `glob` loader for content collections,
  ensuring compatibility with Astro v6. **Note**: This template has been fully upgraded to Astro
  v5.15 standards and is compatible with Astro v6: - ✅ Uses new Content Layer API (`glob` loader) -
  ✅ Uses `entry.id` instead of deprecated `entry.slug` - ✅ Uses `render(entry)` instead of
  deprecated `entry.render()` - ✅ Uses `import.meta.env` instead of `process.env` - ✅ Uses
  `import.meta.glob()` instead of deprecated `Astro.glob()` - ✅ All `getStaticPaths()` params are
  string type (v6 requirement) ## Figma Assets - **Programming Sticker**: [Figma
  rogramming-sticker-1-0](https://www.figma.com/community/file/1392100849031958853/programming-sticker-1-0)
  - **Bento Cards**：[Figma Bento Cards](https://www.figma.com/community/file/1231184483170475120) -
  **Social Cards**: [Figma Bento
  2.5d](https://www.figma.com/community/file/1232620929235403629/bento-2-5d-widgets) ## 📧 Contact -
  **Author**: Ricoui - **Blog**: [ricoui.com](https://github.com/ricocc) - **Email**:
  hello@ricoui.com - **Twitter**: [@ricouii](https://x.com/ricouii) - **GitHub**:
  [@ricocc](https://github.com/ricocc) ## 💡 Other Products - **Rico Blog** - Open Source:
  [https://github.com/ricocc/public-portfolio-site](https://github.com/ricocc/public-portfolio-site)
  - **OG Gallery**: [ricoog.com](https://ricoog.com/) ## 🙏 Acknowledgments -
  [Astro](https://astro.build) - Excellent static site generator - [Tailwind
  CSS](https://tailwindcss.com) - Utility-first CSS framework - All developers who contributed to
  this project ## About the Author I'm Rico, a web/UI designer passionate about creating fun and
  creative work. I have experience in UI/UX design and am currently focused on web design, visual
  implementation, and exploring development projects. I regularly update my blog on Rico's Blog. You can also follow me on
  Xiaohongshu [@Rico的设计漫想](https://www.xiaohongshu.com/user/profile/5f2b6903000000000101f51f) 和 X
  [@ricouii](https://x.com/ricouii). Or add me on WeChat—let’s be friends.  ## 💜 Support the Author If you’ve found this
  helpful, even a small contribution can greatly encourage creators. Thank you! 

    
      
     ## 📝 Changelog ### Latest Updates (2024) - **Upgraded
  to Astro 5.15.4** - Fully compliant with Astro v5.15 standards and compatible with Astro v6 -
  **Content Collections Upgrade** - Using new Content Layer API, all legacy APIs removed - **API
  Modernization** - All deprecated APIs updated to latest standards - **Performance Optimization** -
  Optimized build and runtime performance ⭐ If this project helps you, please give it a Star!


 ---
  import Button from "../components/ui/Button.astro"; import { siteConfig } from "@/config/site";
  import Layout from "@/layouts/Layout.astro"; import FeaturedWork from
  "../components/sections/FeaturedWork.astro"; import SocialCard from
  "@/components/cards/SocialCard.astro"; import AnimatedText from
  "@/components/ui/AnimatedText.astro"; import Explore from "@/components/sections/Explore.astro";
  --- 
      
        
          
            
            
              
            

            
            
              
            

            
            
              
            

            
            
              
            

            
            
              
            
          

          
          
          
        
      

      
        
      

      
        
      
    
  


    name: Build and Push Docker Image

    on:
    push:
    branches:
    - main
    - master

    env:
    REGISTRY: "gitea.vorpax.dev"
    IMAGE_NAME: "vorpax_admin/vorpax-portfolio-main"

    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 }}


 // Get site URL from environment variable, use default value if not
  set const SITE_URL = import.meta.env.PUBLIC_SITE_URL || 'https://vorpax.dev'; export const
  siteConfig = { title: "Alexandre | Vorpax", author: "vorpax", url: SITE_URL, mail: "contact at
  vorpax dot dev", resume: "/assets/resume.pdf", utm: { source: `${SITE_URL}`, medium: "referral",
  campaign: "navigation", }, meta: { 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: "", }, social: { github:
  "https://github.com/vorpax", linkedin: "https://www.linkedin.com/in/alexandre-houard-686960279/",
  gitea: "https://gitea.vorpax.dev/vorpax" }, }; // Footer social links export const socialLinks = [
  { name: 'Github', url: 'https://github.com/vorpax', icon: `` }, { name: 'LinkedIn', url:
  'https://www.linkedin.com/in/alexandre-houard-686960279/', icon: `` }, { name: 'RSS', url: '/rss.xml', icon: `` }, ];