Skip to content

Commit 0d9ff10

Browse files
jeostejeoste
committed
chore: enhance layout and styling across components, update blog post title and description for clarity, and improve contact page content with new icons and refined messaging
1 parent a78ee60 commit 0d9ff10

File tree

10 files changed

+380
-48
lines changed

10 files changed

+380
-48
lines changed

‎public/assets/images/logos/tealstreet.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎src/assets/icons/IconQlik.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/components/AchievementsPage.tsx‎

Lines changed: 293 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
import React from "react";
2+
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
3+
4+
export default function AchievementsPage() {
5+
return (
6+
<div className="max-w-4xl mx-auto space-y-12">
7+
<div className="text-center space-y-4">
8+
<h1 className="text-4xl font-bold tracking-tight">Achievements</h1>
9+
<h2 className="text-2xl font-semibold text-muted-foreground">Milestones</h2>
10+
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
11+
Throughout my career, I've achieved various milestones, obtained certifications and worked on various projects, here's more details.
12+
</p>
13+
</div>
14+
15+
{/* Professional Experience */}
16+
<section className="space-y-6">
17+
<h3 className="text-2xl font-bold">Professional Experience</h3>
18+
<div className="grid gap-6">
19+
<Card className="border-l-4 border-l-primary">
20+
<CardHeader>
21+
<CardTitle className="text-xl">Technical Lead</CardTitle>
22+
</CardHeader>
23+
<CardContent className="space-y-2">
24+
<p className="text-muted-foreground">6+ years leading technical teams and architectural decisions</p>
25+
<p className="text-sm text-muted-foreground">Successfully delivered in production 15+ projects, more than 95% success rate</p>
26+
</CardContent>
27+
</Card>
28+
29+
<Card className="border-l-4 border-l-primary">
30+
<CardHeader>
31+
<CardTitle className="text-xl">Data Consultant</CardTitle>
32+
</CardHeader>
33+
<CardContent className="space-y-2">
34+
<p className="text-muted-foreground">
35+
Expertise across multiple industries (logistics, e-commerce, bank, insurance, transport etc..)
36+
and technologies (Java, SQL, Qlik, Talend, AWS, Azure etc..)
37+
</p>
38+
<p className="text-sm text-muted-foreground">Specialized in data platform architecture and pipelines</p>
39+
</CardContent>
40+
</Card>
41+
42+
<Card className="border-l-4 border-l-primary">
43+
<CardHeader>
44+
<CardTitle className="text-xl">Startup & Entrepreneurship</CardTitle>
45+
</CardHeader>
46+
<CardContent className="space-y-2">
47+
<p className="text-muted-foreground">Active involvement in the startup ecosystem</p>
48+
<p className="text-sm text-muted-foreground">Following AI and data-driven innovation trends</p>
49+
<p className="text-sm text-muted-foreground">Active in the startup ecosystem</p>
50+
</CardContent>
51+
</Card>
52+
</div>
53+
</section>
54+
55+
{/* Technical Success */}
56+
<section className="space-y-6">
57+
<h3 className="text-2xl font-bold">Technical Success</h3>
58+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
59+
<Card className="bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-950/30 dark:to-teal-950/30 border-emerald-200 dark:border-emerald-800">
60+
<CardHeader>
61+
<div className="flex items-center gap-3">
62+
<div className="w-8 h-8 bg-emerald-600 rounded-lg flex items-center justify-center">
63+
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
64+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
65+
</svg>
66+
</div>
67+
<CardTitle className="text-emerald-900 dark:text-emerald-100">Data Platform Architecture</CardTitle>
68+
</div>
69+
</CardHeader>
70+
<CardContent>
71+
<p className="text-sm text-emerald-700 dark:text-emerald-300">
72+
Designed and implemented from scratch modern data architectures for complex and real-time systems
73+
</p>
74+
</CardContent>
75+
</Card>
76+
77+
<Card className="bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-blue-950/30 dark:to-cyan-950/30 border-blue-200 dark:border-blue-800">
78+
<CardHeader>
79+
<div className="flex items-center gap-3">
80+
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
81+
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
82+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
83+
</svg>
84+
</div>
85+
<CardTitle className="text-blue-900 dark:text-blue-100">Legacy System Migration</CardTitle>
86+
</div>
87+
</CardHeader>
88+
<CardContent>
89+
<p className="text-sm text-blue-700 dark:text-blue-300">
90+
Successfully migrated multiple legacy data systems to modern platforms
91+
</p>
92+
</CardContent>
93+
</Card>
94+
95+
<Card className="bg-gradient-to-br from-purple-50 to-violet-50 dark:from-purple-950/30 dark:to-violet-950/30 border-purple-200 dark:border-purple-800">
96+
<CardHeader>
97+
<div className="flex items-center gap-3">
98+
<div className="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center">
99+
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
100+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
101+
</svg>
102+
</div>
103+
<CardTitle className="text-purple-900 dark:text-purple-100">Optimization & Scalability</CardTitle>
104+
</div>
105+
</CardHeader>
106+
<CardContent>
107+
<p className="text-sm text-purple-700 dark:text-purple-300">
108+
Optimized databases, data pipelines, and data platforms for better performance and scalability
109+
</p>
110+
</CardContent>
111+
</Card>
112+
113+
<Card className="bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-950/30 dark:to-amber-950/30 border-orange-200 dark:border-orange-800">
114+
<CardHeader>
115+
<div className="flex items-center gap-3">
116+
<div className="w-8 h-8 bg-orange-600 rounded-lg flex items-center justify-center">
117+
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
118+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
119+
</svg>
120+
</div>
121+
<CardTitle className="text-orange-900 dark:text-orange-100">Team Leadership</CardTitle>
122+
</div>
123+
</CardHeader>
124+
<CardContent>
125+
<p className="text-sm text-orange-700 dark:text-orange-300">
126+
Led technical teams and established best practices across organizations and teams
127+
</p>
128+
</CardContent>
129+
</Card>
130+
</div>
131+
</section>
132+
133+
{/* Key Projects */}
134+
<section className="space-y-6">
135+
<h3 className="text-2xl font-bold">Key Projects & Clients</h3>
136+
<div className="grid gap-6">
137+
<Card className="border-l-4 border-l-green-500">
138+
<CardHeader>
139+
<CardTitle className="text-xl">For leading client in nautic industry</CardTitle>
140+
</CardHeader>
141+
<CardContent>
142+
<p className="text-muted-foreground">
143+
Modern datahub architecture for complex systems to transform their information system from a company to a European group
144+
</p>
145+
</CardContent>
146+
</Card>
147+
148+
<Card className="border-l-4 border-l-green-500">
149+
<CardHeader>
150+
<CardTitle className="text-xl">For french transport company</CardTitle>
151+
</CardHeader>
152+
<CardContent>
153+
<p className="text-muted-foreground">
154+
Legacy Data Integration Architecture for simple systems
155+
</p>
156+
</CardContent>
157+
</Card>
158+
159+
<Card className="border-l-4 border-l-green-500">
160+
<CardHeader>
161+
<CardTitle className="text-xl">For leading client in crane & lifting industry</CardTitle>
162+
</CardHeader>
163+
<CardContent>
164+
<p className="text-muted-foreground">
165+
REST API scenarios in database for workflow automation
166+
</p>
167+
</CardContent>
168+
</Card>
169+
170+
<Card className="border-l-4 border-l-green-500">
171+
<CardHeader>
172+
<CardTitle className="text-xl">For 3PL client industry</CardTitle>
173+
</CardHeader>
174+
<CardContent>
175+
<p className="text-muted-foreground">
176+
Comprehensive monitoring and observability solutions
177+
</p>
178+
</CardContent>
179+
</Card>
180+
</div>
181+
</section>
182+
183+
{/* Areas of Expertise */}
184+
<section className="space-y-6">
185+
<h3 className="text-2xl font-bold">Areas of Expertise</h3>
186+
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
187+
{[
188+
"Data Engineering", "ETL/ELT", "Java", "SQL",
189+
"Data Observability", "Database Design", "API Development",
190+
"System Architecture", "Problem Solving"
191+
].map((skill) => (
192+
<div
193+
key={skill}
194+
className="bg-accent/20 px-3 py-2 rounded-lg text-sm text-center font-medium hover:bg-accent/30 transition-colors"
195+
>
196+
{skill}
197+
</div>
198+
))}
199+
</div>
200+
</section>
201+
202+
{/* Certifications */}
203+
<section className="space-y-6">
204+
<h3 className="text-2xl font-bold">Certifications & Accreditations</h3>
205+
<Card className="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 border-blue-200 dark:border-blue-800">
206+
<CardHeader>
207+
<div className="flex items-center gap-3">
208+
<div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center shadow-sm">
209+
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
210+
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z"/>
211+
<path d="M15.5 7.5C15.5 7.5 14.5 8.5 13.5 9.5C12.5 10.5 11.5 11.5 10.5 12.5C9.5 13.5 8.5 14.5 7.5 15.5C8.5 14.5 9.5 13.5 10.5 12.5C11.5 11.5 12.5 10.5 13.5 9.5C14.5 8.5 15.5 7.5 15.5 7.5Z"/>
212+
</svg>
213+
</div>
214+
<div>
215+
<CardTitle className="text-blue-900 dark:text-blue-100">Qlik/Talend Certifications</CardTitle>
216+
<p className="text-sm text-blue-700 dark:text-blue-300">Advanced practitioner with comprehensive knowledge</p>
217+
</div>
218+
</div>
219+
</CardHeader>
220+
<CardContent className="space-y-6">
221+
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
222+
{[
223+
{
224+
type: "Developer",
225+
version: "v7",
226+
title: "Certified Developer",
227+
description: "Advanced development skills and best practices"
228+
},
229+
{
230+
type: "Administrator",
231+
version: "v7",
232+
title: "Certified Administrator",
233+
description: "System administration and deployment expertise"
234+
},
235+
{
236+
type: "Architect & Sales",
237+
version: "v8",
238+
title: "Technical Solutions Architect",
239+
description: "Enterprise architecture design and consulting"
240+
}
241+
].map((cert) => (
242+
<Card key={cert.type} className="bg-white dark:bg-gray-800 border-blue-200 dark:border-blue-700">
243+
<CardContent className="p-4">
244+
<div className="flex items-center justify-between mb-3">
245+
<span className="text-xs font-semibold text-blue-600 dark:text-blue-400 uppercase tracking-wide">
246+
{cert.type}
247+
</span>
248+
<span className="text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded-full font-medium">
249+
{cert.version}
250+
</span>
251+
</div>
252+
<h5 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">{cert.title}</h5>
253+
<p className="text-xs text-gray-600 dark:text-gray-400">{cert.description}</p>
254+
</CardContent>
255+
</Card>
256+
))}
257+
</div>
258+
<div className="pt-4 border-t border-blue-200 dark:border-blue-700">
259+
<div className="flex items-center gap-2 text-sm text-blue-700 dark:text-blue-300">
260+
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
261+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
262+
</svg>
263+
<span className="font-medium">Expertise Level:</span>
264+
<span>Advanced practitioner with comprehensive knowledge across development, administration, and architecture domains.</span>
265+
</div>
266+
</div>
267+
</CardContent>
268+
</Card>
269+
</section>
270+
271+
{/* Future Goals */}
272+
<section className="space-y-6">
273+
<h3 className="text-2xl font-bold">Future Goals</h3>
274+
<Card>
275+
<CardContent className="pt-6">
276+
<div className="space-y-4">
277+
{[
278+
"Continue contributing to the data community through knowledge sharing",
279+
"Explore emerging technologies in AI and data observability & monitoring",
280+
"Contribute to open-source data projects"
281+
].map((goal, index) => (
282+
<div key={index} className="flex items-center gap-3">
283+
<div className="w-2 h-2 bg-primary rounded-full"></div>
284+
<span className="text-muted-foreground">{goal}</span>
285+
</div>
286+
))}
287+
</div>
288+
</CardContent>
289+
</Card>
290+
</section>
291+
</div>
292+
);
293+
}

