Compare commits
No commits in common. "5b887c7926a5e3332b464894d68a0b567ff2b871" and "194dec0fbe6417dcc644a7ba5c97f31f831a3627" have entirely different histories.
5b887c7926
...
194dec0fbe
39 changed files with 4921 additions and 425 deletions
4847
pnpm-lock.yaml
generated
Normal file
4847
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load diff
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
|
|
@ -59,7 +59,6 @@ const experiencesCollection = defineCollection({
|
|||
role: z.string(),
|
||||
company: z.string(),
|
||||
companyUrl: z.string().url().optional(),
|
||||
logo: z.string().optional(),
|
||||
location: z.string().optional(),
|
||||
startDate: z.string(),
|
||||
endDate: z.string().optional(),
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "مهندس معماري للواجهات"
|
||||
company: "ARaymond"
|
||||
companyUrl: "https://www.araymond.com/"
|
||||
logo: "araymond.png"
|
||||
location: "غرونوبل"
|
||||
startDate: "2022-01"
|
||||
endDate: "2023-01"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "Frontend Architect"
|
||||
company: "ARaymond"
|
||||
companyUrl: "https://www.araymond.com/"
|
||||
logo: "araymond.png"
|
||||
location: "Grenoble"
|
||||
startDate: "2022-01"
|
||||
endDate: "2023-01"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "Architecte frontend"
|
||||
company: "ARaymond"
|
||||
companyUrl: "https://www.araymond.com/"
|
||||
logo: "araymond.png"
|
||||
location: "Grenoble"
|
||||
startDate: "2022-01"
|
||||
endDate: "2023-01"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "أستاذ هندسة البرمجيات"
|
||||
company: "جامعة شامبوليون"
|
||||
companyUrl: "https://www.univ-jfc.fr/"
|
||||
logo: "champollion.png"
|
||||
location: "ألبي"
|
||||
startDate: "2019-09"
|
||||
technologies: ["TypeScript", "JavaScript", "Node.js", "TDD", "Clean Code"]
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "Software Engineering Professor"
|
||||
company: "Université Champollion"
|
||||
companyUrl: "https://www.univ-jfc.fr/"
|
||||
logo: "champollion.png"
|
||||
location: "Albi"
|
||||
startDate: "2019-09"
|
||||
technologies: ["TypeScript", "JavaScript", "Node.js", "TDD", "Clean Code"]
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "Enseignant en génie logiciel"
|
||||
company: "Université Champollion"
|
||||
companyUrl: "https://www.univ-jfc.fr/"
|
||||
logo: "champollion.png"
|
||||
location: "Albi"
|
||||
startDate: "2019-09"
|
||||
technologies: ["TypeScript", "JavaScript", "Node.js", "TDD", "Clean Code"]
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "حرفي برمجيات / مؤسس مشارك"
|
||||
company: "DisMoi"
|
||||
companyUrl: "https://github.com/dis-moi"
|
||||
logo: "dismoi.png"
|
||||
location: "عن بُعد"
|
||||
startDate: "2019-01"
|
||||
endDate: "2021-06"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "Software Craftsman / Cofounder"
|
||||
company: "DisMoi"
|
||||
companyUrl: "https://github.com/dis-moi"
|
||||
logo: "dismoi.png"
|
||||
location: "Remote"
|
||||
startDate: "2019-01"
|
||||
endDate: "2021-06"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "Software Craftsman / Cofondateur"
|
||||
company: "DisMoi"
|
||||
companyUrl: "https://github.com/dis-moi"
|
||||
logo: "dismoi.png"
|
||||
location: "Remote"
|
||||
startDate: "2019-01"
|
||||
endDate: "2021-06"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "مهندس برمجيات fullstack"
|
||||
company: "Libeo"
|
||||
companyUrl: "https://www.libeo.io/"
|
||||
logo: "libeo.png"
|
||||
location: "عن بُعد"
|
||||
startDate: "2021-01"
|
||||
endDate: "2021-06"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "Fullstack Software Engineer"
|
||||
company: "Libeo"
|
||||
companyUrl: "https://www.libeo.io/"
|
||||
logo: "libeo.png"
|
||||
location: "Remote"
|
||||
startDate: "2021-01"
|
||||
endDate: "2021-06"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "Ingénieur logiciel fullstack"
|
||||
company: "Libeo"
|
||||
companyUrl: "https://www.libeo.io/"
|
||||
logo: "libeo.png"
|
||||
location: "Remote"
|
||||
startDate: "2021-01"
|
||||
endDate: "2021-06"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "مهندس برمجيات أول"
|
||||
company: "Obat"
|
||||
companyUrl: "https://www.obat.fr/"
|
||||
logo: "obat.png"
|
||||
location: "عن بُعد"
|
||||
startDate: "2023-02"
|
||||
endDate: "2024-01"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "Senior Software Engineer"
|
||||
company: "Obat"
|
||||
companyUrl: "https://www.obat.fr/"
|
||||
logo: "obat.png"
|
||||
location: "Remote"
|
||||
startDate: "2023-02"
|
||||
endDate: "2024-01"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "Ingénieur logiciel senior"
|
||||
company: "Obat"
|
||||
companyUrl: "https://www.obat.fr/"
|
||||
logo: "obat.png"
|
||||
location: "Remote"
|
||||
startDate: "2023-02"
|
||||
endDate: "2024-01"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "مطوّر رئيسي"
|
||||
company: "Urssaf Caisse nationale"
|
||||
companyUrl: "https://www.urssaf.fr/"
|
||||
logo: "urssaf.png"
|
||||
location: "عن بُعد / باريس"
|
||||
startDate: "2024-02"
|
||||
technologies: ["TypeScript", "React.js", "Publicodes", "Node.js", "GitHub"]
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "Lead Developer"
|
||||
company: "Urssaf Caisse nationale"
|
||||
companyUrl: "https://www.urssaf.fr/"
|
||||
logo: "urssaf.png"
|
||||
location: "Remote / Paris"
|
||||
startDate: "2024-02"
|
||||
technologies: ["TypeScript", "React.js", "Publicodes", "Node.js", "GitHub"]
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "Lead Developer"
|
||||
company: "Urssaf Caisse nationale"
|
||||
companyUrl: "https://www.urssaf.fr/"
|
||||
logo: "urssaf.png"
|
||||
location: "Remote / Paris"
|
||||
startDate: "2024-02"
|
||||
technologies: ["TypeScript", "React.js", "Publicodes", "Node.js", "GitHub"]
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "مطوّر واجهات رئيسي Travel"
|
||||
company: "Veepee"
|
||||
companyUrl: "https://www.veepee.com/"
|
||||
logo: "veepee.png"
|
||||
location: "باريس"
|
||||
startDate: "2016-02"
|
||||
endDate: "2018-01"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "Travel Front Lead Developer"
|
||||
company: "Veepee"
|
||||
companyUrl: "https://www.veepee.com/"
|
||||
logo: "veepee.png"
|
||||
location: "Paris"
|
||||
startDate: "2016-02"
|
||||
endDate: "2018-01"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "Travel Front Lead Developer"
|
||||
company: "Veepee"
|
||||
companyUrl: "https://www.veepee.com/"
|
||||
logo: "veepee.png"
|
||||
location: "Paris"
|
||||
startDate: "2016-02"
|
||||
endDate: "2018-01"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "قائد تقني Travel"
|
||||
company: "Veepee"
|
||||
companyUrl: "https://www.veepee.com/"
|
||||
logo: "veepee.png"
|
||||
location: "باريس"
|
||||
startDate: "2018-01"
|
||||
endDate: "2019-06"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "Travel Tech Lead"
|
||||
company: "Veepee"
|
||||
companyUrl: "https://www.veepee.com/"
|
||||
logo: "veepee.png"
|
||||
location: "Paris"
|
||||
startDate: "2018-01"
|
||||
endDate: "2019-06"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
role: "Travel Tech Lead"
|
||||
company: "Veepee"
|
||||
companyUrl: "https://www.veepee.com/"
|
||||
logo: "veepee.png"
|
||||
location: "Paris"
|
||||
startDate: "2018-01"
|
||||
endDate: "2019-06"
|
||||
|
|
|
|||
|
|
@ -55,33 +55,25 @@ const locale = pathname.startsWith("/en")
|
|||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Page-level text overrides for the purple gradient.
|
||||
* Any component that manages its own colors should add
|
||||
* the `.code-card` class — it will be excluded automatically.
|
||||
*/
|
||||
[data-facet="code"] > section h1,
|
||||
[data-facet="code"] > section h2 {
|
||||
[data-facet="code"] > section h2,
|
||||
[data-facet="code"] > section h3,
|
||||
[data-facet="code"] > section strong {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
[data-facet="code"] > section h3:not(.code-card h3),
|
||||
[data-facet="code"] > section strong:not(.code-card strong) {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
[data-facet="code"] > section a:not(.code-card a) {
|
||||
[data-facet="code"] > section a:not(.facet-card a) {
|
||||
color: #d4b5ff !important;
|
||||
text-decoration-color: rgba(212, 181, 255, 0.3) !important;
|
||||
}
|
||||
|
||||
[data-facet="code"] > section a:not(.code-card a):hover {
|
||||
[data-facet="code"] > section a:not(.facet-card a):hover {
|
||||
color: white !important;
|
||||
text-decoration-color: white !important;
|
||||
}
|
||||
|
||||
[data-facet="code"] > section p:not(.code-card p),
|
||||
[data-facet="code"] > section li:not(.code-card li) {
|
||||
[data-facet="code"] > section > :not(.facet-card) p,
|
||||
[data-facet="code"] > section > :not(.facet-card) li {
|
||||
color: rgba(255, 255, 255, 0.75) !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,6 @@
|
|||
---
|
||||
import { getCollection, render } from "astro:content";
|
||||
import { Image } from "astro:assets";
|
||||
import Layout from "../../../layouts/main.astro";
|
||||
import "../../../styles/exp-card.css";
|
||||
|
||||
const logos = import.meta.glob<{ default: ImageMetadata }>('../../../assets/images/companies/*.png', { eager: true });
|
||||
|
||||
function getLogo(filename?: string) {
|
||||
if (!filename) return null;
|
||||
const key = `../../../assets/images/companies/${filename}`;
|
||||
return logos[key]?.default ?? null;
|
||||
}
|
||||
|
||||
function getInitials(company: string) {
|
||||
return company.split(/[\s-]+/).map(w => w[0]).filter(Boolean).slice(0, 2).join('').toUpperCase();
|
||||
}
|
||||
|
||||
const locale = "ar";
|
||||
|
||||
|
|
@ -22,17 +8,9 @@ const experiences = (await getCollection("experiences"))
|
|||
.filter((e) => e.data.lang === locale && !e.data.draft)
|
||||
.sort((a, b) => (b.data.startDate > a.data.startDate ? 1 : -1));
|
||||
|
||||
const typeLabels: Record<string, string> = {
|
||||
employment: 'وظيفة', freelance: 'مستقل', teaching: 'تدريس',
|
||||
community: 'مجتمع', entrepreneurship: 'ريادة أعمال',
|
||||
};
|
||||
|
||||
const typeColors: Record<string, { badge: string; border: string; dot: string }> = {
|
||||
employment: { badge: 'type-badge-blue', border: 'type-border-blue', dot: 'bg-blue-400 border-blue-400/50' },
|
||||
freelance: { badge: 'type-badge-amber', border: 'type-border-amber', dot: 'bg-amber-400 border-amber-400/50' },
|
||||
teaching: { badge: 'type-badge-emerald', border: 'type-border-emerald', dot: 'bg-emerald-400 border-emerald-400/50' },
|
||||
community: { badge: 'type-badge-pink', border: 'type-border-pink', dot: 'bg-pink-400 border-pink-400/50' },
|
||||
entrepreneurship: { badge: 'type-badge-purple', border: 'type-border-purple', dot: 'bg-purple-400 border-purple-400/50' },
|
||||
const typeIcons: Record<string, string> = {
|
||||
employment: '🏢', freelance: '💼', teaching: '🎓',
|
||||
community: '🤝', entrepreneurship: '🚀',
|
||||
};
|
||||
|
||||
function formatMonth(dateStr: string) {
|
||||
|
|
@ -40,17 +18,6 @@ function formatMonth(dateStr: string) {
|
|||
return new Date(parseInt(year), parseInt(month) - 1)
|
||||
.toLocaleDateString('ar-SA', { year: 'numeric', month: 'short' });
|
||||
}
|
||||
|
||||
function computeDuration(startStr: string, endStr?: string) {
|
||||
const [sy, sm] = startStr.split('-').map(Number);
|
||||
const end = endStr ? endStr.split('-').map(Number) : [new Date().getFullYear(), new Date().getMonth() + 1];
|
||||
const totalMonths = (end[0] - sy) * 12 + (end[1] - sm);
|
||||
const years = Math.floor(totalMonths / 12);
|
||||
const months = totalMonths % 12;
|
||||
if (years === 0) return `${months} أشهر`;
|
||||
if (months === 0) return `${years} سنة`;
|
||||
return `${years} سنة ${months} أشهر`;
|
||||
}
|
||||
---
|
||||
|
||||
<Layout
|
||||
|
|
@ -76,68 +43,43 @@ function computeDuration(startStr: string, endStr?: string) {
|
|||
const isOngoing = !exp.data.endDate;
|
||||
const start = formatMonth(exp.data.startDate);
|
||||
const end = exp.data.endDate ? formatMonth(exp.data.endDate) : 'الحاضر';
|
||||
const duration = computeDuration(exp.data.startDate, exp.data.endDate);
|
||||
const colors = typeColors[exp.data.type] || typeColors.employment;
|
||||
const label = typeLabels[exp.data.type] || exp.data.type;
|
||||
|
||||
return (
|
||||
<div class="relative pr-10 pb-10 border-r-2 border-white/[0.12] last:pb-0">
|
||||
<div class="relative pr-8 pb-10 border-r-2 border-white/[0.1] last:pb-0">
|
||||
<div
|
||||
class:list={[
|
||||
"absolute -right-[7px] top-2 w-3 h-3 rounded-full border-2",
|
||||
isOngoing ? colors.dot : "border-white/20 bg-white/10"
|
||||
"absolute -right-[9px] top-1 w-4 h-4 rounded-full border-2",
|
||||
isOngoing
|
||||
? "border-purple-300 bg-purple-400"
|
||||
: "border-white/20 bg-white/10"
|
||||
]}
|
||||
>
|
||||
{isOngoing && <div class="absolute inset-0 rounded-full bg-current opacity-40 animate-ping" />}
|
||||
{isOngoing && <div class="absolute inset-0.5 rounded-full bg-purple-300 animate-pulse" />}
|
||||
</div>
|
||||
|
||||
<div class:list={[
|
||||
"code-card exp-card relative rounded-2xl p-6 transition-colors duration-200 border-s-[3px]",
|
||||
isOngoing ? "exp-card--ongoing" : "",
|
||||
colors.border
|
||||
]}>
|
||||
{getLogo(exp.data.logo) ? (
|
||||
<div class="exp-logo absolute top-5 end-5 w-16 h-16 rounded-xl flex items-center justify-center p-2">
|
||||
<Image
|
||||
src={getLogo(exp.data.logo)!}
|
||||
alt={`شعار ${exp.data.company}`}
|
||||
width={52}
|
||||
height={52}
|
||||
class="rounded-lg object-contain"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div class="exp-logo-fallback absolute top-5 end-5 w-16 h-16 rounded-xl flex items-center justify-center">
|
||||
<span class="text-base font-bold">{getInitials(exp.data.company)}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="mb-3 flex items-center gap-2 flex-wrap pe-20">
|
||||
<span class:list={["inline-block px-2 py-0.5 text-[11px] font-medium rounded-full border", colors.badge]}>
|
||||
{label}
|
||||
<div class="facet-card rounded-2xl bg-white/[0.04] border border-white/[0.08] p-5 hover:bg-white/[0.08] transition-colors duration-200">
|
||||
<div class="mb-2 flex items-center gap-2 flex-wrap">
|
||||
<span class="text-xs text-white/40">
|
||||
{typeIcons[exp.data.type] || '💼'} {start} — {end}
|
||||
</span>
|
||||
<span class="exp-meta text-xs">
|
||||
{start} — {end}
|
||||
</span>
|
||||
<span class="exp-meta text-xs">· {duration}</span>
|
||||
{exp.data.location && <span class="exp-meta text-xs">· {exp.data.location}</span>}
|
||||
{exp.data.location && <span class="text-xs text-white/30">· {exp.data.location}</span>}
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-bold pe-20">{exp.data.role}</h3>
|
||||
<p class="exp-company text-sm font-medium mt-1 mb-3">
|
||||
<h3 class="text-lg font-bold text-white">{exp.data.role}</h3>
|
||||
<p class="text-sm font-medium text-purple-200 mb-3">
|
||||
{exp.data.companyUrl ? (
|
||||
<a href={exp.data.companyUrl} target="_blank" rel="noopener noreferrer" class="transition-colors">{exp.data.company}</a>
|
||||
<a href={exp.data.companyUrl} target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors">{exp.data.company}</a>
|
||||
) : exp.data.company}
|
||||
</p>
|
||||
|
||||
<div class="exp-content text-sm leading-relaxed mb-4 prose prose-sm max-w-none">
|
||||
<div class="text-sm text-white/60 leading-relaxed mb-3 prose prose-sm prose-invert max-w-none [&_p]:text-white/60 [&_a]:text-purple-200 [&_a:hover]:text-white">
|
||||
<Content />
|
||||
</div>
|
||||
|
||||
{exp.data.technologies && exp.data.technologies.length > 0 && (
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
{exp.data.technologies.map((tech: string) => (
|
||||
<span class="exp-tech inline-block px-2.5 py-0.5 text-xs rounded-full border">
|
||||
<span class="inline-block px-2 py-0.5 text-xs rounded-full bg-white/[0.06] text-white/50 border border-white/[0.06]">
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -53,16 +53,16 @@ function formatMonth(dateStr: string) {
|
|||
<span class="inline-block px-3 py-1 text-sm text-purple-200/80 bg-white/[0.06] border border-white/[0.08] rounded-full mb-5">Développeur freelance · Albi</span>
|
||||
<h1 class="text-5xl sm:text-6xl font-semibold text-white font-display tracking-wide">Artisan du logiciel</h1>
|
||||
<div class="mt-6 mb-6 w-16 h-0.5 bg-gradient-to-r from-purple-400 to-transparent rounded-full"></div>
|
||||
<p class="text-lg text-white/60 leading-relaxed max-w-2xl mb-8">
|
||||
J'accompagne les équipes comme développeur senior, tech lead ou coach technique. Ce qui me distingue peut-être : je m'intéresse autant à la qualité du code qu'à ce qu'il produit. Je privilégie le logiciel libre et les outils qui répondent à de vrais besoins.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2 mb-8">
|
||||
<span class="px-3 py-1.5 text-sm font-medium rounded-full bg-purple-400/15 text-purple-200 border border-purple-300/20">TypeScript</span>
|
||||
<span class="px-3 py-1.5 text-sm font-medium rounded-full bg-purple-400/15 text-purple-200 border border-purple-300/20">PHP</span>
|
||||
<span class="px-3 py-1.5 text-sm font-medium rounded-full bg-purple-400/15 text-purple-200 border border-purple-300/20">Elixir</span>
|
||||
<span class="px-3 py-1.5 text-sm font-medium rounded-full bg-white/[0.06] text-white/50 border border-white/[0.08]">TDD</span>
|
||||
<span class="px-3 py-1.5 text-sm font-medium rounded-full bg-white/[0.06] text-white/50 border border-white/[0.08]">DDD</span>
|
||||
<span class="px-3 py-1.5 text-sm font-medium rounded-full bg-white/[0.06] text-white/50 border border-white/[0.08]">Clean Code</span>
|
||||
<div class="space-y-4 text-lg text-white/60 leading-relaxed max-w-2xl">
|
||||
<p>
|
||||
TDD, Clean Code, Domain-Driven Design : c'est ma façon de construire du logiciel. J'accompagne les équipes comme développeur senior, tech lead ou coach technique. Ma stack : TypeScript/JavaScript, mais aussi PHP et Elixir.
|
||||
</p>
|
||||
<p>
|
||||
Ce qui me distingue peut-être : je m'intéresse autant à la qualité du code qu'à ce qu'il produit. Je privilégie le logiciel libre et les outils qui répondent à de vrais besoins. Je m'interroge aussi sur les biais que nous inscrivons dans le code, et qui perpétuent des rapports sociaux qu'on doit questionner.
|
||||
</p>
|
||||
<p>
|
||||
J'enseigne la programmation à <Link href="https://www.univ-jfc.fr/" external>l'université Champollion</Link> et j'anime les <Link href="https://www.meetup.com/software-crafters-albi/" external>Software Crafters d'Albi</Link> depuis 2018.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,6 @@
|
|||
---
|
||||
import { getCollection, render } from "astro:content";
|
||||
import { Image } from "astro:assets";
|
||||
import Layout from "../../layouts/main.astro";
|
||||
import "../../styles/exp-card.css";
|
||||
|
||||
const logos = import.meta.glob<{ default: ImageMetadata }>('../../assets/images/companies/*.png', { eager: true });
|
||||
|
||||
function getLogo(filename?: string) {
|
||||
if (!filename) return null;
|
||||
const key = `../../assets/images/companies/${filename}`;
|
||||
return logos[key]?.default ?? null;
|
||||
}
|
||||
|
||||
function getInitials(company: string) {
|
||||
return company.split(/[\s-]+/).map(w => w[0]).filter(Boolean).slice(0, 2).join('').toUpperCase();
|
||||
}
|
||||
|
||||
const locale = "fr";
|
||||
|
||||
|
|
@ -22,17 +8,9 @@ const experiences = (await getCollection("experiences"))
|
|||
.filter((e) => e.data.lang === locale && !e.data.draft)
|
||||
.sort((a, b) => (b.data.startDate > a.data.startDate ? 1 : -1));
|
||||
|
||||
const typeLabels: Record<string, string> = {
|
||||
employment: 'Emploi', freelance: 'Freelance', teaching: 'Enseignement',
|
||||
community: 'Communauté', entrepreneurship: 'Entrepreneuriat',
|
||||
};
|
||||
|
||||
const typeColors: Record<string, { badge: string; border: string; dot: string }> = {
|
||||
employment: { badge: 'type-badge-blue', border: 'type-border-blue', dot: 'bg-blue-400 border-blue-400/50' },
|
||||
freelance: { badge: 'type-badge-amber', border: 'type-border-amber', dot: 'bg-amber-400 border-amber-400/50' },
|
||||
teaching: { badge: 'type-badge-emerald', border: 'type-border-emerald', dot: 'bg-emerald-400 border-emerald-400/50' },
|
||||
community: { badge: 'type-badge-pink', border: 'type-border-pink', dot: 'bg-pink-400 border-pink-400/50' },
|
||||
entrepreneurship: { badge: 'type-badge-purple', border: 'type-border-purple', dot: 'bg-purple-400 border-purple-400/50' },
|
||||
const typeIcons: Record<string, string> = {
|
||||
employment: '🏢', freelance: '💼', teaching: '🎓',
|
||||
community: '🤝', entrepreneurship: '🚀',
|
||||
};
|
||||
|
||||
function formatMonth(dateStr: string) {
|
||||
|
|
@ -40,17 +18,6 @@ function formatMonth(dateStr: string) {
|
|||
return new Date(parseInt(year), parseInt(month) - 1)
|
||||
.toLocaleDateString('fr-FR', { year: 'numeric', month: 'short' });
|
||||
}
|
||||
|
||||
function computeDuration(startStr: string, endStr?: string) {
|
||||
const [sy, sm] = startStr.split('-').map(Number);
|
||||
const end = endStr ? endStr.split('-').map(Number) : [new Date().getFullYear(), new Date().getMonth() + 1];
|
||||
const totalMonths = (end[0] - sy) * 12 + (end[1] - sm);
|
||||
const years = Math.floor(totalMonths / 12);
|
||||
const months = totalMonths % 12;
|
||||
if (years === 0) return `${months} mois`;
|
||||
if (months === 0) return `${years} an${years > 1 ? 's' : ''}`;
|
||||
return `${years} an${years > 1 ? 's' : ''} ${months} mois`;
|
||||
}
|
||||
---
|
||||
|
||||
<Layout
|
||||
|
|
@ -76,68 +43,43 @@ function computeDuration(startStr: string, endStr?: string) {
|
|||
const isOngoing = !exp.data.endDate;
|
||||
const start = formatMonth(exp.data.startDate);
|
||||
const end = exp.data.endDate ? formatMonth(exp.data.endDate) : 'Présent';
|
||||
const duration = computeDuration(exp.data.startDate, exp.data.endDate);
|
||||
const colors = typeColors[exp.data.type] || typeColors.employment;
|
||||
const label = typeLabels[exp.data.type] || exp.data.type;
|
||||
|
||||
return (
|
||||
<div class="relative pl-10 pb-10 border-l-2 border-white/[0.12] last:pb-0">
|
||||
<div class="relative pl-8 pb-10 border-l-2 border-white/[0.1] last:pb-0">
|
||||
<div
|
||||
class:list={[
|
||||
"absolute -left-[7px] top-2 w-3 h-3 rounded-full border-2",
|
||||
isOngoing ? colors.dot : "border-white/20 bg-white/10"
|
||||
"absolute -left-[9px] top-1 w-4 h-4 rounded-full border-2",
|
||||
isOngoing
|
||||
? "border-purple-300 bg-purple-400"
|
||||
: "border-white/20 bg-white/10"
|
||||
]}
|
||||
>
|
||||
{isOngoing && <div class="absolute inset-0 rounded-full bg-current opacity-40 animate-ping" />}
|
||||
{isOngoing && <div class="absolute inset-0.5 rounded-full bg-purple-300 animate-pulse" />}
|
||||
</div>
|
||||
|
||||
<div class:list={[
|
||||
"code-card exp-card relative rounded-2xl p-6 transition-colors duration-200 border-s-[3px]",
|
||||
isOngoing ? "exp-card--ongoing" : "",
|
||||
colors.border
|
||||
]}>
|
||||
{getLogo(exp.data.logo) ? (
|
||||
<div class="exp-logo absolute top-5 end-5 w-16 h-16 rounded-xl flex items-center justify-center p-2">
|
||||
<Image
|
||||
src={getLogo(exp.data.logo)!}
|
||||
alt={`Logo ${exp.data.company}`}
|
||||
width={52}
|
||||
height={52}
|
||||
class="rounded-lg object-contain"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div class="exp-logo-fallback absolute top-5 end-5 w-16 h-16 rounded-xl flex items-center justify-center">
|
||||
<span class="text-base font-bold">{getInitials(exp.data.company)}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="mb-3 flex items-center gap-2 flex-wrap pe-20">
|
||||
<span class:list={["inline-block px-2 py-0.5 text-[11px] font-medium rounded-full border", colors.badge]}>
|
||||
{label}
|
||||
<div class="facet-card rounded-2xl bg-white/[0.04] border border-white/[0.08] p-5 hover:bg-white/[0.08] transition-colors duration-200">
|
||||
<div class="mb-2 flex items-center gap-2 flex-wrap">
|
||||
<span class="text-xs text-white/40">
|
||||
{typeIcons[exp.data.type] || '💼'} {start} — {end}
|
||||
</span>
|
||||
<span class="exp-meta text-xs">
|
||||
{start} — {end}
|
||||
</span>
|
||||
<span class="exp-meta text-xs">· {duration}</span>
|
||||
{exp.data.location && <span class="exp-meta text-xs">· {exp.data.location}</span>}
|
||||
{exp.data.location && <span class="text-xs text-white/30">· {exp.data.location}</span>}
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-bold pe-20">{exp.data.role}</h3>
|
||||
<p class="exp-company text-sm font-medium mt-1 mb-3">
|
||||
<h3 class="text-lg font-bold text-white">{exp.data.role}</h3>
|
||||
<p class="text-sm font-medium text-purple-200 mb-3">
|
||||
{exp.data.companyUrl ? (
|
||||
<a href={exp.data.companyUrl} target="_blank" rel="noopener noreferrer" class="transition-colors">{exp.data.company}</a>
|
||||
<a href={exp.data.companyUrl} target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors">{exp.data.company}</a>
|
||||
) : exp.data.company}
|
||||
</p>
|
||||
|
||||
<div class="exp-content text-sm leading-relaxed mb-4 prose prose-sm max-w-none">
|
||||
<div class="text-sm text-white/60 leading-relaxed mb-3 prose prose-sm prose-invert max-w-none [&_p]:text-white/60 [&_a]:text-purple-200 [&_a:hover]:text-white">
|
||||
<Content />
|
||||
</div>
|
||||
|
||||
{exp.data.technologies && exp.data.technologies.length > 0 && (
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
{exp.data.technologies.map((tech: string) => (
|
||||
<span class="exp-tech inline-block px-2.5 py-0.5 text-xs rounded-full border">
|
||||
<span class="inline-block px-2 py-0.5 text-xs rounded-full bg-white/[0.06] text-white/50 border border-white/[0.06]">
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,6 @@
|
|||
---
|
||||
import { getCollection, render } from "astro:content";
|
||||
import { Image } from "astro:assets";
|
||||
import Layout from "../../../layouts/main.astro";
|
||||
import "../../../styles/exp-card.css";
|
||||
|
||||
const logos = import.meta.glob<{ default: ImageMetadata }>('../../../assets/images/companies/*.png', { eager: true });
|
||||
|
||||
function getLogo(filename?: string) {
|
||||
if (!filename) return null;
|
||||
const key = `../../../assets/images/companies/${filename}`;
|
||||
return logos[key]?.default ?? null;
|
||||
}
|
||||
|
||||
function getInitials(company: string) {
|
||||
return company.split(/[\s-]+/).map(w => w[0]).filter(Boolean).slice(0, 2).join('').toUpperCase();
|
||||
}
|
||||
|
||||
const locale = "en";
|
||||
|
||||
|
|
@ -22,17 +8,9 @@ const experiences = (await getCollection("experiences"))
|
|||
.filter((e) => e.data.lang === locale && !e.data.draft)
|
||||
.sort((a, b) => (b.data.startDate > a.data.startDate ? 1 : -1));
|
||||
|
||||
const typeLabels: Record<string, string> = {
|
||||
employment: 'Employment', freelance: 'Freelance', teaching: 'Teaching',
|
||||
community: 'Community', entrepreneurship: 'Entrepreneurship',
|
||||
};
|
||||
|
||||
const typeColors: Record<string, { badge: string; border: string; dot: string }> = {
|
||||
employment: { badge: 'type-badge-blue', border: 'type-border-blue', dot: 'bg-blue-400 border-blue-400/50' },
|
||||
freelance: { badge: 'type-badge-amber', border: 'type-border-amber', dot: 'bg-amber-400 border-amber-400/50' },
|
||||
teaching: { badge: 'type-badge-emerald', border: 'type-border-emerald', dot: 'bg-emerald-400 border-emerald-400/50' },
|
||||
community: { badge: 'type-badge-pink', border: 'type-border-pink', dot: 'bg-pink-400 border-pink-400/50' },
|
||||
entrepreneurship: { badge: 'type-badge-purple', border: 'type-border-purple', dot: 'bg-purple-400 border-purple-400/50' },
|
||||
const typeIcons: Record<string, string> = {
|
||||
employment: '🏢', freelance: '💼', teaching: '🎓',
|
||||
community: '🤝', entrepreneurship: '🚀',
|
||||
};
|
||||
|
||||
function formatMonth(dateStr: string) {
|
||||
|
|
@ -40,17 +18,6 @@ function formatMonth(dateStr: string) {
|
|||
return new Date(parseInt(year), parseInt(month) - 1)
|
||||
.toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
|
||||
}
|
||||
|
||||
function computeDuration(startStr: string, endStr?: string) {
|
||||
const [sy, sm] = startStr.split('-').map(Number);
|
||||
const end = endStr ? endStr.split('-').map(Number) : [new Date().getFullYear(), new Date().getMonth() + 1];
|
||||
const totalMonths = (end[0] - sy) * 12 + (end[1] - sm);
|
||||
const years = Math.floor(totalMonths / 12);
|
||||
const months = totalMonths % 12;
|
||||
if (years === 0) return `${months} mo`;
|
||||
if (months === 0) return `${years} yr${years > 1 ? 's' : ''}`;
|
||||
return `${years} yr${years > 1 ? 's' : ''} ${months} mo`;
|
||||
}
|
||||
---
|
||||
|
||||
<Layout
|
||||
|
|
@ -76,68 +43,43 @@ function computeDuration(startStr: string, endStr?: string) {
|
|||
const isOngoing = !exp.data.endDate;
|
||||
const start = formatMonth(exp.data.startDate);
|
||||
const end = exp.data.endDate ? formatMonth(exp.data.endDate) : 'Present';
|
||||
const duration = computeDuration(exp.data.startDate, exp.data.endDate);
|
||||
const colors = typeColors[exp.data.type] || typeColors.employment;
|
||||
const label = typeLabels[exp.data.type] || exp.data.type;
|
||||
|
||||
return (
|
||||
<div class="relative pl-10 pb-10 border-l-2 border-white/[0.12] last:pb-0">
|
||||
<div class="relative pl-8 pb-10 border-l-2 border-white/[0.1] last:pb-0">
|
||||
<div
|
||||
class:list={[
|
||||
"absolute -left-[7px] top-2 w-3 h-3 rounded-full border-2",
|
||||
isOngoing ? colors.dot : "border-white/20 bg-white/10"
|
||||
"absolute -left-[9px] top-1 w-4 h-4 rounded-full border-2",
|
||||
isOngoing
|
||||
? "border-purple-300 bg-purple-400"
|
||||
: "border-white/20 bg-white/10"
|
||||
]}
|
||||
>
|
||||
{isOngoing && <div class="absolute inset-0 rounded-full bg-current opacity-40 animate-ping" />}
|
||||
{isOngoing && <div class="absolute inset-0.5 rounded-full bg-purple-300 animate-pulse" />}
|
||||
</div>
|
||||
|
||||
<div class:list={[
|
||||
"code-card exp-card relative rounded-2xl p-6 transition-colors duration-200 border-s-[3px]",
|
||||
isOngoing ? "exp-card--ongoing" : "",
|
||||
colors.border
|
||||
]}>
|
||||
{getLogo(exp.data.logo) ? (
|
||||
<div class="exp-logo absolute top-5 end-5 w-16 h-16 rounded-xl flex items-center justify-center p-2">
|
||||
<Image
|
||||
src={getLogo(exp.data.logo)!}
|
||||
alt={`${exp.data.company} logo`}
|
||||
width={52}
|
||||
height={52}
|
||||
class="rounded-lg object-contain"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div class="exp-logo-fallback absolute top-5 end-5 w-16 h-16 rounded-xl flex items-center justify-center">
|
||||
<span class="text-base font-bold">{getInitials(exp.data.company)}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="mb-3 flex items-center gap-2 flex-wrap pe-20">
|
||||
<span class:list={["inline-block px-2 py-0.5 text-[11px] font-medium rounded-full border", colors.badge]}>
|
||||
{label}
|
||||
<div class="facet-card rounded-2xl bg-white/[0.04] border border-white/[0.08] p-5 hover:bg-white/[0.08] transition-colors duration-200">
|
||||
<div class="mb-2 flex items-center gap-2 flex-wrap">
|
||||
<span class="text-xs text-white/40">
|
||||
{typeIcons[exp.data.type] || '💼'} {start} — {end}
|
||||
</span>
|
||||
<span class="exp-meta text-xs">
|
||||
{start} — {end}
|
||||
</span>
|
||||
<span class="exp-meta text-xs">· {duration}</span>
|
||||
{exp.data.location && <span class="exp-meta text-xs">· {exp.data.location}</span>}
|
||||
{exp.data.location && <span class="text-xs text-white/30">· {exp.data.location}</span>}
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-bold pe-20">{exp.data.role}</h3>
|
||||
<p class="exp-company text-sm font-medium mt-1 mb-3">
|
||||
<h3 class="text-lg font-bold text-white">{exp.data.role}</h3>
|
||||
<p class="text-sm font-medium text-purple-200 mb-3">
|
||||
{exp.data.companyUrl ? (
|
||||
<a href={exp.data.companyUrl} target="_blank" rel="noopener noreferrer" class="transition-colors">{exp.data.company}</a>
|
||||
<a href={exp.data.companyUrl} target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors">{exp.data.company}</a>
|
||||
) : exp.data.company}
|
||||
</p>
|
||||
|
||||
<div class="exp-content text-sm leading-relaxed mb-4 prose prose-sm max-w-none">
|
||||
<div class="text-sm text-white/60 leading-relaxed mb-3 prose prose-sm prose-invert max-w-none [&_p]:text-white/60 [&_a]:text-purple-200 [&_a:hover]:text-white">
|
||||
<Content />
|
||||
</div>
|
||||
|
||||
{exp.data.technologies && exp.data.technologies.length > 0 && (
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
{exp.data.technologies.map((tech: string) => (
|
||||
<span class="exp-tech inline-block px-2.5 py-0.5 text-xs rounded-full border">
|
||||
<span class="inline-block px-2 py-0.5 text-xs rounded-full bg-white/[0.06] text-white/50 border border-white/[0.06]">
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -1,144 +0,0 @@
|
|||
/*
|
||||
* Experience card styles — shared by FR, EN, AR career pages.
|
||||
* Cards use the `.code-card` class to opt out of the layout's
|
||||
* white-on-purple overrides (see main.astro).
|
||||
*
|
||||
* Light mode: white cards on purple gradient background.
|
||||
* Dark mode: translucent cards blending into the gradient.
|
||||
*/
|
||||
|
||||
/* ────────────────────────────────────────────
|
||||
Card container
|
||||
──────────────────────────────────────────── */
|
||||
|
||||
.exp-card {
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.exp-card--ongoing {
|
||||
box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.25),
|
||||
0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.dark .exp-card {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dark .exp-card:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.dark .exp-card--ongoing {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* ────────────────────────────────────────────
|
||||
Typography
|
||||
──────────────────────────────────────────── */
|
||||
|
||||
.exp-card h3 { color: #111827; }
|
||||
.exp-card .exp-meta { color: #9ca3af; }
|
||||
.exp-card .exp-company { color: #6b21a8; }
|
||||
.exp-card .exp-company a { color: #6b21a8; text-decoration: none; }
|
||||
.exp-card .exp-company a:hover { color: #581c87; }
|
||||
.exp-card .exp-content,
|
||||
.exp-card .exp-content p { color: #4b5563; }
|
||||
.exp-card .exp-content a { color: #6b21a8; text-decoration-color: rgba(107, 33, 168, 0.3); }
|
||||
.exp-card .exp-content a:hover { color: #581c87; }
|
||||
|
||||
.dark .exp-card h3 { color: white; }
|
||||
.dark .exp-card .exp-meta { color: rgba(255, 255, 255, 0.3); }
|
||||
.dark .exp-card .exp-company { color: #d4b5ff; }
|
||||
.dark .exp-card .exp-company a { color: #d4b5ff; }
|
||||
.dark .exp-card .exp-company a:hover { color: white; }
|
||||
.dark .exp-card .exp-content,
|
||||
.dark .exp-card .exp-content p { color: rgba(255, 255, 255, 0.6); }
|
||||
.dark .exp-card .exp-content a { color: #d4b5ff; }
|
||||
.dark .exp-card .exp-content a:hover { color: white; }
|
||||
|
||||
/* ────────────────────────────────────────────
|
||||
Tech badges
|
||||
──────────────────────────────────────────── */
|
||||
|
||||
.exp-card .exp-tech {
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
border-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.dark .exp-card .exp-tech {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
border-color: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
/* ────────────────────────────────────────────
|
||||
Logo container
|
||||
──────────────────────────────────────────── */
|
||||
|
||||
.exp-logo {
|
||||
background: #f9fafb;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.exp-logo-fallback {
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.exp-logo-fallback span {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.dark .exp-logo {
|
||||
background: white;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.dark .exp-logo-fallback {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.dark .exp-logo-fallback span {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* ────────────────────────────────────────────
|
||||
Type badges
|
||||
──────────────────────────────────────────── */
|
||||
|
||||
.type-badge-blue { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
|
||||
.type-badge-amber { background: #fffbeb; color: #b45309; border-color: #fde68a; }
|
||||
.type-badge-emerald { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
|
||||
.type-badge-pink { background: #fdf2f8; color: #be185d; border-color: #fbcfe8; }
|
||||
.type-badge-purple { background: #faf5ff; color: #7e22ce; border-color: #e9d5ff; }
|
||||
|
||||
.dark .type-badge-blue { background: rgba(96, 165, 250, 0.15); color: #93c5fd; border-color: rgba(96, 165, 250, 0.2); }
|
||||
.dark .type-badge-amber { background: rgba(251, 191, 36, 0.15); color: #fcd34d; border-color: rgba(251, 191, 36, 0.2); }
|
||||
.dark .type-badge-emerald { background: rgba(52, 211, 153, 0.15); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.2); }
|
||||
.dark .type-badge-pink { background: rgba(244, 114, 182, 0.15); color: #f9a8d4; border-color: rgba(244, 114, 182, 0.2); }
|
||||
.dark .type-badge-purple { background: rgba(168, 85, 247, 0.15); color: #d4b5ff; border-color: rgba(168, 85, 247, 0.2); }
|
||||
|
||||
/* ────────────────────────────────────────────
|
||||
Type border (left for LTR, right for RTL)
|
||||
──────────────────────────────────────────── */
|
||||
|
||||
.type-border-blue { border-inline-start-color: #3b82f6; }
|
||||
.type-border-amber { border-inline-start-color: #f59e0b; }
|
||||
.type-border-emerald { border-inline-start-color: #10b981; }
|
||||
.type-border-pink { border-inline-start-color: #ec4899; }
|
||||
.type-border-purple { border-inline-start-color: #a855f7; }
|
||||
|
||||
.dark .type-border-blue { border-inline-start-color: rgba(96, 165, 250, 0.4); }
|
||||
.dark .type-border-amber { border-inline-start-color: rgba(251, 191, 36, 0.4); }
|
||||
.dark .type-border-emerald { border-inline-start-color: rgba(52, 211, 153, 0.4); }
|
||||
.dark .type-border-pink { border-inline-start-color: rgba(244, 114, 182, 0.4); }
|
||||
.dark .type-border-purple { border-inline-start-color: rgba(168, 85, 247, 0.4); }
|
||||
Loading…
Add table
Reference in a new issue