Merge pull request #1 from Yeetomeister/patch1-add-htb-and-thm-links

Patch1 add htb and thm links

README.md

@@ -1,5 +1,7 @@
 ## My sideproject website
+
 Made by me, to learn:
+
 - Next.js
 - Typescript
 - TailWindCSS

oppgaver/oppgave-4.md

@@ -29,11 +29,11 @@ import Link from "next/link";
 export function Navigation() {
   return (
     <nav className="flex gap-4">
-      <Link href="/">
-        <a className="text-blue-300 hover:text-blue-100">Hjem</a>
+      <Link className="text-blue-300 hover:text-blue-100" href="/">
+        Hjem
       </Link>
-      <Link href="/prosjekter">
-        <a className="text-blue-300 hover:text-blue-100">Prosjekter</a>
+      <Link className="text-blue-300 hover:text-blue-100" href="/prosjekter">
+        Prosjekter
       </Link>
     </nav>
   );

package.json

@@ -11,21 +11,21 @@
     "format:check": "prettier --check ."
   },
   "dependencies": {
-    "next": "14.1.3",
+    "next": "14.1.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@types/node": "20.11.30",
-    "@types/react": "18.2.67",
-    "@types/react-dom": "18.2.22",
-    "autoprefixer": "10.4.18",
+    "@types/react": "18.2.73",
+    "@types/react-dom": "18.2.23",
+    "autoprefixer": "10.4.19",
     "eslint": "8.57.0",
-    "eslint-config-next": "14.1.3",
+    "eslint-config-next": "14.1.4",
     "eslint-config-prettier": "^9.1.0",
-    "postcss": "8.4.37",
+    "postcss": "8.4.38",
     "prettier": "^3.2.5",
-    "tailwindcss": "3.4.1",
-    "typescript": "5.4.2"
+    "tailwindcss": "3.4.3",
+    "typescript": "5.4.3"
   }
 }

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "Trym Site",
+  "short_name": "Trym",
+  "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"
+}

src/app/components/HTBandTHMlinks.tsx

@@ -1,7 +1,3 @@
 export function ProjectList() {
-    return (
-        <div>
-
-        </div>
-    )
-}
+  return <div></div>;
+}

src/app/components/navigation.tsx

@@ -0,0 +1,21 @@
+import Link from "next/link";
+
+export function Navigation() {
+  return (
+    <div className="flex justify-center">
+      <nav className="flex gap-4 text-center">
+        <Link href="/">
+          <a className="text-emerald-950 hover:text-blue-200">Hjem</a>
+        </Link>
+        <Link href="/my-links">
+          <a className="text-emerald-950 hover:text-blue-200">
+            Link to my HTB, THM, GitHub and LinkedIn
+          </a>
+        </Link>
+        <Link href="/my-projects">
+          <a className="text-emerald-950 hover:text-blue-200">My projects</a>
+        </Link>
+      </nav>
+    </div>
+  );
+}

src/app/components/project-list.tsx

@@ -1,27 +1,27 @@
 export function ProjectList() {
-    return (
-        <div>
-            <h2 className="text-2xl mb-4">Mine prosjekter:</h2>
-            <ul className="pl-4 list-disc space-y-4">
-                <li>
-                    <h3 className="text-lg">Tetris</h3>
-                    <p className="text-sm">Semesteroppgave jeg hadde i INF101</p>
-                </li>
-                <li>
-                    <h3 className="text-lg">TowerDefense</h3>
-                    <p className="text-sm">Semesteroppgave jeg hadde i INF101</p>
-                </li>
-                <li>
-                    <h3 className="text-lg">TowerDefense i libGDX</h3>
-                    <p className="text-sm">Oppgave i INF112</p>
-                </li>
-                <li>
-                    <h3 className="text-lg">Egen hjemmeside</h3>
-                    <p className="text-sm">
-                        En nettside jeg laget på workshop med echo Webkom
-                    </p>
-                </li>
-            </ul>
-        </div>
-    )
-}
+  return (
+    <div>
+      <h2 className="text-2xl mb-4">Mine prosjekter:</h2>
+      <ul className="pl-4 list-disc space-y-4">
+        <li>
+          <h3 className="text-lg">Tetris</h3>
+          <p className="text-sm">Semesteroppgave jeg hadde i INF101</p>
+        </li>
+        <li>
+          <h3 className="text-lg">TowerDefense</h3>
+          <p className="text-sm">Semesteroppgave jeg hadde i INF101</p>
+        </li>
+        <li>
+          <h3 className="text-lg">TowerDefense i libGDX</h3>
+          <p className="text-sm">Oppgave i INF112</p>
+        </li>
+        <li>
+          <h3 className="text-lg">Egen hjemmeside</h3>
+          <p className="text-sm">
+            En nettside jeg laget på workshop med echo Webkom
+          </p>
+        </li>
+      </ul>
+    </div>
+  );
+}

