change a bunch of styles

components/Border.tsx

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from "react";
+
+export function Border({ className }: { className?: HTMLAttributes<HTMLDivElement>['className'] }) {
+  return (
+    <div className={`flex-1 border-dashed border-slate-500  my-4 border ${className}`}></div>
+  )
+}

components/ExternalLinkIcon.js

@@ -1,11 +1,11 @@
 export default function ExternalLinkIcon() {
   return (
-    <>
+    <div >
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5"
-        stroke="currentColor" className="w-5 h-5 cursor-pointer text-blue-500 hover:text-blue-600">
+        stroke="currentColor" className="w-4 h-4 cursor-pointer ">
         <path strokeLinecap="round" strokeLinejoin="round"
           d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
       </svg>
-    </>
+    </div>
   )
 }

components/ListItem.tsx

@@ -1,3 +1,4 @@
+import { Border } from "./Border";
 import ExternalLinkIcon from "./ExternalLinkIcon";
 
 export interface ListItemProps {
@@ -8,14 +9,14 @@ export interface ListItemProps {
 
 export default function ListItem({ label, date, url }: ListItemProps) {
   return (
-    <div className="hover:bg-white hover:bg-opacity-15 hover:px-3 hover:rounded transition-all duration-200 flex flex-row items-baseline justify-between gap-2">
+    <div className="cursor-pointer  flex flex-row items-baseline justify-between gap-2">
-      <p className="text-sm ">{label}</p>
+      <a href={url} target="_blank">
-      <div className="border border-dashed flex-1 border-gray-500 h-0"></div>
+        <p className="text-xs ">{label}</p>
+      </a>
+      <Border />
       <div className="flex gap-1 items-baseline">
         {!!date && <i className="text-xs">{date}</i>}
-        <a href={url} target="_blank">
+        <ExternalLinkIcon />
-          <ExternalLinkIcon />
-        </a>
       </div>
     </div>
   )

components/SocialLinks/SocialLink.js

@@ -1,9 +1,9 @@
 export function SocialLink({ SvgElement, link = "#" }) {
   return (
-    <li className="hover:rotate-90 transition duration-100">
+    <div>
       <a href={link}>
         {SvgElement}
       </a>
-    </li>
+    </div >
   )
 }

components/SocialLinks/SocialLinks.js

@@ -1,14 +1,14 @@
 import { SocialLink } from "./SocialLink"
 
 export function SocialLinksList() {
-  const width = 24
+  const width = 36
   return (
-    <ul className="flex gap-2 list-none m-0 p-0 py-4">
+    <div className="grid grid-cols-5 grid-rows-1 gap-2 list-none ">
-      <SocialLink SvgElement={<svg className="h-7 w-7 text-white" width={width} height={width} viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">  <path stroke="none" d="M0 0h24v24H0z" />  <path d="M9 19c-4.286 1.35-4.286-2.55-6-3m12 5v-3.5c0-1 .099-1.405-.5-2 2.791-.3 5.5-1.366 5.5-6.04a4.567 4.567 0 0 0 -1.333 -3.21 4.192 4.192 0 00-.08-3.227s-1.05-.3-3.476 1.267a12.334 12.334 0 0 0 -6.222 0C6.462 2.723 5.413 3.023 5.413 3.023a4.192 4.192 0 0 0 -.08 3.227A4.566 4.566 0 004 9.486c0 4.64 2.709 5.68 5.5 6.014-.591.589-.56 1.183-.5 2V21" /></svg>} />
+      <SocialLink SvgElement={<svg className="h-7 w-7 text-white" viewBox={`0 0 ${width} ${width}`} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">  <path stroke="none" d="M0 0h24v24H0z" />  <path d="M9 19c-4.286 1.35-4.286-2.55-6-3m12 5v-3.5c0-1 .099-1.405-.5-2 2.791-.3 5.5-1.366 5.5-6.04a4.567 4.567 0 0 0 -1.333 -3.21 4.192 4.192 0 00-.08-3.227s-1.05-.3-3.476 1.267a12.334 12.334 0 0 0 -6.222 0C6.462 2.723 5.413 3.023 5.413 3.023a4.192 4.192 0 0 0 -.08 3.227A4.566 4.566 0 004 9.486c0 4.64 2.709 5.68 5.5 6.014-.591.589-.56 1.183-.5 2V21" /></svg>} />
       <SocialLink SvgElement={<svg className="h-7 w-7 text-white" viewBox={`0 0 ${width} ${width}`} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">  <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />  <rect x="2" y="9" width="4" height="12" />  <circle cx="4" cy="4" r="2" /></svg>} />
       <SocialLink SvgElement={<svg className="h-7 w-7 text-white" viewBox={`0 0 ${width} ${width}`} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">  <path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z" /></svg>} />
       <SocialLink SvgElement={<svg className="h-7 w-7 text-white" viewBox={`0 0 ${width} ${width}`} stroke="currentcolor" xmlns="http://www.w3.org/2000/svg"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" /></svg>} />
       <SocialLink SvgElement={<svg className="h-7 w-7 text-white" viewBox={`0 0 ${width} ${width}`} fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z" /></svg>} />
-    </ul>
+    </div >
   )
 }

components/UsefulLinks/UsefulLinks.js

@@ -3,16 +3,15 @@ import { UsefulLink } from "./UsefulLink"
 
 export function UsefulLinksList() {
   return (
-    <ul className="list-none m-0 p-0 flex flex-col gap-1">
+    <ul className="list-none m-0 p-0 flex flex-col">
-      <ListItem />
+      <ListItem label="CSS-Tricks" url="" />
-      <UsefulLink title="CSS-Tricks" link="" />
+      <ListItem label="Indie Hackers" url="" />
-      <UsefulLink title="Indie Hackers" link="" />
+      <ListItem label="W3Schools" url="" />
-      <UsefulLink title="W3Schools" link="" />
+      <ListItem label="Simple Icons" url="https://simpleicons.org" />
-      <UsefulLink title="Simple Icons" link="https://simpleicons.org" />
+      <ListItem label="Hero Icons" url="https://heroicons.com" />
-      <UsefulLink title="Hero Icons" link="https://heroicons.com" />
+      <ListItem label="Tailwind Cheatsheet" url="https://nerdcave.com/tailwind-cheat-sheet" />
-      <UsefulLink title="Tailwind Cheatsheet" link="https://nerdcave.com/tailwind-cheat-sheet" />
+      <ListItem label="Tailwind Elements" url="https://tw-elements.com" />
-      <UsefulLink title="Tailwind Elements" link="https://tw-elements.com" />
+      <ListItem label="Tailwind Components" url="https://tailwindcomponents.com" />
-      <UsefulLink title="Tailwind Components" link="https://tailwindcomponents.com" />
     </ul>
   )
 }

pages/index.tsx

@@ -5,7 +5,7 @@ import Head from 'next/head'
 import { UsefulLinksList } from '../components/UsefulLinks/index'
 import { SocialLinksList } from '../components/SocialLinks/SocialLinks'
 import type { GetStaticProps } from 'next'
-import { type HTMLAttributes } from 'react'
+import { Border } from 'components/Border'
 
 interface LandingProps {
   jobs: JobsType[]
@@ -21,17 +21,19 @@ export default function Landing({ jobs, skills, projects }: LandingProps) {
       </Head>
 
       <main className="flex flex-col-reverse gap-8 md:grid md:grid-cols-8">
-        <aside className="flex flex-col gap-4 md:col-start-1 md:col-span-3 lg:col-span-2">
+        <aside className="md:col-start-1 md:col-span-3 lg:col-span-2">
-          <section className="md:sticky md:top-10 row-span-1 col-span-6" >
+          <div className='sticky top-10 flex flex-col gap-4'>
-            <h2 className="mt-1">Useful Links</h2>
+            <section className="row-span-1 col-span-6" >
-            <UsefulLinksList />
+              <h2 className="mt-1">Useful Links</h2>
-          </section>
+              <UsefulLinksList />
+            </section>
 
-          <section className="hidden sm:grid grid-rows-3 col-start-1 col-span-6 sticky top-64 row-span-1" >
+            <section className="hidden sm:grid grid-rows-3 col-start-1 col-span-6 row-span-1" >
-            <div className="row-span-1  ">
+              <div className="row-span-1">
-              <SocialLinksList />
+                <SocialLinksList />
-            </div>
+              </div>
-          </section>
+            </section>
+          </div>
         </aside>
 
         <section className=" flex gap-1 flex-col md:col-start-4 col-span-5 lg:col-start-3 xl:col-span-4">
@@ -73,7 +75,7 @@ export default function Landing({ jobs, skills, projects }: LandingProps) {
 
           <article>
             <h2 className="text-1xl font-bold uppercase">Personal Projects</h2>
-            <div className="flex flex-col gap-3 py-4" id="projects">
+            <div className="flex flex-col gap-1 py-4" id="projects">
               {projects.map(project => <ListItem key={project.label} label={project.label} date={project.date} url={project.url} />)}
             </div>
           </article>
@@ -153,8 +155,4 @@ type SkillsType = SkillProps
 type JobsType = JobProps
 type ProjectsType = ListItemProps
 
-function Border({ className }: { className: HTMLAttributes<HTMLDivElement>['className'] }) {
+
-  return (
-    <div className={`w-full border-dashed border-slate-500  my-4 border ${className}`}></div>
-  )
-}