From 395f3bd8c52e887fc0d29992c9bb209de5e10769 Mon Sep 17 00:00:00 2001
From: Jeeiii <giacomo.corrias7@gmail.com>
Date: Mon, 11 Dec 2023 23:54:44 +0100
Subject: [PATCH 1/4] fix: hidden overflowX and min/max width for images

---
 apps/website/src/app/page.tsx     | 6 ++++--
 apps/website/src/styles/styles.ts | 3 ++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index a6eebe560..fa10c5121 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -27,7 +27,8 @@ export default function Home() {
                         alt="Midnight whispers image"
                         src="https://semaphore.cedoor.dev/midnight-whispers.jpg"
                         objectFit="cover"
-                        w="full"
+                        minWidth="100%"
+                        maxWidth="100%"
                         h="full"
                     />
                 </Box>
@@ -202,7 +203,8 @@ export default function Home() {
                         alt="Fluttering shadow image"
                         src="https://semaphore.cedoor.dev/shadow-flutter.jpg"
                         objectFit="cover"
-                        w="full"
+                        minWidth="100%"
+                        maxWidth="100%"
                         h="full"
                     />
                 </Box>
diff --git a/apps/website/src/styles/styles.ts b/apps/website/src/styles/styles.ts
index b1e5bc1eb..c64b832e4 100644
--- a/apps/website/src/styles/styles.ts
+++ b/apps/website/src/styles/styles.ts
@@ -11,7 +11,8 @@ const styles: Styles = {
             color: "white"
         },
         "body, #__next": {
-            minHeight: "100vh"
+            minHeight: "100vh",
+            overflowX: "hidden"
         },
         "#__next": {
             display: "flex",

From 66d13875f388007d344497cbdca10c37ed2511cd Mon Sep 17 00:00:00 2001
From: Jeeiii <giacomo.corrias7@gmail.com>
Date: Tue, 12 Dec 2023 00:12:40 +0100
Subject: [PATCH 2/4] fix: missing projects page image

---
 apps/website/src/app/projects/page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/website/src/app/projects/page.tsx b/apps/website/src/app/projects/page.tsx
index 7bbfae385..50ed0b3a8 100644
--- a/apps/website/src/app/projects/page.tsx
+++ b/apps/website/src/app/projects/page.tsx
@@ -26,7 +26,8 @@ export default function Projects() {
                         alt="Blue texture image"
                         src="https://semaphore.cedoor.dev/blue-texture.jpg"
                         objectFit="cover"
-                        w="full"
+                        minWidth="100%"
+                        maxWidth="100%"
                         h="full"
                     />
                 </Box>

From f6de9cc2f31467eadfcfc247671eba255f2e3f42 Mon Sep 17 00:00:00 2001
From: Jeeiii <giacomo.corrias7@gmail.com>
Date: Tue, 12 Dec 2023 14:59:28 +0100
Subject: [PATCH 3/4] refactor: add auto scroll to view to avoid ui bumps

---
 apps/website/src/components/ProjectsList.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/website/src/components/ProjectsList.tsx b/apps/website/src/components/ProjectsList.tsx
index a97e7497b..f6ee44d4a 100644
--- a/apps/website/src/components/ProjectsList.tsx
+++ b/apps/website/src/components/ProjectsList.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { Button, Grid, GridItem, HStack, IconButton, Text, VStack } from "@chakra-ui/react"
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import ProjectCard from "../components/ProjectCard"
 import allProjects from "../data/projects.json"
 import IconChevronLeft from "../icons/IconChevronLeft"
@@ -16,6 +16,7 @@ export default function ProjectsList(props: any) {
     const [index, setIndex] = useState<number>(0)
     const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
     const [onlyPSE, setOnlyPSE] = useState<boolean | null>(null)
+    const viewToScrollRef = useRef<HTMLDivElement>(null)
 
     const filterProjects = useCallback(() => {
         let filteredProjects = allProjects
@@ -39,6 +40,12 @@ export default function ProjectsList(props: any) {
         filterProjects()
     }, [selectedCategory, onlyPSE])
 
+    useEffect(() => {
+        if (viewToScrollRef.current) {
+            viewToScrollRef.current.scrollIntoView({ behavior: "smooth" })
+        }
+    }, [index])
+
     return (
         <VStack {...props}>
             <VStack align="left" spacing="6">
@@ -66,9 +73,8 @@ export default function ProjectsList(props: any) {
                 </HStack>
             </VStack>
 
-            <VStack align="left" spacing="6">
+            <VStack align="left" spacing="6" ref={viewToScrollRef}>
                 <Text fontSize="20">Category</Text>
-
                 <HStack spacing="3" flexWrap="wrap">
                     {getProjectCategories(allProjects).map((category) => (
                         <Button

From 071479fc7d1764cbc62a28341527339660786978 Mon Sep 17 00:00:00 2001
From: Jeeiii <giacomo.corrias7@gmail.com>
Date: Tue, 19 Dec 2023 13:42:53 +0100
Subject: [PATCH 4/4] refactor: adapt to chakra ui syntax

---
 apps/website/src/app/page.tsx          | 6 ++----
 apps/website/src/app/projects/page.tsx | 3 +--
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index fa10c5121..a6eebe560 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -27,8 +27,7 @@ export default function Home() {
                         alt="Midnight whispers image"
                         src="https://semaphore.cedoor.dev/midnight-whispers.jpg"
                         objectFit="cover"
-                        minWidth="100%"
-                        maxWidth="100%"
+                        w="full"
                         h="full"
                     />
                 </Box>
@@ -203,8 +202,7 @@ export default function Home() {
                         alt="Fluttering shadow image"
                         src="https://semaphore.cedoor.dev/shadow-flutter.jpg"
                         objectFit="cover"
-                        minWidth="100%"
-                        maxWidth="100%"
+                        w="full"
                         h="full"
                     />
                 </Box>
diff --git a/apps/website/src/app/projects/page.tsx b/apps/website/src/app/projects/page.tsx
index 50ed0b3a8..7bbfae385 100644
--- a/apps/website/src/app/projects/page.tsx
+++ b/apps/website/src/app/projects/page.tsx
@@ -26,8 +26,7 @@ export default function Projects() {
                         alt="Blue texture image"
                         src="https://semaphore.cedoor.dev/blue-texture.jpg"
                         objectFit="cover"
-                        minWidth="100%"
-                        maxWidth="100%"
+                        w="full"
                         h="full"
                     />
                 </Box>