feat: add basic About page with skill display

package.json

@@ -26,6 +26,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.13.5",
+    "@portabletext/react": "^3.0.4",
     "@sanity/client": "^6.1.4",
     "@sanity/code-input": "^4.1.1",
     "@sanity/document-internationalization": "^2.0.1",

src/app/(public)/about/page.tsx

@@ -0,0 +1,60 @@
+import { PortableText } from '@portabletext/react';
+import Image from 'next/image';
+import * as React from 'react';
+
+import { skillQuery } from '@/queries/skills';
+
+import { sanityClient } from '../../../../sanity/lib/client';
+
+import { Skill } from '@/types/Skill';
+import { SkillIcon } from '@/types/SkillIcon';
+
+const getData = async () => {
+  const skills: Skill[] = await sanityClient.fetch(skillQuery);
+
+  return {
+    skills,
+  };
+};
+
+const AboutPage = async () => {
+  const { skills } = await getData();
+
+  const iconDimension = 36;
+
+  return (
+    <main className='min-h-main'>
+      <section>
+        <div className='layout relative flex flex-col py-12'>
+          <h1 className='mb-5'>About</h1>
+
+          <div className='grid grid-cols-1 gap-5 md:grid-cols-3 md:gap-10'>
+            {skills.map((skill: Skill) => (
+              <div key={skill.name} className='skill-container'>
+                <div className='flex'>
+                  {skill.icons.map((icon: SkillIcon) => (
+                    <Image
+                      key={icon._id}
+                      height={iconDimension}
+                      width={iconDimension}
+                      alt={icon.title}
+                      src={icon.url}
+                    />
+                  ))}
+                </div>
+
+                <h3>{skill.title}</h3>
+
+                <span className='skill-description text-justify font-light'>
+                  <PortableText value={skill.description} />
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default AboutPage;

src/app/(public)/page.tsx

@@ -4,10 +4,10 @@ import Seo from '@/components/Seo';
 
 const HomePage = async () => {
   return (
-    <main>
+    <main className='min-h-main'>
       <Seo templateTitle='Home' />
 
-      <section className='dark:bg-dark min-h-main bg-white'>
+      <section className='dark:bg-dark bg-white'>
         <div className='layout relative flex flex-col items-center justify-center py-12 text-center'>
           Homepage :)
         </div>

src/pages/api/skill-icons.ts

@@ -0,0 +1,15 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+import { skillIconQuery } from '@/queries/skill-icons';
+
+import { sanityClient } from '../../../sanity/lib/client';
+
+import { SkillIcon } from '@/types/SkillIcon';
+
+const skillIconsApi = async (req: NextApiRequest, res: NextApiResponse) => {
+  const skillIcons: SkillIcon[] = await sanityClient.fetch(skillIconQuery);
+
+  res.status(200).json(skillIcons);
+};
+
+export default skillIconsApi;

src/queries/skill-icons.ts

@@ -0,0 +1,4 @@
+import { groq } from 'next-sanity';
+
+export const skillIconQuery = groq`
+*[_type == "skillIcon"]`;

src/queries/skills.ts

@@ -4,4 +4,10 @@ export const skillQuery = groq`
 *[_type == "skill"] {
   name,
   title,
+  description,
+  'icons': icons[]-> {
+    _id,
+    title,
+    "url": icon.asset->url
+  }
 }`;

src/styles/globals.css

@@ -42,7 +42,7 @@
 @layer base {
   /* inter var - latin */
   @font-face {
-    font-family: 'Inter';
+    font-family: 'Roboto Light';
     font-style: normal;
     font-weight: 100 900;
     font-display: optional;
@@ -222,4 +222,18 @@
     width: 0%;
     left: 50%;
   }
+
+  p a {
+    color: var(--color-primary-600);
+    text-decoration: none;
+  }
+
+  p a:hover {
+    color: var(--color-primary-700);
+    text-decoration: underline;
+  }
+
+  .short-p {
+    text-justify: distribute;
+  }
 }

src/types/Skill.ts

@@ -1,8 +1,10 @@
+import { TypedObject } from '@portabletext/types';
+
 import { SkillIcon } from '@/types/SkillIcon';
 
 export interface Skill {
   name: string;
   title: string;
-  description: string;
+  description: TypedObject;
   icons: SkillIcon[];
 }

src/types/SkillIcon.ts

@@ -1,4 +1,5 @@
 export interface SkillIcon {
+  _id: string;
   title: string;
   url: string;
 }

tailwind.config.ts

@@ -7,7 +7,7 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        primary: ['Inter', ...defaultTheme.fontFamily.sans],
+        primary: ['Roboto Thin', ...defaultTheme.fontFamily.sans],
       },
       colors: {
         primary: {

yarn.lock

@@ -3682,6 +3682,26 @@
   resolved "https://verdaccio.mein-recycling.de/@popperjs%2fcore/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
+"@portabletext/react@^3.0.4":
+  version "3.0.4"
+  resolved "https://verdaccio.mein-recycling.de/@portabletext%2freact/-/react-3.0.4.tgz#cd1316c782b227fad206fd3147e1c9d60aa933a8"
+  integrity sha512-M15IXRgoOgWiu3WxwdCZPpi/0sdP2KrMcRKCZFHI4D2nkhXO1A8Avs6Djc+uPg5ayfnCxewLl/FnXA0hFgccBw==
+  dependencies:
+    "@portabletext/toolkit" "^2.0.4"
+    "@portabletext/types" "^2.0.5"
+
+"@portabletext/toolkit@^2.0.4":
+  version "2.0.4"
+  resolved "https://verdaccio.mein-recycling.de/@portabletext%2ftoolkit/-/toolkit-2.0.4.tgz#5e5d4461f3451736c3165962b4a39d0693c9834b"
+  integrity sha512-ZE+WntiZQ40vxMBu3/QXRbGjzL8/R2BOFgdf6danJOahvlL9lZ1/DDShyUsxNaAvoBarwGJtjuZVOcRJWcsVng==
+  dependencies:
+    "@portabletext/types" "^2.0.5"
+
+"@portabletext/types@^2.0.5":
+  version "2.0.5"
+  resolved "https://verdaccio.mein-recycling.de/@portabletext%2ftypes/-/types-2.0.5.tgz#89872bd5b25df8c1d917e13fe3f035cdf135ae0e"
+  integrity sha512-AceKp/Y6UIzvUe/T675oPKlO2Dnt1BVIiUpwhcplPzLeYqaYaWYvb7ricVyWj7j0rukYRgBRQdrTBvgo9E1D+g==
+
 "@reduxjs/toolkit@^1.9.0":
   version "1.9.5"
   resolved "https://verdaccio.mein-recycling.de/@reduxjs%2ftoolkit/-/toolkit-1.9.5.tgz#d3987849c24189ca483baa7aa59386c8e52077c4"