Added Project & fixed responsivity

components/projects.tsx

@@ -11,10 +11,12 @@ import { Container, Content } from "@/styles/pageStyles"
 const CarouselWrapper = styled.div`
 	display: flex;
 	transition: transform 0.5s ease-in-out;
-	gap: 2rem;
+	flex-direction: column;
+	width: 100%;
+	gap: 1rem;
 
-	@media (max-width: 1200px) {
+	@media (min-width: 1250px) {
-		flex-direction: column;
+		flex-direction: row;
 		align-items: center;
 	}
 `
@@ -25,9 +27,9 @@ const CarouselContainer = styled.div`
 `
 
 const ProjectCard = styled.div`
-	padding: 2rem;
+	width: 100%;
-	width: 400px;
+	height: auto;
-	height: 600px;
+	padding: 1rem;
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
@@ -40,7 +42,7 @@ const ProjectCard = styled.div`
 		font-size: 2rem;
 		font-weight: 600;
 
-		@media (max-width: 1200px) {
+		@media (min-width: 1250px) {
 			font-size: 1.5rem;
 		}
 	}
@@ -49,20 +51,18 @@ const ProjectCard = styled.div`
 		font-size: 1.2rem;
 		font-weight: 400;
 
-		@media (max-width: 1200px) {
+		@media (min-width: 1250px) {
 			font-size: 1rem;
 		}
 	}
 
 	img {
 		width: 100%;
-		height: 200px;
+		height: auto;
-		object-fit: cover;
+		min-height: 150px;
+		max-height: 200px;
+		object-fit: contain;
 		border-radius: 1rem;
-
-		@media (max-width: 1200px) {
-			height: 150px;
-		}
 	}
 
 	&:not(.active) {
@@ -70,15 +70,16 @@ const ProjectCard = styled.div`
 		transform: scale(0.8);
 	}
 
-	@media (max-width: 1200px) {
+	@media (min-width: 1250px) {
-		width: 100%;
+		padding: 2rem;
-		height: auto;
+		width: 400px;
-		padding: 1rem;
+		height: 550px;
 	}
 `
 
 const NavigationButton = styled.button`
 	position: absolute;
+	display: none;
 	top: 50%;
 	transform: translateY(-50%);
 	border: none;
@@ -93,17 +94,17 @@ const NavigationButton = styled.button`
 		color: rgb(var(--white));
 	}
 
-	@media (max-width: 1200px) {
+	@media (min-width: 1250px) {
-		display: none;
+		display: block;
 	}
 `
 
 const PrevButton = styled(NavigationButton)`
-	left: 0;
+	left: -0.25rem;
 `
 
 const NextButton = styled(NavigationButton)`
-	right: 0;
+	right: -0.25rem;
 `
 
 const CarouselIndicator = styled.div`
@@ -112,7 +113,7 @@ const CarouselIndicator = styled.div`
 	gap: 0.5rem;
 	margin-top: 1rem;
 
-	@media (max-width: 1200px) {
+	@media (min-width: 1250px) {
 		margin-top: 0.5rem;
 	}
 `
@@ -128,7 +129,7 @@ const IndicatorDot = styled.div`
 		background-color: rgb(var(--white));
 	}
 
-	@media (max-width: 1200px) {
+	@media (min-width: 1250px) {
 		width: 8px;
 		height: 8px;
 	}
@@ -146,7 +147,7 @@ const TechStack = styled.div`
 		padding: 0.25rem 0.5rem;
 		border-radius: 0.25rem;
 
-		@media (max-width: 1200px) {
+		@media (min-width: 1250px) {
 			font-size: 0.7rem;
 			padding: 0.2rem 0.4rem;
 		}
@@ -176,7 +177,7 @@ const ViewLink = styled(Link)`
 		color: rgb(var(--white));
 	}
 
-	@media (max-width: 1200px) {
+	@media (min-width: 1250px) {
 		font-size: 1rem;
 		padding: 0.4rem 0.8rem;
 	}
@@ -192,7 +193,7 @@ const SourceLink = styled(Link)`
 		color: rgb(var(--white));
 	}
 
-	@media (max-width: 1200px) {
+	@media (min-width: 1250px) {
 		svg {
 			width: 25px;
 			height: 25px;

data/projects.ts

@@ -58,6 +58,16 @@ const projects: Project[] = [
 		source: "https://github.com/HangerThem/ephemeris",
 		state: "done",
 	},
+	{
+		title: "Lighthouse SVG report",
+		description: "A simple SVG report generator for Lighthouse reports.",
+		image:
+			"https://lighthouse-report-svg.vercel.app/?perf=100&acc=92&best=100&seo=100&pwa=0",
+		techStack: ["TypeScript", "Node.js", "Express"],
+		href: "https://lighthouse-report-svg.vercel.app",
+		source: "https://github.com/HangerThem/lighthouse-report-svg",
+		state: "done",
+	},
 	{
 		title: "Evolution algorithm Flappy Bird",
 		description:

next.config.mjs

@@ -1,4 +1,14 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+	images: {
+		remotePatterns: [
+			{
+				hostname: "lighthouse-report-svg.vercel.app",
+				protocol: "https",
+			},
+		],
+		dangerouslyAllowSVG: true,
+	},
+}
 
 export default nextConfig