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 && ( -
- {project.title} -
- )} - - {/* 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 ? ( - {experience.name} - ) : ( - 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.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 ? ( - {experience.name} - ) : ( - getTypeIcon(experience.type) - )} - {isClickable && ( -
- )} -
-
-

- {experience.name} -

- {experience.description && ( -

- {experience.description} -

- )} -
- {isClickable && ( -
- - - -
- )} -
- ); -} - -function ProjectCard({ project }: { project: Project }) { - return ( -
- {project.image && ( -
-
- {project.name} -
- )} - -

- {project.name} -

-

- {project.description} -

- {project.last_commit && ( -

- Last commit: {project.last_commit.toLocaleDateString()} -

- )} - -
- - Visit - - - - - {project.open_source && ( - - - - - - )} -
-
- ); -} - -// 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 */} -
-
-
-
- Space -
+ - {/* 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 */} -
-
-
- SHSF Logo -

- Partly powered by{" "} - - SHSF - -

-
-

Love from Space โค๏ธ

-

- Designed with Copilot &{" "} - - gradienty.codes - - , Tailwind and React -

-
-
+
{/* 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 ? ( + {experience.name} + ) : ( + 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 ? ( + {experience.name} + ) : ( + 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.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 && ( +
+ {project.title} +
+ )} + + {/* 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.name} +

+

+ {project.description} +

+ {project.last_commit && ( +

+ Last commit: {new Date(project.last_commit).toLocaleDateString()} +

+ )} + +
+ + Visit + + + + + {project.open_source && ( + + + + + + )} +
+
+ ); +} 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 ( +
+
+
+ SHSF Logo +

+ Partly powered by{" "} + + SHSF + +

+
+

Love from Space โค๏ธ

+

+ Designed with Copilot &{" "} + + gradienty.codes + + , Tailwind and React +

+
+
+ ); +} 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 ( +
+
+
+
+ Space +
+ + {/* 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; +}