emapeire · emapeire · Aug 20, 2024 · Aug 20, 2024 · Aug 20, 2024 · Aug 20, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -31,6 +31,7 @@ module.exports = {
     '@typescript-eslint/space-before-function-paren': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/strict-boolean-expressions': 'off',
+    '@typescript-eslint/no-misused-promises': 'off',
     'react-refresh/only-export-components': 'off',
     'react/prop-types': 'off',
     'react/jsx-no-target-blank': [2, { allowReferrer: false }]

diff --git a/components.json b/components.json
@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.ts",
-    "css": "src/app/globals.css",
+    "css": "src/app/styles/globals.css",
     "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""

diff --git a/next.config.mjs b/next.config.mjs
@@ -1,8 +1,12 @@
+import createNextIntlPlugin from 'next-intl/plugin'
+
+const withNextIntl = createNextIntlPlugin()
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
     formats: ['image/avif', 'image/webp']
   }
 }
 
-export default nextConfig
+export default withNextIntl(nextConfig)
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "geist": "^1.3.1",
     "lucide-react": "^0.331.0",
     "next": "14.1.0",
+    "next-intl": "^3.17.4",
     "next-themes": "^0.3.0",
     "next-view-transitions": "^0.1.1",
     "react": "^18.3.1",
@@ -49,7 +50,7 @@
     "eslint-plugin-promise": "^6.6.0",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.9",
+    "eslint-plugin-react-refresh": "^0.4.10",
     "postcss": "^8.4.41",
     "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/assets/page-not-found.webm b/public/assets/page-not-found.webm
