gabrielkaszewski-next/app/about/page.tsx

import Image from "next/image";
import Chip from "@/components/chip";
import { Metadata } from "next";
import { Check } from "lucide-react";

export const metadata: Metadata = {
  title: "About Me | Gabriel Kaszewski",
  description:
    "Learn more about Gabriel Kaszewski, his skills, and his journey as a developer.",
};

const hobbies = [
  "Programming 💻",
  "Filmmaking 🎥",
  "Gaming 🕹️",
  "Playing guitar 🎸",
];
const interests = [
  "Computer Science 💾",
  "Sci-Fi Books📚",
  "Astronomy 🔭",
  "Sports 🏅",
  "History 🏰",
];
const futureGoals = [
  "Deepen my expertise in Rust for high-performance applications.",
  "Contribute to impactful open-source projects.",
  "Develop and release my first full-fledged indie game.",
];
const faqItems = [
  {
    q: "How old were you when you started programming?",
    a: "I was 11 years old 🧑‍💻.",
  },
  {
    q: "How did you learn programming?",
    a: "I read books 📖 and practiced a lot.",
  },
  {
    q: "Are you studying Computer Science?",
    a: "No, I have a degree in Bioinformatics, which is a closely related field.",
  },
  {
    q: "Which programming language do you recommend for a beginner?",
    a: "The language doesn't really matter, just choose one you like and dive in 🌊.",
  },
  {
    q: "What was your first programming language?",
    a: "My journey began with C++ 🖥️.",
  },
  {
    q: "What is your favorite programming language?",
    a: "I enjoy writing in C, Rust, and Python 🐍. But Rust is the best 💖🦀",
  },
];

const calculateAge = (birthDate: string): number => {
  const today = new Date();
  const birth = new Date(birthDate);
  let age = today.getFullYear() - birth.getFullYear();
  const monthDifference = today.getMonth() - birth.getMonth();
  if (
    monthDifference < 0 ||
    (monthDifference === 0 && today.getDate() < birth.getDate())
  ) {
    age--;
  }
  return age;
};

const AboutPage = () => {
  const age = calculateAge("2002-02-27");

  return (
    <div className="flex w-full flex-col items-center gap-8 p-4 pt-24 text-white">
      <div className="flex flex-col items-center justify-center gap-2 p-4 backdrop-blur-sm glass-effect glossy-effect bottom gloss-highlight rounded-lg shadow-lg">
        <Image
          src="/images/ja.avif"
          alt="A photo of Gabriel Kaszewski"
          width={300}
          height={300}
          className="object-cover rounded-md shadow-lg"
          priority
        />
        <h2 className="mt-4 text-2xl font-bold">Hello, I&apos;m Gabriel! 👋</h2>
      </div>

      <div className="prose prose-invert lg:prose-lg xl:prose-xl max-w-3xl mx-auto w-full">
        <section id="more-info">
          <h1 className="text-center">More info about me! 💡</h1>
          <p>
            Hi! I am Gabriel and I am {age} years old. I graduated in
            Bioinformatics from the University of Gdańsk 🏫. I&apos;m fluent in
            Polish and English and currently work as a Python Developer at
            digimonkeys.com 🐒💻.
          </p>
          <p>
            I have co-authored one scientific article, which you can read{" "}
            <a
              target="_blank"
              href="http://dx.doi.org/10.1038/s41598-023-44488-7"
              className="text-yellow-400 underline"
            >
              here
            </a>
            .
          </p>
        </section>

        <section
          id="hobbies&interests"
          className="not-prose flex flex-col sm:flex-row gap-8 mt-12"
        >
          <div className="flex-1">
            <h2 className="text-center">Hobbies 🎮🎸</h2>
            <div className="flex flex-wrap items-center justify-center gap-4 mt-4">
              {hobbies.map((hobby) => (
                <Chip key={hobby} text={hobby} />
              ))}
            </div>
          </div>
          <div className="flex-1">
            <h2 className="text-center">Interests 🌌📚</h2>
            <div className="flex flex-wrap items-center justify-center gap-4 mt-4">
              {interests.map((interest) => (
                <Chip key={interest} text={interest} />
              ))}
            </div>
          </div>
        </section>

        <section id="philosophy" className="mt-12">
          <h1>My Philosophy 🧠</h1>
          <p>
            I believe much of today&apos;s software is bloated, inefficient, and
            disrespectful of the user&apos;s resources. My passion, which
            started with a simple curiosity at age 11, is to build a better
            alternative. I focus on creating software that is{" "}
            <strong className="text-yellow-400">
              fast, reliable, and genuinely intuitive
            </strong>
            , guided by the principles of clean and efficient code.
          </p>
        </section>

        <section id="toolkit">
          <h1>My Toolkit 🛠️</h1>
          <div className="not-prose bg-black/20 backdrop-blur-sm glass-effect rounded-2xl p-4 text-white text-shadow-sm">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h3 className="text-xl font-bold">OS & Hardware</h3>
                <p>
                  Arch Linux, Custom-built PC (Ryzen 7 5800X3D, RTX 4070 Ti,
                  48GB RAM)
                </p>
              </div>
              <div>
                <h3 className="text-xl font-bold">Editor</h3>
                <p>Jetbrains IDEs (Pycharm, Rider) & VS Code</p>
              </div>
              <div>
                <h3 className="text-xl font-bold">Primary Languages</h3>
                <p>Rust, Python, C#, TypeScript</p>
              </div>
              <div>
                <h3 className="text-xl font-bold">Favorite Tech</h3>
                <p>Axum, Godot, React, TailwindCSS</p>
              </div>
            </div>
          </div>
        </section>

        <section id="future-goals" className="mt-12">
          <h1>Future Goals 🚀</h1>
          <p>
            I&apos;m always eager to learn and grow. My goal is to continue
            honing my skills in backend development and system architecture.
            Here&apos;s what&apos;s on my radar:
          </p>
          <ul className="list-none p-0">
            {futureGoals.map((goal) => (
              <li key={goal} className="flex items-center gap-2 not-prose mb-2">
                <Check className="text-yellow-400 flex-shrink-0" size={20} />
                <span>{goal}</span>
              </li>
            ))}
          </ul>
        </section>

        <section id="faq" className="mt-12">
          <h1>FAQ ❓</h1>
          <div className="not-prose flex flex-col gap-4">
            {faqItems.map((item) => (
              <div key={item.q}>
                <h3 className="text-xl font-bold">{item.q}</h3>
                <p>{item.a}</p>
              </div>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
};

export default AboutPage;