feat: added project images

- added mobile navigation
schaechinger · Dec 8, 2023 · 91be4df · 91be4df
1 parent 200fa2e
commit 91be4df
Show file tree

Hide file tree

Showing 15 changed files with 133 additions and 33 deletions.
diff --git a/app/(pages)/(de)/projekte/[slug]/not-found.tsx b/app/(pages)/(de)/projekte/[slug]/not-found.tsx
@@ -9,10 +9,10 @@ export const metadata: Metadata = {
   title: 'Projekt nicht gefunden',
 };
 
-const ProjectNotFoundPage = (props: { params: { slug: string } }) => (
+const ProjectNotFoundPage = () => (
   <div className={`project-page page--error pt-4 lg:pt-10 lg:mr-80`}>
     <section id="project-not-found">
-      <h2>404 &ndash; Projekt nicht gefunden</h2>
+      <h2>Projekt nicht gefunden</h2>
 
 
       <p className="mb-4">

diff --git a/app/(pages)/(de)/projekte/[slug]/page.tsx b/app/(pages)/(de)/projekte/[slug]/page.tsx
@@ -4,8 +4,9 @@ import { notFound } from 'next/navigation';
 
 import LinkButton from '@components/LinkButton';
 import DetailBlock from '@components/projects/DetailBlock';
+import ProjectImages from '@components/projects/ProjectImages';
 import ProjectMasterData from '@components/projects/ProjectMasterData';
-import { loadProjectBySlug } from '@/app/lib/contentful';
+import { loadProjectBySlug } from '@lib/contentful';
 
 export interface ProjectPageProps {
   params: {
@@ -41,14 +42,28 @@ const ProjectPage = async ({ params }: ProjectPageProps) => {
     <div className={`project-page page--${project.slug} pt-4 lg:pt-10`}>
       <ProjectMasterData project={project} />
 
+      { project.details?.description
+        ? <DetailBlock id="beschreibung" title="Worum es geht" content={project.details.description} />
+        : null }
+
+      { project.images ? <ProjectImages images={project.images} slug={params.slug} /> : null }
+
       { project.details?.requirements
         ? <DetailBlock id="anforderungen" title="Anforderungen" content={project.details.requirements} />
         : null }
 
+      { project.details?.goal
+        ? <DetailBlock id="ziel" title="Ziel des Projekts" content={project.details.goal} />
+        : null }
+
       { project.details?.implementation
         ? <DetailBlock id="umsetzung" title="Umsetzung des Projekts" content={project.details.implementation} />
         : null }
 
+      { project.details?.features
+        ? <DetailBlock id="features" title="Features" content={project.details.features} />
+        : null }
+
       <section id="links" className="pt-10">
         <h3>Links</h3>
 

diff --git a/app/components/KonamiCode.tsx b/app/components/KonamiCode.tsx
@@ -69,7 +69,7 @@ const KonamiCode = () => {
       </p>
 
       { 10 <= index
-        ? <p className="mt-2">
+        ? <p className="mt-4">
           <LinkButton
             href={`mailto:manuel@schaechinger.com?subject=Projekt-Anfrage über Homepage [${
               code.map((c, i) => c[index - (i + 1)]).reverse().join('')}]`}

diff --git a/app/components/Footer.tsx → app/components/layout/Footer.tsx b/app/components/Footer.tsx → app/components/layout/Footer.tsx
@@ -1,9 +1,9 @@
 import Link from 'next/link';
 
-import SocialLinks from '@components/SocialLinks';
 import HeartEmpty from '@components/icons/HeartEmpty';
+import SocialLinks from '@components/layout/SocialLinks';
+import ThemeToggle from '@components/layout/ThemeToggle';
 import SnesButtons from '@components/mario/SnesButtons';
-import ThemeToggle from './ThemeToggle';
 
 const Footer = () => (
   <footer className="footer mb-6 mt-10 sm:text-left text-sm">

diff --git a/app/components/Sidebar.tsx → app/components/layout/Header.tsx b/app/components/Sidebar.tsx → app/components/layout/Header.tsx
@@ -1,11 +1,11 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
-import Logo from '@components/Logo';
-import SocialLinks from '@components/SocialLinks';
-import ThemeToggle from '@components/ThemeToggle';
+import Logo from '@components/layout/Logo';
+import Navigation from '@components/layout/Navigation';
+import SocialLinks from '@components/layout/SocialLinks';
 
-const Sidebar = () => (
+const Header = () => (
   <header className="lg:sticky lg:top-0 lg:h-screen lg:flex-none lg:w-80 px-4 sm:px-10 md:px-20 lg:px-4">
     <div className="sm:flex items-center py-4 lg:py-10">
       <Link href="/">
@@ -21,23 +21,14 @@ const Sidebar = () => (
       <Logo />
     </div>
     <p className="hidden sm:block text-sm mb-4 lg:mb-10">Entwickler für skalierbare und<br
-      className="hidden lg:inline-block" /> performance-kritische Softwaresysteme.</p>
-    <nav className="hidden lg:flex lg:flex-col lg:gap-2 py-2">
-      { [
-          { link: '/#ueber-mich', label: 'Über mich' },
-          { link: '/lebenslauf', label: 'Berufserfahrung' },
-          { link: '/projekte', label: 'Projekte' },
-          { link: '/kontakt', label: 'Kontakt' },
-        ].map((item) => (
-          <Link href={item.link} key={item.link} className="font-normal">{ item.label }</Link>
-        )) }
-        <ThemeToggle />
-    </nav>
+      className="hidden lg:inline" /> performance-kritische Softwaresysteme.</p>
+
+    <Navigation />
 
     <div className="hidden lg:block mt-4 lg:mt-10">
       <SocialLinks />
     </div>
   </header>
 );
 
-export default Sidebar;
+export default Header;
diff --git a/app/components/Logo.tsx → app/components/layout/Logo.tsx b/app/components/Logo.tsx → app/components/layout/Logo.tsx
diff --git a/app/components/layout/Navigation.tsx b/app/components/layout/Navigation.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import ThemeToggle from '@components/layout/ThemeToggle';
+
+const Navigation = () => {
+  const path = usePathname();
+
+  return (
+    <nav className="flex overflow-x-visible lg:flex-col gap-4 lg:gap-2 py-2 border-b-2 border-b-primary-100 lg:border-b-0">
+      <Link
+        href="/#ueber-mich"
+        className={`hidden lg:block font-normal${'/' === path ? ' text-primary-500 dark:text-primary-500' : ''}`}
+      >Über mich</Link>
+      { [
+        { link: '/lebenslauf', label: 'Erfahrung' },
+        { link: '/projekte', label: 'Projekte' },
+        { link: '/kontakt', label: 'Kontakt' },
+      ].map((item) => (
+        <Link
+          href={item.link}
+          key={item.link}
+          className={`font-normal${path.startsWith(item.link) ? ' text-primary-500 dark:text-primary-500' : ''}`}
+        >{ item.label }</Link>
+      )) }
+      <div className="hidden lg:block">
+        <ThemeToggle />
+      </div>
+    </nav>
+  );
+};
+
+export default Navigation;
diff --git a/app/components/SocialLinks.tsx → app/components/layout/SocialLinks.tsx b/app/components/SocialLinks.tsx → app/components/layout/SocialLinks.tsx
diff --git a/app/components/ThemeToggle.tsx → app/components/layout/ThemeToggle.tsx b/app/components/ThemeToggle.tsx → app/components/layout/ThemeToggle.tsx
diff --git a/app/components/projects/ProjectImages.tsx b/app/components/projects/ProjectImages.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import Image from 'next/image';
+
+import { ProjectImage } from '@models/project';
+import { useState } from 'react';
+
+interface ProjectImagesProps {
+  slug: string;
+  images: ProjectImage[];
+}
+
+const ProjectImages = ({ slug, images }: ProjectImagesProps) => {
+  const [selected, setSelected] = useState(0);
+
+  return (
+    <div className="grid gap-4 mt-10">
+        <div>
+            <Image
+              src={`https://images.schaechinger.com/projects/${slug}/${images[selected].src}`}
+              width={1024}
+              height={576}
+              alt={images[selected].label || ''}
+              className="h-auto max-w-full rounded-lg"
+            />
+        </div>
+        { 1 < images.length
+          ? <div className="grid grid-cols-6 gap-x-2">
+            { images.map((image, i) => (
+              <div key={image.src + i} className="cursor-pointer" onClick={() => setSelected(i)}>
+                <Image
+                  src={`https://images.schaechinger.com/projects/${slug}/${image.src}`}
+                  width={160}
+                  height={90}
+                  alt={image.label || ''}
+                  className={`h-auto max-w-full rounded-lg${i === selected ? ' border-2' : ''} border-slate-300`}
+                />
+              </div>
+            )) }
+        </div> : null }
+      </div>
+  );
+};
+
+export default ProjectImages;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,13 +1,13 @@
 import type { Metadata } from 'next';
 
 import { locale } from '@app/utils';
-import Footer from '@components/Footer';
-import Sidebar from '@components/Sidebar';
+import Footer from '@components/layout/Footer';
+import Header from '@components/layout/Header';
 
 import '@/css/style.scss';
 import Provider from './provider';
 
-export const revalidate = 3600;
+export const revalidate = 600;
 
 export const metadata: Metadata = {
   title: {
@@ -26,7 +26,7 @@ const RootLayout = ({ children }: RootLayoutProps) => (
       <body className="dark:text-dark-200 dark:bg-dark-800">
       <Provider>
         <div className="lg:flex lg:gap-8 w-full max-w-screen-xl mx-auto">
-          <Sidebar />
+          <Header />
 
           <div className="lg:flex-auto lg:w-3/4 px-4 sm:px-10 md:px-20 lg:px-4">
             <main className="min-h-screen">

diff --git a/app/lib/contentful.ts b/app/lib/contentful.ts
@@ -1,10 +1,9 @@
 import { ContentfulClientApi, Entry, EntryCollection, EntryFieldTypes, createClient } from 'contentful';
+import { cache } from 'react';
 
-import { locale } from '@app/utils';
 import { AvailabilityData } from '@models/availability';
 import { CareerData, sortCareerList } from '@models/career';
 import { ProjectData } from '@models/project';
-import { cache } from 'react';
 
 let instance: ContentfulClientApi<any> | null = null;
 

diff --git a/app/models/project.ts b/app/models/project.ts
@@ -7,6 +7,11 @@ export interface ProjectLink {
   label: string;
 }
 
+export interface ProjectImage {
+  src: string;
+  label?: string;
+}
+
 export interface ProjectData extends CareerData {
   links?: {
     project?: ProjectLink;
@@ -15,8 +20,12 @@ export interface ProjectData extends CareerData {
   };
   type: ProjectType;
   highlight?: boolean;
+  images?: ProjectImage[];
   details?: {
+    description?: string[];
+    goal?: string[];
     requirements?: string[];
     implementation?: string[];
+    features?: string[];
   };
 }
diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -1,10 +1,16 @@
+import { Metadata } from 'next';
+
 import KonamiCode from '@components/KonamiCode';
 import LinkButton from '@components/LinkButton';
 
+export const metadata: Metadata = {
+  title: 'Seite nicht gefunden',
+};
+
 const NotFound = () => (
   <div className="not-found-page pt-4 lg:pt-10 lg:mr-80">
     <section>
-      <h2>404 &ndash; Seite nicht gefunden</h2>
+      <h2>Seite nicht gefunden</h2>
 
       <p className="mb-4">
         Hier geht es nicht weiter, bitte gehen Sie zur Startseite oder wählen Sie einen

diff --git a/package.json b/package.json
@@ -9,15 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@slack/web-api": "6.10.0",
-    "contentful": "10.6.14",
+    "@slack/web-api": "^6.10.0",
+    "contentful": "^10.6.14",
     "mongodb": "^6.3.0",
     "next": "^14.0.3",
     "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
     "sharp": "^0.33.0",
-    "zod": "3.22.4"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/node": "^20",