Merge pull request #56 from w3bdesign/develop

Forside og footer arbeid

__tests__/index.test.jsx

@@ -16,10 +16,10 @@ describe("Home", () => {
     expect(welcometoNext).not.toBeInTheDocument();
   });
 
-  it("Velkommen til Index eksisterer", () => {
+  it("Om Meg eksisterer", () => {
     render(<Home />);
     const velkommen = screen.getByRole("heading", {
-      name: /velkommen til Index/i,
+      name: /Om Meg/i,
     });
     expect(velkommen).toBeInTheDocument();
   });

package.json

@@ -18,7 +18,8 @@
     "next": "^12.0.7",
     "prettier": "2.5.1",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "react-icons": "^4.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",

src/components/Index/IndexContent.component.tsx

@@ -1,14 +1,77 @@
+import Link from "next/link";
+
 import type { NextComponentType } from "next";
 
 const IndexContent: NextComponentType = () => {
   return (
-    <div>
-      <main>
-        <h1 className="text-5xl text-rose-500 text-center">
-          Velkommen til Index denne er fra komponenten
-        </h1>
-      </main>
-    </div>
+    <main role="main" aria-label="Her kommer hovedinnholdet" id="maincontent">
+      <div className="mx-auto mt-16 rounded lg:mt-20 xl:mt-20 bg-graybg shadow-large md:mt-16 sm:mt-64 xs:mt-64">
+        <div
+          role="article"
+          aria-label="Kontainer for animasjoner av introtekst"
+          id="main-hero"
+          className="flex flex-col justify-center text-lg">
+          <div className="p-2 mt-4 mb-4 bg-white opacity-75">
+            <div className="text-black rounded">
+              <section aria-label="Introduksjonstekst">Introduksjonstekst</section>
+            </div>
+          </div>
+        </div>
+        <div className="container grid gap-4 p-4 mx-auto mt-2 lg:grid-cols-2 sm:grid-cols-1 md:grid-cols-1 xs:grid-cols-1">
+          <div className="p-8 text-lg text-black bg-white rounded shadow">
+            <section aria-label="Hovedinnhold om meg">
+              <h1 className="text-3xl text-center">Om Meg</h1>
+              <p
+                role="article"
+                aria-label="Informasjon om mine ferdigheter"
+                className="mt-6 text-lg">
+                Siden 2000 har jeg arbeidet med webutvikling. Jeg har arbeidet med WordPress og
+                WooCommerce siden 2011 hvor jeg har arbeidet frilans via Fiverr og kan skilte med
+                100% positiv tilbakemelding på samtlige oppdrag.
+              </p>
+              <p role="article" aria-label="Info om open-source bidrag" className="mt-6 text-lg">
+                Har også bidratt til flere open-source prosjekter på Github.
+              </p>
+              <p
+                role="article"
+                aria-label="Info om andre teknologier jeg har jobbet med"
+                className="mt-6 text-lg">
+                Jeg har også erfaring med andre teknologier som moderne Javascript (ES6+), Node.js,
+                Firebase, Context, Redux, Axios, Docker, Storybook, NextJS, Gatsby, MongoDB,
+                OpenCart, Magento med mer.
+              </p>
+            </section>
+          </div>
+          <div className="p-8 text-lg text-black bg-white rounded shadow">
+            <section aria-label="Github seksjon">
+              <h1 className="text-3xl text-center">Prosjekter</h1>
+              <p
+                role="article"
+                aria-label="Informasjon om Github og prosjekter"
+                className="mt-6 text-lg">
+                Jeg arbeider jevnlig med hobbyprosjekter.
+                <br />
+                <br />
+                Kildekoden publiserer jeg på
+                <Link href="https://github.com/w3bdesign">
+                  <a className="underline" target="_blank" rel="noopener noreferrer">
+                    {" "}
+                    GITHUB
+                  </a>
+                </Link>
+              </p>
+              <p className="mt-6 text-lg">
+                På{" "}
+                <Link href="/prosjekter">
+                  <a className="underline">PROSJEKTER</a>
+                </Link>
+                kan du se eksempler på arbeid jeg har gjort i nyere tid.
+              </p>
+            </section>
+          </div>
+        </div>
+      </div>
+    </main>
   );
 };
 

src/components/Layout/Footer.component.tsx

@@ -1,7 +1,21 @@
+import { BiCopyright } from "react-icons/bi";
+
 import type { NextComponentType } from "next";
 
 const Footer: NextComponentType = () => {
-  return <div>Footer kommer her</div>;
+  return (
+    <footer role="contentinfo" aria-label="Innholdet for bunnteksten med copyright">
+      <div className="mt-4 bg-gray-800 shadow">
+        <div
+          aria-label="Copyright tekst"
+          className="container p-6 mx-auto text-center text-white font-semibold">
+          Copyright Daniel Fjeldstad
+          <BiCopyright className="inline-block m-2" size="1.2em" />
+          {new Date().getFullYear()}
+        </div>
+      </div>
+    </footer>
+  );
 };
 
 export default Footer;

src/components/Layout/Navbar.component.tsx

@@ -34,17 +34,20 @@ function Navbar() {
               {LINKS.map((link) => (
                 <li key={link.id} className="mr-3">
                   {link.external ? (
-                    <Link aria-label={link.text} href={link.url}>
+                    <Link href={link.url}>
                       <a
                         rel="noopener noreferrer"
+                        aria-label={link.text}
                         target="_blank"
                         className="inline-block text-xl text-white transition ease-in-out duration-300  border-b-4 border-transparent hover:border-white">
                         {link.text}
                       </a>
                     </Link>
                   ) : (
                     <Link href={link.url}>
-                      <a className="inline-block text-xl text-white transition ease-in-out duration-300 border-b-4 border-transparent hover:border-white">
+                      <a
+                        aria-label={link.text}
+                        className="inline-block text-xl text-white transition ease-in-out duration-300 border-b-4 border-transparent hover:border-white">
                         {link.text}
                       </a>
                     </Link>