adding work section

Santipac · Nov 17, 2024 · 6ba41e4 · 6ba41e4
1 parent 67f28b6
commit 6ba41e4
Show file tree

Hide file tree

Showing 26 changed files with 533 additions and 45 deletions.
diff --git a/app/[lang]/components/mdx-content.tsx b/app/[lang]/components/mdx-content.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import Markdown from 'markdown-to-jsx';
+
+export function MDXContent({ children }: { children: string }) {
+  return (
+    <Markdown
+      options={{
+        overrides: {
+          h1: {
+            component: 'h1',
+            props: { className: 'text-black text-4xl font-bold my-6' },
+          },
+          h2: {
+            component: 'h2',
+            props: { className: 'text-black text-3xl font-bold my-6' },
+          },
+          h3: {
+            component: 'h3',
+            props: { className: 'text-black text-2xl font-bold my-6' },
+          },
+          p: { component: 'p', props: { className: 'mb-4 text-gray-600' } },
+          a: {
+            component: 'a',
+            props: { className: 'text-primary hover:underline text-black ' },
+          },
+          ul: { component: 'ul', props: { className: 'list-disc pl-6 my-6 text-gray-600' } },
+          ol: {
+            component: 'ol',
+            props: { className: 'text-gray-600 list-decimal pl-6 my-6' },
+          },
+          code: {
+            component: 'code',
+            props: { className: 'text-orange-400 px-1.5 py-0.5 rounded' },
+          },
+          pre: {
+            component: 'pre',
+            props: {
+              className: 'bg-zinc-800 rounded-xl p-4 rounded-lg my-6 overflow-x-auto',
+            },
+          },
+        },
+      }}
+    >
+      {children}
+    </Markdown>
+  );
+}
diff --git a/app/[lang]/components/navigation.tsx b/app/[lang]/components/navigation.tsx
@@ -1,17 +1,14 @@
 'use client';
 import { navigation } from '@/constants/navigation';
 import { Locale } from '@/i18n-config';
