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>