Add Page Transition Animation

.env.example

@@ -8,12 +8,6 @@ NEXT_PUBLIC_GITHUB_USERNAME=
 # Resend
 RESEND_API_KEY=
 
-# Sentry (monitoring)
-# Skip if you don't want to use Sentry & delete these files
-#   -sentry.client.config, -sentry.edge.config, -sentry.server.config, 
-#   -src/instrumentation, -src\app\global-error.ts
-# And sentry from package.json & its config in next.config.js
-SENTRY_AUTH_TOKEN=
 
 # Other
 NEXT_PUBLIC_DOMAIN=

.gitignore

@@ -38,6 +38,3 @@ next-env.d.ts
 # vscode
 .vscode/launch.json
 .env
-
-# Sentry Config File
-.env.sentry-build-plugin

.vscode/settings.json

@@ -11,6 +11,7 @@
     "Pocketbase",
     "portabletext",
     "precomposed",
+    "shiki",
     "svgr",
     "tailwindcss",
     "Turborepo",

next.config.js

@@ -38,46 +38,3 @@ const nextConfig = {
 };
 
 module.exports = nextConfig;
-
-// Injected content via Sentry wizard below
-
-const { withSentryConfig } = require('@sentry/nextjs');
-
-module.exports = withSentryConfig(module.exports, {
-  // For all available options, see:
-  // https://github.com/getsentry/sentry-webpack-plugin#options
-
-  org: 'maiz',
-  project: 'v2',
-
-  // Only print logs for uploading source maps in CI
-  silent: !process.env.CI,
-
-  // For all available options, see:
-  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
-
-  // Upload a larger set of source maps for prettier stack traces (increases build time)
-  widenClientFileUpload: true,
-
-  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
-  // This can increase your server load as well as your hosting bill.
-  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
-  // side errors will fail.
-  tunnelRoute: '/monitoring',
-
-  // Hides source maps from generated client bundles
-  hideSourceMaps: true,
-
-  // Automatically tree-shake Sentry logger statements to reduce bundle size
-  disableLogger: true,
-
-  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
-  // See the following for more information:
-  // https://docs.sentry.io/product/crons/
-  // https://vercel.com/docs/cron-jobs
-  automaticVercelMonitors: true,
-
-  experimental: {
-    instrumentationHook: process.env.NODE_ENV === 'production',
-  },
-});

package.json

@@ -12,14 +12,13 @@
     "@portabletext/react": "^3.0.17",
     "@sanity/client": "^6.15.11",
     "@sanity/image-url": "^1.0.2",
-    "@sentry/nextjs": "8",
+    "@vercel/speed-insights": "^1.0.12",
     "framer-motion": "^10.17.9",
     "next": "^14.2.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-github-calendar": "^4.2.2",
     "react-icons": "^5.3.0",
-    "react-refractor": "^3.1.1",
     "react-share": "^5.1.0",
     "react-tooltip": "^5.28.0",
     "resend": "^3.3.0",
@@ -34,6 +33,7 @@
     "eslint": "^8",
     "eslint-config-next": "^14.2.6",
     "postcss": "^8.4.45",
+    "shiki": "^1.17.6",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }

src/app/contact/page.tsx

@@ -25,7 +25,7 @@ const Contact = () => {
   };
 
   return (
-    <main>
+    <>
       <JsonLd schema={pageJsonLd} />
       <JsonLd schema={optionsJsonLd} />
 
@@ -57,7 +57,7 @@ const Contact = () => {
       <ContactForm />
 
       <FAQs />
-    </main>
+    </>
   );
 };
 

src/app/globals.css

@@ -29,7 +29,7 @@ h6 {
 }
 
 main {
-  @apply mt-6 mb-8 lg:my-16 px-4 mx-auto lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl xl:w-4/5 2xl:w-[75%];
+  @apply mt-6 mb-8 lg:my-16 px-4 md:px-0 mx-auto xl:max-w-4xl 2xl:max-w-5xl xl:w-4/5 2xl:w-[75%];
 }
 
 p,
@@ -56,3 +56,21 @@ body::-webkit-scrollbar-thumb {
   border-radius: 20px; /* roundness of the scroll thumb */
   border: 0.1rem solid white; /* creates padding around scroll thumb */
 }
