328 lines
14 KiB
Plaintext
328 lines
14 KiB
Plaintext
---
|
|
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);
|
|
|
|
---
|
|
|
|
<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"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<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={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>
|
|
@vorpax
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<p
|
|
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"
|
|
>"Bridging business strategy with technical implementation."</p>
|
|
|
|
<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>
|
|
</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-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"
|
|
>
|
|
Started in business prep school, now at HEC Paris. Self-taught in infrastructure and development. I bridge business strategy with technical implementation.
|
|
</p>
|
|
|
|
<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"
|
|
>
|
|
<Button url={siteConfig.social.linkedin} type="fill"> LinkedIn <ArrowUpRight size={16} /> </Button>
|
|
<Button url={siteConfig.social.github}> GitHub <ArrowUpRight size={16} /> </Button>
|
|
</div>
|
|
|
|
<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"
|
|
>
|
|
<!-- 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">
|
|
<Server size={22} />
|
|
<div class="flex-grow-0 flex-shrink-0 text-base font-medium text-left text-neutral-700 dark:text-neutral-200">
|
|
Infrastructure
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 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">
|
|
Fullstack Development
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 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">
|
|
<Building size={22} />
|
|
<div class="flex-grow-0 flex-shrink-0 text-base font-medium text-left text-neutral-700 dark:text-neutral-200">
|
|
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>
|
|
</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="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 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"
|
|
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-700 dark:text-neutral-300"
|
|
data-aos="fade-up-xs"
|
|
data-aos-delay="100"
|
|
data-aos-duration="500"
|
|
data-aos-once="true"
|
|
>
|
|
Reach out on <a
|
|
href={siteConfig.social.linkedin}
|
|
target="_blank"
|
|
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>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
|
|
<style>
|
|
.toc-sticky-wrapper {
|
|
position: sticky;
|
|
top: 8rem;
|
|
}
|
|
</style>
|