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,5 @@
+import { AboutContent } from "@/components/about-content";
+
+export default function AboutPage() {
+  return <AboutContent />;
+}
@@ -1,7 +1,11 @@
 import type { Metadata } from "next";
-import { SiteNavbar } from "@/components/site-navbar";
 import "./globals.css";

+import { SiteNavbar } from "@/components/site-navbar";
+import { Icon } from "@iconify/react";
+import Link from "next/link";
+import { AnnouncementBar } from "poyraz-ui/organisms";
+
 export const metadata: Metadata = {
  title:
    "Poyraz Avsever - Portfolio - Freelancer - Fullstack Developer - Web Developer",
@@ -47,6 +51,23 @@ export default function RootLayout({
      <body className="h-dvh overflow-hidden bg-background text-foreground antialiased">
        <div className="mx-auto flex h-dvh w-full max-w-4xl flex-col overflow-hidden px-4 py-8 sm:px-6 sm:py-10">
          <SiteNavbar />
+          <AnnouncementBar
+            variant="branded"
+            dismissible={false}
+            icon={<Icon icon="mdi:sparkles" width={16} height={16} />}
+            action={
+              <Link
+                href="https://ui.poyrazavsever.com"
+                target="_blank"
+                rel="noreferrer"
+                className="text-xs font-bold underline"
+              >
+                Learn More -&gt;
+              </Link>
+            }
+          >
+            New components added this week!
+          </AnnouncementBar>
          <main className="flex-1 overflow-hidden py-4">{children}</main>
        </div>
      </body>
@@ -1,29 +1,9 @@
-import { Icon } from "@iconify/react";
-import Link from "next/link";
-import { AnnouncementBar } from "poyraz-ui/organisms";
 import { HomeHero } from "@/components/home-hero";
 import { ReferencesSection } from "@/components/references-section";

 export default function Home() {
  return (
    <section className="flex h-full flex-col gap-4 overflow-hidden">
-      <AnnouncementBar
-        variant="branded"
-        icon={<Icon icon="mdi:sparkles" width={16} height={16} />}
-        action={
-          <Link
-            href="https://ui.poyrazavsever.com"
-            target="_blank"
-            rel="noreferrer"
-            className="text-xs font-bold underline"
-          >
-            Learn More -&gt;
-          </Link>
-        }
-      >
-        New components added this week!
-      </AnnouncementBar>
-
      <HomeHero />
      <ReferencesSection />
    </section>
@@ -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>
+  );
+}
@@ -18,7 +18,7 @@ export function ReferencesSection() {
                role={item.role}
                avatar={item.avatar}
                rating={item.rating}
-                className="h-full w-[280px] shrink-0 rounded-sm"
+                className="h-full w-70 shrink-0 rounded-sm"
              />
            );

@@ -0,0 +1,100 @@
+
+export const certificates = [
+      {
+        "name": "React Native | Practical React Native Course",
+        "organization": "Udemy",
+        "date": "June 2025",
+        "description": "Thanks to this React Native course, I gained the competence to develop mobile applications that work on both Android and iOS. The course focused on the basic components of React Native, navigation, data management, and performance optimization.",
+        "image":"/certificates/reactnative.png",
+        "category": "mobile"
+      },
+      {
+        "name": "GDG Hackathon Participation Certificate",
+        "organization": "Google Developer Group",
+        "date": "May 2025",
+        "description": "I was part of the organization team at the hackathon event held by Google Developer Group",
+        "image": "/certificates/gdg.png",
+        "category": "hackathon"
+      },
+      {
+        "name": "National Student Congress Participation Certificate",
+        "organization": "Ostim Technical University, Faculty of Business Administration",
+        "date": "April 2025",
+        "description": "Certificate of participation for my contribution at the 1st National Student Congress ‘Sustainable Businesses in the Age of Artificial Intelligence’",
+        "image": "/certificates/ulusal.png",
+        "category": "personal"
+      },
+      {
+        "name": "HSD Core Team Participation Certificate",
+        "organization": "Huawei Student Developers",
+        "date": "January 2025",
+        "description": "I was included in the Core Team of the newly established Huawei Student Developers (HSD) community at OSTİM Technical University for the 2024–2025 term.",
+        "image": "/certificates/hsd.png",
+        "category": "personal"
+      },
+      {
+        "name": "Version Control: Git & GitHub",
+        "organization": "BTK Academy",
+        "date": "September 2024",
+        "description": "I completed the course on Git and GitHub. This course increased my knowledge of version control and taught me how to manage projects with Git. Sharing projects on GitHub highlighted the importance of collaborative work and tracking changes.",
+        "image": "/certificates/git.png",
+        "category": "software"
+      },
+      {
+        "name": "Presentation Skills & Communication Management in Entrepreneurship",
+        "organization": "BTK Academy",
+        "date": "September 2024",
+        "description": "I earned the certificate in Presentation Skills & Communication Management in Entrepreneurship. This training helped me develop effective presentation, persuasive communication, and self-expression skills in the field of entrepreneurship.",
+        "image": "/certificates/girisim.png",
+        "category": "communication"
+      },
+      {
+        "name": "Creating an Effective LinkedIn Profile",
+        "organization": "BTK Academy",
+        "date": "October 2024",
+        "description": "I completed the certificate for Creating an Effective LinkedIn Profile. This training enhanced my ability to build a professional profile, develop networking strategies, and use LinkedIn more effectively.",
+        "image": "/certificates/linkedin.png",
+        "category": "personal"
+      },
+      {
+        "name": "Web Programming with REACT",
+        "organization": "BTK Academy",
+        "date": "June 2024",
+        "description": "I earned the Web Programming with REACT certificate. This training taught me how to develop modern web applications using React, leverage component-based architecture, and build dynamic user interfaces.",
+        "image": "/certificates/react.png",
+        "category": "web"
+      },
+      {
+        "name": "Web Programming with Node.js",
+        "organization": "BTK Academy",
+        "date": "November 2024",
+        "description": "I earned the Web Programming with Node.js certificate. This training improved my skills in developing server-side applications, creating APIs, and managing backend processes using Node.js.",
+        "image": "/certificates/nodejs.png",
+        "category": "web"
+      },
+      {
+        "name": "Yeşilay National Debate Championship",
+        "organization": "Yeşilay",
+        "date": "July 2023",
+        "description": "I was a finalist in the Yeşilay National Debate Championship. During this process, I improved my communication, persuasion, and quick-thinking skills.",
+        "image": "/certificates/turkiye.png",
+        "category": "communication"
+      },
+      {
+        "name": "Yeşilay Regional Debate Tournament Championship",
+        "organization": "Yeşilay",
+        "date": "May 2023",
+        "description": "I was a finalist in the Yeşilay Regional Debate Tournament Championship. During this process, I improved my communication, persuasion, and quick-thinking skills.",
+        "image": "/certificates/bolge.png",
+        "category": "communication"
+      },
+      {
+        "name": "Python | Programming from Beginner to Advanced",
+        "organization": "Udemy",
+        "date": "November 2021",
+        "description": "I earned this certificate by working on both basic and advanced topics in Python programming, including algorithms, data structures, and object-oriented programming.",
+        "image": "/certificates/python.png",
+        "category": "software"
+      }
+]
+  
@@ -0,0 +1,18 @@
+export const EDUCATION = [
+  {
+    id: "ostim-university",
+    title: "Management Information Systems",
+    institution: "OSTIM Technical University",
+    period: "2024 - Present",
+    description:
+      "Focused on software systems, product thinking, and interdisciplinary project development.",
+  },
+  {
+    id: "high-school",
+    title: "High School",
+    institution: "Istanbul Atakent Anadolu Lisesi",
+    period: "2020 - 2024",
+    description:
+      "Built strong fundamentals and explored web and mobile development through personal projects.",
+  },
+] as const;
@@ -0,0 +1,26 @@
+export const EXPERIENCE = [
+  {
+    id: "omedya-part-time",
+    role: "Fullstack Developer Part-time",
+    company: "Omedya Bilişim A.Ş",
+    period: "August 2025 - Present",
+  },
+  {
+    id: "omedya-intern",
+    role: "Fullstack Developer Intern",
+    company: "Omedya Bilişim A.Ş",
+    period: "June 2025 - August 2025",
+  },
+  {
+    id: "arc-intern",
+    role: "Fullstack Developer Intern",
+    company: "ARC Foreign Trade",
+    period: "February 2025 - June 2025",
+  },
+  {
+    id: "tarvina-intern",
+    role: "Fullstack Developer Intern",
+    company: "Tarvina Software Technologies",
+    period: "October 2024 - December 2024",
+  },
+] as const;