-
-
-
- Get started by editing{" "}
-
- app/page.tsx
-
- .
-
-
- Save and see your changes instantly.
-
-
-
-
-
-
+
);
}
diff --git a/app/projects/[projectName]/page.tsx b/app/projects/[projectName]/page.tsx
new file mode 100644
index 0000000..6b3cb05
--- /dev/null
+++ b/app/projects/[projectName]/page.tsx
@@ -0,0 +1,139 @@
+import { projects } from "@/lib/data";
+import { Project } from "@/lib/types";
+import Chip from "@/components/chip";
+import { Metadata } from "next";
+import Image from "next/image";
+import { Github, Eye, CloudDownload } from "lucide-react";
+import { notFound } from "next/navigation";
+import { remark } from "remark";
+import html from "remark-html";
+
+function getProjectByName(name: string): Project | undefined {
+ const decodedName = decodeURIComponent(name.replace(/\+/g, " "));
+ return projects.find(
+ (p) => p.name.toLowerCase() === decodedName.toLowerCase()
+ );
+}
+
+export async function generateStaticParams() {
+ return projects.map((project) => ({
+ projectName: encodeURIComponent(project.name.replace(/\s/g, "+")),
+ }));
+}
+
+export async function generateMetadata({
+ params,
+}: {
+ params: { projectName: string };
+}): Promise
{
+ const { projectName } = await params;
+ const project = getProjectByName(projectName);
+
+ if (!project) {
+ return { title: "Project Not Found" };
+ }
+
+ return {
+ title: `${project.name} | Gabriel Kaszewski`,
+ description: project.short_description,
+ };
+}
+
+async function getProjectData(project: Project) {
+ const processedContent = await remark()
+ .use(html)
+ .process(project.description);
+ return processedContent.toString();
+}
+
+export default async function ProjectDetailPage({
+ params,
+}: {
+ params: { projectName: string };
+}) {
+ const { projectName } = await params;
+ const project = getProjectByName(projectName);
+ const descriptionHtml = project ? await getProjectData(project) : "";
+
+ if (!project) {
+ notFound();
+ }
+
+ const hasLinks =
+ project.github_url || project.visit_url || project.download_url;
+
+ return (
+
+
+
{project.name}
+
+
+
+
+ Technologies
+
+ {project.technologies.map((tech) => (
+
+
+
+ {project.thumbnails && project.thumbnails.length > 0 && (
+
+ Gallery
+
+ {project.thumbnails.map((thumb, index) => (
+
+
+ )}
+
+ {hasLinks && (
+
+ )}
+
+
+
My Projects
+
+
+ {projects.map((project) => (
+
+ ))}
+ {projects.length === 0 && (
+
+ No projects available. Working on it!
+
+ )}
+
+
+
+ Who am I? 🤔
+
+
+
+ Hi, my name is Gabriel Kaszewski - I'm a Bioinformatics graduate
+ 🧬 and a self-taught full-stack developer 💻. I love creating software
+ that resolves complex problems, and my most ambitious project yet is
+ my first game. Take a look at the Steam preview below and consider
+ adding it to your wishlist!
+
+
+
+
+
+
+
+ My journey with programming started when I was 11 🚀. I love solving
+ problems and creating software that resolves them 👨💻.
+
+
+ Currently, I am working as a Python Developer at digimonkeys.com 🐒.
+ In my free time I like to read about new technologies and work on my
+ projects 📚.
+
+
+
+ {text}
+
+ );
+};
+
+export default Chip;
diff --git a/components/experience-card.tsx b/components/experience-card.tsx
new file mode 100644
index 0000000..aca4f45
--- /dev/null
+++ b/components/experience-card.tsx
@@ -0,0 +1,30 @@
+import { Job } from "@/lib/types";
+import { CircleUserRound, Building, Clock, Microchip } from "lucide-react";
+import Chip from "./chip";
+import formatDate from "@/utils/format-date";
+
+const ExperienceCard = ({ job }: { job: Job }) => (
+
+
+
+
+
+
+
+
+
+
+ {job.technologies.map((tech) => (
+
+
+
+ Experience 📈
+
+
+ {jobs.map((job) => (
+
+
+
+
+
+
+
+ Gabriel Kaszewski
+
+
+ Full-Stack Developer
+
+
+
+
+
Photo by me Łazy, 2018 (compressed)
+
+
+
+
+
+ {thumbnails.map((thumbnail, index) => (
+
+
+ ))}
+
+
+
+ {thumbnails.map((_, index) => (
+ goToSlide(index)}
+ className={`text-2xl leading-none ${
+ currentIndex === index ? "text-white" : "text-white/50"
+ }`}
+ aria-label={`Go to slide ${index + 1}`}
+ >
+ •
+
+ ))}
+
+
+
+
+ {navLinks.map((link) => {
+ const isActive = pathname === link.href;
+ const linkClasses = `text-lg hover:text-yellow-400 transition-colors ${
+ isActive ? "text-yellow-400 font-semibold" : "text-white"
+ }`;
+
+ if (link.external) {
+ return (
+
+ {link.label}
+
+ );
+ }
+
+ return (
+
+ {link.label}
+
+ );
+ })}
+
+ );
+};
+
+export default Navbar;
diff --git a/components/project-item.tsx b/components/project-item.tsx
new file mode 100644
index 0000000..b227f2a
--- /dev/null
+++ b/components/project-item.tsx
@@ -0,0 +1,114 @@
+import Link from "next/link";
+import { Project } from "@/lib/types";
+import Chip from "@/components/chip";
+import ImageCarousel from "@/components/image-carousel";
+import {
+ Eye,
+ CloudDownload,
+ AppWindow,
+ Smartphone,
+ Globe,
+ MonitorCog,
+ Gamepad2,
+ Github,
+} from "lucide-react";
+
+const PlaceholderIcon = ({ category }: { category: Project["category"] }) => {
+ const iconProps = { size: 128, className: "text-white/80" };
+ switch (category) {
+ case "Desktop":
+ return
+ {project.thumbnails && project.thumbnails.length > 0 ? (
+
+ ) : (
+
+ )}
+
+
+
+
{project.name}
+
{project.short_description}
+
+
+
+ {project.technologies.map((tech) => (
+
+
+
+ Read more
+
+
+
+
+
{ImageDisplay}
+
+
+
{ImageDisplay}
+
+
+ Skills 🛠️
+
+
+ {skills.map((skill, index) => (
+
+
+ ))}
+
+
--output [OPTIONS]\r\n```\r\n\r\n**Required Arguments:**\r\n- `--input`, `-i`: Specify the input image files. Multiple files can be specified by repeating the argument for each file.\r\n- `--output`, `-o`: Specify the path where the output atlas image will be saved.\r\n\r\n**Options:**\r\n- `--width`: Specify the width of the atlas. Defaults to `512` pixels. This option is ignored if auto sizing is enabled.\r\n- `--height`: Specify the height of the atlas. Defaults to `512` pixels. This option is ignored if auto sizing is enabled.\r\n- `--padding`, `-p`: Set the padding between images in the atlas. Defaults to `0` pixels.\r\n- `--auto_size`, `-a`: Enable or disable automatic sizing of the atlas dimensions. Defaults to `false`. When enabled, the atlas dimensions are calculated based on the input images.\r\n- `--unified`: Each cell has the same size (based on largest dimensions of image.) Defaults to `false`. [CLI only for now] \r\n\r\n**Examples:**\r\n\r\n1. **Creating an Atlas with Specified Dimensions:**\r\n Generate an atlas with a specific width and height, ignoring automatic sizing.\r\n ```bash\r\n tiny_packer -i image1.png -i image2.png -o atlas.png --width 1024 --height 1024 -a false\r\n ```\r\n\r\n2. **Creating an Atlas with Automatic Sizing:**\r\n Generate an atlas where dimensions are automatically calculated.\r\n ```bash\r\n tiny_packer -i image1.png -i image2.png -i image3.png -o atlas.png\r\n ```\r\n\r\n3. **Creating an Atlas with Padding:**\r\n Generate an atlas with a specified padding between images.\r\n ```bash\r\n tiny_packer -i image1.png -i image2.png -o atlas.png -p 10\r\n ```\r\n\r\n**Additional Tips:**\r\n- Multiple input files should be specified by repeating the `-i` or `--input` option for each file.\r\n- Ensure that file paths are correctly specified and accessible from the command line.\r\n- For best results, images should be of compatible formats and dimensions when padding and auto sizing are considered.\r\n\r\n**Help:**\r\nTo view more information and help regarding the command options, you can use the `--help` flag:\r\n```bash\r\ntiny_packer --help\r\n```\r\n# License\r\nMIT",
+ "category": "Desktop",
+ "github_url": "https://github.com/GKaszewski/tiny_packer",
+ "visit_url": null,
+ "download_url": null,
+ "technologies": [
+ "Rust",
+ "Tauri",
+ "React",
+ "TailwindCSS"
+ ],
+ "thumbnails": []
+ }
+];
diff --git a/lib/types.ts b/lib/types.ts
new file mode 100644
index 0000000..a173655
--- /dev/null
+++ b/lib/types.ts
@@ -0,0 +1,26 @@
+export interface Skill {
+ name: string;
+}
+
+export interface Job {
+ id: number;
+ position: string;
+ company: string;
+ still_working: boolean;
+ start_date: string;
+ end_date: string | null;
+ technologies: string[];
+}
+
+export interface Project {
+ id: number;
+ name: string;
+ short_description: string;
+ description: string;
+ technologies: string[];
+ thumbnails: string[];
+ category: 'Web' | 'Mobile' | 'Desktop' | 'Api' | 'Game';
+ github_url?: string | null;
+ visit_url?: string | null;
+ download_url?: string | null;
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 3c21836..77c655e 100644
--- a/package.json
+++ b/package.json
@@ -9,9 +9,14 @@
"lint": "eslint"
},
"dependencies": {
+ "@tailwindcss/typography": "^0.5.16",
+ "lucide-react": "^0.542.0",
+ "next": "15.5.2",
"react": "19.1.0",
"react-dom": "19.1.0",
- "next": "15.5.2"
+ "remark": "^15.0.1",
+ "remark-html": "^16.0.1",
+ "tailwindcss-motion": "^1.1.1"
},
"devDependencies": {
"typescript": "^5",
diff --git a/public/cv.pdf b/public/cv.pdf
new file mode 100644
index 0000000..43ba45f
Binary files /dev/null and b/public/cv.pdf differ
diff --git a/public/file.svg b/public/file.svg
deleted file mode 100644
index 004145c..0000000
--- a/public/file.svg
+++ /dev/null
@@ -1 +0,0 @@
-