lang selector

Author: DennisTurco

README.md

@@ -8,9 +8,10 @@ This is a website that i designed and created for:
 - link social media where you can find me;
 
 # Run the project
-`npx run dev`
+`npm run dev`
 
 # Packages to install
+- `npm install`
 - `npm install sass`
 - `npm install negotiator @formatjs/intl-localematcher`
 

components/LangSwitcher.tsx

@@ -5,8 +5,8 @@ import { useState, useEffect, useRef } from "react";
 import styles from "../styles/LangSwitcher.module.scss";
 
 const LANGS = [
-  { code: "it", label: "Italiano", flag: "🇮🇹" },
-  { code: "en", label: "English", flag: "🇬🇧" },
+  { code: "it", label: "Italiano", flag: "/images//flags/ita.png" },
+  { code: "en", label: "English", flag: "/images//flags/eng.png" },
 ];
 
 export default function LangSwitcher() {
@@ -28,7 +28,8 @@ export default function LangSwitcher() {
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
-  const currentLang = LANGS.find((l) => pathname.startsWith(`/${l.code}`)) || LANGS[0];
+  const currentLang =
+    LANGS.find((l) => pathname.startsWith(`/${l.code}`)) || LANGS[0];
 
   function changeLanguage(lang: string) {
     document.cookie = `NEXT_LOCALE=${lang}; path=/; max-age=31536000`;
@@ -45,27 +46,35 @@ export default function LangSwitcher() {
         aria-haspopup="listbox"
         aria-expanded={open}
       >
-        <span>{currentLang.flag}</span> {currentLang.label} ▼
+        <img
+          src={currentLang.flag}
+          alt={currentLang.label}
+          className={styles.flag}
+        />
       </button>
 
       {open && (
-        <ul role="listbox" tabIndex={-1} className={styles.dropdown}>
+        <ul role="listbox" className={styles.dropdown}>
           {LANGS.filter((l) => l.code !== currentLang.code).map((lang) => (
             <li
               key={lang.code}
               role="option"
               onClick={() => changeLanguage(lang.code)}
               className={styles.option}
+              tabIndex={0}
               onKeyDown={(e) => {
                 if (e.key === "Enter" || e.key === " ") changeLanguage(lang.code);
               }}
-              tabIndex={0}
             >
-              {lang.flag} {lang.label}
+              <img
+                src={lang.flag}
+                alt={lang.label}
+                className={styles.flag}
+              />
             </li>
           ))}
         </ul>
       )}
     </div>
   );
-}
+}

public/images/flags/eng.png

@@ -4,9 +4,16 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh;
+  min-height: 100vh;
   background-color: var(--background);
-  padding: 20px; // Aggiunto padding per evitare che il contenuto tocchi i bordi
+  padding: 20px;
+
+  @media (max-width: 768px) {
+    padding-top: 80px;   // spazio sufficiente sotto la navbar
+    padding-bottom: 40px; // spazio sufficiente sotto i pulsanti
+    flex-direction: column;
+    justify-content: flex-start;
+  }
 }
 
 .container {
@@ -114,17 +121,17 @@
   }
 }
 
-/* Miglioramenti pulsanti */
 .buttonGroup {
   margin-top: 20px;
   display: flex;
   gap: 15px;
   flex-wrap: wrap;
-  justify-content: center; // Centra i pulsanti
+  justify-content: center;
 
   @media (max-width: 600px) {
-    flex-direction: column; // Disposizione verticale per evitare sovrapposizioni
+    flex-direction: column;
     align-items: center;
+    margin-bottom: 40px; // spazio extra sotto i pulsanti
   }
 }
 
@@ -152,3 +159,15 @@
   border-top: 2px solid var(--accent);
   text-align: center;
 }
+
+
+@media (max-width: 768px) {
+  .heroSection {
+    padding-top: 120px; // abbassa immagine sotto la navbar
+    padding-bottom: 80px; // evita che i bottoni tocchino il footer
+  }
+
+  .buttonGroup {
+    margin-bottom: 40px; // spazio aggiuntivo sotto i bottoni
+  }
+}

public/images/flags/ita.png

@@ -1,51 +1,73 @@
-.container {
-  position: relative;
-  display: inline-block;
-  right: 5px;
-}
-
 .button {
-  cursor: pointer;
-  font-size: 1rem;
-  padding: 0.5rem 1rem;
-  background: white;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
   border: 1px solid #ccc;
-  border-radius: 4px;
-  user-select: none;
+  background: white;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  min-width: 100px;  /* larghezza minima per il bottone */
+  justify-content: center;
+  padding: 0;
+}
+
+.flag {
+  object-fit: cover;
+  width: 100%;
 }
 
 .dropdown {
   position: absolute;
-  top: 100%;
+  top: 100%;      /* subito sotto il bottone */
   left: 0;
-  background: white;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  margin-top: 4px;
-  list-style: none;
-  padding: 0;
+  transform: none;
+  display: flex;
+  flex-direction: column;
+  background: transparent; /* puoi cambiare se vuoi */
+  padding: 8px 0; /* piccolo padding verticale */
   z-index: 9999;
-  min-width: 130px;
-  max-width: 180px;  /* massimo */
-  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.container {
+  position: relative;
+  display: inline-block;
 }
 
 .option {
-  padding: 0.4rem 0.8rem;
-  cursor: pointer;
-  user-select: none;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  font-size: 16px !important;
+  justify-content: center;
+  background: white;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  transition: transform 0.2s;
 
   &:hover,
   &:focus {
-    background-color: #f0f0f0;
+    transform: scale(1.2);
     outline: none;
   }
 }
+
+
+@media (max-width: 600px) {
+  .button {
+    width: 40px;       /* mantieni la dimensione circolare */
+    height: 40px;
+    padding: 0;
+  }
+
+  .dropdown {
+    top: 100%;         /* dropdown sotto il bottone anche su mobile */
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .option {
+    width: 40px;       /* mantiene la forma circolare */
+    height: 40px;
+    padding: 0;        /* nessun padding extra */
+  }
+}

styles/HeroPortfolio.module.scss

@@ -12,14 +12,10 @@
   list-style-type: none;
   margin: 0;
   padding: 0;
-  filter: blur(0.5px);
-  -webkit-filter: blur(0.5px); /* Safari */
   position: relative;
 
   &:hover {
     opacity: 1;
-    filter: blur(0);
-    -webkit-filter: blur(0); /* Safari */
   }
 
   @media (max-width: $media-mobile) {
@@ -79,3 +75,25 @@
   display: flex;
   align-items: center;
 }
+
+
+@media (max-width: 600px) {
+  .navList {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .navList li {
+    margin-right: 0.5rem;
+  }
+
+  .right {
+    margin-left: 0;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .right > * {
+    flex: 1 1 auto; 
+  }
+}

styles/LangSwitcher.module.scss

@@ -13,7 +13,6 @@
   justify-content: center;
   align-items: center;
   gap: 8px;
-  
 }
 
 .diploma a{