Migrate to app router (#5)

* upgrade next.js and related packages

* move components, page and styles into src directory

* move files to app router

* add meta data + add about image

* Remove commented out code

* upgrade cypress

* downgrade to cypress@13.5.1

* change component ubuntu version

* Cypress cli error (#6)

* remove start and wait-on for component tests

* downgrade next to @13.5.6

* remove viewport

* Reset GitHub Actions configuration and add theme color

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
-}
+  "extends": [
+    "next",
+    "next/core-web-vitals"
+  ]
+}

.github/workflows/cypress-tests.yml

@@ -70,7 +70,7 @@ jobs:
           COMMIT_INFO_SHA: ${{github.event.pull_request.head.sha}}
 
   component:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     needs: install
 
     strategy:
@@ -90,10 +90,6 @@ jobs:
         # Uses the official Cypress GitHub action https://github.com/cypress-io/github-action
         uses: cypress-io/github-action@v5
         with:
-          # Starts web server for E2E tests - replace with your own server invocation
-          # https://docs.cypress.io/guides/continuous-integration/introduction#Boot-your-server
-          start: yarn start
-          wait-on: "http://localhost:3000" # Waits for above
           # Records to Cypress Cloud
           # https://docs.cypress.io/guides/cloud/projects#Set-up-a-project-to-record
           record: true

README.md

@@ -5,7 +5,7 @@
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="./.github/assets/hero-section-dark.png">
       <source media="(prefers-color-scheme: light)" srcset="./.github/assets/hero-section.png">
-      <img alt="Image of hero section for portfolio website. Heading: Developing Solutions. Subheading: Hi, I am an aspiring Web Developer look fo rmy first real job experience (smiling face emoji). On the right side of the hero section there is an isometric home office with a computer desk, lamps and plants, in the style of 2d game art, navy and blue" src="./.github/assets/hero-section.png">
+      <img alt="Image of hero section for portfolio website. Heading: Developing Solutions. Subheading: Hi, I am an aspiring Web Developer. On the right side of the hero section there is an isometric home office with a computer desk, lamps and plants, in the style of 2d game art, navy and blue" src="./.github/assets/hero-section.png">
     </picture>
   </p>
 </a>

package.json

@@ -14,22 +14,22 @@
     "@types/react-dom": "18.2.7",
     "@vercel/analytics": "^1.0.1",
     "cypress-real-events": "^1.9.1",
-    "eslint": "8.45.0",
-    "eslint-config-next": "13.4.12",
+    "eslint": "8.55.0",
+    "eslint-config-next": "14.0.3",
     "framer-motion": "^10.13.1",
-    "next": "13.4.10",
+    "next": "13.5.6",
     "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-use-measure": "^2.1.1",
-    "sharp": "^0.32.4",
+    "sharp": "^0.33.0",
     "tailwind-merge": "^1.14.0",
-    "typescript": "5.1.6"
+    "typescript": "5.3.3"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
     "autoprefixer": "^10.4.14",
-    "cypress": "^12.17.2",
+    "cypress": "13.5.1",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.3.3"
   }

pages/about/index.tsx → src/app/about/page.tsx

@@ -1,9 +1,22 @@
+import { type Metadata } from "next";
+import Image from "next/image";
+
 export default function About() {
   return (
-    <main className='mt-10 md:mt-40 duration-200 bg-zinc-100 dark:bg-zinc-800 min-h-[90vh] px-4 lg:px-6 py-16'>
-      <div className='max-w-5xl mx-auto space-y-12'>
+    <main className='mt-10 md:mt-24 duration-200 bg-zinc-100 dark:bg-zinc-800 min-h-[90vh]  py-16'>
+      <div className='relative w-full h-72'>
+        <Image
+          src='/images/office.png'
+          className='object-cover w-full h-full'
+          alt='image'
+          sizes='100vw'
+          fill
+          priority
+        />
+      </div>
+      <div className='max-w-5xl px-4 mx-auto mt-16 space-y-12 lg:px-6'>
         <section>
-          <h1 className='text-5xl'>About</h1>
+          <h1 className='text-5xl md:text-6xl'>About</h1>
           <p className='mt-8 text-lg'>
             This website serves as a platform to showcase my personal projects and academic assignments.
           </p>
@@ -26,3 +39,7 @@ export default function About() {
     </main>
   );
 }
+
+export const metadata: Metadata = {
+  title: "About | Niklas Fischer",
+};

src/app/layout.tsx

@@ -0,0 +1,39 @@
+import { Analytics } from "@vercel/analytics/react";
+
+import { Navbar } from "@/components/navbar";
+import { Footer } from "@/components/footer";
+
+import "@/app/globals.css";
+
+import { type Metadata } from "next";
+import { Providers } from "@/app/providers";
+
+export const metadata: Metadata = {
+  title: "Niklas Fischer",
+  description: "The portfolio of Niklas Fischer",
+  viewport: "width=device-width, initial-scale=1, minimum-scale=1",
+  themeColor: "#4f46e5",
+};
+
+// Use this for next@14
+// export const viewport: Viewport = {
+//   width: "device-width",
+//   initialScale: 1,
+//   minimumScale: 1,
+//   themeColor: "#4f46e5",
+// };
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang='en' suppressHydrationWarning>
+      <body>
+        <Providers>
+          <Navbar />
+          {children}
+          <Footer />
+        </Providers>
+        <Analytics />
+      </body>
+    </html>
+  );
+}

pages/index.tsx → src/app/page.tsx

@@ -1,8 +1,8 @@
-import { LandingPage } from "components/landingPage";
-import { Projects } from "components/projects";
-import { Skills } from "components/skills";
-import { Assignments } from "components/assignments";
-import { Profile } from "components/profile/profile";
+import { LandingPage } from "@/components/landingPage";
+import { Projects } from "@/components/projects";
+import { Skills } from "@/components/skills";
+import { Assignments } from "@/components/assignments";
+import { Profile } from "@/components/profile";
 
 export default function Home() {
   return (

pages/privacy/index.tsx → src/app/privacy/page.tsx

@@ -1,3 +1,5 @@
+import { Metadata } from "next";
+
 export default function Privacy() {
   return (
     <main className='p-4 mx-auto duration-200 lg:px-6 mt-28 pb-28 md:mt-40 bg-zinc-100 dark:bg-zinc-800'>
@@ -368,3 +370,7 @@ export default function Privacy() {
     </main>
   );
 }
+
+export const metadata: Metadata = {
+  title: "Privacy | Niklas Fischer",
+};

src/app/providers.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { MotionConfig } from "framer-motion";
+import { ThemeProvider } from "next-themes";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider enableSystem={true} attribute='class'>
+      <MotionConfig reducedMotion='user'>{children}</MotionConfig>
+    </ThemeProvider>
+  );
+}

components/assignments/assignments.cy.tsx → src/components/assignments/assignments.cy.tsx

@@ -2,7 +2,7 @@
 
 import { Assignments } from ".";
 
-import "../../styles/globals.css";
+import "@/app/globals.css";
 
 describe("<Assignments />", () => {
   it("should render assignments", () => {