feat: add AboutPage and AboutContent component; integrate AnnouncementBar in layout

2026-03-10 11:16:31 +03:00
parent f84d345612
commit 0b6a885014
20 changed files with 295 additions and 22 deletions
@@ -0,0 +1,123 @@
+"use client";
+
+import Image from "next/image";
+import { Card, Typography } from "poyraz-ui/atoms";
+import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "poyraz-ui/molecules";
+import { certificates } from "@/data/certificates";
+import { EDUCATION } from "@/data/education";
+import { EXPERIENCE } from "@/data/experience";
+
+const ABOUT_TEXT =
+  "Since I was introduced to software in middle school, I've been trying to learn and improve continuously. During high school, my enthusiasm for learning grew and I had the opportunity to explore various technologies in web development. Towards the end of high school, I stepped into the mobile world. Currently, I'm actively creating, developing, and most importantly, still learning.";
+
+const CERTIFICATE_PREVIEW = certificates.slice(0, 4);
+
+export function AboutContent() {
+  return (
+    <section className="flex h-full flex-col gap-3 overflow-hidden">
+      <div className="grid gap-3 md:grid-cols-2">
+        <Card className="rounded-sm border-border p-4">
+          <Typography variant="p" className="text-sm leading-relaxed text-muted-foreground">
+            {ABOUT_TEXT}
+          </Typography>
+        </Card>
+
+        <div className="p-1">
+          <div className="grid gap-2">
+            {EDUCATION.map((item) => (
+              <Card key={item.id} className="rounded-sm border-border p-3">
+                <Typography variant="large" className="text-base leading-tight">
+                  {item.title}
+                </Typography>
+                <Typography variant="small" className="mt-0.5 text-muted-foreground">
+                  {item.institution}
+                </Typography>
+                <Typography variant="small" className="mt-1 text-red-600">
+                  {item.period}
+                </Typography>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-3 md:grid-cols-2 md:items-start">
+        <Sheet>
+          <SheetTrigger asChild>
+            <button
+              type="button"
+              className="cursor-pointer text-left"
+              aria-label="Open all certificates"
+            >
+              <Card className="rounded-sm border-border p-4 transition-colors hover:border-zinc-700">
+                <div className="grid grid-cols-2 gap-2">
+                  {CERTIFICATE_PREVIEW.map((item) => (
+                    <div key={item.name} className="relative aspect-4/3 overflow-hidden rounded-sm border border-border">
+                      <Image
+                        src={item.image}
+                        alt={item.name}
+                        fill
+                        sizes="(max-width: 768px) 45vw, 22vw"
+                        className="object-cover"
+                      />
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            </button>
+          </SheetTrigger>
+
+          <SheetContent side="right" className="w-full max-w-xl p-4">
+            <SheetTitle>All Certificates</SheetTitle>
+            <div className="mt-4 grid max-h-[90dvh] gap-3 overflow-y-auto pr-1">
+              {certificates.map((item) => (
+                <Card key={`${item.name}-${item.date}`} className="rounded-sm border-border p-3">
+                  <div className="flex gap-3">
+                    <div className="relative h-20 w-28 shrink-0 overflow-hidden rounded-sm border border-border">
+                      <Image
+                        src={item.image}
+                        alt={item.name}
+                        fill
+                        sizes="112px"
+                        className="object-cover"
+                      />
+                    </div>
+                    <div className="min-w-0">
+                      <Typography variant="large" className="leading-tight">
+                        {item.name}
+                      </Typography>
+                      <Typography variant="small" className="text-muted-foreground">
+                        {item.organization}
+                      </Typography>
+                      <Typography variant="small" className="text-red-600">
+                        {item.date}
+                      </Typography>
+                    </div>
+                  </div>
+                </Card>
+              ))}
+            </div>
+          </SheetContent>
+        </Sheet>
+
+        <div className="h-full p-1">
+          <div className="grid gap-2">
+            {EXPERIENCE.map((item) => (
+              <Card key={item.id} className="rounded-sm border-border p-3">
+                <Typography variant="large" className="text-base leading-tight">
+                  {item.role}
+                </Typography>
+                <Typography variant="small" className="mt-0.5 text-muted-foreground">
+                  {item.company}
+                </Typography>
+                <Typography variant="small" className="mt-1 text-red-600">
+                  {item.period}
+                </Typography>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}