‎src/components/Header.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,20 +36,20 @@ const isActive = (path: string) => {
3636
</a>
3737
<div
3838
id="nav-container"
39-
class="mx-auto flex max-w-3xl flex-col items-center justify-between sm:flex-row sm:items-center w-full p-4 sm:py-6"
39+
class="mx-auto flex max-w-5xl flex-col items-center justify-between sm:flex-row sm:items-center w-full p-4 sm:py-6 sm:px-8"
4040
>
4141
<a
4242
href="/"
4343
class="text-2xl leading-7 font-semibold whitespace-nowrap flex flex-col items-end"
4444
>
4545
<span>{SITE.title}</span>
46-
<span class="text-xs opacity-70">v1.1.0</span>
46+
<span class="text-xs opacity-70 italic">v1.1.0</span>
4747
</a>
4848

4949
<div class="flex items-center gap-4">
5050
<nav
5151
id="nav-menu"
52-
class="flex w-full flex-col items-center sm:ml-0 sm:flex-row sm:justify-end sm:space-x-6 sm:py-0"
52+
class="flex w-full flex-col items-center sm:ml-8 sm:flex-row sm:justify-end sm:space-x-6 sm:py-0"
5353
>
5454
<button
5555
id="menu-btn"

‎src/components/Hr.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@ export interface Props {
77
const { noPadding = false, ariaHidden = true } = Astro.props;
88
---
99

10-
<div class={`max-w-3xl mx-auto ${noPadding ? "px-0" : "px-4"}`}>
10+
<div class={`max-w-5xl mx-auto ${noPadding ? "px-0" : "px-4 sm:px-8"}`}>
1111
<hr class="border-border" aria-hidden={ariaHidden} />
1212
</div>

‎src/data/blog/data-observability.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
22
author: Jeoffrey Stéphan
33
pubDatetime: 2025-07-28T01:08:52.777Z
4-
modDatetime: 2025-08-02T10:57:52.777Z
5-
title: Data Observability | Why so necessary
4+
modDatetime: 2025-08-04T02:57:52.777Z
5+
title: Data Observability | Why you need it (and don't know it)
66
tags:
77
- data engineering
88
- data observability
@@ -11,7 +11,7 @@ tags:
1111
- traces
1212
- metrics
1313
- data health
14-
description: Understanding why a data observability platform is the new tool that enhance your information system
14+
description: Understanding why a data observability platform is the tool that gives you trust in your data
1515
---
1616

1717
> In today's data-driven world, organizations needs to be digital, but struggle to keep a 100% functional and available data accross their systems. Data observability emerges as the optimum solution to be aware of the current situation of the information system.

‎src/pages/achievements.astro‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
import Layout from "@/layouts/Layout.astro";
3+
import Header from "@/components/Header.astro";
4+
import Footer from "@/components/Footer.astro";
5+
import Main from "@/layouts/Main.astro";
6+
import AchievementsPage from "@/components/AchievementsPage.tsx";
7+
8+
const pageTitle = "";
9+
const pageDesc = "> My professional achievements, certifications, and milestones";
10+
---
11+
12+
<Layout>
13+
<Header />
14+
<Main pageTitle={pageTitle} pageDesc={pageDesc}>
15+
<AchievementsPage client:load />
16+
</Main>
17+
<Footer />
18+
</Layout>

0 commit comments

Comments
 (0)