From 41b39bda694bd3e1965d34c914a02af86d96715b Mon Sep 17 00:00:00 2001 From: Robert S Date: Wed, 13 Oct 2021 18:42:23 +0200 Subject: [PATCH] Cleaned up the code and made it use flexbox Oh and there's also a nav indicator now :) --- components/Footer.js | 2 +- components/NavLink.js | 18 ++++++ components/Navbar.js | 24 +++++--- pages/about.js | 72 ++++++++++++----------- pages/contact.js | 130 +++++++++++++++++++++-------------------- pages/index.js | 26 +++++---- pages/work.js | 132 ++++++++++++++++++++++-------------------- 7 files changed, 223 insertions(+), 181 deletions(-) create mode 100644 components/NavLink.js diff --git a/components/Footer.js b/components/Footer.js index 2c7e192..0148274 100644 --- a/components/Footer.js +++ b/components/Footer.js @@ -11,7 +11,7 @@ export default function Footer() { Robert S. - + Email diff --git a/components/NavLink.js b/components/NavLink.js new file mode 100644 index 0000000..86c8df7 --- /dev/null +++ b/components/NavLink.js @@ -0,0 +1,18 @@ +import React from 'react' +import Link from 'next/link' +import { useRouter } from 'next/router' + +const NavLink = ({ href, children }) => { + const router = useRouter() + + let className = children.props.className || '' + if (router.pathname === href) { + className = `${className} text-white` + } else { + className = `${className} text-gray-400` + } + + return {React.cloneElement(children, { className })} +} + +export default NavLink \ No newline at end of file diff --git a/components/Navbar.js b/components/Navbar.js index b3346e4..7e08d8f 100644 --- a/components/Navbar.js +++ b/components/Navbar.js @@ -1,5 +1,6 @@ import Link from "next/link"; import {useState} from "react"; +import NavLink from "./NavLink"; export default function Navbar() { const [active, setActive] = useState(false) @@ -43,21 +44,26 @@ export default function Navbar() { active ? "flex" : "hidden" } md:ml-auto md:flex flex-wrap flex-col md:flex-row md:space-x-4 items-center w-full pt-2 md:pt-0 md:w-auto text-lg justify-center font-semibold`} > - - + + + Home + + + + Work - - - + + + About - - - + + + Contact - + diff --git a/pages/about.js b/pages/about.js index 2b26562..07ade95 100644 --- a/pages/about.js +++ b/pages/about.js @@ -16,45 +16,49 @@ export default function About() { -
+
-
- -

- About me -

-
-
-

- Hey, I'm Robert - a full-stack developer from the Netherlands with approximately three years of back-end and five years of front-end development experience. Nowadays, I mainly use Next.js, TailwindCSS and Python for my projects, but I have used different tools and frameworks in the past. I also love the open-source community, and this website is open-source too :). My coding knowledge is mostly based on many years of experimenting and trying, and I am happy to have made it this far. -

-
-

- I can use the following technologies/frameworks mostly fluently: -

-
    -
  • HTML, CSS & JS
    • -
  • TailwindCSS, Bootstrap, UIkit & Cirrus UI
    • -
  • Python
    • -
  • Flask & similar frameworks (like Sanic)
    • -
  • MySQL, PostgreSQL, MongoDB, Redis
    • -
-

- And I am currently learning the following technologies/frameworks: -

-
    -
  • Go
    • -
  • Rust
    • -
  • React/Next.js
    • -
  • Docker
    • -
+
+
+
+ +

+ About me +

+
+
+

+ Hey, I'm Robert - a full-stack developer from the Netherlands with approximately three years of back-end and five years of front-end development experience. Nowadays, I mainly use Next.js, TailwindCSS and Python for my projects, but I have used different tools and frameworks in the past. I also love the open-source community, and this website is open-source too :). My coding knowledge is mostly based on many years of experimenting and trying, and I am happy to have made it this far. +

+
+

+ I can use the following technologies/frameworks mostly fluently: +

+
    +
  • HTML, CSS & JS
    • +
  • TailwindCSS, Bootstrap, UIkit & Cirrus UI
    • +
  • Python
    • +
  • Flask & similar frameworks (like Sanic)
    • +
  • MySQL, PostgreSQL, MongoDB, Redis
    • +
+

+ And I am currently learning the following technologies/frameworks: +

+
    +
  • Go
    • +
  • Rust
    • +
  • React/Next.js
    • +
  • Docker
    • +
+
+
-
+
- +
+
-
) } diff --git a/pages/contact.js b/pages/contact.js index 1fbabee..3a179d5 100644 --- a/pages/contact.js +++ b/pages/contact.js @@ -16,72 +16,78 @@ export default function Contact() { -
+
- -
-

- Contact me -

-

- Want to get in touch, or just want to have a chat? Well, here's your chance! :) -

-
-
-
- - - Email - - -

admin@robert-s.dev

- - - - GitHub - - -

Wallvon

- - {navigator.clipboard.writeText("That Guy#5275")}} className="bg-gray-800 text-white p-4 text-center rounded gap-3 cursor-pointer has-tooltip"> - - Discord - - - Click to copy -

That Guy#5275

- - - - LinkedIn - - - -

Robert Stokreef

- - - - Twitter - - -

ThatGuy5275

- - - - Instagram - - - -

robert.__.s

- + +
-
) } diff --git a/pages/index.js b/pages/index.js index c9dd50f..644a97f 100644 --- a/pages/index.js +++ b/pages/index.js @@ -16,22 +16,24 @@ export default function Home() { -
+
-
-
- -

- Hi there, I'm Robert S. -

-

- Developer & Tech enthusiast -

- +
+
+
+ +

+ Hi there, I'm Robert S. +

+

+ Developer & Tech enthusiast +

+ +
+
-
) } diff --git a/pages/work.js b/pages/work.js index 03716ab..c30a0ad 100644 --- a/pages/work.js +++ b/pages/work.js @@ -16,75 +16,81 @@ export default function Work() { -
+
- -
-

- My work -

-

- Featured & recent projects -

-
-
-
-
-

- Coming soon -

-
-
-
-
-

Lorem Ipsum

-

- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. -

-
- - - GitHub - - - - - - Link - - - - - +
+
+
+ +
+

+ My work +

+

+ Featured & recent projects +

-
-
-

Lorem Ipsum

-

- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. -

-
- - - GitHub - - - - - - Link - - - - - +
+
+
+

+ Coming soon +

+
+
+
+
+

Lorem Ipsum

+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. +

+ +
+
+

Lorem Ipsum

+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. +

+ +
+
-
+
- +
+
-
) }