vorpax/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit theme for my own siye
Some checks failed
Build and Push Docker Image / build-and-push (push) Failing after 13s
Details

Browse Source
This commit is contained in:
vorpax
2026-01-02 16:15:14 +01:00
parent 4cf082c589
commit 6f5d0fcb35
182 changed files with 742 additions and 2308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
src/pages/about.astro
View File

@@ -2,19 +2,16 @@
import {
ArrowUpRight,
Code,
Globe,
Mail,
Monitor,
Palette,
Smartphone,
Zap,
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 Matter from "@/components/ui/Matter.astro";
import Layout from "@/layouts/Layout.astro";
import Toc from "@/components/widgets/Toc.astro";
@@ -22,8 +19,8 @@ import Toc from "@/components/widgets/Toc.astro";
const headings = [
{ depth: 2, slug: "about-me", text: "About Me" },
{ depth: 2, slug: "expertise", text: "Expertise" },
{ depth: 2, slug: "tool-stack", text: "Tool Stack" },
{ depth: 2, slug: "experience", text: "Experience" },
{ depth: 2, slug: "education", text: "Education" },
{ depth: 2, slug: "lets-connect", text: "Let's Connect" },
];
@@ -38,7 +35,7 @@ const filtered = headings.filter(h => h.depth <= 3);
</div>
<!-- Main container -->
<div class="relative site-container mx-auto my-8">
<div class="relative site-container mx-auto my-8">
<div class="flex flex-col lg:flex-row gap-8 lg:gap-12 xl:gap-16">
<!-- Left TOC - Fixed on desktop -->
<aside class="relative hidden lg:block lg:w-40 xl:w-50 flex-shrink-0">
@@ -57,7 +54,7 @@ const filtered = headings.filter(h => h.depth <= 3);
>
<h2
id="about-me"
class="text-2xl font-brand tracking-tight sm:text-3xl lg:text-4xl"
class="text-2xl font-brand tracking-tight sm:text-3xl lg:text-4xl"
>
About Me
</h2>
@@ -71,27 +68,25 @@ const filtered = headings.filter(h => h.depth <= 3);
data-aos-duration="500"
data-aos-once="true"
>
<img src="/assets/avatar.png" alt="Ricoui" class="w-14 h-14 rounded-full">
<div class="flex items-center gap-3">
<a href="https://www.ricoui.com/" target="_blank" class="font-brand text-[24px] text-neutral-700 dark:text-neutral-100">Rico</a>
<span class="font-brand text-[24px] text-neutral-700 dark:text-neutral-100">Alexandre</span>
<span class="text-[0.75em] text-neutral-400">|</span>
<a href="https://x.com/ricouii" class="flex items-center gap-1 text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 text-sm" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4.5 h-4.5 fill-current">
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
<a href={siteConfig.social.github} class="flex items-center gap-1 text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 text-sm" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4.5 h-4.5 fill-current">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
@ricouii
@vorpax
</a>
</div>
</div>
<p
class="text-3xl mt-2 mb-2 font-brand italic text-left text-primary-strong dark:text-primary-light"
class="text-2xl mt-2 mb-2 font-brand italic text-left text-primary-strong dark:text-primary-light"
data-aos="fade-up-xs"
data-aos-delay="200"
data-aos-duration="500"
data-aos-once="true"
>"Beautiful design. Clean code. That's the goal."</p>
<!-- <div class="w-full border-b-1 border-dashed border-b-gray-200 dark:border-b-neutral-700 mt-4 mb-8"></div> -->
>"Bridging business strategy with technical implementation."</p>
<div
class="social"
@@ -127,8 +122,6 @@ const filtered = headings.filter(h => h.depth <= 3);
@{item.username}
</div>
</div>
{/* Hover overlay */}
{/* <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-black/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl"></div> */}
</a>
))
}
@@ -137,55 +130,32 @@ const filtered = headings.filter(h => h.depth <= 3);
<div class="w-full border-b-1 border-dashed border-b-gray-200 dark:border-b-neutral-700 mt-4 mb-8"></div>
<p
class="text-xl font-medium text-left text-neutral-800 dark:text-neutral-100"
class="text-neutral-700 pb-4 pt-2 leading-[1.8] dark:text-neutral-200"
data-aos="fade-up-xs"
data-aos-delay="100"
data-aos-duration="500"
data-aos-once="true"
>
I'm Rico, a Senior Web & Product Designer.
Started in business prep school, now at HEC Paris. Self-taught in infrastructure and development. I bridge business strategy with technical implementation.
</p>
<p
class="text-neutral-700 pb-4 pt-4 leading-[1.8] dark:text-neutral-200"
<div
class="mt-8 mb-16 flex item-center justify-start gap-3"
data-aos="fade-up-xs"
data-aos-delay="200"
data-aos-duration="500"
data-aos-once="true"
>
With 8+ years of experience in UX/UI, I not only enjoy creative design and content creation, but coding is also one of my great interests. I often transform my rich and quirky ideas and creativity into design outcomes and tangible projects.
</p>
<p
class="text-neutral-700 leading-[1.8] dark:text-neutral-200"
data-aos="fade-up-xs"
data-aos-delay="300"
data-aos-duration="500"
data-aos-once="true"
>
Great design isn't just a pretty interface—it helps people reach their goals naturally, fuels sustainable growth, and keeps systems solid as you scale. I connect design and development, bringing strategy, usability, and execution together to turn visuals into real, measurable results.
</p>
<div
class="mt-8 mb-16 flex item-center justify-start gap-3"
data-aos="fade-up-xs"
data-aos-delay="400"
data-aos-duration="500"
data-aos-once="true"
>
<Button url="mailto:hello@rico.com" > <Mail size={16} /> hello@ricoui.com</Button>
<Button url={siteConfig.resume} type="fill"> Resume <ArrowUpRight size={16} /> </Button>
<Button url={siteConfig.social.linkedin} type="fill"> LinkedIn <ArrowUpRight size={16} /> </Button>
<Button url={siteConfig.social.github}> GitHub <ArrowUpRight size={16} /> </Button>
</div>
<!-- <img src="/assets/about.jpg" class="relative z-30 w-full my-10 rounded-xl" /> -->
<div class="w-full border-b-1 border-dashed border-b-neutral-200 dark:border-b-neutral-700 mt-4 mb-8"></div>
<section>
<h2
id="expertise"
class="mt-8 mb-2 text-[28px] text-neutral-800 dark:text-neutral-200 font-brand"
class="mt-8 mb-2 text-[28px] text-neutral-800 dark:text-neutral-200 font-brand"
data-aos="fade-up-xs"
data-aos-duration="500"
data-aos-once="true"
@@ -197,57 +167,39 @@ const filtered = headings.filter(h => h.depth <= 3);
data-aos-duration="600"
data-aos-once="true"
>
<!-- Product Design -->
<div class="item flex justify-start items-start flex-grow-0 flex-shrink-0 overflow-hidden gap-2 px-5 py-4 rounded-xl bg-gradient-to-b from-[f7f8f0] to-[#f1f2f9] dark:from-gray-900 dark:to-gray-800 dark:text-neutral-200 ">
<!-- Infrastructure -->
<div class="item flex justify-start items-start flex-grow-0 flex-shrink-0 overflow-hidden gap-2 px-5 py-4 rounded-xl bg-gradient-to-b from-[f7f8f0] to-[#f1f2f9] dark:from-gray-900 dark:to-gray-800 dark:text-neutral-200">
<div class="flex justify-center items-center flex-grow-0 flex-shrink-0 gap-2">
<Palette size={22} />
<Server size={22} />
<div class="flex-grow-0 flex-shrink-0 text-base font-medium text-left text-neutral-700 dark:text-neutral-200">
Product Design
Infrastructure
</div>
</div>
</div>
<!-- Website Design -->
<div class="item flex justify-start items-start flex-grow-0 flex-shrink-0 overflow-hidden gap-2 px-5 py-4 rounded-xl bg-gradient-to-b from-[f7f8f0] to-[#f1f2f9] dark:from-gray-900 dark:to-gray-800">
<div class="flex justify-center items-center flex-grow-0 flex-shrink-0 gap-2">
<Globe size={22} />
<div class="flex-grow-0 flex-shrink-0 text-base font-medium text-left text-neutral-700 dark:text-neutral-200">
Website Design
</div>
</div>
</div>
<!-- Brand Design -->
<div class="item flex justify-start items-start flex-grow-0 flex-shrink-0 overflow-hidden gap-2 px-5 py-4 rounded-xl bg-gradient-to-b from-[f7f8f0] to-[#f1f2f9] dark:from-gray-900 dark:to-gray-800">
<div class="flex justify-center items-center flex-grow-0 flex-shrink-0 gap-2">
<Zap size={22} />
<div class="flex-grow-0 flex-shrink-0 text-base font-medium text-left text-neutral-700 dark:text-neutral-200">
Brand Design
</div>
</div>
</div>
<!-- Prototyping -->
<div class="item flex justify-start items-start flex-grow-0 flex-shrink-0 overflow-hidden gap-2 px-5 py-4 rounded-xl bg-gradient-to-b from-[f7f8f0] to-[#f1f2f9] dark:from-gray-900 dark:to-gray-800">
<div class="flex justify-center items-center flex-grow-0 flex-shrink-0 gap-2">
<Monitor size={22} />
<div class="flex-grow-0 flex-shrink-0 text-base font-medium text-left text-neutral-700 dark:text-neutral-200">
Prototyping
</div>
</div>
</div>
<!-- Development -->
<div class="item flex justify-start items-start flex-grow-0 flex-shrink-0 overflow-hidden gap-2 px-5 py-4 rounded-xl bg-gradient-to-b from-[f7f8f0] to-[#f1f2f9] dark:from-gray-900 dark:to-gray-800">
<!-- Fullstack Development -->
<div class="item flex justify-start items-start flex-grow-0 flex-shrink-0 overflow-hidden gap-2 px-5 py-4 rounded-xl bg-gradient-to-b from-[f7f8f0] to-[#f1f2f9] dark:from-gray-900 dark:to-gray-800">
<div class="flex justify-center items-center flex-grow-0 flex-shrink-0 gap-2">
<Code size={22} />
<div class="flex-grow-0 flex-shrink-0 text-base font-medium text-left text-neutral-700 dark:text-neutral-200">
Development
Fullstack Development
</div>
</div>
</div>
<!-- UI/UX Design -->
<div class="item flex justify-start items-start flex-grow-0 flex-shrink-0 overflow-hidden gap-2 px-5 py-4 rounded-xl bg-gradient-to-b from-[f7f8f0] to-[#f1f2f9] dark:from-gray-900 dark:to-gray-800">
<!-- Business Strategy -->
<div class="item flex justify-start items-start flex-grow-0 flex-shrink-0 overflow-hidden gap-2 px-5 py-4 rounded-xl bg-gradient-to-b from-[f7f8f0] to-[#f1f2f9] dark:from-gray-900 dark:to-gray-800">
<div class="flex justify-center items-center flex-grow-0 flex-shrink-0 gap-2">
<Smartphone size={22} />
<Building size={22} />
<div class="flex-grow-0 flex-shrink-0 text-base font-medium text-left text-neutral-700 dark:text-neutral-200">
UI/UX Design
Business Strategy
</div>
</div>
</div>
<!-- DevOps -->
<div class="item flex justify-start items-start flex-grow-0 flex-shrink-0 overflow-hidden gap-2 px-5 py-4 rounded-xl bg-gradient-to-b from-[f7f8f0] to-[#f1f2f9] dark:from-gray-900 dark:to-gray-800">
<div class="flex justify-center items-center flex-grow-0 flex-shrink-0 gap-2">
<Cloud size={22} />
<div class="flex-grow-0 flex-shrink-0 text-base font-medium text-left text-neutral-700 dark:text-neutral-200">
DevOps
</div>
</div>
</div>
@@ -256,33 +208,10 @@ const filtered = headings.filter(h => h.depth <= 3);
<div class="w-full border-b-1 border-dashed border-b-gray-200 dark:border-b-neutral-700 mt-4 mb-8"></div>
<section>
<h2
id="tool-stack"
class="mt-12 mb-4 text-[28px] text-neutral-800 dark:text-neutral-200 font-brand"
data-aos="fade-up-xs"
data-aos-duration="500"
data-aos-once="true"
>Tool Stack</h2>
<div
class="tool-stack-box relative bg-white border-accent/25 dark:bg-gray-900 rounded-xl overflow-hidden w-full h-[500px]"
data-aos="fade-up-sm"
data-aos-delay="100"
data-aos-duration="600"
data-aos-once="true"
>
<Matter />
<!-- Fallback content if Matter.js doesn't load -->
<div class="absolute inset-0 flex items-center justify-center text-white opacity-50">
</div>
</div>
</section>
<div class="w-full border-b-1 border-dashed border-b-gray-200 dark:border-b-neutral-700 mt-12 mb-12"></div>
<section class="experience">
<h2
id="experience"
class="mt-12 mb-4 text-[28px] text-neutral-800 dark:text-neutral-200 font-brand"
class="mt-12 mb-4 text-[28px] text-neutral-800 dark:text-neutral-200 font-brand"
data-aos="fade-up-xs"
data-aos-duration="500"
data-aos-once="true"
@@ -319,11 +248,49 @@ const filtered = headings.filter(h => h.depth <= 3);
}
</div>
</section>
<div class="w-full border-b-1 border-dashed border-b-gray-200 dark:border-b-neutral-700 mt-4 mb-8"></div>
<section class="education">
<h2
id="education"
class="mt-12 mb-4 text-[28px] text-neutral-800 dark:text-neutral-200 font-brand"
data-aos="fade-up-xs"
data-aos-duration="500"
data-aos-once="true"
>
Education
</h2>
<div
class="space-y-4 mt-6"
data-aos="fade-up-xs"
data-aos-delay="100"
data-aos-duration="600"
data-aos-once="true"
>
<div class="flex items-start gap-3">
<GraduationCap size={20} class="mt-1 text-primary dark:text-primary-light" />
<div>
<p class="font-medium text-neutral-800 dark:text-neutral-100">HEC Paris</p>
<p class="text-sm text-neutral-600 dark:text-neutral-400">M1 - Master in Management</p>
</div>
</div>
<div class="flex items-start gap-3">
<GraduationCap size={20} class="mt-1 text-primary dark:text-primary-light" />
<div>
<p class="font-medium text-neutral-800 dark:text-neutral-100">Sorbonne University</p>
<p class="text-sm text-neutral-600 dark:text-neutral-400">Bachelor's in Mathematics</p>
</div>
</div>
</div>
</section>
<div class="w-full border-b-1 border-dashed border-b-gray-200 dark:border-b-neutral-700 mt-12 mb-8"></div>
<section>
<h2
id="lets-connect"
class="mt-12 mb-4 text-[28px] text-neutral-800 dark:text-neutral-200 font-brand"
class="mt-12 mb-4 text-[28px] text-neutral-800 dark:text-neutral-200 font-brand"
data-aos="fade-up-xs"
data-aos-duration="500"
data-aos-once="true"
@@ -335,13 +302,16 @@ const filtered = headings.filter(h => h.depth <= 3);
data-aos-duration="500"
data-aos-once="true"
>
If you want to stay up to date with my work be sure to <a
href={siteConfig.social.twitter}
Reach out on <a
href={siteConfig.social.linkedin}
target="_blank"
class="text-indigo-500 underline">follow me on twitter</a
>, or you can send me an <a href="mailto:hello@ricoui.com" class=" underline"
>email</a
> and I'll be sure to get back to you.
class="text-primary underline dark:text-primary-light">LinkedIn</a
> or check out my work on <a href={siteConfig.social.github} target="_blank" class="text-primary underline dark:text-primary-light"
>GitHub</a
>.
</p>
<p class="text-sm leading-6 text-neutral-700 dark:text-neutral-300 mt-2">
Email: <span class="text-primary dark:text-primary-light">{siteConfig.mail}</span>
</p>
</section>
</main>

