From 855cb4affd1b859de651d7bfbf4e85d6c9b82488 Mon Sep 17 00:00:00 2001
From: Space-Banane
Date: Thu, 12 Mar 2026 23:08:38 +0100
Subject: [PATCH] copilot. Split into components
---
src/App.tsx | 885 ++--------------------------
src/components/ExperienceCard.tsx | 77 +++
src/components/ExperienceModal.tsx | 117 ++++
src/components/MiniProjectCard.tsx | 55 ++
src/components/MiniProjectModal.tsx | 123 ++++
src/components/ProjectCard.tsx | 67 +++
src/components/utils.ts | 35 ++
src/sections/About.tsx | 32 +
src/sections/Contact.tsx | 30 +
src/sections/Footer.tsx | 39 ++
src/sections/Goals.tsx | 75 +++
src/sections/Hero.tsx | 112 ++++
src/sections/InternshipSection.tsx | 44 ++
src/types.ts | 33 ++
14 files changed, 897 insertions(+), 827 deletions(-)
create mode 100644 src/components/ExperienceCard.tsx
create mode 100644 src/components/ExperienceModal.tsx
create mode 100644 src/components/MiniProjectCard.tsx
create mode 100644 src/components/MiniProjectModal.tsx
create mode 100644 src/components/ProjectCard.tsx
create mode 100644 src/components/utils.ts
create mode 100644 src/sections/About.tsx
create mode 100644 src/sections/Contact.tsx
create mode 100644 src/sections/Footer.tsx
create mode 100644 src/sections/Goals.tsx
create mode 100644 src/sections/Hero.tsx
create mode 100644 src/sections/InternshipSection.tsx
create mode 100644 src/types.ts
diff --git a/src/App.tsx b/src/App.tsx
index c73d84f..4bfb9bc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,507 +1,18 @@
-import { useEffect, useState} from "react";
+import { useEffect, useState } from "react";
+import type { Experience, MiniProject, Project } from "./types";
+import { MiniProjectModal } from "./components/MiniProjectModal";
+import { ExperienceModal } from "./components/ExperienceModal";
+import { ProjectCard } from "./components/ProjectCard";
+import { MiniProjectCard } from "./components/MiniProjectCard";
+import { ExperienceCard } from "./components/ExperienceCard";
+import { getTypeIcon } from "./components/utils";
+import { Hero } from "./sections/Hero";
+import { About } from "./sections/About";
+import { Goals } from "./sections/Goals";
+import { InternshipSection } from "./sections/InternshipSection";
+import { Contact } from "./sections/Contact";
+import { Footer } from "./sections/Footer";
-interface MiniProject {
- title: string;
- description: string;
- image?: string;
- github?: string;
- reproduction?: string;
- why: string;
- note?: {
- color: string;
- content: string;
- };
- last_commit?: Date;
-}
-
-interface Experience {
- name: string;
- type: "language" | "service" | "platform" | "real life experience" | "roles";
- description: string;
- image?: string;
- learned_at?: string;
- learned_from?: string;
- learned_because?: string;
-}
-
-function MiniProjectModal({
- project,
- onClose,
-}: {
- project: MiniProject;
- onClose: () => void;
-}) {
- return (
-
-
e.stopPropagation()}
- >
- {/* Close Button */}
-
-
-
-
-
-
- {/* Image */}
- {project.image && (
-
-
-
- )}
-
- {/* Content */}
-
-
- {project.title}
-
-
- {project.note && (
-
-
- {project.note.content}
-
-
- )}
-
-
-
-
- Description
-
-
- {project.description}
-
-
-
-
-
- Why I Made This
-
-
{project.why}
-
-
- {project.reproduction && (
-
-
- How to Reproduce
-
-
- {project.reproduction}
-
-
- )}
-
- {project.github && (
-
-
-
-
- View on GitHub
-
- )}
-
-
-
-
- );
-}
-
-function ExperienceModal({
- experience,
- onClose,
-}: {
- experience: Experience;
- onClose: () => void;
-}) {
- return (
-
-
e.stopPropagation()}
- >
- {/* Close Button */}
-
-
-
-
-
-
- {/* Content */}
-
-
-
- {experience.image ? (
-
- ) : (
- getTypeIcon(experience.type)
- )}
-
-
-
- {experience.name}
-
-
- {getTypeIcon(experience.type)}{" "}
- {experience.type.charAt(0).toUpperCase() +
- experience.type.slice(1)}
-
-
-
-
-
- {experience.description && (
-
-
- Description
-
-
- {experience.description}
-
-
- )}
-
- {experience.learned_at && (
-
-
- ๐
When I Learned It
-
-
- {experience.learned_at}
-
-
- )}
-
- {experience.learned_from && (
-
-
- ๐จโ๐ซ How I Learned It
-
-
- {experience.learned_from}
-
-
- )}
-
- {experience.learned_because && (
-
-
- ๐ก Why I Learned It
-
-
- {experience.learned_because}
-
-
- )}
-
-
-
-
- );
-}
-
-function getTypeIcon(type: Experience["type"]) {
- switch (type) {
- case "language":
- return "๐ป";
- case "service":
- return "โ๏ธ";
- case "platform":
- return "๐";
- case "real life experience":
- return "๐";
- case "roles":
- return "๐";
- default:
- return "๐ฆ";
- }
-}
-
-function getTypeColor(type: Experience["type"]) {
- switch (type) {
- case "language":
- return "bg-blue-500/20";
- case "service":
- return "bg-purple-500/20";
- case "platform":
- return "bg-green-500/20";
- case "real life experience":
- return "bg-orange-500/20";
- case "roles":
- return "bg-pink-500/20";
- default:
- return "bg-gray-500/20";
- }
-}
-
-function MiniProjectCard({
- project,
- onClick,
-}: {
- project: MiniProject;
- onClick: () => void;
-}) {
- return (
-
- {project.image && (
-
-
-
- )}
-
-
- {project.title}
-
-
- {project.description}
-
- {project.last_commit && (
-
- Last commit: {project.last_commit.toLocaleDateString()}
-
- )}
-
-
- Click to learn more
-
-
-
-
-
- );
-}
-
-function ExperienceCard({
- experience,
- onClick,
-}: {
- experience: Experience;
- onClick?: () => void;
-}) {
- const isClickable = !!(
- experience.learned_at ||
- experience.learned_from ||
- experience.learned_because
- );
-
- return (
-
-
- {experience.image ? (
-
- ) : (
- getTypeIcon(experience.type)
- )}
- {isClickable && (
-
- )}
-
-
-
- {experience.name}
-
- {experience.description && (
-
- {experience.description}
-
- )}
-
- {isClickable && (
-
- )}
-
- );
-}
-
-function ProjectCard({ project }: { project: Project }) {
- return (
-
- {project.image && (
-
-
-
-
- )}
-
-
- {project.name}
-
-
- {project.description}
-
- {project.last_commit && (
-
- Last commit: {project.last_commit.toLocaleDateString()}
-
- )}
-
-
-
- );
-}
-
-// async function getLastCommitDate(url: string) {
-// const response = await fetch("https://shsf-api.reversed.dev/api/exec/6/c04c873c-6b75-4733-8636-bdaa962701c5", {
-// method: "POST",
-// headers: {
-// "Content-Type": "application/json",
-// },
-// body: JSON.stringify({ url: url }),
-// });
-// const data = await response.json();
-// return new Date(data.date);
-// }
-
function App() {
const [status, setStatus] = useState("");
const [borderStatus, setBorderStatus] = useState("border-gray-700");
@@ -516,7 +27,6 @@ function App() {
const [selectedExperience, setSelectedExperience] =
useState(null);
- // Replace hardcoded arrays with state
const [projects, setProjects] = useState([]);
const [miniProjects, setMiniProjects] = useState([]);
const [experiences, setExperiences] = useState([]);
@@ -541,7 +51,7 @@ function App() {
"Why is uv so cool? ๐ง",
"I'm hungry ๐",
"I swear this worked on my machine ๐ฅ๏ธ",
- "Pulling 10GB of docker images ๐ณ"
+ "Pulling 10GB of docker images ๐ณ",
];
const characters =
@@ -636,18 +146,24 @@ function App() {
// Fetch data from API on mount
useEffect(() => {
- fetch("https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/projects")
- .then(res => res.json())
+ fetch(
+ "https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/projects",
+ )
+ .then((res) => res.json())
.then(setProjects)
.catch(() => setProjects([]));
- fetch("https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/mini_projects")
- .then(res => res.json())
+ fetch(
+ "https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/mini_projects",
+ )
+ .then((res) => res.json())
.then(setMiniProjects)
.catch(() => setMiniProjects([]));
- fetch("https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/experience")
- .then(res => res.json())
+ fetch(
+ "https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/experience",
+ )
+ .then((res) => res.json())
.then(setExperiences)
.catch(() => setExperiences([]));
}, []);
@@ -669,202 +185,21 @@ function App() {
- {/* Hero Section */}
-
-
-
-
-
-
+
- {/* Rotating Message Bubble (Left Side) */}
-
-
- {/* Arrow pointing to profile */}
-
-
+
-
- {displayMessage || rotatingMessages[0]}
-
-
-
+
- {/* Status Bubble (Right Side) */}
-
-
- {/* Arrow pointing to profile */}
-
-
-
-
- Currently{" "}
-
- {statusMessage}
-
-
- on Discord
-
-
-
-
-
- {/* Name & Description */}
-
-
- Hey, I'm{" "}
- setShowOldNames(true)}
- onMouseLeave={() => setShowOldNames(false)}
- >
- Spaceยฒ
- {showOldNames && (
-
-
-
-
- Also known as:
-
-
- {oldUsernames.map((name, index) => (
-
- {name}
-
- ))}
-
-
-
- )}
-
-
-
- A{" "}
-
- Self-proclaimed
- {" "}
- Developer breaking things to see how they work.
-
-
-
-
- {/* About Section */}
-
-
-
- Who?
-
-
- A bit about me, my background, and how I got into programming.
-
-
-
-
-
-
-
- I'm a Developer from Germany. I love doing full-stack web
- development, tinkering with hardware, and 3D printing stuff i find quite fancy.
-
-
- I focus on building projects that i need, and that don't
- already exist. Or break the ones that do exist, to see how they work and learn from them.
-
-
- I started programming around 2017, started of with C# in Unity, then moved to Python for a while, before settling on JavaScript/TypeScript as my main language around 2023.
-
-
-
-
-
-
- {/* Goals Section */}
-
-
-
- My Goals
-
-
Next 4 Years are going to look fun
-
-
-
-
-
-
๐
-
-
- Not Just Semi-Fullstack
-
-
- I want to work more with Serverless Architectures and Cloud
- Services to build scalable applications.
-
-
-
-
-
-
-
-
- ๐ป
-
-
-
- Contribute More to Open Source
-
-
- I want to commit more to Open-Source Projects. That's it...
-
-
-
-
-
-
-
-
- โก
-
-
-
- Expand on Existing Projects
-
-
- I want to make SHSF more stable and usable.
-
-
-
-
-
-
-
-
- ๐งช
-
-
-
- Testing before Breaking
-
-
In the future i want to write more tests and improve my code quality.
-
-
-
-
-
-
-
{/* Projects Section */}
@@ -872,7 +207,8 @@ function App() {
Favourite Projects
- Personal favourites, projects that I'm proud of, or just things I find fun to show off.
+ Personal favourites, projects that I'm proud of, or just things I
+ find fun to show off.
@@ -978,130 +314,37 @@ function App() {
- {/* Real Life Experience (ABB Internship) */}
-
-
-
- Real Life Experience (ABB Internship)
-
-
- My internship experience at ABB and what i learned from it
-
-
+
-
-
-
-
- I did an internship at{" "}
-
- ABB {" "}
-
- where i got to work on a project that involved internal management
- software. It was a great experience that taught me a lot about
- working in a professional environment and collaborating with a
- team of developers.
-
-
- This was the first propper time i worked with a Framework (Angular) and it was a great learning experience. Which helped me understand why
- frameworks are a thing and how they can help structure and organize codebases, especially as they grow larger.
-
-
- Also, this was the first time submitting a PR, which was scary but super rewarding when they merged it. From that point on
- i was hooked on Frameworks and OSS contribution. I want to do more of both in the future.
-
-
-
-
-
+
- {/* Contact Section */}
-
-
- Want to talk?
-
-
-
- Im almost always down to talk about anything. Tech, life and whatever. Feel free to reach out to me on Discord or via Email, i usually respond pretty quickly.
-
-
-
-
-
- {/* Footer */}
-
+
{/* Floating Island: Bottom Left (only on localhost) */}
{typeof window !== "undefined" &&
- (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1") && (
+ (window.location.hostname === "localhost" ||
+ window.location.hostname === "127.0.0.1") && (
- ๐๏ธ
+
+ ๐๏ธ
+
Loaded
- Projects: {projects.length}
- Mini Projects: {miniProjects.length}
- Profile Data: 1/1
- Experiences: {experiences.length}
+
+ Projects: {projects.length}
+
+
+ Mini Projects: {miniProjects.length}
+
+
+ Experiences: {experiences.length}
+
)}
@@ -1109,16 +352,4 @@ function App() {
);
}
-interface Project {
- name: string;
- description: string;
- image?: string;
- link: string;
- open_source: false | { link: string };
- rounded?: boolean;
- last_commit?: Date;
-}
-
-
-
export default App;
diff --git a/src/components/ExperienceCard.tsx b/src/components/ExperienceCard.tsx
new file mode 100644
index 0000000..52d7910
--- /dev/null
+++ b/src/components/ExperienceCard.tsx
@@ -0,0 +1,77 @@
+import type { Experience } from "../types";
+import { getTypeColor, getTypeIcon } from "./utils";
+
+export function ExperienceCard({
+ experience,
+ onClick,
+}: {
+ experience: Experience;
+ onClick?: () => void;
+}) {
+ const isClickable = !!(
+ experience.learned_at ||
+ experience.learned_from ||
+ experience.learned_because
+ );
+
+ return (
+
+
+ {experience.image ? (
+
+ ) : (
+ getTypeIcon(experience.type)
+ )}
+ {isClickable && (
+
+ )}
+
+
+
+ {experience.name}
+
+ {experience.description && (
+
+ {experience.description}
+
+ )}
+
+ {isClickable && (
+
+ )}
+
+ );
+}
diff --git a/src/components/ExperienceModal.tsx b/src/components/ExperienceModal.tsx
new file mode 100644
index 0000000..3afd56d
--- /dev/null
+++ b/src/components/ExperienceModal.tsx
@@ -0,0 +1,117 @@
+import type { Experience } from "../types";
+import { getTypeColor, getTypeIcon } from "./utils";
+
+export function ExperienceModal({
+ experience,
+ onClose,
+}: {
+ experience: Experience;
+ onClose: () => void;
+}) {
+ return (
+
+
e.stopPropagation()}
+ >
+ {/* Close Button */}
+
+
+
+
+
+
+ {/* Content */}
+
+
+
+ {experience.image ? (
+
+ ) : (
+ getTypeIcon(experience.type)
+ )}
+
+
+
+ {experience.name}
+
+
+ {getTypeIcon(experience.type)}{" "}
+ {experience.type.charAt(0).toUpperCase() +
+ experience.type.slice(1)}
+
+
+
+
+
+ {experience.description && (
+
+
+ Description
+
+
+ {experience.description}
+
+
+ )}
+
+ {experience.learned_at && (
+
+
+ ๐
When I Learned It
+
+
+ {experience.learned_at}
+
+
+ )}
+
+ {experience.learned_from && (
+
+
+ ๐จโ๐ซ How I Learned It
+
+
+ {experience.learned_from}
+
+
+ )}
+
+ {experience.learned_because && (
+
+
+ ๐ก Why I Learned It
+
+
+ {experience.learned_because}
+
+
+ )}
+
+
+
+
+ );
+}
diff --git a/src/components/MiniProjectCard.tsx b/src/components/MiniProjectCard.tsx
new file mode 100644
index 0000000..604d604
--- /dev/null
+++ b/src/components/MiniProjectCard.tsx
@@ -0,0 +1,55 @@
+import type { MiniProject } from "../types";
+
+export function MiniProjectCard({
+ project,
+ onClick,
+}: {
+ project: MiniProject;
+ onClick: () => void;
+}) {
+ return (
+
+ {project.image && (
+
+
+
+ )}
+
+
+ {project.title}
+
+
+ {project.description}
+
+ {project.last_commit && (
+
+ Last commit: {new Date(project.last_commit).toLocaleDateString()}
+
+ )}
+
+
+ Click to learn more
+
+
+
+
+
+ );
+}
diff --git a/src/components/MiniProjectModal.tsx b/src/components/MiniProjectModal.tsx
new file mode 100644
index 0000000..6f57f6e
--- /dev/null
+++ b/src/components/MiniProjectModal.tsx
@@ -0,0 +1,123 @@
+import type { MiniProject } from "../types";
+
+export function MiniProjectModal({
+ project,
+ onClose,
+}: {
+ project: MiniProject;
+ onClose: () => void;
+}) {
+ return (
+
+
e.stopPropagation()}
+ >
+ {/* Close Button */}
+
+
+
+
+
+
+ {/* Image */}
+ {project.image && (
+
+
+
+ )}
+
+ {/* Content */}
+
+
+ {project.title}
+
+
+ {project.note && (
+
+
+ {project.note.content}
+
+
+ )}
+
+
+
+
+ Description
+
+
+ {project.description}
+
+
+
+
+
+ Why I Made This
+
+
{project.why}
+
+
+ {project.reproduction && (
+
+
+ How to Reproduce
+
+
+ {project.reproduction}
+
+
+ )}
+
+ {project.github && (
+
+
+
+
+ View on GitHub
+
+ )}
+
+
+
+
+ );
+}
diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
new file mode 100644
index 0000000..be333b0
--- /dev/null
+++ b/src/components/ProjectCard.tsx
@@ -0,0 +1,67 @@
+import type { Project } from "../types";
+
+export function ProjectCard({ project }: { project: Project }) {
+ return (
+
+ {project.image && (
+
+
+
+
+ )}
+
+
+ {project.name}
+
+
+ {project.description}
+
+ {project.last_commit && (
+
+ Last commit: {new Date(project.last_commit).toLocaleDateString()}
+
+ )}
+
+
+
+ );
+}
diff --git a/src/components/utils.ts b/src/components/utils.ts
new file mode 100644
index 0000000..a1bb92a
--- /dev/null
+++ b/src/components/utils.ts
@@ -0,0 +1,35 @@
+import type { Experience } from "../types";
+
+export function getTypeIcon(type: Experience["type"]) {
+ switch (type) {
+ case "language":
+ return "๐ป";
+ case "service":
+ return "โ๏ธ";
+ case "platform":
+ return "๐";
+ case "real life experience":
+ return "๐";
+ case "roles":
+ return "๐";
+ default:
+ return "๐ฆ";
+ }
+ }
+
+ export function getTypeColor(type: Experience["type"]) {
+ switch (type) {
+ case "language":
+ return "bg-blue-500/20";
+ case "service":
+ return "bg-purple-500/20";
+ case "platform":
+ return "bg-green-500/20";
+ case "real life experience":
+ return "bg-orange-500/20";
+ case "roles":
+ return "bg-pink-500/20";
+ default:
+ return "bg-gray-500/20";
+ }
+ }
diff --git a/src/sections/About.tsx b/src/sections/About.tsx
new file mode 100644
index 0000000..309e763
--- /dev/null
+++ b/src/sections/About.tsx
@@ -0,0 +1,32 @@
+export function About() {
+ return (
+
+
+
+ Who?
+
+
+ A bit about me, my background, and how I got into programming.
+
+
+
+
+
+
+
+ I'm a Developer from Germany. I love doing full-stack web
+ development, tinkering with hardware, and 3D printing stuff i find quite fancy.
+
+
+ I focus on building projects that i need, and that don't
+ already exist. Or break the ones that do exist, to see how they work and learn from them.
+
+
+ I started programming around 2017, started of with C# in Unity, then moved to Python for a while, before settling on JavaScript/TypeScript as my main language around 2023.
+
+
+
+
+
+ );
+}
diff --git a/src/sections/Contact.tsx b/src/sections/Contact.tsx
new file mode 100644
index 0000000..57e9f2c
--- /dev/null
+++ b/src/sections/Contact.tsx
@@ -0,0 +1,30 @@
+export function Contact() {
+ return (
+
+
+ Want to talk?
+
+
+
+ Im almost always down to talk about anything. Tech, life and whatever. Feel free to reach out to me on Discord or via Email, i usually respond pretty quickly.
+
+
+
+
+ );
+}
diff --git a/src/sections/Footer.tsx b/src/sections/Footer.tsx
new file mode 100644
index 0000000..5972c47
--- /dev/null
+++ b/src/sections/Footer.tsx
@@ -0,0 +1,39 @@
+export function Footer() {
+ return (
+
+ );
+}
diff --git a/src/sections/Goals.tsx b/src/sections/Goals.tsx
new file mode 100644
index 0000000..19a9f27
--- /dev/null
+++ b/src/sections/Goals.tsx
@@ -0,0 +1,75 @@
+export function Goals() {
+ return (
+
+
+
+ My Goals
+
+
Next 4 Years are going to look fun
+
+
+
+
+
+
๐
+
+
+ Not Just Semi-Fullstack
+
+
+ I want to work more with Serverless Architectures and Cloud
+ Services to build scalable applications.
+
+
+
+
+
+
+
+
+ ๐ป
+
+
+
+ Contribute More to Open Source
+
+
+ I want to commit more to Open-Source Projects. That's it...
+
+
+
+
+
+
+
+
+ โก
+
+
+
+ Expand on Existing Projects
+
+
+ I want to make SHSF more stable and usable.
+
+
+
+
+
+
+
+
+ ๐งช
+
+
+
+ Testing before Breaking
+
+
In the future i want to write more tests and improve my code quality.
+
+
+
+
+
+ );
+}
diff --git a/src/sections/Hero.tsx b/src/sections/Hero.tsx
new file mode 100644
index 0000000..4b305b6
--- /dev/null
+++ b/src/sections/Hero.tsx
@@ -0,0 +1,112 @@
+export function Hero({
+ glowColor,
+ borderStatus,
+ displayMessage,
+ rotatingMessages,
+ statusMessage,
+ showOldNames,
+ setShowOldNames,
+ oldUsernames,
+}: {
+ glowColor: string;
+ borderStatus: string;
+ displayMessage: string;
+ rotatingMessages: string[];
+ statusMessage: string;
+ showOldNames: boolean;
+ setShowOldNames: (show: boolean) => void;
+ oldUsernames: string[];
+}) {
+ return (
+
+
+
+
+
+
+
+ {/* Rotating Message Bubble (Left Side) */}
+
+
+ {/* Arrow pointing to profile */}
+
+
+
+
+ {displayMessage || rotatingMessages[0]}
+
+
+
+
+ {/* Status Bubble (Right Side) */}
+
+
+ {/* Arrow pointing to profile */}
+
+
+
+
+ Currently{" "}
+
+ {statusMessage}
+
+
+ on Discord
+
+
+
+
+
+ {/* Name & Description */}
+
+
+ Hey, I'm{" "}
+ setShowOldNames(true)}
+ onMouseLeave={() => setShowOldNames(false)}
+ >
+ Spaceยฒ
+ {showOldNames && (
+
+
+
+
+ Also known as:
+
+
+ {oldUsernames.map((name, index) => (
+
+ {name}
+
+ ))}
+
+
+
+ )}
+
+
+
+ A{" "}
+
+ Self-proclaimed
+ {" "}
+ Developer breaking things to see how they work.
+
+
+
+ );
+}
diff --git a/src/sections/InternshipSection.tsx b/src/sections/InternshipSection.tsx
new file mode 100644
index 0000000..1002024
--- /dev/null
+++ b/src/sections/InternshipSection.tsx
@@ -0,0 +1,44 @@
+export function InternshipSection() {
+ return (
+
+
+
+ Real Life Experience (ABB Internship)
+
+
+ My internship experience at ABB and what i learned from it
+
+
+
+
+
+
+
+ I did an internship at{" "}
+
+ ABB{" "}
+
+ where i got to work on a project that involved internal management
+ software. It was a great experience that taught me a lot about
+ working in a professional environment and collaborating with a
+ team of developers.
+
+
+ This was the first propper time i worked with a Framework (Angular) and it was a great learning experience. Which helped me understand why
+ frameworks are a thing and how they can help structure and organize codebases, especially as they grow larger.
+
+
+ Also, this was the first time submitting a PR, which was scary but super rewarding when they merged it. From that point on
+ i was hooked on Frameworks and OSS contribution. I want to do more of both in the future.
+
+
+
+
+
+ );
+}
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..d9f0c7c
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,33 @@
+export interface MiniProject {
+ title: string;
+ description: string;
+ image?: string;
+ github?: string;
+ reproduction?: string;
+ why: string;
+ note?: {
+ color: string;
+ content: string;
+ };
+ last_commit?: Date;
+}
+
+export interface Experience {
+ name: string;
+ type: "language" | "service" | "platform" | "real life experience" | "roles";
+ description: string;
+ image?: string;
+ learned_at?: string;
+ learned_from?: string;
+ learned_because?: string;
+}
+
+export interface Project {
+ name: string;
+ description: string;
+ image?: string;
+ link: string;
+ open_source: false | { link: string };
+ rounded?: boolean;
+ last_commit?: Date;
+}