feat: add recommendations page

Author: raminr77

src/app/recommendations/page.tsx

@@ -0,0 +1,4 @@
+import { RecommendationsPage } from '@/domains/recommendations';
+
+export { metadata } from '@/domains/recommendations';
+export default RecommendationsPage;

src/data/recommendations.ts

@@ -1,3 +1,5 @@
+import { ROUTES } from "@/shared/constants";
+
 export interface RecommendationItem {
   id: number;
   url: string;
@@ -9,6 +11,15 @@ export interface RecommendationItem {
   imageURL: string | null;
 }
 
+export const RECOMMENDATION_PAGE_DATA = {
+  title: 'Recommendations',
+  description:
+    'I have had the pleasure of working with many talented individuals throughout my career. Here are some of the recommendations I have received from my colleagues and managers.',
+  footer: 'If you would like to know more about me, feel free to reach out.',
+  footerActionLabel: 'Contact Me',
+  footerActionURL: ROUTES.CONTACT_ME,
+} as const;
+
 export const RECOMMENDATIONS: RecommendationItem[] = [
   {
     id: 17,

src/domains/projects/index.tsx

@@ -41,7 +41,7 @@ export function ProjectsPage() {
 
       <div
         className={clsx(
-          'bo mt-10 flex flex-col items-center justify-center gap-3 border-t border-dashed pt-5',
+          'mt-10 flex flex-col items-center justify-center gap-3 pt-4',
           animator({ name: 'fadeInUp', delay: '1s' })
         )}
       >

src/domains/recommendations/components/RecommendationCard/index.tsx

@@ -0,0 +1,84 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { sendGTMEvent } from '@next/third-parties/google';
+import { clsx } from 'clsx';
+
+import type { RecommendationItem } from '@/data';
+import { GTM_EVENTS } from '@/shared/constants';
+import { titleFont } from '@/app/fonts';
+
+import styles from './recommendation-card.module.scss';
+
+export function RecommendationCard({
+  data,
+  animationDelay = '0s'
+}: {
+  data: RecommendationItem;
+  animationDelay?: string;
+}) {
+  const { url, text, date, title, caption, fullName, imageURL } = data;
+
+  const sendEvent = () => sendGTMEvent(GTM_EVENTS.LINKEDIN_RECOMMENDATION(fullName));
+
+  return (
+    <div
+      style={{ animationDelay }}
+      className={clsx(
+        'w-full flex flex-col items-start gap-2 border bg-white p-4 dark:bg-black',
+        styles['recommendation-card']
+      )}
+    >
+      <div
+        className={clsx(
+          'mb-2 flex w-full gap-3 border-b pb-4 text-left duration-500',
+          styles['recommendation-card__header']
+        )}
+      >
+        {imageURL && (
+          <Link onClick={sendEvent} href={url} target="_blank" rel="noopener noreferrer">
+            <Image
+              width={100}
+              height={100}
+              alt={fullName}
+              src={imageURL}
+              loading="lazy"
+              className={clsx(
+                'rounded-md grayscale duration-500',
+                styles['recommendation-card__profile-image']
+              )}
+            />
+          </Link>
+        )}
+        <div className="flex w-full flex-col gap-1 text-left">
+          <Link
+            href={url}
+            target="_blank"
+            onClick={sendEvent}
+            rel="noopener noreferrer"
+            className={clsx(titleFont.className, 'text-xl font-bold text-amber-500')}
+          >
+            {fullName.toUpperCase()}
+          </Link>
+          <p>{title}</p>
+          <div className="flex flex-wrap items-center gap-2">
+            <span>{caption}</span>
+            <span>( {date} )</span>
+          </div>
+        </div>
+      </div>
+
+      <p className="w-full text-left" dangerouslySetInnerHTML={{ __html: text }} />
+
+      <Link
+        href={url}
+        target="_blank"
+        onClick={sendEvent}
+        rel="noopener noreferrer"
+        className="text-amber-500"
+      >
+        LinkedIn
+      </Link>
+    </div>
+  );
+}

src/domains/recommendations/components/RecommendationCard/recommendation-card.module.scss

@@ -0,0 +1,11 @@
+.recommendation-card {
+  &:hover & {
+    &__header {
+      border-color: var(--primary);
+    }
+
+    &__profile-image {
+      filter: grayscale(0);
+    }
+  }
+}

src/domains/recommendations/index.tsx

@@ -0,0 +1,58 @@
+import { clsx } from 'clsx';
+import Link from 'next/link';
+import { Metadata } from 'next';
+
+import { RECOMMENDATION_PAGE_DATA, RECOMMENDATIONS, type RecommendationItem } from '@/data';
+import { ContentContainer } from '@/layout/components/content-container';
+import { animator } from '@/shared/helpers';
+import { titleFont } from '@/app/fonts';
+
+import { RecommendationCard } from './components/RecommendationCard';
+
+export const metadata: Metadata = {
+  title: 'Recommendations'
+};
+
+export async function RecommendationsPage() {
+  return (
+    <ContentContainer>
+      <h1
+        className={clsx(
+          'select-none text-center text-3xl font-bold',
+          titleFont.className,
+          animator({ name: 'fadeInUp' })
+        )}
+        dangerouslySetInnerHTML={{ __html: RECOMMENDATION_PAGE_DATA.title }}
+      />
+      <p
+        className={clsx(
+          titleFont.className,
+          'mt-4 select-none text-center text-xl',
+          animator({ name: 'fadeIn', delay: '1s' })
+        )}
+        dangerouslySetInnerHTML={{ __html: RECOMMENDATION_PAGE_DATA.description }}
+      />
+
+      <div className="mt-8 flex flex-col gap-4 overflow-hidden">
+        {RECOMMENDATIONS.map((item: RecommendationItem, index: number) => (
+          <RecommendationCard key={item.id} data={item} animationDelay={`${(index + 1) * 0.3}s`} />
+        ))}
+      </div>
+
+      <div
+        className={clsx(
+          'mt-10 flex flex-col items-center justify-center gap-3 pt-4',
+          animator({ name: 'fadeInUp', delay: '1s' })
+        )}
+      >
+        <p>{RECOMMENDATION_PAGE_DATA.footer}</p>
+        <Link
+          href={RECOMMENDATION_PAGE_DATA.footerActionURL}
+          className="border-b border-orange-500 px-5 pb-1 duration-200 hover:px-8 hover:text-orange-500"
+        >
+          {RECOMMENDATION_PAGE_DATA.footerActionLabel}
+        </Link>
+      </div>
+    </ContentContainer>
+  );
+}

src/shared/constants/routes.ts

@@ -4,7 +4,8 @@ export const ROUTES = {
   JOURNEY: '/journey/',
   PROJECTS: '/projects/',
   ABOUT_ME: '/about-me/',
-  CONTACT_ME: '/contact-me/'
+  CONTACT_ME: '/contact-me/',
+  RECOMMENDATIONS: '/recommendations/',
 } as const;
 
 export const MENU_ITEM_ROUTES = [