57
src/pages/index.astro
View File

@@ -1,29 +1,27 @@
---
import Button from "../components/ui/Button.astro";
import { siteConfig } from "@/config/site";
import HeroCard from "@/components/home/HeroCard.astro";
import Layout from "@/layouts/Layout.astro";
import FeaturedWork from "../components/sections/FeaturedWork.astro";
import BlogSection from "@/components/sections/BlogSection.astro";
import SocialCard from "@/components/cards/SocialCard.astro";
import AnimatedText from "@/components/ui/AnimatedText.astro";
import Explore from "@/components/sections/Explore.astro";
---
<Layout
title="Rico Portfolio Site 2025"
description="Welcome to Rico's portfolio site! Explore my work as a web/UI designer with 8+ years of experience in creating captivating visuals and interactive experiences."
keywords="Rico, Portfolio, Web Design, UI Design, Frontend Development, Creative Designer"
title="Alexandre | Vorpax"
description="M1 HEC Paris | President HEC IA | Freelance Fullstack Developer | Infrastructure Enthusiast"
keywords="Alexandre, Portfolio, Developer, Infrastructure, Homelab, HEC Paris, Engineering"
>
<div
class="relative site-container z-20 w-full mx-auto mt-16 px-4 md:mt-18 lg:mt-20 xl:px-0"
>
<div class="relative w-full px-4 flex flex-col items-center justify-between md:flex-row mb-16 ">
<div class="relative w-full md:max-w-[420px] md:w-1/2 text-center sm:text-left sm:-mt-8">
<div class="relative w-full md:max-w-[520px] md:w-1/2 text-center sm:text-left sm:-mt-8">
<!-- Title - AnimatedText animation -->
<h1 class="mb-4">
<AnimatedText
content="Hi, I'm Rico"
content="Hi, I'm Alexandre"
delay={0.1}
duration={0.5}
stagger={0.08}
@@ -31,21 +29,21 @@ keywords="Rico, Portfolio, Web Design, UI Design, Frontend Development, Creative
/>
</h1>
<!-- First description - AnimatedText animation -->
<div class="mb-2">
<!-- Tagline -->
<div class="mb-4">
<AnimatedText
content="I'm a web/UI designer with 8+ years of experience. I love blending design and code to create captivating visuals and interactive experiences."
content="Business x Engineering x Infrastructure"
delay={0.3}
duration={0.5}
stagger={0.015}
class="text-base text-neutral-700 dark:text-neutral-300"
stagger={0.02}
class="text-xl font-medium text-primary dark:text-primary-light"
/>
</div>
<!-- Second description - AnimatedText animation -->
<!-- Description -->
<div class="mb-4">
<AnimatedText
content="I believe great design should be both delightful and solve real-world challenges."
content="M1 at HEC Paris. President of HEC IA. Freelance fullstack developer. Infrastructure enthusiast."
delay={0.5}
duration={0.5}
stagger={0.015}
@@ -61,8 +59,8 @@ keywords="Rico, Portfolio, Web Design, UI Design, Frontend Development, Creative
data-aos-duration="500"
data-aos-once="true"
>
<Button url={siteConfig.social.twitter} type="fill" className="m-auto mt-4 text-center sm:text-left sm:m-0 sm:mt-6 max-w-[200px]">
Follow me on 𝕏
<Button url={siteConfig.social.github} type="fill" className="m-auto mt-4 text-center sm:text-left sm:m-0 sm:mt-6 max-w-[200px]">
View GitHub
</Button>
</div>
@@ -74,11 +72,11 @@ keywords="Rico, Portfolio, Web Design, UI Design, Frontend Development, Creative
data-aos-duration="600"
data-aos-once="true"
>
<SocialCard displaySocialIds={[1, 2, 3,4]}/>
<SocialCard displaySocialIds={[1, 2]}/>
</div>
</div>
<!-- HeroCard - AOS animation -->
<!-- Empty space on the right for now, can add hero image later -->
<div
class="relative justify-end w-full mt-16 md:flex md:pl-10 md:w-1/2 md:mt-0 md:translate-y-4 xl:translate-y-0"
data-aos="fade-left-sm"
@@ -86,11 +84,6 @@ keywords="Rico, Portfolio, Web Design, UI Design, Frontend Development, Creative
data-aos-duration="800"
data-aos-once="true"
>
<HeroCard
imageUrl="/assets/home/gradientshub.jpg"
title="Gradientshub"
link="https://gradientshub.com"
/>
</div>
</div>
</div>
@@ -102,7 +95,7 @@ keywords="Rico, Portfolio, Web Design, UI Design, Frontend Development, Creative
data-aos-duration="600"
data-aos-once="true"
>
<Explore title="Explore ↓" />
<Explore title="Explore" />
</section>
<section
@@ -112,21 +105,7 @@ keywords="Rico, Portfolio, Web Design, UI Design, Frontend Development, Creative
data-aos-duration="600"
data-aos-once="true"
>
<FeaturedWork title="Featured Work ↓" description="I create innovative and purposeful designs that not only capture attention but also drive meaningful results." limit={5} />
</section>
<section
class="mt-26 mb-12"
data-aos="fade-up-sm"
data-aos-delay="100"
data-aos-duration="600"
data-aos-once="true"
>
<BlogSection
title="Latest Articles ↓"
description="These are my notes and articles on design, development and life thinking."
showViewAllButton={true}
/>
<FeaturedWork title="Projects" description="What I've been working on." limit={3} />
</section>
</Layout>