diff --git a/public/images/basehub-nextjs-blog.png → ...c/projects/images/basehub-nextjs-blog.png b/public/images/basehub-nextjs-blog.png → ...c/projects/images/basehub-nextjs-blog.png
diff --git a/public/images/basement-challenge.png → ...ic/projects/images/basement-challenge.png b/public/images/basement-challenge.png → ...ic/projects/images/basement-challenge.png
diff --git a/public/images/chat-with-vader.png → public/projects/images/chat-with-vader.png b/public/images/chat-with-vader.png → public/projects/images/chat-with-vader.png
diff --git a/public/images/cohere-chat.png → public/projects/images/cohere-chat.png b/public/images/cohere-chat.png → public/projects/images/cohere-chat.png
diff --git a/public/images/comments-app.png → public/projects/images/comments-app.png b/public/images/comments-app.png → public/projects/images/comments-app.png
diff --git a/public/images/crud-app.png → public/projects/images/crud-app.png b/public/images/crud-app.png → public/projects/images/crud-app.png
diff --git a/public/images/eloquent-js-chat.png → public/projects/images/eloquent-js-chat.png b/public/images/eloquent-js-chat.png → public/projects/images/eloquent-js-chat.png
diff --git a/public/images/ep-icon.png → public/projects/images/ep-icon.png b/public/images/ep-icon.png → public/projects/images/ep-icon.png
diff --git a/public/images/google-translate-clone.png → ...rojects/images/google-translate-clone.png b/public/images/google-translate-clone.png → ...rojects/images/google-translate-clone.png
diff --git a/public/images/javascript-quiz.png → public/projects/images/javascript-quiz.png b/public/images/javascript-quiz.png → public/projects/images/javascript-quiz.png
diff --git a/public/images/meli-challenge.png → public/projects/images/meli-challenge.png b/public/images/meli-challenge.png → public/projects/images/meli-challenge.png
diff --git a/public/images/morty-s-characters.png → ...ic/projects/images/morty-s-characters.png b/public/images/morty-s-characters.png → ...ic/projects/images/morty-s-characters.png
diff --git a/public/images/movie-search.png → public/projects/images/movie-search.png b/public/images/movie-search.png → public/projects/images/movie-search.png
diff --git a/public/images/nextjs-releases-app.png → ...c/projects/images/nextjs-releases-app.png b/public/images/nextjs-releases-app.png → ...c/projects/images/nextjs-releases-app.png
diff --git a/public/images/react-gpt.png → public/projects/images/react-gpt.png b/public/images/react-gpt.png → public/projects/images/react-gpt.png
diff --git a/public/images/shopping-cart.png → public/projects/images/shopping-cart.png b/public/images/shopping-cart.png → public/projects/images/shopping-cart.png
diff --git a/public/images/spacex-launches.png → public/projects/images/spacex-launches.png b/public/images/spacex-launches.png → public/projects/images/spacex-launches.png
diff --git a/public/images/spotify-clone.png → public/projects/images/spotify-clone.png b/public/images/spotify-clone.png → public/projects/images/spotify-clone.png
diff --git a/public/images/swc-router.png → public/projects/images/swc-router.png b/public/images/swc-router.png → public/projects/images/swc-router.png
diff --git a/public/images/tic-tac-toe.png → public/projects/images/tic-tac-toe.png b/public/images/tic-tac-toe.png → public/projects/images/tic-tac-toe.png
diff --git a/public/images/todo-app-ts.png → public/projects/images/todo-app-ts.png b/public/images/todo-app-ts.png → public/projects/images/todo-app-ts.png
diff --git a/public/images/twitter-clone.png → public/projects/images/twitter-clone.png b/public/images/twitter-clone.png → public/projects/images/twitter-clone.png
diff --git a/public/images/twitter-follow-card.png → ...c/projects/images/twitter-follow-card.png b/public/images/twitter-follow-card.png → ...c/projects/images/twitter-follow-card.png
diff --git a/public/videos/image-2-code.webm → public/projects/videos/image-2-code.webm b/public/videos/image-2-code.webm → public/projects/videos/image-2-code.webm
diff --git a/public/videos/mouse-follower.webm → public/projects/videos/mouse-follower.webm b/public/videos/mouse-follower.webm → public/projects/videos/mouse-follower.webm
diff --git a/public/videos/nextjs-chat.webm → public/projects/videos/nextjs-chat.webm b/public/videos/nextjs-chat.webm → public/projects/videos/nextjs-chat.webm
diff --git a/public/videos/screen-recorder.webm → public/projects/videos/screen-recorder.webm b/public/videos/screen-recorder.webm → public/projects/videos/screen-recorder.webm
diff --git a/public/videos/tesla-landing-clone.webm → .../projects/videos/tesla-landing-clone.webm b/public/videos/tesla-landing-clone.webm → .../projects/videos/tesla-landing-clone.webm
diff --git a/public/videos/view-transitions-api.webm → ...projects/videos/view-transitions-api.webm b/public/videos/view-transitions-api.webm → ...projects/videos/view-transitions-api.webm
diff --git a/src/app/[locale]/[...rest]/page.tsx b/src/app/[locale]/[...rest]/page.tsx
@@ -0,0 +1,5 @@
+import { notFound } from 'next/navigation'
+
+export default function CatchAllPage() {
+  notFound()
+}
diff --git a/src/app/career/page.tsx → src/app/[locale]/career/page.tsx b/src/app/career/page.tsx → src/app/[locale]/career/page.tsx
diff --git a/src/app/contact/page.tsx → src/app/[locale]/contact/page.tsx b/src/app/contact/page.tsx → src/app/[locale]/contact/page.tsx
diff --git a/src/app/layout.tsx → src/app/[locale]/layout.tsx b/src/app/layout.tsx → src/app/[locale]/layout.tsx
@@ -12,22 +12,29 @@ import { Toaster } from '@/components/ui/sonner'
 import { Toaster as ToasterProvider } from '@/components/ui/toaster'
 import { Analytics } from '@vercel/analytics/react'
 import { SpeedInsights } from '@vercel/speed-insights/next'
+import { NextIntlClientProvider } from 'next-intl'
+import { getMessages } from 'next-intl/server'
+import { type Locale } from '@/i18n'
 import { cn } from '@/lib/utils'
-import './globals.css'
+import '../styles/globals.css'
 
 const metadata: Metadata = {
   title: 'Portfolio | Emanuel Peire',
   description: 'My personal portfolio: showcasing my work and skills.'
 }
 
