diff --git a/src/assets/about/2-devc-podcast-1.png b/src/assets/about/2-devc-podcast-1.png new file mode 100644 index 00000000..d188e4fd Binary files /dev/null and b/src/assets/about/2-devc-podcast-1.png differ diff --git a/src/assets/about/2-devc-podcast-2.png b/src/assets/about/2-devc-podcast-2.png new file mode 100644 index 00000000..ff2d4d00 Binary files /dev/null and b/src/assets/about/2-devc-podcast-2.png differ diff --git a/src/assets/about/2-devc-podcast-3.png b/src/assets/about/2-devc-podcast-3.png new file mode 100644 index 00000000..f1aa020d Binary files /dev/null and b/src/assets/about/2-devc-podcast-3.png differ diff --git a/src/assets/about/3-community-1.png b/src/assets/about/3-community-1.png new file mode 100644 index 00000000..223d5ad1 Binary files /dev/null and b/src/assets/about/3-community-1.png differ diff --git a/src/assets/about/3-community-2.png b/src/assets/about/3-community-2.png new file mode 100644 index 00000000..f4b705b5 Binary files /dev/null and b/src/assets/about/3-community-2.png differ diff --git a/src/assets/about/3-community-3.png b/src/assets/about/3-community-3.png new file mode 100644 index 00000000..6970fa26 Binary files /dev/null and b/src/assets/about/3-community-3.png differ diff --git a/src/assets/about/3-community-4.png b/src/assets/about/3-community-4.png new file mode 100644 index 00000000..c1f63bf2 Binary files /dev/null and b/src/assets/about/3-community-4.png differ diff --git a/src/assets/about/3-community-5.png b/src/assets/about/3-community-5.png new file mode 100644 index 00000000..1d20d2bc Binary files /dev/null and b/src/assets/about/3-community-5.png differ diff --git a/src/assets/about/4-first-blablaconf.png b/src/assets/about/4-first-blablaconf.png new file mode 100644 index 00000000..76903f13 Binary files /dev/null and b/src/assets/about/4-first-blablaconf.png differ diff --git a/src/assets/about/5-episode-100.png b/src/assets/about/5-episode-100.png new file mode 100644 index 00000000..18639810 Binary files /dev/null and b/src/assets/about/5-episode-100.png differ diff --git a/src/assets/about/6-ngo.png b/src/assets/about/6-ngo.png new file mode 100644 index 00000000..944f8e17 Binary files /dev/null and b/src/assets/about/6-ngo.png differ diff --git a/src/assets/about/7-next.png b/src/assets/about/7-next.png new file mode 100644 index 00000000..f4bf2b74 Binary files /dev/null and b/src/assets/about/7-next.png differ diff --git a/src/assets/about/blabla-conf.png b/src/assets/about/blabla-conf.png deleted file mode 100644 index 89838b22..00000000 Binary files a/src/assets/about/blabla-conf.png and /dev/null differ diff --git a/src/assets/about/devc-1.png b/src/assets/about/devc-1.png deleted file mode 100644 index 519ab53e..00000000 Binary files a/src/assets/about/devc-1.png and /dev/null differ diff --git a/src/assets/about/devc-hero.png b/src/assets/about/devc-hero.png new file mode 100644 index 00000000..101d4979 Binary files /dev/null and b/src/assets/about/devc-hero.png differ diff --git a/src/assets/about/episode-100.png b/src/assets/about/episode-100.png deleted file mode 100644 index 95748e90..00000000 Binary files a/src/assets/about/episode-100.png and /dev/null differ diff --git a/src/assets/about/geeksblabla-community.png b/src/assets/about/geeksblabla-community.png deleted file mode 100644 index 72d1936f..00000000 Binary files a/src/assets/about/geeksblabla-community.png and /dev/null differ diff --git a/src/assets/about/geeksblabla-devc.png b/src/assets/about/geeksblabla-devc.png new file mode 100644 index 00000000..c79b0752 Binary files /dev/null and b/src/assets/about/geeksblabla-devc.png differ diff --git a/src/assets/about/geeksblabla-ngo.png b/src/assets/about/geeksblabla-ngo.png deleted file mode 100644 index cd26c3dd..00000000 Binary files a/src/assets/about/geeksblabla-ngo.png and /dev/null differ diff --git a/src/assets/about/geeksblabla-podcast-birth.png b/src/assets/about/geeksblabla-podcast-birth.png deleted file mode 100644 index cf8d1de9..00000000 Binary files a/src/assets/about/geeksblabla-podcast-birth.png and /dev/null differ diff --git a/src/assets/about/whats-next.png b/src/assets/about/whats-next.png deleted file mode 100644 index ea082cc5..00000000 Binary files a/src/assets/about/whats-next.png and /dev/null differ diff --git a/src/components/about/member.astro b/src/components/about/member.astro index c6eec380..364a05b6 100644 --- a/src/components/about/member.astro +++ b/src/components/about/member.astro @@ -7,7 +7,7 @@ const { name, x_handle, profile_image } = Astro.props;
{name} = [ +const STORY_TIMELINE: Array = [ { title: "DevC Casa is born", date: "Jan 2017", description: "The Facebook Developer Circles program is a community-driven initiative designed to foster collaboration and knowledge-sharing among developers worldwide.

Developer Circles Casablanca was one of the few communities launched with the aim to provide a platform for Moroccan developers to connect locally, learn new skills, collaborate on projects, and advance their careers through workshops, meetups, and online forums. DevC Casa had great success and was one the largest and most active groups globally. A success that led to the creation of 2 other DevCs in Rabat and Marrakech.", - image: devCImage, + images: [ + { src: devCImage, width: "1/3" }, + { src: devcHeroImage, width: "2/3" }, + ], }, { title: "Geeksblabla, as a DevC Casa podcast", date: "May 2018", description: "Within DevC Casablanca, we ignite a passion for learning, foster vibrant knowledge exchange, and strengthen our community bonds. Our transformative journey took an exciting turn with the launch of GeeksBlabla, a groundbreaking podcast.

It was more than just a virtual gathering—it became a symbol for deep, meaningful conversations within the IT field during the sacred nights of Ramadan. Little did we anticipate the incredible journey that would unfold from this humble beginning.", - image: geeksBlablaPodcastBirthImage, + images: [ + { src: devcPodcastImage1, width: "full" }, + { src: devcPodcastImage2, width: "1/2" }, + { src: devcPodcastImage3, width: "1/2" }, + ], }, { title: "Geeksblabla, the community", date: "July 2019", description: "It's incredible to think that what began as a four-episode podcast during the Ramadan nights of 2018 has blossomed into a vast library of hundreds of videos on YouTube and Facebook, covering all facets of IT in Moroccan Darija.

As interest from our community grew, so did the frequency of our gatherings, from monthly to bi-weekly, and finally weekly. The evolution of Geeksblabla into its own thriving community outside of DevC Casablanca was a testament to its impact and the passion of our audience.", - image: geeksblablaCommunityImage, + images: [ + { src: communityImage1, width: "1/2" }, + { src: communityImage2, width: "1/2" }, + { src: communityImage3, width: "full" }, + { src: communityImage4, width: "1/2" }, + { src: communityImage5, width: "1/2" }, + ], }, { title: "Blabla Conf", date: "Oct 2020", description: "In 2020, as the world faced closures and Morocco was no exception, our community adapted swiftly. With in-person gatherings halted, virtual meetups were the lifeline.

Geeksblabla, already virtual from its inception, continued to host its weekly rendez-vous, providing a constant source of connection during challenging times. Sensing the need for a boost in morale, we launched BlaBlaConf - a bold new initiative aimed at serving an even larger audience. Over five days of intense learning, knowledge sharing and fun, BlaBlaConf emerged as a source of inspiration and solidarity within our community.", - image: blablaConfImage, + images: [{ src: firstBlablaConfImage, width: "full" }], }, { title: "Episode 100", date: "Dec 2021", description: "After more than 3 years of consistent work on the podcast, we have reached the milestone of hosting 100 episodes.

This achievement proves that the concept is strong and has had a significant impact on the Moroccan community with more than 100 episodes of highly valuable content and over 200 guests across the past 100 episodes.", - image: episode100Image, + images: [{ src: episode100Image, width: "full" }], }, { title: "GeeksBlabla as NGO officially!", date: "Jan 2024", description: "As we have grown in the past few years and maintained multiple initiatives, as well as expanded our core team, creating an official NGO for the community was a must to help us make a better impact and establish a strong foundation for upcoming initiatives.", - image: geeksblablaNGOImage, + images: [{ src: geeksblablaNGOImage, width: "full" }], }, { title: "What's next?", date: "...", description: "Building on our rich history of growth and community impact, the future of Geeksblabla shines brightly with promise.

Geeksblabla has evolved beyond being just a podcast; it has grown into a vibrant community, encompassing multiple initiatives and projects. As we look ahead, our commitment to serving the Moroccan community remains strong. We will continue to innovate and expand our initiatives, staying true to our core values of learning, collaboration, and inclusivity. Through Geeksblabla and upcoming projects, we aim to foster even deeper connections, empower aspiring tech enthusiasts, and provide platforms for meaningful exchanges.

Together, we will move forward, creating environments where knowledge flourishes and aspirations soar.", - image: whatsnextImage, + images: [{ src: whatsnextImage, width: "full" }], }, ]; --- -
+
-
+

- About Us + How it all started?

Go to Team members - +
{ - timelineItems.map(item => ( + STORY_TIMELINE.map(item => (

diff --git a/src/components/about/timeline-item.astro b/src/components/about/timeline-item.astro index df4ce8f2..c6d6e6d5 100644 --- a/src/components/about/timeline-item.astro +++ b/src/components/about/timeline-item.astro @@ -2,58 +2,67 @@ import type { ImageMetadata } from "astro"; import { Image } from "astro:assets"; -export type TimelineItemType = { +type ImageWidth = "1/2" | "1/3" | "2/3" | "full"; + +export interface TimelineItemType { title: string; date: string; - image: ImageMetadata; -}; + images: Array<{ + src: ImageMetadata; + width: ImageWidth; + }>; +} type Props = TimelineItemType; -const { title, date, image } = Astro.props as Props; ---- +const { title, date, images } = Astro.props as Props; -

- {/* Horizontal line spanning 70% of width, positioned 15% from left */} - - { - /* Vertical line positioned either 15% from left or right depending on odd/even */ +const getWidthClass = (width: ImageWidth) => { + switch (width) { + case "1/2": + return "w-full md:w-[calc(50%-0.25rem)]"; + case "1/3": + return "w-full md:w-[calc(33.333%-0.25rem)]"; + case "2/3": + return "w-full md:w-[calc(66.666%-0.25rem)]"; + case "full": + return "w-full"; + default: + return "w-full"; } - +}; +--- - {/* Right corner piece - rotates -90deg on even items */} - +
+
+
+
+

+ {date} +

+

{title}

+
- {/* Left corner piece - rotates 90deg on odd items */} - -
- DevC Casa illustration -
-
-
-

{title}

-

{date}

-
-
- +
+ +
+
+ { + images.map(image => ( +
+ {title} +
+ )) + } +
diff --git a/src/icons/arrow-down-right.svg b/src/icons/arrow-down-right.svg new file mode 100644 index 00000000..060700c2 --- /dev/null +++ b/src/icons/arrow-down-right.svg @@ -0,0 +1,3 @@ + + +