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

init

Browse Source
This commit is contained in:
Ricocc
2025-11-06 01:12:02 +08:00
commit 2b8d1d0f1d
313 changed files with 14981 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

357
src/pages/about.astro Normal file
View File

@@ -0,0 +1,357 @@
---
import {
ArrowUpRight,
Code,
Globe,
Mail,
Monitor,
Palette,
Smartphone,
Zap,
} 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";
// 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: "tool-stack", text: "Tool Stack" },
{ depth: 2, slug: "experience", text: "Experience" },
{ depth: 2, slug: "lets-connect", text: "Let's Connect" },
];
const filtered = headings.filter(h => h.depth <= 3);
---
<Layout title="About Me">
<!-- Mobile TOC -->
<div class="block lg:hidden px-7 pt-6">
<Toc headings={filtered} />
</div>
<!-- Main container -->
<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">
<div class="toc-sticky-wrapper">
<Toc headings={filtered} />
</div>
</aside>
<!-- Right main content - Adaptive width -->
<main class="relative flex-1 min-w-0 w-full lg:max-w-none">
<div
class="w-full"
data-aos="fade-up-xs"
data-aos-duration="500"
data-aos-once="true"
>
<h2
id="about-me"
class="text-2xl font-brand tracking-tight sm:text-3xl lg:text-4xl"
>
About Me
</h2>
<div class="w-full border-b-1 border-dashed border-b-gray-200 dark:border-b-neutral-700 mt-4 mb-8"></div>
</div>
<div
class="flex items-center gap-3 mb-6"
data-aos="fade-up-xs"
data-aos-delay="100"
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="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" />
</svg>
@ricouii
</a>
</div>
</div>
<p
class="text-3xl 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> -->
<div
class="social"
data-aos="fade-up-xs"
data-aos-delay="300"
data-aos-duration="600"
data-aos-once="true"
>
<div class="social-list flex flex-wrap gap-2 items-center justify-start mt-6 mb-8">
{social
.filter(item => item.isShow !== false)
.map((item, index) => (
<a
href={item.url}
target="_blank"
rel="noopener noreferrer"
class="social-item relative group overflow-hidden rounded-xl transition-all duration-300 hover:-translate-y-2 hover:rotate-[-6deg] hover:shadow-lg"
data-aos="fade-up-xs"
data-aos-delay={400 + (index * 50)}
data-aos-duration="400"
data-aos-once="true"
>
<img
src={item.image}
alt={item.name}
class="w-[96px] h-[96px] rounded-xl object-cover transition-transform duration-300 group-hover:scale-105"
/>
<div class="absolute bottom-[10px] left-[12px] z-10">
<div class="social-name font-semibold text-[10px] text-white drop-shadow-md">
{item.name}
</div>
<div class="social-username text-[9px] text-white/85 drop-shadow-sm">
@{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>
))
}
</div>
</div>
<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"
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.
</p>
<p
class="text-neutral-700 pb-4 pt-4 leading-[1.8] dark:text-neutral-200"
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>
</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"
data-aos="fade-up-xs"
data-aos-duration="500"
data-aos-once="true"
>Expertise</h2>
<div
class="list flex flex-wrap gap-3 mt-4 mb-12 w-full items-center justify-start"
data-aos="fade-up-xs"
data-aos-delay="100"
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 ">
<div class="flex justify-center items-center flex-grow-0 flex-shrink-0 gap-2">
<Palette 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
</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">
<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
</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">
<div class="flex justify-center items-center flex-grow-0 flex-shrink-0 gap-2">
<Smartphone 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
</div>
</div>
</div>
</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>
<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"
data-aos="fade-up-xs"
data-aos-duration="500"
data-aos-once="true"
>
Experience
</h2>
<div
class="px-5 py-10"
data-aos="fade-up-xs"
data-aos-delay="100"
data-aos-duration="600"
data-aos-once="true"
>
{
experiences.map((experience, index) => {
return (
<div
class="pb-10 border-l border-dashed border-gray-200 last:border-l-0 dark:border-neutral-500"
data-aos="fade-up-xs"
data-aos-delay={200 + (index * 100)}
data-aos-duration="500"
data-aos-once="true"
>
<AboutExperience
dates={experience.dates}
role={experience.role}
company={experience.company}
description={experience.description}
logo={experience.logo}
/>
</div>
)
})
}
</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>
<h2
id="lets-connect"
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"
>Let's Connect</h2>
<p
class="text-sm leading-6 text-neutral-600 dark:text-neutral-300"
data-aos="fade-up-xs"
data-aos-delay="100"
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}
target="_blank"
class="text-indigo-500 underline">follow me on twitter</a
>, or you can send me an <a href="mailto:hello@ricouic.om" class="text-indigo-500 underline"
>email</a
> and I'll be sure to get back to you.
</p>
</section>
</main>
</div>
</div>
</Layout>
<style>
.toc-sticky-wrapper {
position: sticky;
top: 8rem;
}
</style>