-export default function RootLayout({
-  children
+export default async function RootLayout({
+  children,
+  params: { locale }
 }: {
   children: React.ReactNode
+  params: { locale: Locale }
 }) {
+  const messages = await getMessages()
+
   return (
     <html
-      lang='en'
+      lang={locale}
       className={cn(
         'min-h-screen bg-background font-sans antialiased overflow-y-scroll',
         GeistSans.variable,
@@ -37,26 +44,28 @@ export default function RootLayout({
     >
       <Head metadata={metadata} />
       <body className='w-full'>
-        <ViewTransitions>
-          <ThemeProvider
-            attribute='class'
-            defaultTheme='system'
-            enableSystem
-            disableTransitionOnChange
-          >
-            <TooltipProvider>
-              <main className='flex flex-col items-center justify-center min-h-screen pt-24 pb-8 px-4'>
-                <Header />
-                {children}
-                <Footer />
-              </main>
-            </TooltipProvider>
-            <Toaster />
-            <ToasterProvider />
-          </ThemeProvider>
-          <Analytics />
-          <SpeedInsights />
-        </ViewTransitions>
+        <NextIntlClientProvider messages={messages}>
+          <ViewTransitions>
+            <ThemeProvider
+              attribute='class'
+              defaultTheme='system'
+              enableSystem
+              disableTransitionOnChange
+            >
+              <TooltipProvider>
+                <main className='flex flex-col items-center justify-center min-h-screen pt-24 pb-8 px-4'>
+                  <Header />
+                  {children}
+                  <Footer />
+                </main>
+              </TooltipProvider>
+              <Toaster />
+              <ToasterProvider />
+            </ThemeProvider>
+            <Analytics />
+            <SpeedInsights />
+          </ViewTransitions>
+        </NextIntlClientProvider>
       </body>
     </html>
   )

diff --git a/src/app/[locale]/not-found.tsx b/src/app/[locale]/not-found.tsx
@@ -0,0 +1,38 @@
+import { useTranslations } from 'next-intl'
+import { Link } from 'next-view-transitions'
+
+export default function NotFoundPage() {
+  const t = useTranslations()
+
+  return (
+    <>
+      <video
+        autoPlay
+        loop
+        muted
+        className='absolute left-0 top-0 h-full w-full object-cover'
+      >
+        <source src='/assets/page-not-found.webm' type='video/webm' />
+      </video>
+      <div className='not-found absolute left-0 top-0 h-full w-full dark:bg-black bg-white opacity-90' />
+
+      <div className='z-10 flex flex-col items-center'>
+        <h1 className='flex items-center gap-x-4 text-balance text-5xl font-bold dark:text-white text-black'>
+          {t('not-found.title')}
+        </h1>
+        <p className='mx-auto max-w-3xl pt-4 font-mono text-center dark:text-neutral-200 text-neutral-800 md:mb-4'>
+          {t('not-found.description')}
+        </p>
+
+        <div className='flex flex-wrap items-center pt-2 md:pt-0'>
+          <Link
+            className='dark:text-white text-black hover:underline hover:underline-offset-4'
+            href='/'
+          >
+            {t('not-found.button')}
+          </Link>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/src/app/page.tsx → src/app/[locale]/page.tsx b/src/app/page.tsx → src/app/[locale]/page.tsx
diff --git a/src/app/projects/page.tsx → src/app/[locale]/projects/page.tsx b/src/app/projects/page.tsx → src/app/[locale]/projects/page.tsx
diff --git a/src/app/api/send/route.ts b/src/app/api/send/route.ts
@@ -1,6 +1,6 @@
 import { NextResponse } from 'next/server'
 import { Resend } from 'resend'
-import { ContactEmailTemplate } from '@/components/contact-email-template'
+import { ContactEmailTemplate } from '@/components/contact/email-template'
 import { type ContactEmailTemplateProps } from '@/types'
 
 export const runtime = 'edge'

diff --git a/src/app/globals.css → src/app/styles/globals.css b/src/app/globals.css → src/app/styles/globals.css
@@ -74,3 +74,7 @@
     @apply bg-background text-foreground;
   }
 }
+
+.not-found ~ .footer {
+  display: none;
+}
diff --git a/src/components/career.tsx → src/components/career/index.tsx b/src/components/career.tsx → src/components/career/index.tsx
@@ -1,19 +1,21 @@
-import { CareerItem } from './career-item'
+import { CareerItem } from './item'
+import { useTranslations } from 'next-intl'
 import { FileTextIcon } from 'lucide-react'
-import { data } from '@/constants'
+import { CareerProps } from '@/types'
 
 export function Career() {
-  const { career } = data
+  const t = useTranslations('career')
+  const companies: CareerProps[] = t.raw('companies')
 
   return (
     <>
       <h2 className='dark:text-neutral-100 text-neutral-800 flex gap-x-4 items-center text-3xl font-bold text-balance'>
         <FileTextIcon className='size-6 animate-pulse stroke-[1.5]' />
-        Career & Works
+        {t('title')}
       </h2>
 
       <ol className='relative border-s dark:border-neutral-600 border-neutral-400 ml-[11.5px] flex flex-col gap-y-8'>
-        {career.map((item, index) => (
+        {companies.map((item, index) => (
           <li key={index} className='ms-[30px]'>
             <CareerItem {...item} />
           </li>