feat(ui): add info section on about page

src/app/(main)/about/components/image-card.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import Image from 'next/image'
+import Tilt from 'react-parallax-tilt'
+
+export function ImageCard({ mobile = false }) {
+  return (
+    <Tilt
+      className="overflow-hidden rounded-3xl shadow-2xl"
+      tiltMaxAngleX={5}
+      tiltMaxAngleY={5}
+      glarePosition="all"
+      glareBorderRadius="1.5rem"
+      glareMaxOpacity={0.2}
+      glareEnable
+      trackOnWindow
+      gyroscope
+      tiltReverse
+    >
+      <Image
+        src="https://github.com/mateusfg7.png"
+        height={460}
+        width={460}
+        alt="Mateus Felipe's picture"
+        className={`object-cover dark:brightness-75 ${
+          !mobile && 'h-[30rem] w-96'
+        }`}
+      />
+    </Tilt>
+  )
+}

src/app/(main)/about/layout.tsx

@@ -0,0 +1,7 @@
+export default function AboutLayout({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  return <div className="content-vertical-spaces">{children}</div>
+}

src/app/(main)/about/page.tsx

@@ -0,0 +1,44 @@
+import { Metadata } from 'next'
+import { useMDXComponent } from 'next-contentlayer/hooks'
+
+import { allAbouts } from 'contentlayer/generated'
+import { DownloadSimple } from '@/shared/lib/phosphor-icons'
+import { ImageCard } from './components/image-card'
+
+import './styles.css'
+
+export const metadata: Metadata = {}
+
+export default function Page() {
+  const MDXAboutContent = useMDXComponent(allAbouts[0].body.code)
+
+  return (
+    <div className="blog-content-w m-auto">
+      <div className="flex flex-col gap-3 md:flex-row-reverse">
+        <div className="hidden md:block">
+          <ImageCard />
+        </div>
+        <div className="md:flex-1">
+          <h1 className="mb-8 bg-gradient-to-br from-blue-700 to-blue-400 bg-clip-text text-center text-4xl font-bold text-transparent md:w-fit md:text-left">
+            About Me
+          </h1>
+          <div className="block md:hidden">
+            <ImageCard mobile />
+          </div>
+          <div className="about-rendered-mdx flex flex-col gap-3 text-xl md:text-left">
+            <MDXAboutContent />
+          </div>
+          <div className="mt-12 flex items-center justify-center gap-10 md:mt-6 md:justify-start">
+            <a
+              className="flex items-center justify-center gap-2 text-blue-500 hover:text-blue-300"
+              target="_blank"
+              href="/assets/cv-mateus-felipe.pdf"
+            >
+              Download CV <DownloadSimple />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/(main)/about/styles.css

@@ -0,0 +1,5 @@
+.about-rendered-mdx {
+  a {
+    @apply text-neutral-700 hover:underline dark:text-neutral-50;
+  }
+}