- Align my headline with my new role

- Fix the Timeline component
- Add GoogleAnalytics
- Some UI Tweaks + Clean up

.github/workflows/nextjs.yml

@@ -74,6 +74,8 @@ jobs:
       - name: Install dependencies
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
       - name: Build with Next.js
+        env:
+          NEXT_PUBLIC_GA_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_GA_MEASUREMENT_ID }}
         run: ${{ steps.detect-package-manager.outputs.runner }} next build
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

src/app/blog/components/Posts.tsx

@@ -1,4 +1,4 @@
-import { formatDate, getPosts } from "../../utils";
+import { formatDate } from "../../utils";
 import {
   Flex,
   Grid,
@@ -9,26 +9,19 @@ import {
 import styles from "@/app/blog/components/Posts.module.scss";
 
 interface PostsProps {
-  range?: [number] | [number, number];
+  blogs: {
+    slug: string;
+    metadata: {
+      title: string;
+      publishedAt: string;
+    };
+  }[];
+  range?: [number, number];
   columns?: "1" | "2" | "3";
 }
 
-export function Posts({ range, columns = "1" }: PostsProps) {
-  const allBlogs = getPosts(["src", "app", "blog", "posts"]);
-
-  const sortedBlogs = allBlogs.sort((a, b) => {
-    return (
-      new Date(b.metadata.publishedAt).getTime() -
-      new Date(a.metadata.publishedAt).getTime()
-    );
-  });
-
-  const displayedBlogs = range
-    ? sortedBlogs.slice(
-        range[0] - 1,
-        range.length === 2 ? range[1] : sortedBlogs.length
-      )
-    : sortedBlogs;
+export function Posts({ blogs, range, columns = "1" }: PostsProps) {
+  const displayedBlogs = range ? blogs.slice(range[0], range[1]) : blogs;
 
   return (
     <>

src/app/blog/page.tsx

@@ -1,8 +1,8 @@
 import { Flex, Heading } from "@/components/once-ui/components";
-import { Mailchimp } from "@/components";
 import { Posts } from "./components/Posts";
+import { getPosts } from "@/app/utils";
 
-import { blog, newsletter, person } from "@/resources";
+import { blog, person } from "@/resources";
 import { baseURL } from "@/resources";
 
 export function generateMetadata() {
@@ -35,6 +35,15 @@ export function generateMetadata() {
 }
 
 export default function Blog() {
+  const allBlogs = getPosts(["src", "app", "blog", "posts"]);
+
+  const sortedBlogs = allBlogs.sort((a, b) => {
+    return (
+      new Date(b.metadata.publishedAt).getTime() -
+      new Date(a.metadata.publishedAt).getTime()
+    );
+  });
+
   return (
     <Flex fillWidth maxWidth="s" direction="column">
       <script
@@ -63,10 +72,9 @@ export default function Blog() {
         {blog.title}
       </Heading>
       <Flex fillWidth flex={1}>
-        <Posts range={[1, 3]} />
-        <Posts range={[4]} columns="2" />
+        <Posts blogs={sortedBlogs} range={[0, 3]} />
+        <Posts blogs={sortedBlogs} range={[3, 5]} columns="2" />
       </Flex>
-      {newsletter.display && <Mailchimp />}
     </Flex>
   );
 }

src/app/layout.tsx

@@ -5,7 +5,7 @@ import "@/components/once-ui/tokens/index.scss";
 import classNames from "classnames";
 
 import { Flex, Background } from "@/components/once-ui/components";
-import { Footer, Header, RouteGuard } from "@/components";
+
 import { baseURL, effects, home, person, style } from "@/resources";
 import { ThemeProvider } from "@/components/ThemeProvider";
 import BetaBadge from "@/components/BetaBadge";
@@ -15,6 +15,10 @@ import { Source_Code_Pro } from "next/font/google";
 
 import { Metadata } from "next";
 import Head from "next/head";
+import { Header } from "@/components/Header";
+import { RouteGuard } from "@/components/RouteGuard";
+import { Footer } from "@/components/Footer";
+import GoogleAnalytics from "@/components/GoogleAnalytics";
 
 export const metadata: Metadata = {
   metadataBase: new URL("https://" + baseURL),
@@ -103,6 +107,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
         direction="column"
       >
         <ThemeProvider>
+          <GoogleAnalytics />
           <Background
             gradient={effects.gradient}
             dots={effects.dots}

src/app/page.tsx

@@ -98,16 +98,17 @@ export default function Home() {
                 Hi, I'm Toufic 👋, a passionate{" "}
                 <RevealFx delay={0.1}>
                   <Highlight className="text-black dark:text-white">
-                    DEVELOPER
+                    Full Stack Developer
                   </Highlight>
                 </RevealFx>{" "}
-                who loves turning complex problems into elegant solutions and{" "}
+                who loves turning complex challenges into seamless solutions{" "}
+                {/* and{" "}
                 <RevealFx delay={0.2}>
                   <Highlight className="text-black dark:text-white">
                     LEADING TEAMS
                   </Highlight>
                 </RevealFx>{" "}
-                to achieve greatness.
+                to achieve greatness. */}
               </p>
               {/* {renderJSX(home.subline)} */}
               {/* </Text> */}

src/app/work/[slug]/page.tsx

@@ -2,7 +2,6 @@ import { notFound } from "next/navigation";
 import { CustomMDX } from "@/components/mdx";
 import { formatDate, getPosts } from "../../utils";
 import {
-  AvatarGroup,
   Button,
   Flex,
   Heading,
@@ -144,9 +143,9 @@ export default function Project({ params }: WorkParams) {
         direction="column"
       >
         <Flex gap="12" marginBottom="24" alignItems="center">
-          {post.metadata.team && (
+          {/* {post.metadata.team && (
             <AvatarGroup reverseOrder avatars={avatars} size="m" />
-          )}
+          )} */}
           <Text variant="body-default-s" onBackground="neutral-weak">
             {formatDate(post.metadata.publishedAt)}
           </Text>

src/app/work/components/Projects.tsx

@@ -1,24 +1,15 @@
 import { Flex } from "@/components/once-ui/components";
-import { ProjectCard } from "@/components";
-import { getPosts } from "@/app/utils";
+import { ProjectCard } from "@/components/ProjectCard";
 
 interface ProjectsProps {
+  projects: any[];
   range?: [number, number?];
 }
 
-export function Projects({ range }: ProjectsProps) {
-  const allProjects = getPosts(["src", "app", "work", "projects"]);
-
-  const sortedProjects = allProjects.sort((a, b) => {
-    return (
-      new Date(b.metadata.publishedAt).getTime() -
-      new Date(a.metadata.publishedAt).getTime()
-    );
-  });
-
+export function Projects({ projects, range }: ProjectsProps) {
   const displayedProjects = range
-    ? sortedProjects.slice(range[0] - 1, range[1] ?? sortedProjects.length)
-    : sortedProjects;
+    ? projects.slice(range[0], range[1] ?? projects.length)
+    : projects;
 
   return (
     <Flex fillWidth gap="l" marginBottom="40" paddingX="l" direction="column">

src/app/work/page.tsx

@@ -36,11 +36,30 @@ export function generateMetadata() {
 export default function Work() {
   const allProjects = getPosts(["src", "app", "work", "projects"]);
 
-  const timelineData = allProjects.map((project, index) => ({
-    title: new Date(project.metadata.publishedAt).getFullYear().toString(),
-    // content: <Projects projects={[project]} />,
-    content: <Projects range={[index]} />,
-  }));
+  const sortedProjects = allProjects.sort((a, b) => {
+    return (
+      new Date(b.metadata.publishedAt).getTime() -
+      new Date(a.metadata.publishedAt).getTime()
+    );
+  });
+
+  const projectsByYear = sortedProjects.reduce((acc, project) => {
+    const year = new Date(project.metadata.publishedAt)
+      .getFullYear()
+      .toString();
+    if (!acc[year]) {
+      acc[year] = [];
+    }
+    acc[year].push(project);
+    return acc;
+  }, {} as Record<string, typeof allProjects>);
+
+  const timelineData = Object.entries(projectsByYear)
+    .map(([year, projects]) => ({
+      title: year,
+      content: <Projects projects={projects} range={[0, 1]} />,
+    }))
+    .reverse();
 
   return (
     <Flex fillWidth maxWidth="m" direction="column">
@@ -59,7 +78,7 @@ export default function Work() {
               "@type": "Person",
               name: person.name,
             },
-            hasPart: allProjects.map((project) => ({
+            hasPart: sortedProjects.map((project) => ({
               "@type": "CreativeWork",
               headline: project.metadata.title,
               description: project.metadata.summary,

src/app/work/projects/banq.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Designing and Implementing a Mobile-First UI for BanQ"
 
-publishedAt: "2023-08-31"
+publishedAt: "2018-08-31"
 
 summary: "In this project, I utilized my expertise in UI/UX design to craft an intuitive mobile-first user interface for BanQ and led the development team to implement the new design, ensuring a user-friendly and technically robust application."
 
@@ -12,7 +12,7 @@ images:
   - "/images/projects/banq/cover-04.png"
 
 team:
-  - name: "Your Name"
+  - name: "Toufic Hajj"
     role: "Team Leader, UI/UX Designer"
     avatar: "/images/avatar.png"
     linkedIn: "https://www.linkedin.com/in/yourprofile"

src/app/work/projects/chalons.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Leading the Development of the Châlons Library Companion App"
-publishedAt: "2024-04-08"
+publishedAt: "2019-04-08"
 summary: "In this project, I served as Team Leader and Front-End Developer to create the Châlons Library Companion, a cutting-edge mobile application that simplifies library experiences by bridging physical books and digital convenience."
 
 images:

src/app/work/projects/portfolio.mdx

@@ -1,6 +1,5 @@
 ---
 title: "Building My Personal Portfolio Website with React and TypeScript"
-
 publishedAt: "2023-08-31"
 
 summary: "In this project, I developed my personal portfolio website to showcase my skills, projects, and experiences in a visually appealing and user-friendly manner using React, TypeScript, and Framer Motion."

src/app/work/projects/stonkify.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Revolutionizing Trading Decisions with Stonkify"
-publishedAt: "2024-04-08"
+publishedAt: "2024-04-09"
 summary: "In this project, I led the development of Stonkify, a sophisticated Trading Toolkit application designed to empower traders with powerful tools and real-time data analysis."
 images:
   - "/images/projects/stonkify/cover-01.png"

src/components/GoogleAnalytics.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import Script from "next/script";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+
+export const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID;
+
+export default function GoogleAnalytics() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (pathname && GA_MEASUREMENT_ID) {
+      (window as any).gtag("config", GA_MEASUREMENT_ID, {
+        page_path: pathname + (searchParams ? searchParams.toString() : ""),
+      });
+    }
+  }, [pathname, searchParams]);
+
+  if (!GA_MEASUREMENT_ID) {
+    return null;
+  }
+
+  return (
+    <>
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
+      />
+      <Script
+        id="gtag-init"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${GA_MEASUREMENT_ID}', {
+              page_path: window.location.pathname,
+            });
+          `,
+        }}
+      />
+    </>
+  );
+}