feat: Design improvements

Author: RobDearling

components/layout.tsx

@@ -24,18 +24,20 @@ export default function Layout({ children, home }: LayoutProps) {
         <meta name="og:title" content={siteTitle} />
         <meta name="twitter:card" content="summary_large_image" />
       </Head>
-      <header  className="container mx-auto mt-4">
-          <nav>
-            <div className="mt-4 lg:mt-16 px-4 lg:px-64 xl:px-64 mb-4 flex flex-row items-center gap-1">
-              <Link className={`text-sm ${pathname === '/' ? 'text-sky-400' : ''}`} href="/">
+      <header className="container mx-auto mt-4">
+          <nav className='flex justify-between mt-4 lg:mt-16 px-4 lg:px-64 xl:px-64 mb-4 text-lg'>
+            <Link href="/" id='title' className='font-bold'>WreckItRob<span className='text-sky-400'>.</span>dev</Link>
+            <div className="flex flex-row items-center font-semibold">
+              <Link className={`nav-item ${pathname === '/' ? 'nav-active' : ''}`} href="/">
                 Home
               </Link>
-              <Link className={`text-sm ml-2 ${pathname === '/blog' ? 'text-sky-400' : ''}`} href="/blog">Blog</Link>
-              <Link className={`text-sm ml-2 ${pathname === '/riddles' ? 'text-sky-400' : ''}`} href={`/riddles`}>Riddles</Link> 
+              <Link className={`nav-item ${pathname === '/blog' ? 'nav-active' : ''}`} href="/blog">Blog</Link>
+              <Link className={`nav-item ${pathname === '/riddles' ? 'nav-active' : ''}`} href={`/riddles`}>Riddles</Link> 
             </div>
           </nav>
         </header>
-      <main className="container mx-auto mt-4 lg:mt-12 px-4 lg:px-64 xl:px-64 mb-4">{children}</main>
+      <main className="container mx-auto mt-32 lg:mt-32 px-4 lg:px-64 xl:px-64 mb-4">{children}</main>
     </div>
   );
 }
+// #1D2228

pages/index.tsx

@@ -1,5 +1,5 @@
-import Head from 'next/head';
-import Layout, { siteTitle } from '../components/layout';
+import Head from "next/head";
+import Layout, { siteTitle } from "../components/layout";
 
 export default function Home() {
   return (
@@ -8,51 +8,24 @@ export default function Home() {
         <title>{siteTitle}</title>
       </Head>
       <div>
-      <div>
-        <p className="text-4xl font-bold">Hi, I&apos;m Rob 👋</p>
-        <p className="text-2xl font-bold">
-          welcome to my <span className="text-sky-400 inline">personal website</span>
-        </p>
-      </div>
-      <div className="mt-4">
-        <p className="text-lg">
-          I am a 29 year old SRE, Developer & Tech tinkerer from the UK.
-        </p>
-        <p className="text-lg mt-2">
-          Some of my interests include software development, cloud computing,
-          reverse engineering, automation, devops and security. I enjoy mostly
-          anything tech and I&apos;m always looking to explore new things.
-        </p>
-      </div>
-
-      <div className="mt-8">
-        <p className="text-2xl font-bold">projects</p>
-        <p className="text-lg mt-2">
-          some of my side projects are personal projects and as a result are not
-          public or open-source.
-        </p>
-        <div className="mt-4">
-          <div className="mt-4">
-            <p className="text-lg text-sky-400">wreckitrob.dev</p>
-            <p className="text-lg">my personal site (this one!).</p>
-            <div className="mt-2 flex flex-wrap gap-y-2">
-              <span className="bg-sky-300 rounded-full px-3 py-1 text-sm font-semibold text-gray-800 mr-2">
-                Next.js
-              </span>
-              <span className="bg-sky-300 rounded-full px-3 py-1 text-sm font-semibold text-gray-800 mr-2">
-                Node.js
-              </span>
-              <span className="bg-sky-300 rounded-full px-3 py-1 text-sm font-semibold text-gray-800 mr-2">
-                React
-              </span>
-              <span className="bg-sky-300 rounded-full px-3 py-1 text-sm font-semibold text-gray-800 mr-2">
-                TailwindCSS
-              </span>
-            </div>
-          </div>
+        <div>
+          <p className="text-5xl font-bold">Hi, I&apos;m Rob 👋</p>
+          <p className="text-2xl font-semibold">
+            welcome to my{" "}
+            <span className="text-sky-400 inline">personal website</span>
+          </p>
+        </div>
+        <div className="mt-8 text-xl">
+          <p>
+            I'm a 29 year old SRE, Developer & Tech tinkerer from the UK.
+          </p>
+          <p className="mt-4">
+            Some of my interests include software development, cloud computing,
+            reverse engineering, automation, devops and security. I enjoy mostly
+            anything tech and I&apos;m always looking to explore new things.
+          </p>
         </div>
       </div>
-    </div>
     </Layout>
   );
 }

pages/riddles.tsx

@@ -193,7 +193,7 @@ export default function Riddles() {
           <div className="mt-8 text-sky-400">
             {revealed && <p className="text-3xl">{currentRiddle.answer}</p>}
           </div>
-          {!revealed ? <button onClick={revealAnswer}>Reveal Answer</button> : null}
+          {!revealed ? <button className="button-bg font-bold px-6 py-3 rounded-3xl" onClick={revealAnswer}>Reveal Answer</button> : null}
         </div>
       ) : (
         <p>Loading...</p>

styles/global.css

@@ -18,11 +18,29 @@
 
 body {
   color: #fff;
-  background-color:#18181b
+  background-color: #1D2228
 }
 
 @layer utilities {
   .text-balance {
     text-wrap: balance;
   }
 }
+
+.nav-item {
+  padding: 2px 14px;
+  border-radius: 24px;
+  margin-top: -8px
+}
+
+.nav-item:hover {
+  background-color: #313741;
+}
+
+.nav-active {
+  background-color: #313741;
+}
+
+.button-bg {
+  background-color: #313741;
+}