fix: improve accessibility and mobile screen display

MarcoEscaleira · Jun 17, 2024 · 7fb70fd · 7fb70fd
1 parent 6483b9b
commit 7fb70fd
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 4 deletions.
diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,14 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
+  i18n: {
+    locales: ['en-US'],
+    defaultLocale: 'en-US',
+    domains: [
+      {
+        domain: 'escaleira.dev',
+        defaultLocale: 'en-US',
+      },
+    ],
+  }
 }
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -1 +1 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{"name":"Escaleira Portfolio","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
@@ -18,6 +18,7 @@ export const ThemeSwitcher = () => {
     <button
       className="rounded-md p-1 duration-200 hover:scale-110 active:scale-100 dark:bg-[#212933]"
       onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      aria-label="Color mode switch"
     >
       {theme === "light" ? <Moon className="w-4" /> : <Sun className="w-4" />}
     </button>

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
 export const Footer: FC = () => {
   return (
     <footer className={`bg-transparent dark:bg-gray-900`}>
-      <div className="container mx-auto flex flex-col items-center justify-between space-y-4 p-6 sm:flex-row sm:space-y-0">
+      <div className="container mx-auto flex items-center justify-between p-4 sm:flex-row sm:p-6">
         <Link href="/">
           <Image src="/logo-white.svg" alt="logo-marco" height={60} width={60} className="text-black" />
         </Link>

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -8,7 +8,7 @@ export const Header: FC = () => {
 
   return (
     <header className={`h-16 w-full`}>
-      <div className="container mx-auto flex flex-col items-center justify-between space-y-4 p-6 sm:flex-row sm:space-y-0">
+      <div className="container mx-auto flex items-center justify-between p-4 sm:flex-row sm:p-6">
         <section className="flex items-center">
           <Image src="/logo-white.svg" alt="logo-marco" height={60} width={60} loading="lazy" />
           {/*<nav className="ml-8 flex gap-4">*/}

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 
 export default function Home() {
   return (
-    <div className="container flex items-center justify-center">
+    <div className="container flex flex-col items-center justify-center md:flex-row">
       <Image src="/marco.jpg" alt="Marco's face" width={250} height={250} className="rounded-[50%] shadow" />
       <div className="ml-10">
         <Typography variant="h1" className="mb-2">