Add Projects component and update styles

src/App.tsx

@@ -4,6 +4,7 @@ import Header from "@components/Header";
 import About from "@components/About";
 import SectionScroll from "@components/SectionScroll";
 import Skills from "@components/Skills";
+import Projects from "@components/Projects";
 import SectionLine from "@components/SectionLine";
 
 export default function App() {
@@ -52,18 +53,11 @@ export default function App() {
 				<Skills />
 			</div>
 
-			<div
+			<div id="projects" className="section" ref={projectsRef}>
-				id="projects"
-				className="section"
-				ref={projectsRef}
-				style={{ textAlign: "center" }}
-			>
 				<SectionLine />
-
+				<Projects />
-				<h4>Projects</h4>
 			</div>
 
-			<h4>Website under construction 🚧👷</h4>
 			<SectionScroll sections={["", "skills", "projects"]} />
 		</div>
 	);

src/components/Projects.tsx

@@ -0,0 +1,102 @@
+import "@styles/Projects.scss";
+
+enum BadgeType {
+	DOCKER = "Docker",
+	TYPESCRIPT = "TypeScript",
+	EXPRESS = "ExpressJS",
+	GIT = "Git",
+	JAVASCRIPT = "JavaScript",
+	TYPEORM = "TypeORM",
+	FIREBASE = "Firebase",
+	HTML = "HTML",
+	REACT = "ReactJS",
+	NODEJS = "NodeJS",
+	CSS = "CSS",
+	NEXTJS = "NextJS",
+	POSTGRESQL = "PostgreSQL",
+	SASS = "SASS",
+	ANGULARJS = "AngularJS",
+	MYSQL = "MySQL",
+	JAVA = "Java",
+	UNITY = "Unity",
+	CSHARP = "Csharp",
+	CPP = "Cpp",
+	PYTHON = "Python",
+}
+
+function Badge({ type }: { type: BadgeType }) {
+	return <div className={`badge ${type.toLowerCase()}`}>{type}</div>;
+}
+
+function Project({
+	name,
+	description,
+	image,
+	link,
+}: {
+	name: string;
+	description: string;
+	image?: string;
+	link: string;
+}) {
+	const imageUrl =
+		image ||
+		"https://source.unsplash.com/random/500x400?javascript&sig=" +
+			Math.random() * 1000;
+
+	return (
+		<div
+			className="project"
+			onClick={() => {
+				window.open(link, "_blank");
+			}}
+		>
+			<img src={imageUrl} alt={name} className={!image ? "blur" : ""} />
+			{!image ? <small>Placeholder image</small> : null}
+			<div className="info">
+				<h3>{name}</h3>
+				<div className="badges">
+					<Badge type={BadgeType.DOCKER} />
+					<Badge type={BadgeType.JAVASCRIPT} />
+				</div>
+				<div className="description">
+					<p>{description}</p>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default function Projects() {
+	return (
+		<div className="projects">
+			<div className="title">
+				<h3>Projects</h3>
+				<h4>Public Projects</h4>
+			</div>
+
+			<div className="grid">
+				<Project
+					name="Website"
+					description="This website"
+					link="https://github.com/DerTyp7?tab=repositories"
+				/>{" "}
+				<Project
+					name="Website"
+					description="This website"
+					link="https://github.com/DerTyp7?tab=repositories"
+				/>{" "}
+				<Project
+					name="Website"
+					description="This website"
+					link="https://github.com/DerTyp7?tab=repositories"
+				/>{" "}
+				<Project
+					name="Website"
+					description="This website"
+					link="https://github.com/DerTyp7?tab=repositories"
+				/>
+			</div>
+		</div>
+	);
+}

src/styles/App.scss

@@ -7,5 +7,12 @@
 	.section {
 		min-height: 100vh;
 		padding: 80px 0;
+
+		.title {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+		}
 	}
 }

src/styles/Projects.scss

@@ -0,0 +1,191 @@
+.projects {
+	padding: 0 10rem;
+	.grid {
+		padding: 2rem 0;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-around;
+		align-items: center;
+		gap: 20px;
+
+		.project {
+			display: flex;
+			flex-direction: column;
+			background-color: var(--color-background-foreground);
+			border-radius: 5px;
+			padding: 5px;
+			border: 2px solid transparent;
+			transition: all 50ms ease-in-out;
+			cursor: pointer;
+			max-width: 500px;
+			min-width: 300px;
+
+			&:hover {
+				border-color: var(--color-accent-background);
+			}
+
+			img {
+				width: 100%;
+
+				&.blur {
+					filter: blur(5px);
+				}
+			}
+
+			small {
+				font-size: 0.8rem;
+				font-weight: bold;
+				color: var(--color-font-muted);
+				text-align: center;
+			}
+
+			.info {
+				padding: 1rem;
+
+				.badges {
+					display: flex;
+					flex-wrap: wrap;
+					gap: 5px;
+					padding: 0.5rem 0;
+					border-bottom: 1px solid var(--color-border);
+
+					.badge {
+						padding: 0.2rem 0.5rem;
+						border-radius: 5px;
+						font-size: 0.8rem;
+						font-weight: 600;
+						border: 2px solid var(--color-accent-background);
+
+						&.docker {
+							background-color: #0db9ed11;
+							border-color: #0db9ed4f;
+							color: #60c6e6;
+						}
+
+						&.typescript {
+							background-color: #007acc11;
+							border-color: #007acc4f;
+							color: #007acc;
+						}
+
+						&.express {
+							background-color: #00000011;
+							border-color: #0000004f;
+							color: #000000;
+						}
+
+						&.git {
+							background-color: #f34f2999;
+							border-color: #f34f29;
+							color: #ffffff;
+						}
+
+						&.javascript {
+							background-color: #f0db4f11;
+							border-color: #f0db4f4f;
+							color: #f0db4f;
+						}
+
+						&.typeorm {
+							background-color: #42b88311;
+							border-color: #42b8834f;
+							color: #42b883;
+						}
+
+						&.firebase {
+							background-color: #ffca2811;
+							border-color: #ffca284f;
+							color: #ffca28;
+						}
+
+						&.html {
+							background-color: #e34f2611;
+							border-color: #e34f264f;
+							color: #e34f26;
+						}
+
+						&.reactjs {
+							background-color: #61dafb11;
+							border-color: #61dafb4f;
+							color: #61dafb;
+						}
+
+						&.nodejs {
+							background-color: #68a06311;
+							border-color: #68a0634f;
+							color: #68a063;
+						}
+
+						&.css {
+							background-color: #264de411;
+							border-color: #264de44f;
+							color: #264de4;
+						}
+
+						&.nextjs {
+							background-color: #00000011;
+							border-color: #0000004f;
+							color: #000000;
+						}
+
+						&.postgresql {
+							background-color: #33679111;
+							border-color: #3367914f;
+							color: #336791;
+						}
+
+						&.sass {
+							background-color: #cc669911;
+							border-color: #cc66994f;
+							color: #cc6699;
+						}
+
+						&.angularjs {
+							background-color: #e2323711;
+							border-color: #e232374f;
+							color: #e23237;
+						}
+
+						&.mysql {
+							background-color: #4479a111;
+							border-color: #4479a14f;
+							color: #4479a1;
+						}
+
+						&.java {
+							background-color: #00739611;
+							border-color: #0073964f;
+							color: #007396;
+						}
+
+						&.unity {
+							background-color: #00000011;
+							border-color: #0000004f;
+							color: #000000;
+						}
+						&.csharp {
+							background-color: #17860011;
+							border-color: #1786004f;
+							color: #178600;
+						}
+
+						&.cpp {
+							background-color: #f34b7d11;
+							border-color: #f34b7d4f;
+							color: #f34b7d;
+						}
+
+						&.python {
+							background-color: #3776ab11;
+							border-color: #3776ab4f;
+							color: #3776ab;
+						}
+					}
+				}
+				.description {
+					padding: 0.5rem 0;
+				}
+			}
+		}
+	}
+}

src/styles/Skills.scss

@@ -4,13 +4,6 @@
 	align-items: center;
 	gap: 30px;
 
-	.title {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
 	.grid {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);