111
src/pages/infrastructure.astro Normal file
View File

@@ -0,0 +1,111 @@
---
import Layout from "@/layouts/Layout.astro";
import { Server, Database, Shield, Globe, Activity, Lock } from "@lucide/astro";
---
<Layout
title="Infrastructure"
description="Technical overview of my homelab infrastructure."
keywords="Infrastructure, Homelab, Kubernetes, Proxmox, Docker, Monitoring"
>
<div class="site-container mx-auto my-8 md:my-16 px-4">
<header class="mb-12">
<h1 class="text-4xl font-brand mb-4 text-neutral-800 dark:text-neutral-100">Infrastructure</h1>
<p class="text-neutral-600 dark:text-neutral-400">Technical overview of my homelab stack.</p>
</header>
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Virtualization -->
<div class="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center gap-3 mb-4">
<Server size={24} class="text-primary dark:text-primary-light" />
<h2 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">Virtualization</h2>
</div>
<ul class="space-y-2 text-neutral-600 dark:text-neutral-400 text-sm">
<li><strong>Proxmox VE</strong> - Hypervisor</li>
<li>Multiple VMs and LXC containers</li>
<li>ZFS storage pools</li>
</ul>
</div>
<!-- Orchestration -->
<div class="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center gap-3 mb-4">
<Database size={24} class="text-primary dark:text-primary-light" />
<h2 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">Orchestration</h2>
</div>
<ul class="space-y-2 text-neutral-600 dark:text-neutral-400 text-sm">
<li><strong>Kubernetes</strong> - Container orchestration</li>
<li><strong>Docker</strong> - Containerization</li>
<li>GitOps deployment workflow</li>
</ul>
</div>
<!-- PKI & Security -->
<div class="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center gap-3 mb-4">
<Shield size={24} class="text-primary dark:text-primary-light" />
<h2 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">PKI & Security</h2>
</div>
<ul class="space-y-2 text-neutral-600 dark:text-neutral-400 text-sm">
<li><strong>step-ca</strong> - Internal Certificate Authority</li>
<li>Automated certificate provisioning</li>
<li>mTLS for service communication</li>
</ul>
</div>
<!-- DNS -->
<div class="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center gap-3 mb-4">
<Globe size={24} class="text-primary dark:text-primary-light" />
<h2 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">DNS</h2>
</div>
<ul class="space-y-2 text-neutral-600 dark:text-neutral-400 text-sm">
<li><strong>Technitium</strong> - DNS Server</li>
<li>Split-horizon DNS</li>
<li>Internal service discovery</li>
</ul>
</div>
<!-- Monitoring -->
<div class="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center gap-3 mb-4">
<Activity size={24} class="text-primary dark:text-primary-light" />
<h2 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">Monitoring</h2>
</div>
<ul class="space-y-2 text-neutral-600 dark:text-neutral-400 text-sm">
<li><strong>Grafana</strong> - Visualization</li>
<li><strong>Prometheus</strong> - Metrics</li>
<li><strong>InfluxDB</strong> - Time-series data</li>
</ul>
</div>
<!-- Access & Auth -->
<div class="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center gap-3 mb-4">
<Lock size={24} class="text-primary dark:text-primary-light" />
<h2 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">Access & Auth</h2>
</div>
<ul class="space-y-2 text-neutral-600 dark:text-neutral-400 text-sm">
<li><strong>Authentik</strong> - Identity Provider</li>
<li>OIDC/SAML SSO</li>
<li><strong>Caddy</strong> - Reverse proxy</li>
<li><strong>FRP</strong> - Tunnel access</li>
</ul>
</div>
</div>
<div class="mt-12 p-6 rounded-xl bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700">
<h2 class="text-xl font-medium mb-4 text-neutral-800 dark:text-neutral-100">Architecture Notes</h2>
<p class="text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed">
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.
</p>
</div>
<div class="mt-8">
<a href="/work/homelab" class="text-primary dark:text-primary-light hover:underline text-sm">
&larr; Back to Homelab project
</a>
</div>
</div>
</Layout>