+
+.shiki {
+  @apply p-4 overflow-auto max-h-[75dvh];
+}
+.shiki code span,
+.shiki code span span {
+  @apply opacity-100;
+}
+
+.shiki::-webkit-scrollbar {
+  @apply size-2 rounded-lg;
+}
+
+.shiki::-webkit-scrollbar-thumb {
+  @apply bg-primary; /*color of the scroll thumb */
+  border-radius: 20px; /* roundness of the scroll thumb */
+  border: 0.1rem solid white; /* creates padding around scroll thumb */
+}

src/app/layout.tsx

@@ -4,9 +4,11 @@ import Right from '@/components/aside/Right';
 import Header from '@/components/header/Header';
 import Footer from '@/components/footer/Footer';
 import { MobileScrollToTop } from '@/components/aside/ScrollToTop';
+import PageTransition from '@/components/animationWrappers/PageTransition';
 import { IsClientCtxProvider } from '@/lib/context/IsClientContext';
 import { ToastProvider } from '@/lib/context/ToastContext';
 import { getPageMetadata } from '@/lib/utilities';
+import { SpeedInsights } from '@vercel/speed-insights/next';
 import './globals.css';
 
 export const metadata = getPageMetadata('home');
@@ -27,13 +29,14 @@ export default function RootLayout({
             <Left />
             <div className='w-full mx-auto md:max-w-2xl lg:max-w-4xl xl:max-w-full xl:border-x xl:border-border'>
               <Header />
-              {children}
+              <PageTransition>{children}</PageTransition>
               <Footer />
               <MobileScrollToTop />
             </div>
             <Right />
           </ToastProvider>
         </IsClientCtxProvider>
+        <SpeedInsights />
       </body>
     </html>
   );

src/app/page.tsx

@@ -24,7 +24,7 @@ export const PersonSchema: Person = {
 
 export default function Home() {
   return (
-    <main>
+    <>
       <JsonLd schema={PersonSchema} />
 
       <AboutCard />
@@ -36,6 +36,6 @@ export default function Home() {
       <Services />
 
       <ActivityCalendar />
-    </main>
+    </>
   );
 }

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

@@ -33,19 +33,20 @@ const page = async ({ params: { slug } }: { params: { slug: string } }) => {
   };
 
   return (
-    <main>
+    <>
       <ScrollProgress />
+      <>
+        <JsonLd schema={projectJsonLd} />
 
-      <JsonLd schema={projectJsonLd} />
+        <ProjectHeader project={project} />
 
-      <ProjectHeader project={project} />
+        <TableOfContents content={content} />
 
-      <TableOfContents content={content} />
+        <RichTextParser content={content} />
 
-      <RichTextParser content={content} />
-
-      <ShareContent />
-    </main>
+        <ShareContent />
+      </>
+    </>
   );
 };
 

src/app/projects/page.tsx

@@ -20,7 +20,7 @@ const Projects = async ({
   const isEmpty = projects.length <= 0;
 
   return (
-    <main>
+    <>
       <Heading
         Tag='h1'
         icon={<HiOutlineLightBulb />}
@@ -30,19 +30,19 @@ const Projects = async ({
         <ProjectsFilter projectsTotal={projects.length} />
       </Heading>
 
-      {isEmpty ? (
-        <EmptyState
-          heading='No Projects Found'
-          paragraph={
-            "We couldn't find any projects matching your filters. Adjust your selections or reset the filters to explore all projects."
-          }
-        />
-      ) : (
-        <div className='min-h-[75dvh]'>
+      <div className='min-h-[75dvh]'>
+        {isEmpty ? (
+          <EmptyState
+            heading='No Projects Found'
+            paragraph={
+              "We couldn't find any projects matching your filters. Adjust your selections or reset the filters to explore all projects."
+            }
+          />
+        ) : (
           <AnimatedProjectsGrid projects={[...projects]} />
-        </div>
-      )}
-    </main>
+        )}
+      </div>
+    </>
   );
 };
 

src/components/404s/404Components.tsx

@@ -6,8 +6,8 @@ import { HiOutlineQuestionMarkCircle } from 'react-icons/hi2';
 
 export const Default404 = () => {
   return (
-    <main className='min-h-[75dvh] grid place-items-center'>
-      <div>
+    <>
+      <div className='min-h-[75dvh]'>
         <Heading
           Tag='h1'
           icon={<HiOutlineQuestionMarkCircle />}
@@ -23,6 +23,6 @@ export const Default404 = () => {
           ))}
         </div>
       </div>
-    </main>
+    </>
   );
 };