feat: add AboutSummary component with personal introduction and game preview
feat: create Chip component for displaying technology tags feat: implement ExperienceCard component to showcase job experiences feat: add Experience component to list multiple job experiences feat: create Footer component with social links and copyright information feat: implement Hero component for the landing section with social links feat: add ImageCarousel component for displaying project images feat: create Navbar component with scroll effect and navigation links feat: implement ProjectItem component to display individual project details feat: add Skills component to showcase technical skills feat: create data module with skills, jobs, and projects information feat: define types for Skill, Job, and Project in types module chore: update package.json with new dependencies for Tailwind CSS and Lucide icons chore: add CV PDF file to public directory chore: remove unused SVG files from public directory chore: add new images for background and hero sections feat: implement formatDate utility function for date formatting
This commit is contained in:
206
app/about/page.tsx
Normal file
206
app/about/page.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
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'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'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's software is bloated, inefficient, and
|
||||
disrespectful of the user'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'm always eager to learn and grow. My goal is to continue
|
||||
honing my skills in backend development and system architecture.
|
||||
Here's what'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;
|
||||
Reference in New Issue
Block a user