feat: create about section

src/app/page.tsx

@@ -1,3 +1,4 @@
+import { About } from '@/components/about';
 import { Intro } from '@/components/intro';
 import { ThemeToggle } from '@/components/theme-toggle';
 
@@ -6,7 +7,8 @@ const Home = () => {
     <>
       <div className="container flex flex-col items-center">
         <Intro />
-        <div className="bg-secondary h-16 w-1 rounded-full" />
+        <div className="bg-secondary h-16 w-1 rounded-full sm:my-5" />
+        <About />
       </div>
       <div className="fixed bottom-5 right-5 sm:bottom-8 sm:right-8">
         <ThemeToggle />

src/components/about.tsx

@@ -0,0 +1,42 @@
+import { Icons } from '@/components/icons';
+import { SectionHeading } from '@/components/section-heading';
+
+export const About = () => {
+  return (
+    <section className="my-10 flex w-full flex-col items-center">
+      <SectionHeading heading="About me" />
+      <div className="max-w-2xl text-center text-sm leading-7">
+        <p className="mb-4">
+          After graduating with a degree in Accounting, I decided to pursue my
+          passion for programming. I enrolled in a coding bootcamp and learned
+          full-stack web development. My favorite part of programming is the
+          problem-solving aspect. I love the feeling of finally figuring out a
+          solution to a problem. My core stack is React, Next.js, Node.js, and
+          MongoDB. I am also familiar with TypeScript and Prisma. I am always
+          looking to learn new technologies. I am currently looking for a
+          full-time position as a software developer.
+        </p>
+        <p>
+          When I am not coding, I enjoy playing video games, watching movies,
+          and playing with my dog. I also enjoy learning new things. I am
+          currently learning about history and philosophy. I am also learning
+          how to play the guitar.
+        </p>
+      </div>
+      <div className="mt-5 flex w-full flex-wrap justify-center gap-10">
+        <Icons.html className="size-12" />
+        <Icons.css className="size-12" />
+        <Icons.sass className="size-12" />
+        <Icons.tailwind className="size-12" />
+        <Icons.javascript className="size-12" />
+        <Icons.typescript className="size-12" />
+        <Icons.react className="size-12" />
+        <Icons.redux className="size-12" />
+        <Icons.nextjs className="size-12" />
+        <Icons.nestjs className="size-12" />
+        <Icons.prisma className="size-12" />
+        <Icons.docker className="size-12" />
+      </div>
+    </section>
+  );
+};