64
src/pages/work/3dvalentine.astro
View File

@@ -1,64 +0,0 @@
---
import { Image } from "astro:assets";
import PostLayout from "@/layouts/PostLayout.astro";
import PageHeader from "@/components/elements/PageHeader.astro";
import ActionBar from "@/components/widgets/ActionBar.astro";
import SeparatorLine from "@/components/elements/SeparatorLine.astro";
const workTitle = "3D Valentines Assets";
const workDescription = "Design Resources & Tools";
const workTags = ["3D", "Resources", "Tools"];
// 手动导入图片
import Img01 from "../../assets/work/free-3d-valentines-assets/01.jpg";
import Img02 from "../../assets/work/free-3d-valentines-assets/02.jpg";
import Img03 from "../../assets/work/free-3d-valentines-assets/03.jpg";
import Img04 from "../../assets/work/free-3d-valentines-assets/04.jpg";
const images = [Img01, Img02, Img03, Img04];
import logoUrl from "../../assets/work/free-3d-valentines-assets/logo.png";
---
<PostLayout
title={workTitle}
description="Free 3D Valentine's Day assets for designers and developers. High-quality 3D models and designs for your projects."
keywords="3D, Valentine's Day, Design Resources, 3D Models, Free Assets, Design Tools"
>
<div class="work article">
<main class="work-wrapper">
<PageHeader
title={workTitle}
tags={workTags}
className="mb-6 md:mb-8"
>
</PageHeader>
</section>
<div class="site-container m-auto">
<SeparatorLine />
</div>
<section class="article-content">
<div class="site-container mx-auto my-8 md:my-16 ">
<div>
<p>
An exquisite collection of 3D Valentine's Day materials, providing creative inspiration for designers and developers. This free 3D resource pack includes various high-quality models and designs that can be used for your Valentine's Day themed projects.
</p>
<p>These 3D resources feature modern design styles with rich details and textures. Whether used for website design, application interfaces, social media content, or other creative projects, these resources can help you create unique Valentine's Day experiences.</p>
<p>All resources are free to use and suitable for both personal and commercial projects. Feel free to download and use these beautiful 3D Valentine's Day materials in your designs.</p>
</div>
{images.map((img, index) => (
<picture class="picture mt-8 md:mt-12 mb-8 md:mb-12 rounded-2xl overflow-hidden">
<Image src={img} alt={`3D Valentine's Day asset ${index + 1}`} class="w-full h-full object-cover" loading="lazy" decoding="async" quality={100}/>
</picture>
))}
</div>
</section>
</main>
</div>
<ActionBar
logo={logoUrl}
tags={workTags}
url="https://valentine.uiuxdeck.com/"
github="https://github.com/ricocc/free-3d-valentines-assets"
visitLabel="Visit Site"
/>
</PostLayout>