-import { ArrowLeft } from 'lucide-react';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 import React, { useEffect, useRef, useState } from 'react';
 
 interface Props {
   lang: Locale;
 }
 
 export const Navigation: React.FC<Props> = ({ lang }) => {
-  const router = useRouter();
   const ref = useRef<HTMLElement>(null);
   const [isIntersecting, setIntersecting] = useState(true);
   useEffect(() => {
@@ -45,13 +42,6 @@ export const Navigation: React.FC<Props> = ({ lang }) => {
               </Link>
             ))}
           </div>
-          <button
-            type="button"
-            className="duration-200 text-zinc-300 hover:text-zinc-100"
-            onClick={() => router.back()}
-          >
-            <ArrowLeft className="w-6 h-6 " />
-          </button>
         </div>
       </div>
     </header>

diff --git a/app/[lang]/layout.tsx b/app/[lang]/layout.tsx
@@ -5,25 +5,31 @@ import { Analytics } from '@vercel/analytics/react';
 import '../../globals.css';
 import { englishMetadata, spanishMetadata } from '@/constants/metadata';
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { lang: 'es' | 'en' };
-}) {
+export async function generateMetadata(
+  props: {
+    params: Promise<{ lang: 'es' | 'en' }>;
+  }
+) {
+  const params = await props.params;
   return params.lang === 'en' ? englishMetadata : spanishMetadata;
 }
 
 export async function generateStaticParams() {
   return i18n.locales.map(locale => ({ lang: locale }));
 }
 
-export default function RootLayout({
-  children,
-  params,
-}: {
-  children: React.ReactNode;
-  params: { lang: string };
-}) {
+export default async function RootLayout(
+  props: {
+    children: React.ReactNode;
+    params: Promise<{ lang: string }>;
+  }
+) {
+  const params = await props.params;
+
+  const {
+    children
+  } = props;
+
   return (
     <html
       lang={params.lang}

diff --git a/app/[lang]/page.tsx b/app/[lang]/page.tsx
@@ -7,7 +7,13 @@ import { navigation } from '@/constants/navigation';
 import { calSans } from '../fonts';
 import { cn } from '@/util/classNames';
 
-export default async function Home({ params: { lang } }: LangParams) {
+export default async function Home(props: LangParams) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const t = await getTranslation(lang);
   return (
     <div className="flex flex-col items-center justify-center w-screen h-screen overflow-hidden bg-gradient-to-tl from-black via-zinc-600/20 to-black">

diff --git a/app/[lang]/projects/[slug]/page.tsx b/app/[lang]/projects/[slug]/page.tsx
@@ -11,17 +11,18 @@ type PropsParams = {
 };
 
 interface Props {
-  params: {
+  params: Promise<{
     slug: string;
     lang: Locale;
-  };
+  }>;
 }
 export async function generateStaticParams(): Promise<PropsParams['params'][]> {
   const projectsES = projects.es.map(project => ({ slug: project.slug }));
   const projectsEN = projects.en.map(project => ({ slug: project.slug }));
   return [...projectsEN, ...projectsES];
 }
-export default async function PostPage({ params }: Props) {
+export default async function PostPage(props: Props) {
+  const params = await props.params;
   const slug = params?.slug;
   const project = projects[params.lang].find(project => project.slug === slug);
 
@@ -48,9 +49,9 @@ export default async function PostPage({ params }: Props) {
               ? 'Algunas de las tecnologías que utilice en este proyecto:'
               : 'Some of the technologies used in this project'}
           </p>
-          <ul className="p-0 m-0 list-none flex gap-4 flex-wrap text-sm text-zinc-300">
+          <ul className="p-0 m-0 list-none flex gap-2 flex-wrap text-sm text-zinc-300">
             {project.stack.map(tec => (
-              <li key={tec} className=" text-zinc-800">
+              <li key={tec}  className="px-4 py-1.5 bg-white text-zinc-900 rounded-full text-sm shadow-sm">
                 {tec}
               </li>
             ))}

diff --git a/app/[lang]/projects/layout.tsx b/app/[lang]/projects/layout.tsx
@@ -5,13 +5,18 @@ export async function generateStaticParams() {
   return i18n.locales.map(locale => ({ lang: locale }));
 }
 
-export default function ProjectsLayout({
-  children,
-  params,
-}: {
-  children: React.ReactNode;
-  params: { lang: string };
-}) {
+export default async function ProjectsLayout(
+  props: {
+    children: React.ReactNode;
+    params: Promise<{ lang: string }>;
+  }
+) {
+  const params = await props.params;
+
+  const {
+    children
+  } = props;
+
   return (
     <html
       lang={params.lang}

diff --git a/app/[lang]/projects/page.tsx b/app/[lang]/projects/page.tsx
@@ -6,7 +6,14 @@ import { LangParams } from '@/interfaces';
 import { Navigation } from '../components/navigation';
 import { Card } from '../components/card';
 import { getTranslation } from '@/get-translation';
-export default async function ProjectsPage({ params: { lang } }: LangParams) {
+
+export default async function ProjectsPage(props: LangParams) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const t = await getTranslation(lang);
 
   return (

diff --git a/app/[lang]/resume/layout.tsx b/app/[lang]/resume/layout.tsx
@@ -4,13 +4,18 @@ import { calSans, inter } from '@/app/fonts';
 export async function generateStaticParams() {
   return i18n.locales.map(locale => ({ lang: locale }));
 }
-export default function ResumeLayout({
-  children,
-  params,
-}: {
-  children: React.ReactNode;
-  params: { lang: string };
-}) {
+export default async function ResumeLayout(
+  props: {
+    children: React.ReactNode;
+    params: Promise<{ lang: string }>;
+  }
+) {
+  const params = await props.params;
+
+  const {
+    children
+  } = props;
+
   return (
     <html
       lang={params.lang}

diff --git a/app/[lang]/resume/page.tsx b/app/[lang]/resume/page.tsx
@@ -15,7 +15,13 @@ import UdemyIcon from '../assets/svgs/media/udemy-icon';
 import { backend, frontend, tools } from '@/constants/stack';
 import devtallesLogo from '@/app/[lang]/assets/images/devtalles-logo.png';
 
-export default async function ResumePage({ params: { lang } }: LangParams) {
+export default async function ResumePage(props: LangParams) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const t = await getTranslation(lang);
 
   return (

diff --git a/app/[lang]/works/[slug]/header.tsx b/app/[lang]/works/[slug]/header.tsx
@@ -0,0 +1,94 @@
+'use client';
+import { WorkPost } from '@/util/posts/work';
+import { ArrowLeft, Globe } from 'lucide-react';
+import Link from 'next/link';
+import React, { useEffect, useRef, useState } from 'react';
+
+type Props = {
+  work: WorkPost;
+};
+
+export const Header: React.FC<Props> = ({ work }) => {
+  const ref = useRef<HTMLElement>(null);
+  const [isIntersecting, setIntersecting] = useState(true);
+
+  const links: { label: string; href: string }[] = [];
+  if (work.url) {
+    links.push({
+      label: 'Web',
+      href: work.url,
+    });
+  }
+
+  useEffect(() => {
+    if (!ref.current) return;
+    const observer = new IntersectionObserver(([entry]) =>
+      setIntersecting(entry.isIntersecting)
+    );
+
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <header
+      ref={ref}
+      className="relative isolate overflow-hidden bg-gradient-to-tl from-black via-zinc-900 to-black"
+    >
+      <div
+        className={`fixed inset-x-0 top-0 z-50 backdrop-blur lg:backdrop-blur-none duration-200 border-b lg:bg-transparent ${
+          isIntersecting
+            ? 'bg-zinc-900/0 border-transparent'
+            : 'bg-white/10  border-zinc-200 lg:border-transparent'
+        }`}
+      >
+        <div className="max-w-5xl container flex flex-row-reverse items-center justify-between p-6 mx-auto">
+          <div className="flex justify-between gap-8">
+            {work.url && (
+              <Link target="_blank" href={work.url}>
+                <Globe
+                  className={`w-6 h-6 duration-200 hover:font-medium ${
+                    isIntersecting
+                      ? ' text-zinc-400 hover:text-zinc-100'
+                      : 'text-zinc-600 hover:text-zinc-900'
+                  } `}
+                />
+              </Link>
+            )}
+          </div>
+
+          <Link
+            href="/works"
+            className={`duration-200 hover:font-medium ${
+              isIntersecting
+                ? ' text-zinc-400 hover:text-zinc-100'
+                : 'text-zinc-600 hover:text-zinc-900'
+            } `}
+          >
+            <ArrowLeft className="w-6 h-6 " />
+          </Link>
+        </div>
+      </div>
+      <div className="container mx-auto relative isolate overflow-hidden  py-24 sm:py-32">
+        <div className="mx-auto max-w-5xl px-6 lg:px-8 text-center flex flex-col items-center">
+          <div className="mx-auto max-w-2xl lg:mx-0">
+            <h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl font-display">
+              {work.title}
+            </h1>
+            <p className="mt-6 text-lg leading-8 text-zinc-300">{work.brief}</p>
+          </div>
+
+          <div className="mx-auto mt-10 max-w-2xl lg:mx-0 lg:max-w-none">
+            <div className="grid grid-cols-1 gap-y-6 gap-x-8 text-base font-semibold leading-7 text-white sm:grid-cols-2 md:flex lg:gap-x-10">
+              {links.map(link => (
+                <Link target="_blank" key={link.label} href={link.href}>
+                  {link.label} <span aria-hidden="true">&rarr;</span>
+                </Link>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};