src/app/layout.tsx

@@ -1,8 +1,9 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import Head from "next/head";
 
 export const metadata: Metadata = {
-  title: "Trym Jakobsen",
+  title: "Trym",
 };
 
 export default function RootLayout({
@@ -11,11 +12,17 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="no">
-      <body>
-        {/* <Navigation /> */}
-        {children}
-      </body>
-    </html>
+    <>
+      <Head>
+        <title>{metadata.title as string}</title>
+        <link rel="manifest" href="/site.webmanifest" />
+      </Head>
+      <html lang="no">
+        <body>
+          {/* <Navigation /> */}
+          {children}
+        </body>
+      </html>
+    </>
   );
 }

src/app/my-links/page.tsx

@@ -0,0 +1,12 @@
+import { ProjectList } from "@/app/components/project-list";
+import { Navigation } from "@/app/components/navigation";
+export default function MyLinks() {
+  return (
+    <div className="flex flex-col min-h-screen bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
+      <div className="max-w-screen-sm mx-auto text-lg flex flex-col gap-6 py-24">
+        <Navigation />
+        <h2 className="text-2xl text-gray-100 mb-4">My links:</h2>
+      </div>
+    </div>
+  );
+}

src/app/my-projects/page.tsx

@@ -0,0 +1,14 @@
+import { ProjectList } from "@/app/components/project-list";
+import { Navigation } from "@/app/components/navigation";
+
+export default function Projects() {
+  return (
+    <div className="flex flex-col min-h-screen bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
+      <div className="max-w-screen-sm mx-auto text-lg flex flex-col gap-6 py-24">
+        <Navigation />
+        <h2 className="text-2xl text-gray-100 mb-4">Mine prosjekter</h2>
+        <ProjectList />
+      </div>
+    </div>
+  );
+}

src/app/page.tsx

@@ -1,31 +1,31 @@
-import {ProjectList} from "@/app/components/project-list";
+import { ProjectList } from "@/app/components/project-list";
+import { Navigation } from "@/app/components/navigation";
 
 export default function Home() {
   return (
-      <div className="flex flex-col min-h-screen bg-gradient-to-b from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%">
-        <Header />
-          <br/>
-          <div className="flex-grow text-center">
-                <ProjectList />
-          </div>
-          <Footer />
+    <div className="flex flex-col min-h-screen bg-gradient-to-b from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%">
+      <Header />
+      <br />
+      <div className="flex-grow">
+        <Navigation />
       </div>
+      <Footer />
+    </div>
   );
 
-    function Header() {
-        return (
-            <div>
-                <h1 className="text-4xl flex-grow text-center">Velkommen</h1>
-            </div>
-        );
-    }
-
-    function Footer() {
-        return (
-            <div>
-                <p className="text-center p-4">Made by Trym, as a hobby project</p>
-            </div>
-        );
-    }
+  function Header() {
+    return (
+      <div>
+        <h1 className="text-4xl flex-grow text-center">Velkommen</h1>
+      </div>
+    );
+  }
 
-}
+  function Footer() {
+    return (
+      <div>
+        <p className="text-center p-4">Made by Trym, as a hobby project</p>
+      </div>
+    );
+  }
+}