50
src/pages/work/freelance.astro Normal file
View File

@@ -0,0 +1,50 @@
---
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";
---
<PostLayout
title="Freelance Development"
description="Fullstack development and automation services."
keywords="Freelance, Developer, Python, Golang, Automation, Fullstack"
>
<div class="work article">
<main class="work-wrapper">
<PageHeader
title="Freelance Development"
tags={["Python", "Golang", "Automation"]}
className="mb-6 md:mb-8"
>
</PageHeader>
<div class="site-container m-auto">
<SeparatorLine />
</div>
<section class="article-content">
<div class="site-container mx-auto my-8 md:my-16 max-w-3xl">
<div class="prose dark:prose-invert">
<h2 class="text-2xl font-brand mb-4 text-neutral-800 dark:text-neutral-100">Stack</h2>
<ul class="space-y-2 text-neutral-700 dark:text-neutral-300 mb-6">
<li><strong>Backend:</strong> Python, Golang</li>
<li><strong>Automation:</strong> Bash, scripting</li>
<li><strong>Infrastructure:</strong> Docker, Linux</li>
</ul>
<h2 class="text-2xl font-brand mb-4 mt-8 text-neutral-800 dark:text-neutral-100">Services</h2>
<ul class="space-y-2 text-neutral-700 dark:text-neutral-300 mb-6">
<li>Web application development</li>
<li>Automation and scripting</li>
<li>API development</li>
<li>DevOps and deployment</li>
</ul>
<h2 class="text-2xl font-brand mb-4 mt-8 text-neutral-800 dark:text-neutral-100">Contact</h2>
<p class="text-neutral-700 dark:text-neutral-300 leading-relaxed">
Interested in working together? Reach out at <span class="text-primary dark:text-primary-light">{siteConfig.mail}</span>
</p>
</div>
</div>
</section>
</main>
</div>
</PostLayout>

