fix(Layout): using a layout to improve visual design

Evi-2003 · Dec 14, 2024 · e293eef · e293eef
2 parents d0f2a1f + 6572847
commit e293eef
Show file tree

Hide file tree

Showing 18 changed files with 92 additions and 53 deletions.
diff --git a/app/about-me/page.tsx b/app/about-me/page.tsx
@@ -64,7 +64,7 @@ export default async function overMij() {
   const getData = await getOverMij('en');
   const data = getData.overMij;
   return (
-    <main className="grid w-4/5 grid-cols-2 gap-2 text-stone-800 lg:w-3/5 2xl:w-6/12 dark:text-stone-100">
+    <main className="grid w-full grid-cols-2 gap-2 text-stone-800 dark:text-stone-100">
       <h1 className="col-span-full row-start-1 text-4xl font-bold lg:text-4xl">{data.titelOverMijPagina}</h1>
       <h2 className="col-span-full row-start-2 pb-2 text-xl font-medium lg:text-2xl">{data.subtitel}</h2>
       <section

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
@@ -36,7 +36,7 @@ const Header = async ({ lng }: { lng: string }) => {
   const { allPaginas } = await getNavItems(lngFormatted);
 
   return (
-    <header className={'my-10 flex w-full items-center justify-center ' + zenKurenaido.className}>
+    <header className={'max-w-screen my-10 flex w-full items-center justify-between ' + zenKurenaido.className}>
       <Head>
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
@@ -46,7 +46,7 @@ const Header = async ({ lng }: { lng: string }) => {
         <meta name="theme-color" content="#ffffff" />
       </Head>
       <nav
-        className="relative flex flex-col items-center justify-center gap-5 rounded-2xl bg-neutral-100 px-3 py-4
+        className="relative flex w-full flex-col items-center justify-between gap-5 rounded-2xl bg-neutral-100 px-3 py-4
           text-stone-950 shadow lg:flex-row dark:bg-neutral-800"
       >
         <NavList allPaginas={allPaginas} lng={lng} />

diff --git a/app/components/NavList.tsx b/app/components/NavList.tsx
@@ -23,12 +23,16 @@ const NavList = ({
 
   return (
     <>
-      <ul className="flex items-center justify-between">
+      <ul className="flex w-full items-center justify-between md:w-auto">
         <li onClick={() => isNavOpen && toggleIsOpen()}>
-          <Link href={`${lng === 'en' ? '/' : '/nl-NL'}`} className="text-2xl font-bold lg:self-center dark:text-white">
+          <Link
+            href={`${lng === 'en' ? '/' : '/nl-NL'}`}
+            className="w-full self-start text-2xl font-bold dark:text-white"
+          >
             &lt;evi-wammes/&gt;
           </Link>
         </li>
+
         <li className="self-end">
           <NavButton />
         </li>

diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx
@@ -97,7 +97,7 @@ const Page = async () => {
   Fancybox.bind('[data-fancybox="gallery"]', {});
 
   return (
-    <main className="flex w-5/6 flex-col dark:text-stone-100">
+    <div className="flex w-full flex-col dark:text-stone-100">
       <h1 className="col-span-3 row-span-1 mb-3 text-4xl font-bold text-stone-800 dark:text-stone-100">Gallery</h1>
 
       <div className="flex justify-between">
@@ -147,7 +147,7 @@ const Page = async () => {
           </div>
         ),
       )}
-    </main>
+    </div>
   );
 };
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -22,11 +22,11 @@ export default async function RootLayout(
             <link rel="manifest" href="/site.webmanifest" />
           </head>
           <body
-            className={`flex min-h-screen flex-col items-center bg-gradient-to-b from-white to-gray-100 pb-5
-              dark:from-neutral-900 dark:to-neutral-950 ${GeistSans.className}`}
+            className={`flex min-h-screen flex-col items-center bg-gradient-to-b from-white to-gray-100 px-12 pb-5
+              md:px-3 dark:from-neutral-900 dark:to-neutral-950 ${GeistSans.className}`}
           >
             <Header lng={'en-US'} />
-            {children}
+            <main className="max-w-screen mx-auto w-full">{children}</main>
           </body>
         </html>
       </NavProvider>

diff --git a/app/nl-NL/about-me/page.tsx b/app/nl-NL/about-me/page.tsx
@@ -64,7 +64,7 @@ export default async function overMij() {
   const getData = await getOverMij('nl');
   const data = getData.overMij;
   return (
-    <main className="grid w-4/5 grid-cols-2 gap-2 text-stone-800 lg:w-3/5 2xl:w-6/12 dark:text-stone-100">
+    <main className="grid w-full grid-cols-2 gap-2 text-stone-800 dark:text-stone-100">
       <h1 className="col-span-full row-start-1 text-4xl font-bold lg:text-4xl">{data.titelOverMijPagina}</h1>
       <h2 className="col-span-full row-start-2 pb-2 text-xl font-medium lg:text-2xl">{data.subtitel}</h2>
       <section

diff --git a/app/nl-NL/gallery/page.tsx b/app/nl-NL/gallery/page.tsx
@@ -97,7 +97,7 @@ const Page = async () => {
   Fancybox.bind('[data-fancybox="gallery"]', {});
 
   return (
-    <main className="flex w-5/6 flex-col dark:text-stone-100">
+    <main className="flex w-full flex-col dark:text-stone-100">
       <h1 className="col-span-3 row-span-1 mb-3 text-4xl font-bold text-stone-800 dark:text-stone-100">Galerij</h1>
 
       <div className="flex justify-between">

diff --git a/app/nl-NL/layout.tsx b/app/nl-NL/layout.tsx
@@ -22,11 +22,11 @@ export default async function RootLayout(
             <link rel="manifest" href="/site.webmanifest" />
           </head>
           <body
-            className={`flex min-h-screen flex-col items-center bg-gradient-to-b from-white to-gray-100 pb-5
+            className={`flex min-h-screen flex-col items-center bg-gradient-to-b from-white to-gray-100 px-3 pb-5
               dark:from-neutral-900 dark:to-neutral-950 ${GeistSans.className}`}
           >
             <Header lng={'nl-NL'} />
-            {children}
+            <main className="max-w-screen mx-auto w-full">{children}</main>
           </body>
         </html>
       </NavProvider>

diff --git a/app/nl-NL/page.tsx b/app/nl-NL/page.tsx
@@ -82,11 +82,11 @@ export default async function Home() {
   const data = getData.overMij;
 
   return (
-    <main className="grid w-4/5 max-w-5xl grid-flow-col grid-cols-1 gap-5 lg:w-3/5 lg:grid-cols-5 2xl:w-6/12">
+    <div className="grid w-full grid-flow-col grid-cols-1 gap-5">
       <article className="col-start-1 lg:col-span-3">
         <h1 className="text-4xl font-bold text-stone-800 lg:text-4xl dark:text-stone-100">{data.heading}</h1>
         <h2 className="text-lg font-medium text-sky-900 lg:text-2xl dark:text-stone-200">{data.functie}</h2>
-        <div className="text-base text-stone-800 xl:text-lg dark:text-stone-100">
+        <div className="text-balance text-base text-stone-800 xl:text-lg dark:text-stone-100">
           <StructuredText data={data?.aboutMe} />
         </div>
       </article>
@@ -132,6 +132,6 @@ export default async function Home() {
           </li>
         </ul>
       </aside>
-    </main>
+    </div>
   );
 }
diff --git a/app/nl-NL/projects/[slug]/page.tsx b/app/nl-NL/projects/[slug]/page.tsx
@@ -117,10 +117,7 @@ export default async function Projecten(props: { params: Promise<{ slug: string;
   const data = getData.projecten;
 
   return (
-    <main
-      className="grid h-full w-4/5 auto-rows-min grid-cols-3 justify-start space-y-2 pb-10 text-left lg:w-3/5 2xl:w-4/12
-        dark:text-white"
-    >
+    <div className="grid h-full w-full auto-rows-min grid-cols-3 justify-start space-y-2 pb-10 text-left dark:text-white">
       <div className="col-span-full row-start-1 text-sm">
         <Link href={'/nl-NL/projects'} prefetch>
           Projecten
@@ -162,6 +159,6 @@ export default async function Projecten(props: { params: Promise<{ slug: string;
       >
         <StructuredText data={data?.contentNew} />
       </div>
-    </main>
+    </div>
   );
 }
diff --git a/app/nl-NL/projects/page.tsx b/app/nl-NL/projects/page.tsx
@@ -85,9 +85,8 @@ export default async function Projecten() {
   const data = getData.allProjectens;
 
   return (
-    <main
-      className="grid-rows-auto w-4/5 grid-cols-1 text-center sm:grid sm:grid-flow-col sm:auto-rows-auto lg:w-4/5
-        lg:grid-cols-2 2xl:w-8/12"
+    <div
+      className="grid-rows-auto w-full grid-cols-1 text-center sm:grid sm:grid-flow-col sm:auto-rows-auto lg:grid-cols-2"
     >
       <h1 className="col-span-3 row-span-1 mb-3 text-4xl font-bold text-stone-800 md:mb-0 dark:text-stone-100">
         {pagina.label}
@@ -167,6 +166,6 @@ export default async function Projecten() {
           ),
         )}
       </div>
-    </main>
+    </div>
   );
 }
diff --git a/app/nl-NL/work-experience/page.tsx b/app/nl-NL/work-experience/page.tsx
@@ -71,9 +71,9 @@ export default async function Werkervaring() {
   const { pagina } = await getSeoData('nl');
 
   return (
-    <main className="text-center text-stone-800 dark:text-stone-100">
+    <div className="mx-auto text-center text-stone-800 dark:text-stone-100">
       <h1 className="mb-5 text-4xl font-bold">{pagina.label}</h1>
-      <div className="pl mx-5 max-w-md rounded-xl bg-stone-200 py-2 pr-5 dark:bg-stone-900">
+      <div className="pl mx-5 mx-auto max-w-md rounded-xl bg-stone-200 py-2 pr-5 dark:bg-stone-900">
         <ul className="divide-y divide-stone-900/30 pl-5 text-left dark:divide-stone-100/30">
           {data.map(
             (element: {
@@ -144,6 +144,6 @@ export default async function Werkervaring() {
           )}
         </ul>
       </div>
-    </main>
+    </div>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -82,11 +82,11 @@ export default async function Home() {
   const data = getData.overMij;
 
   return (
-    <main className="grid w-4/5 max-w-5xl grid-flow-col grid-cols-1 gap-5 lg:w-3/5 lg:grid-cols-5 2xl:w-6/12">
+    <div className="grid w-full grid-flow-col grid-cols-1 gap-5">
       <article className="col-start-1 lg:col-span-3">
         <h1 className="text-4xl font-bold text-stone-800 lg:text-4xl dark:text-stone-100">{data.heading}</h1>
         <h2 className="text-lg font-medium text-sky-900 lg:text-2xl dark:text-stone-200">{data.functie}</h2>
-        <div className="text-base text-stone-800 xl:text-lg dark:text-stone-100">
+        <div className="text-balance text-base text-stone-800 xl:text-lg dark:text-stone-100">
           <StructuredText data={data?.aboutMe} />
         </div>
       </article>
@@ -132,6 +132,6 @@ export default async function Home() {
           </li>
         </ul>
       </aside>
-    </main>
+    </div>
   );
 }
diff --git a/app/projects/[slug]/page.tsx b/app/projects/[slug]/page.tsx
@@ -117,10 +117,7 @@ export default async function Projecten(props: { params: Promise<{ slug: string
   const data = getData.projecten;
 
   return (
-    <main
-      className="grid h-full w-4/5 auto-rows-min grid-cols-3 justify-start space-y-2 pb-10 text-left lg:w-3/5 2xl:w-4/12
-        dark:text-white"
-    >
+    <div className="grid h-full w-full auto-rows-min grid-cols-3 justify-start space-y-2 pb-10 text-left dark:text-white">
       <div className="col-span-full row-start-1 text-sm">
         <Link href={'/en-US/projects'} prefetch>
           Projects
@@ -162,6 +159,6 @@ export default async function Projecten(props: { params: Promise<{ slug: string
       >
         <StructuredText data={data?.contentNew} />
       </div>
-    </main>
+    </div>
   );
 }
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -85,9 +85,8 @@ export default async function Projecten() {
   const data = getData.allProjectens;
 
   return (
-    <main
-      className="grid-rows-auto w-4/5 grid-cols-1 text-center sm:grid sm:grid-flow-col sm:auto-rows-auto lg:w-4/5
-        lg:grid-cols-2 2xl:w-8/12"
+    <div
+      className="grid-rows-auto w-full grid-cols-1 text-center sm:grid sm:grid-flow-col sm:auto-rows-auto lg:grid-cols-2"
     >
       <h1 className="col-span-3 row-span-1 mb-3 text-4xl font-bold text-stone-800 md:mb-0 dark:text-stone-100">
         {pagina.label}
@@ -167,6 +166,6 @@ export default async function Projecten() {
           ),
         )}
       </div>
-    </main>
+    </div>
   );
 }
diff --git a/app/work-experience/page.tsx b/app/work-experience/page.tsx
@@ -71,9 +71,9 @@ export default async function Werkervaring() {
   const { pagina } = await getSeoData('en');
 
   return (
-    <main className="text-center text-stone-800 dark:text-stone-100">
+    <div className="mx-auto text-center text-stone-800 dark:text-stone-100">
       <h1 className="mb-5 text-4xl font-bold">{pagina.label}</h1>
-      <div className="pl mx-5 max-w-md rounded-xl bg-stone-200 py-2 pr-5 dark:bg-stone-900">
+      <div className="pl mx-5 mx-auto max-w-md rounded-xl bg-stone-200 py-2 pr-5 dark:bg-stone-900">
         <ul className="divide-y divide-stone-900/30 pl-5 text-left dark:divide-stone-100/30">
           {data.map(
             (element: {
@@ -144,6 +144,6 @@ export default async function Werkervaring() {
           )}
         </ul>
       </div>
-    </main>
+    </div>
   );
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -13,6 +13,9 @@ const config: Config = {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
+      maxWidth: {
+        screen: '960px',
+      },
     },
   },
   plugins: [],

diff --git a/yarn.lock b/yarn.lock
@@ -731,15 +731,15 @@
     "@typescript-eslint/visitor-keys" "7.2.0"
     debug "^4.3.4"
 
-"@typescript-eslint/parser@^7.0.0":
-  version "7.18.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.18.0.tgz#83928d0f1b7f4afa974098c64b5ce6f9051f96a0"
-  integrity sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==
-  dependencies:
-    "@typescript-eslint/scope-manager" "7.18.0"
-    "@typescript-eslint/types" "7.18.0"
-    "@typescript-eslint/typescript-estree" "7.18.0"
-    "@typescript-eslint/visitor-keys" "7.18.0"
+"@typescript-eslint/parser@^8.10.0":
+  version "8.18.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.18.0.tgz#a1c9456cbb6a089730bf1d3fc47946c5fb5fe67b"
+  integrity sha512-hgUZ3kTEpVzKaK3uNibExUYm6SKKOmTU2BOxBSvOYwtJEPdVQ70kZJpPjstlnhCHcuc2WGfSbpKlb/69ttyN5Q==
+  dependencies:
+    "@typescript-eslint/scope-manager" "8.18.0"
+    "@typescript-eslint/types" "8.18.0"
+    "@typescript-eslint/typescript-estree" "8.18.0"
+    "@typescript-eslint/visitor-keys" "8.18.0"
     debug "^4.3.4"
 
 "@typescript-eslint/[email protected]":
@@ -758,6 +758,14 @@
     "@typescript-eslint/types" "7.2.0"
     "@typescript-eslint/visitor-keys" "7.2.0"
 
+"@typescript-eslint/[email protected]":
+  version "8.18.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.18.0.tgz#30b040cb4557804a7e2bcc65cf8fdb630c96546f"
+  integrity sha512-PNGcHop0jkK2WVYGotk/hxj+UFLhXtGPiGtiaWgVBVP1jhMoMCHlTyJA+hEj4rszoSdLTK3fN4oOatrL0Cp+Xw==
+  dependencies:
+    "@typescript-eslint/types" "8.18.0"
+    "@typescript-eslint/visitor-keys" "8.18.0"
+
 "@typescript-eslint/[email protected]":
   version "7.18.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.18.0.tgz#2165ffaee00b1fbbdd2d40aa85232dab6998f53b"
@@ -778,6 +786,11 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.2.0.tgz#0feb685f16de320e8520f13cca30779c8b7c403f"
   integrity sha512-XFtUHPI/abFhm4cbCDc5Ykc8npOKBSJePY3a3s+lwumt7XWJuzP5cZcfZ610MIPHjQjNsOLlYK8ASPaNG8UiyA==
 
+"@typescript-eslint/[email protected]":
+  version "8.18.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.18.0.tgz#3afcd30def8756bc78541268ea819a043221d5f3"
+  integrity sha512-FNYxgyTCAnFwTrzpBGq+zrnoTO4x0c1CKYY5MuUTzpScqmY5fmsh2o3+57lqdI3NZucBDCzDgdEbIaNfAjAHQA==
+
 "@typescript-eslint/[email protected]":
   version "7.18.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.18.0.tgz#b5868d486c51ce8f312309ba79bdb9f331b37931"
@@ -806,6 +819,20 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
+"@typescript-eslint/[email protected]":
+  version "8.18.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.18.0.tgz#d8ca785799fbb9c700cdff1a79c046c3e633c7f9"
+  integrity sha512-rqQgFRu6yPkauz+ms3nQpohwejS8bvgbPyIDq13cgEDbkXt4LH4OkDMT0/fN1RUtzG8e8AKJyDBoocuQh8qNeg==
+  dependencies:
+    "@typescript-eslint/types" "8.18.0"
+    "@typescript-eslint/visitor-keys" "8.18.0"
+    debug "^4.3.4"
+    fast-glob "^3.3.2"
+    is-glob "^4.0.3"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    ts-api-utils "^1.3.0"
+
 "@typescript-eslint/[email protected]":
   version "7.18.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.18.0.tgz#bca01cde77f95fc6a8d5b0dbcbfb3d6ca4be451f"
@@ -832,6 +859,14 @@
     "@typescript-eslint/types" "7.2.0"
     eslint-visitor-keys "^3.4.1"
 
+"@typescript-eslint/[email protected]":
+  version "8.18.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.18.0.tgz#7b6d33534fa808e33a19951907231ad2ea5c36dd"
+  integrity sha512-pCh/qEA8Lb1wVIqNvBke8UaRjJ6wrAWkJO5yyIbs8Yx6TNGYyfNjOo61tLv+WwLvoLPp4BQ8B7AHKijl8NGUfw==
+  dependencies:
+    "@typescript-eslint/types" "8.18.0"
+    eslint-visitor-keys "^4.2.0"
+
 "@u3u/prettier-config@^5.1.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@u3u/prettier-config/-/prettier-config-5.1.0.tgz#c6a91a99bda6c086056314355689ac5fd48a2691"
@@ -1905,6 +1940,11 @@ eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
+eslint-visitor-keys@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz#687bacb2af884fcdda8a6e7d65c606f46a14cd45"
+  integrity sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==
+
 eslint@^8:
   version "8.57.1"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.1.tgz#7df109654aba7e3bbe5c8eae533c5e461d3c6ca9"