46
src/pages/work/hec-ia.astro Normal file
View File

@@ -0,0 +1,46 @@
---
import PostLayout from "@/layouts/PostLayout.astro";
import PageHeader from "@/components/elements/PageHeader.astro";
import SeparatorLine from "@/components/elements/SeparatorLine.astro";
---
<PostLayout
title="HEC IA"
description="Leading technical AI workshops for business students at HEC Paris."
keywords="HEC IA, AI, Workshops, Education, HEC Paris"
>
<div class="work article">
<main class="work-wrapper">
<PageHeader
title="HEC IA"
tags={["Education", "AI", "Workshops"]}
className="mb-6 md:mb-8"
>
</PageHeader>
<div class="site-container m-auto">
<SeparatorLine />
</div>
<section class="article-content">
<div class="site-container mx-auto my-8 md:my-16 max-w-3xl">
<div class="prose dark:prose-invert">
<h2 class="text-2xl font-brand mb-4 text-neutral-800 dark:text-neutral-100">Mission</h2>
<p class="text-neutral-700 dark:text-neutral-300 leading-relaxed mb-6">
Making AI accessible to business students. Technical workshops designed for non-technical profiles.
</p>
<h2 class="text-2xl font-brand mb-4 mt-8 text-neutral-800 dark:text-neutral-100">What We Do</h2>
<ul class="space-y-2 text-neutral-700 dark:text-neutral-300 mb-6">
<li>Hands-on workshops on AI tools</li>
<li>Introduction to agentic AI</li>
<li>Practical ML workflows</li>
</ul>
<h2 class="text-2xl font-brand mb-4 mt-8 text-neutral-800 dark:text-neutral-100">Impact</h2>
<p class="text-neutral-700 dark:text-neutral-300 leading-relaxed">
Bridging the gap between business and tech. Helping future managers understand what's possible with AI.
</p>
</div>
</div>
</section>
</main>
</div>
</PostLayout>

57
src/pages/work/homelab.astro Normal file
View File

@@ -0,0 +1,57 @@
---
import PostLayout from "@/layouts/PostLayout.astro";
import PageHeader from "@/components/elements/PageHeader.astro";
import SeparatorLine from "@/components/elements/SeparatorLine.astro";
import Button from "@/components/ui/Button.astro";
import { ArrowRight } from "@lucide/astro";
---
<PostLayout
title="Homelab Infrastructure"
description="Self-hosted production-grade infrastructure with Kubernetes, Proxmox, and comprehensive monitoring."
keywords="Homelab, Infrastructure, Kubernetes, Proxmox, Docker, Self-hosted"
>
<div class="work article">
<main class="work-wrapper">
<PageHeader
title="Homelab Infrastructure"
tags={["Kubernetes", "Proxmox", "Docker", "Monitoring"]}
className="mb-6 md:mb-8"
>
</PageHeader>
<div class="site-container m-auto">
<SeparatorLine />
</div>
<section class="article-content">
<div class="site-container mx-auto my-8 md:my-16 max-w-3xl">
<div class="prose dark:prose-invert">
<h2 class="text-2xl font-brand mb-4 text-neutral-800 dark:text-neutral-100">The Story</h2>
<p class="text-neutral-700 dark:text-neutral-300 leading-relaxed mb-6">
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.
</p>
<h2 class="text-2xl font-brand mb-4 mt-8 text-neutral-800 dark:text-neutral-100">Current Stack</h2>
<ul class="space-y-2 text-neutral-700 dark:text-neutral-300 mb-6">
<li><strong>Virtualization:</strong> Proxmox VE</li>
<li><strong>Orchestration:</strong> Kubernetes</li>
<li><strong>Containers:</strong> Docker</li>
<li><strong>Monitoring:</strong> Grafana, Prometheus, InfluxDB</li>
<li><strong>Reverse Proxy:</strong> Caddy, FRP</li>
<li><strong>Auth:</strong> Authentik (OIDC)</li>
</ul>
<h2 class="text-2xl font-brand mb-4 mt-8 text-neutral-800 dark:text-neutral-100">What I Learned</h2>
<p class="text-neutral-700 dark:text-neutral-300 leading-relaxed mb-6">
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.
</p>
<div class="mt-12">
<Button url="/infrastructure" type="fill">
View Full Architecture <ArrowRight size={16} />
</Button>
</div>
</div>
</div>
</section>
</main>
</div>
</PostLayout>

59
src/pages/work/luonmodels.astro
View File

@@ -1,59 +0,0 @@
---
import { Image } from "astro:assets";
import PostLayout from "@/layouts/PostLayout.astro";
import PageHeader from "@/components/elements/PageHeader.astro";
import ActionBar from "@/components/widgets/ActionBar.astro";
import SeparatorLine from "@/components/elements/SeparatorLine.astro";
//自动导入 Image 组件和图像
const allImagesModules = import.meta.glob('../../assets/work/luonmodels/*.{jpg,png,webp}', { eager: true });
const allImages = Object.values(allImagesModules) as Array<{ default: any }>;
const logoUrl = "https://luonmodels.vercel.app/favicon.png";
---
<PostLayout
title="LUON - Agency Website Template"
description = 'LUONModels is a sleek and fluid Astro enterprise template specifically designed for modeling agencies, photographers, and studios.',
keywords = 'LUONModels, Agency Website Template, Astro, Modeling Agency, Photographer, Studio',
>
<div class="work article">
<main class="work-wrapper">
<PageHeader
title="LUON - Agency Website Template"
tags={["Designer","Portfolio","Open Source"]}
className="mb-6 md:mb-8"
>
</PageHeader>
</section>
<div class="site-container m-auto">
<SeparatorLine />
</div>
<section class="article-content">
<div class="site-container mx-auto my-8 md:my-16 ">
<div>
<p>
LUONModels is a sleek and fluid Astro enterprise template specifically designed for modeling agencies, photographers, and studios. It aims to showcase people, photography, and information clearly and effectively, while also making it convenient to build event pages, content blogs, and various other specialized pages.
</p>
<p>Features</p>
<ul>
<li>✅ Responsive Design: Fully optimized for mobile and desktop viewing, ensuring a consistent experience across devices.</li>
<li>✅ Built with Astro.js: Leverages the powerful features of Astro.js for optimized performance and easy customize.</li>
<li>✅ Intuitive User Interface: Minimalist layout promotes ease of use, allowing users to find what they need without confusion.</li>
<li>✅ Speed Optimization: Engineered for exceptional loading times, ensuring that users don’t have to wait on page loads.</li>
<li>✅ Customizable Components: Flexibility to customize elements easily, aligning with your brand’s identity and needs.</li>
<li>✅ SEO Friendly: Built with search engine optimization in mind, helping improve visibility and rankings.</li>
</ul>
<p>🔗🔗 <a href="https://luonmodels.vercel.app/" target="_blank">Live Demo</a></p>
</div>
{allImages.map((img, index) => (
<picture class="picture mt-8 md:mt-12 mb-8 md:mb-12 rounded-2xl overflow-hidden">
<Image src={img.default} alt={`Image ${index + 1}`} class="w-full h-full object-cover" loading="lazy" decoding="async" quality={100}/>
</picture>
))}
</div>
</section>
</main>
</div>
<ActionBar logo={logoUrl} tags={["Agency", "Website"]} url="https://luonmodels.vercel.app/" github="https://ricoui.gumroad.com/l/luon" visitLabel="Visit Site" />
</PostLayout>

61
src/pages/work/ricoblog2024.astro
View File

@@ -1,61 +0,0 @@
---
import { Image } from "astro:assets";
import PostLayout from "@/layouts/PostLayout.astro";
import PageHeader from "@/components/elements/PageHeader.astro";
import ActionBar from "@/components/widgets/ActionBar.astro";
import SeparatorLine from "@/components/elements/SeparatorLine.astro";
// 手动导入图片
import P_01 from "../../assets/work/ricoblog2024/P_01.jpg";
import P_02 from "../../assets/work/ricoblog2024/P_02.jpg";
import P_03 from "../../assets/work/ricoblog2024/P_03.jpg";
import P_04 from "../../assets/work/ricoblog2024/P_04.jpg";
import P_05 from "../../assets/work/ricoblog2024/P_05.jpg";
import P_06 from "../../assets/work/ricoblog2024/P_06.jpg";
import P_07 from "../../assets/work/ricoblog2024/P_07.jpg";
const images = [P_01, P_02, P_03, P_04, P_05, P_06, P_07];
import logoUrl from "../../assets/work/ricoblog2024/logo.png";
---
<PostLayout
title="Rico Designer Blog 2024"
description = 'A personal blog site designed and developed by RicoDesigner in 2024, showcasing his design philosophy and portfolio.',
keywords = 'Rico Designer, Blog, Portfolio, Open Source, Web Design, Astro.js, Figma',
>
<div class="work article">
<main class="work-wrapper">
<PageHeader
title="Rico Designer Blog 2024"
tags={["Designer","Portfolio","Open Source"]}
className="mb-6 md:mb-8"
>
</PageHeader>
</section>
<div class="site-container m-auto">
<SeparatorLine />
</div>
<section class="article-content">
<div class="site-container mx-auto my-8 md:my-16 ">
<div>
<p>
我每一年都会计划制作一个人网站，在其中运用自己当时喜欢的技术、热爱的风格和即时的想法。从设计细节中去看到我的审美、思想、设计的看法等一切的动态变化。 这真的十分有趣。
</p>
<p>本次的网站开发，从突然有了想法，确定设计风格、选择技术栈，到整个网站框架大概制作完毕，其实只花了大约一周时间。会不会有人好奇我思考原型和设计稿、开发的过程呢？</p>
<p>实际上设计的部分，一页都没有画，想法已经在脑海里了，只是用了 Figma 直接制作需要的元素素材。然后在开发的时候，一边写代码一边调整设计。</p>
<p>技术栈选择： Figma + Astro （💡Astro.js 推荐! 设计师也可以很快学会的前端框架！）</p>
</div>
{images.map((img, index) => (
<picture class="picture mt-8 md:mt-12 mb-8 md:mb-12 rounded-2xl overflow-hidden">
<Image src={img} alt={`Rico Blog 2024 设计图 ${index + 1}`} class="w-full h-full object-cover" loading="lazy" decoding="async" quality={100}/>
</picture>
))}
</div>
</section>
</main>
</div>
<ActionBar logo={logoUrl} tags={["Designer", "Blog"]} url="https://ricoui.com/" github="https://github.com/ricocc/ricoblog2024" visitLabel="Visit Site" />
</PostLayout>