Change a lot of things (see description)

- removes tailwind (was cool but dont need it)
- reworks a lot of the html
- utilize a no css... library? css file? idk
- add a few details
- rework the navigation on the built notes pages
- write a bunch of tailwind like css classes
- ... maybe some more, too lazy

components/Border.tsx

@@ -2,6 +2,6 @@ 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>
+    <span className={``}></span>
   )
 }

components/CustomLink.js

@@ -1,22 +0,0 @@
-import Link from 'next/link';
-
-export default function CustomLink({ children, href }) {
-    // If the link is local it will start with a "/"
-    // Otherwise it'll be something like "https://"
-    return href.startsWith('/') || href === '' ? (
-        <Link href={href} className={"tuancao"}>
-            <a>
-                {children}
-            </a>
-        </Link>
-    ) : (
-        <a
-            href={href}
-            target="_blank"
-            rel="noopener noreferrer"
-            className={"tuan"}
-        >
-            {children}
-        </a>
-    );
-}

components/ExternalLinkIcon.js

@@ -1,11 +1,9 @@
 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-4 h-4 cursor-pointer ">
+      stroke="currentColor" className="sm hover-font-yellow hover-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/FolderTree.js

@@ -6,31 +6,29 @@ import { styled } from '@mui/material/styles';
 const TCTreeItem = styled(TreeItem)(({ theme }) => ({
   '& .MuiTreeItem-content': {
     borderRadius: '10px',
+    '&:hover': {
+      backgroundColor: 'rgba(25, 118, 210, 0.59)'
+    },
     '& .MuiTreeItem-label': {
       fontSize: '1rem',
       paddingLeft: '6px',
       fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,',
       lineHeight: 2.0,
+
     },
   },
 }))
 
 
 export default function FolderTree(props) {
-  const renderTree = (nodes) => (
-    <TCTreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
-      {Array.isArray(nodes.children)
-        ? nodes.children.map((node) => renderTree(node))
-        : null}
-    </TCTreeItem>
-  );
-
   const router = useRouter()
-  // const childrenNodeIds = props.tree.children.map(aNode => {return aNode.id})
+
+  const memoTree = React.useMemo(() => renderTree(props.tree), [props.tree])
   const expandedNodes = [props.tree.id]
+
   return (
     <>
-      <a href="http://localhost:3000" class="mb-5 flex-none rounded-md bg-indigo-500 px-3.5 py-2.5 text-xs font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">{"<-"} Back To Portfolio</a>
+      <a href="http://localhost:3000" className="">{"<-"} Back To Portfolio</a>
 
       <TreeView
         aria-label="rich object"
@@ -45,9 +43,9 @@ export default function FolderTree(props) {
             router.push(currentNode.routePath)
           }
         }}
-        sx={{ flexGrow: 1, overflowY: 'auto' }}
+        sx={{ overflowY: 'scroll' }}
       >
-        {renderTree(props.tree)}
+        {memoTree}
       </TreeView>
     </>
   );
@@ -69,3 +67,12 @@ function ChevronDownIcon() {
   )
 }
 
+function renderTree(nodes, layer) {
+  return (
+    <TCTreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name} sx={{ marginLeft: 1 * layer }}>
+      {Array.isArray(nodes.children)
+        ? nodes.children.map((node) => renderTree(node, layer + 1))
+        : null}
+    </TCTreeItem>
+  )
+}

components/Job.tsx

@@ -8,15 +8,15 @@ export interface JobProps {
 
 export default function Job({ logo, name, details, dateFrom, dateTo }: JobProps) {
   return (
-    <div className="flex items-center gap-x-3 border rounded-xl w-full p-2 bg-slate-500 bg-opacity-20 border-slate-500 border-opacity-0" >
+    <article className="flex gap-1" >
-      <img src={logo} className="w-10 h-10 rounded-full" />
+      <img src={logo} className="rounded lg bg-grey" />
-      <div className="flex flex-col flex-1" >
+      <span className="flex-1">
-        <div className="flex justify-between" >
+        <div className="flex flex-between">
-          <span className="block text-sm font-bold " > {name} </span>
+          <span className="font-bold" > {name} </span>
-          <span className="block text-xs font-bold " > {dateFrom} - {dateTo} </span>
+          <span className="font-muted" > {dateFrom} - {dateTo} </span>
-        </div>
-        <span className="block text-xs " > {details} </span>
-      </div>
         </div>
+        <span className="font-muted" > {details} </span>
+      </span>
+    </article>
   )
 }

components/ListItem.tsx

@@ -1,3 +1,4 @@
+import { useRef, useEffect, type ElementType } from "react";
 import { Border } from "./Border";
 import ExternalLinkIcon from "./ExternalLinkIcon";
 
@@ -9,15 +10,32 @@ export interface ListItemProps {
 
 export default function ListItem({ label, date, url }: ListItemProps) {
   return (
-    <div className="cursor-pointer  flex flex-row items-baseline justify-between gap-2">
+    <div className="flex-row flex-between y-bottom gap-1">
-      <a href={url} target="_blank">
+      <Link  {...{ url, label }} />
-        <p className="text-xs ">{label}</p>
+      <Divider />
-      </a>
+      <Date {...{ date }} />
-      <Border />
-      <div className="flex gap-1 items-baseline">
-        {!!date && <i className="text-xs">{date}</i>}
       <ExternalLinkIcon />
     </div>
-    </div>
   )
 }
+
+function Link({ url, label }) {
+  return (
+    <a href={url} target="_blank">
+      {label}
+    </a>
+
+  )
+}
+
+function Divider() {
+  return (
+    <div style={{ border: '1px dashed #fff2' }} className="flex-1" />
+  )
+}
+
+function Date({ date }) {
+  if (!date) return null
+  return <i className="font-muted"  >{date}</i>
+
+}

components/MDContainer.js

@@ -12,7 +12,7 @@ function MDContainer({ post, fileNames }) {
   }
 
   return (
-    <div className="Container">
+    <div className="">
       {posts.map(p => (
         <MDContent key={uuidv4()} content={p} handleOpenNewContent={handleClick} fileNames={fileNames} />
       ))}

components/MDContent.tsx

@@ -12,25 +12,25 @@ interface BackLinksProps {
 }
 
 function BackLinks({ linkList }: BackLinksProps) {
-  return (<div className="note-footer">
+  return (<div className="">
-    <h3 className="backlink-heading">Link to this note</h3>
+    <h3 className="">Link to this note</h3>
     {(linkList != null && linkList.length > 0)
       ?
       <>
-        <div className="backlink-container">
+        <div className="">
           {linkList.map(aLink =>
-            <div key={aLink.slug} className="backlink">
+            <div key={aLink.slug} className="">
               {/*<Link href={aLink.slug}>*/}
               <a href={aLink.slug}>
-                <p className="backlink-title">{aLink.title}</p>
+                <p className="">{aLink.title}</p>
-                <p className="backlink-preview">{aLink.shortSummary} </p>
+                <p className="">{aLink.shortSummary} </p>
               </a>
               {/*</Link>*/}
             </div>
           )}
         </div>
       </>
-      : <> <p className="no-backlinks"> No backlinks found</p> </>}
+      : <> <p className=""> No backlinks found</p> </>}
   </div>);
 }
 
@@ -45,7 +45,7 @@ function MDContent({ content, backLinks }: MDContentProps) {
 
   return (
 
-    <div className="markdown-rendered">
+    <div className="flex-1 p-xl">
       <div dangerouslySetInnerHTML={{ __html: content }} />
       <BackLinksGroup links={backLinks} />
       <hr />
@@ -64,7 +64,7 @@ function BackLinksGroup({ links }: BackLinksGroupProps) {
 
   if (!links?.length) {
     return (
-      <p className="no-backlinks"> No backlinks found</p>
+      <p className=""> No backlinks found</p>
     )
   }
 

components/Skill.tsx

@@ -6,9 +6,7 @@ export interface SkillProps {
 export default function Skill({ label, link = "#" }: SkillProps) {
   return (
     <a href={link} target="_blank" style={{ textDecoration: 'none !important' }}>
-      <div className={`hover:scale-110 transition duration-100 bg-slate-500 text-white rounded-xl px-2 py-1 text-xs`}>
       {label}
-      </div>
     </a>
   )
 }

components/SocialLinks/SocialLink.js

@@ -1,9 +1,9 @@
 export function SocialLink({ SvgElement, link = "#" }) {
   return (
-    <div>
+    <span>
       <a href={link} >
         {SvgElement}
       </a>
-    </div >
+    </span >
   )
 }

components/SocialLinks/SocialLinks.js

@@ -1,14 +1,15 @@
 import { SocialLink } from "./SocialLink"
 
 export function SocialLinksList() {
-  const width = 36
+  const width = 26
+  const size = '1.6rem'
   return (
-    <div className="grid grid-cols-5 grid-rows-1 gap-2 list-none ">
+    <div className="flex gap-1">
-      <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 style={{ width: size, heigth: size }} className="hover-scale" 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 style={{ width: size, heigth: size }} className="hover-scale" 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 style={{ width: size, heigth: size }} className="hover-scale" 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 style={{ width: size, heigth: size }} className="hover-scale" 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>} />
+      <SocialLink SvgElement={<svg style={{ width: size, heigth: size }} className="hover-scale" 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>} />
     </div >
   )
 }

components/UsefulLinks/UsefulLink.js

@@ -2,10 +2,10 @@ import ExternalLinkIcon from "../ExternalLinkIcon.js";
 
 export function UsefulLink({ title, link }) {
   return (
-    <a href={link} className="text-white">
+    <a href={link} className="">
-      <li className="flex w-full items-baseline gap-1">
+      <li className="">
         <div>{title}</div>
-        <div className="border flex-1 h-0 border-dashed " />
+        <div className="" />
         <ExternalLinkIcon />
       </li>
     </a>

components/UsefulLinks/UsefulLinks.js

@@ -3,7 +3,9 @@ import { UsefulLink } from "./UsefulLink"
 
 export function UsefulLinksList() {
   return (
-    <ul className="list-none m-0 p-0 flex flex-col">
+    <>
+      <div className="flex-col">
+        <h5>🧰 Tools</h5>
         <ListItem label="CSS-Tricks" url="" />
         <ListItem label="Indie Hackers" url="" />
         <ListItem label="W3Schools" url="" />
@@ -12,6 +14,20 @@ export function UsefulLinksList() {
         <ListItem label="Tailwind Cheatsheet" url="https://nerdcave.com/tailwind-cheat-sheet" />
         <ListItem label="Tailwind Elements" url="https://tw-elements.com" />
         <ListItem label="Tailwind Components" url="https://tailwindcomponents.com" />
-    </ul>
+      </div>
+
+      <div className="flex-col">
+        <h5>🎨 NoCss</h5>
+        <ListItem label="Water CSS" url="https://watercss.kognise.dev" />
+        <ListItem label="MPV CSS" url="https://andybrewer.github.io/mvp/" />
+        <ListItem label="Bahunya" url="https://hakanalpay.com/bahunya/" />
+        <ListItem label="Marx" url="https://mblode.github.io/marx/" />
+        <ListItem label="Sakura" url="https://oxal.org/projects/sakura/" />
+        <ListItem label="Tacit" url="https://yegor256.github.io/tacit/" />
+        <ListItem label="New CSS" url="https://newcss.net" />
+        <ListItem label="Bullframe CSS" url="https://marcop135.github.io/bullframe.css/" />
+        <ListItem label="Markdown CSS (modest)" url="https://markdowncss.github.io/modest/" />
+      </div>
+    </>
   )
 }

package.json

@@ -68,7 +68,6 @@
     "remark-frontmatter": "latest",
     "remark-react": "latest",
     "remark-stringify": "latest",
-    "tailwindcss": "latest",
     "uuid": "latest"
   },
   "resolutions": {

pages/_app.tsx

@@ -1,6 +1,6 @@
-import type { AppProps } from "next/app";
 import "../styles/global.css";
 import "../styles/prism.css";
+import type { AppProps } from "next/app";
 import type { HomeProps } from "./notes";
 import type React from "react";
 

pages/index.tsx

@@ -13,85 +13,92 @@ interface LandingProps {
   projects: ProjectsType[]
 }
 
+/* 
+ * bahunya.css <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kimeiga/bahunya/dist/bahunya.min.css" />
+ *
+ * new.css 
+<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css" />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css" />
+ */
 export default function Landing({ jobs, skills, projects }: LandingProps) {
   return (
     <div>
       <Head>
-        <body className="bg-gradient-to-b from-richBlack from-30% to-black to-90% container max-w-full mx-auto text-gray-300 py-24 px-4 w-full sm:px-20 md:px-16" />
+        <meta name="color-scheme" content='dark' />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kimeiga/bahunya/dist/bahunya.min.css" />
       </Head>
 
-      <main className="flex flex-col-reverse gap-8 md:grid md:grid-cols-8">
-        <aside className="md:col-start-1 md:col-span-3 lg:col-span-2">
-          <div className='sticky top-10 flex flex-col gap-4'>
-            <section className="row-span-1 col-span-6" >
-              <h2 className="mt-1">Useful Links</h2>
-              <UsefulLinksList />
-            </section>
-
-            <section className="hidden sm:grid grid-rows-3 col-start-1 col-span-6 row-span-1" >
-              <div className="row-span-1">
-                <SocialLinksList />
-              </div>
-            </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">
       <article>
-            <div className="flex flex-col gap-2">
+        <p>Probably going to put something here</p>
-              <div className="flex gap-4 items-center">
-                <img className="inline-block h-10 w-10 rounded-full ring-2 ring-white"
-                  src="https://gitlab.com/uploads/-/system/user/avatar/5083849/avatar.png?width=400" alt="" />
-                <h1 className="text-2xl font-bold">Triston Armstrong</h1>
-              </div>
-              <p className="text-sm">Full Stack Software Developer @ <a href="ventrahealth.com"
-                className="text-blue-500">VentraHealth</a></p>
-              <div className="w-full border-dashed border-slate-500  my-4 border "></div>
-              <p className="text-sm">I am a self taught Full Stack Software Developer with an unhealthy addiction to solving
-                problems using code.</p>
-
-              <section className="sm:hidden" >
-                <div className="row-span-1  ">
-                  <SocialLinksList />
-                </div>
-              </section>
-              <Border className="sm:hidden" />
-            </div>
       </article>
 
-          <article>
+      <header>
-            <h2 className="text-1xl font-bold uppercase">Skills</h2>
+        <div className="flex-col gap-05">
-            <div className="flex gap-2 py-4" id="skills">
+          <img style={{ border: '1px dashed var(--links)' }} className="rounded xl "
+            src="https://gitlab.com/uploads/-/system/user/avatar/5083849/avatar.png?width=400" alt="" />
+          <h1 className='m-0'>Triston Armstrong 🫰</h1>
+        </div>
+
+        <p>
+          Full Stack Software Developer {' '}
+          <a target="_blank" href="https://ventrahealth.com">
+            @VentraHealth
+          </a>
+        </p>
+
+        <p>
+          I am a self taught Full Stack Software Developer with an unhealthy addiction to solving
+          problems using code.
+        </p>
+
+        <hr />
+      </header>
+
+      <main className="">
+        <section>
+          <h4>🤹 Skills</h4>
+          <div className="flex gap-1" id="skills">
             {skills.map(skill => <Skill key={skill.label} label={skill.label} />)}
           </div>
-          </article>
+        </section>
 
-          <article>
+        <section>
-            <h2 className="text-1xl font-bold uppercase">Jobs</h2>
+          <h4>💼 Jobs</h4>
-            <div className="flex flex-col gap-3 py-4" id="jobs">
+          <div className="flex-col " id="jobs">
             {jobs.map(job => <Job key={job.name} logo={job.logo} name={job.name} details={job.details} dateFrom={job.dateFrom} dateTo={job.dateTo} />)}
           </div>
-          </article>
+        </section>
 
-          <article>
+
-            <h2 className="text-1xl font-bold uppercase">Personal Projects</h2>
+        <section>
-            <div className="flex flex-col gap-1 py-4" id="projects">
+          <h4>🚧 Projects</h4>
+          <div className='flex-col'>
             {projects.map(project => <ListItem key={project.label} label={project.label} date={project.date} url={project.url} />)}
           </div>
-          </article>
-
-          <article>
-            <h2 className="text-1xl font-bold uppercase">Notes</h2>
-            <p>An endless trail of links to my personal notes</p>
-            <a href="/notes" target="_blank">Go To Notes {'->'}</a>
-          </article>
-
-          <article>
-            <h2 className="text-1xl font-bold uppercase">Experimental Stuff</h2>
-            <a href="/portfolio2" target="_blank">Portfolio 2 {"->"}</a>
-          </article>
         </section>
       </main>
+
+      <footer className='flex-col flex-between gap-1 mt-4 '>
+        <div className='flex-row gap-1'>
+          <a href="/notes" target="_blank" className='text-md font-muted font-bold'>🏃 Notes</a>
+          {"|"}
+          <a href="/portfolio2" target="_blank" className='text-md font-muted font-bold'>🏃 Playground</a>
+        </div>
+
+        <div className='flex-row gap-1'>
+          <UsefulLinksList />
+        </div>
+
+        <div style={{ margin: "10px 0" }} />
+
+        <div className='flex-row flex-between '>
+          <div className='flex-row gap-1'>
+            <SocialLinksList />
+          </div>
+          <small>©2023-2024 Triston Armstrong. All rights reserved.</small>
+        </div>
+
+      </footer>
     </div >
   )
 }

pages/notes/[id].tsx

@@ -21,11 +21,13 @@ export default function Home({ note, backLinks, fileNames: _, tree, flattenNodes
     <Layout>
       <Head>
         {note.title && <meta name="title" content={note.title} />}
-      </Head>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kimeiga/bahunya/dist/bahunya.min.css" />
-      <div className='notes-container '>
+        <body style={{ margin: 0, padding: 0 }} />      </Head>
-        <nav className="nav-bar">
+      <div className='flex gap-1 w-full'>
+        <nav className="">
           <FolderTree tree={tree} flattenNodes={flattenNodes} />
         </nav>
+
         <MDContent content={note.data} backLinks={backLinks} />
       </div>
     </Layout>

pages/notes/index.tsx

@@ -2,6 +2,7 @@ import Layout from "components/Layout";
 import Util from 'lib/utils'
 import FolderTree from "components/FolderTree";
 import MDContent, { type LinkType } from "components/MDContent";
+import Head from "next/head";
 
 
 export interface HomeProps {
@@ -14,8 +15,11 @@ export interface HomeProps {
 export default function Home({ content, tree, flattenNodes, backLinks }: HomeProps) {
   return (
     <Layout>
-      <div className='notes-container '>
+      <Head>
-        <nav className="nav-bar">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kimeiga/bahunya/dist/bahunya.min.css" />
+      </Head>
+      <div className=''>
+        <nav className="">
           <FolderTree tree={tree} flattenNodes={flattenNodes} />
         </nav>
         <MDContent content={content} backLinks={backLinks} />

styles/global.css

@@ -1,683 +1,249 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 :root {
-  /* LOGO Theme colors */
+  /* PUT OVERRIDES HERE */
-  --rich-black: #071425ff;
+  /*--links: #ff0000 !important;*/
-  --air-force-blue: #6f8fa5ff;
+  --elevated: #ffffff0a;
-  --light-blue: #a5c6cdff;
-  --white: #ffffffff;
 }
 
 
-
+* {
-
+  transition: all .1s ease-in-out;
-
-@layer components {
-  .nav-bar {
-    @apply px-5 py-2 bg-slate-500 bg-opacity-20 flex flex-col;
 }
 
-  .notes-container {
+.flex-row {
-    @apply flex min-h-screen;
+  display: flex;
-  }
+  flex-direction: row;
-
-  .markdown-rendered {
-    @apply container mx-auto p-10 max-w-3xl;
-  }
-}
-
-@layer base {
-  :root {
-    --background-body: #071425ff;
-    --background: #6f8fa5ff;
-    --background-alt: #6f8fa5ff;
-    --selection: #1c76c5;
-    --text-main: #a5c6cdff;
-    --text-bright: #ffffffff;
-    --text-muted: #a9b1ba;
-    --links: #41adff;
-    --focus: #0096bfab;
-    --border: #526980;
-    --code: #ffbe85;
-    --animation-duration: 0.1s;
-    --button-base: #0c151c;
-    --button-hover: #040a0f;
-    --scrollbar-thumb: var(--button-hover);
-    --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(-30%));
-    --form-placeholder: #a9a9a9;
-    --form-text: #fff;
-    --variable: #d941e2;
-    --highlight: #efdb43;
-    --select-arrow: svg-load('./assets/select-arrow.svg', fill: #efefef);
-  }
-
-  /* base --------------------------------*/
-  html {
-    scrollbar-color: var(--scrollbar-thumb) var(--background-body);
-    scrollbar-width: thin;
-  }
-
-  body {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
-    line-height: 1.4;
-    word-wrap: break-word;
-    color: var(--text-main);
-    background: var(--background-body);
-    text-rendering: optimizeLegibility;
-  }
-
-  button,
-  input,
-  textarea {
-    transition:
-      background-color var(--animation-duration) linear,
-      border-color var(--animation-duration) linear,
-      color var(--animation-duration) linear,
-      box-shadow var(--animation-duration) linear,
-      transform var(--animation-duration) ease;
-  }
-
-  ol,
-  ul,
-  menu {
-    list-style: revert;
-    margin: revert;
-    padding: revert;
-  }
-
-  /* code --------------------------------*/
-  code,
-  samp,
-  time {
-    background: var(--background);
-    color: var(--code);
-    padding: 2.5px 5px;
-    border-radius: 6px;
-    font-size: 1em;
-  }
-
-  pre>code {
-    padding: 10px;
-    display: block;
-    overflow-x: auto;
-  }
-
-  var {
-    color: var(--variable);
-    font-style: normal;
-    font-family: monospace;
-  }
-
-  kbd {
-    background: var(--background);
-    border: 1px solid var(--border);
-    border-radius: 2px;
-    color: var(--text-main);
-    padding: 2px 4px 2px 4px;
-  }
-
-
-  /* forms --------------------------------*/
-  button,
-  select,
-  input[type='submit'],
-  input[type='reset'],
-  input[type='button'],
-  input[type='checkbox'],
-  input[type='range'],
-  input[type='radio'] {
-    cursor: pointer;
-  }
-
-  input,
-  select {
-    display: block;
-  }
-
-  [type='checkbox'],
-  [type='radio'] {
-    display: initial;
-  }
-
-  input,
-  button,
-  textarea,
-  select {
-    color: var(--form-text);
-    background-color: var(--background);
-    font-family: inherit;
-    font-size: inherit;
-    margin-right: 6px;
-    margin-bottom: 6px;
-    padding: 10px;
-    border: none;
-    border-radius: 6px;
-    outline: none;
-  }
-
-  button,
-  input[type='submit'],
-  input[type='reset'],
-  input[type='button'] {
-    background-color: var(--button-base);
-    padding-right: 30px;
-    padding-left: 30px;
-  }
-
-  button:hover,
-  input[type='submit']:hover,
-  input[type='reset']:hover,
-  input[type='button']:hover {
-    background: var(--button-hover);
-  }
-
-  input[type='color'] {
-    min-height: 2rem;
-    padding: 8px;
-    cursor: pointer;
-  }
-
-  input[type='checkbox'],
-  input[type='radio'] {
-    height: 1em;
-    width: 1em;
-  }
-
-  input[type='radio'] {
-    border-radius: 100%;
-  }
-
-  input {
-    vertical-align: top;
-  }
-
-  label {
-    vertical-align: middle;
-    margin-bottom: 4px;
-    display: inline-block;
-  }
-
-  input:not([type='checkbox']):not([type='radio']),
-  input[type='range'],
-  select,
-  button,
-  textarea {
-    -webkit-appearance: none;
-  }
-
-  textarea {
-    display: block;
-    margin-right: 0;
-    box-sizing: border-box;
-    resize: vertical;
-  }
-
-  textarea:not([cols]) {
   width: 100%;
+  flex: 1;
 }
 
-  textarea:not([rows]) {
+.flex-col {
-    min-height: 40px;
-    height: 140px;
-  }
-
-  select {
-    background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
-    padding-right: 35px;
-  }
-
-  select::-ms-expand {
-    display: none;
-  }
-
-  select[multiple] {
-    padding-right: 10px;
-    background-image: none;
-    overflow-y: auto;
-  }
-
-  input:focus,
-  select:focus,
-  button:focus,
-  textarea:focus {
-    box-shadow: 0 0 0 2px var(--focus);
-  }
-
-  input[type='checkbox']:active,
-  input[type='radio']:active,
-  input[type='submit']:active,
-  input[type='reset']:active,
-  input[type='button']:active,
-  input[type='range']:active,
-  button:active {
-    transform: translateY(2px);
-  }
-
-  input:disabled,
-  select:disabled,
-  button:disabled,
-  textarea:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  ::placeholder {
-    color: var(--form-placeholder);
-  }
-
-  fieldset {
-    border: 1px var(--focus) solid;
-    border-radius: 6px;
-    margin: 0;
-    margin-bottom: 12px;
-    padding: 10px;
-  }
-
-  legend {
-    font-size: 0.9em;
-    font-weight: 600;
-  }
-
-
-  /* links --------------------------------*/
-  a {
-    text-decoration: none;
-    color: var(--links);
-  }
-
-  a:hover {
-    text-decoration: underline;
-  }
-
-
-
-  /* misc --------------------------------*/
-  img,
-  video {
-    max-width: 100%;
-    height: auto;
-  }
-
-  hr {
-    border: none;
-    border-top: 1px solid var(--border);
-  }
-
-  table {
-    border-collapse: collapse;
-    margin-bottom: 10px;
-    width: 100%;
-    table-layout: fixed;
-  }
-
-  table caption {
-    text-align: left;
-  }
-
-  td,
-  th {
-    padding: 6px;
-    text-align: left;
-    vertical-align: top;
-    word-wrap: break-word;
-  }
-
-  thead {
-    border-bottom: 1px solid var(--border);
-  }
-
-  tfoot {
-    border-top: 1px solid var(--border);
-  }
-
-  tbody tr:nth-child(even) {
-    background-color: var(--background);
-  }
-
-  tbody tr:nth-child(even) button {
-    background-color: var(--background-alt);
-  }
-
-  tbody tr:nth-child(even) button:hover {
-    background-color: var(--background-body);
-  }
-
-  ::-webkit-scrollbar {
-    height: 10px;
-    width: 10px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background: var(--background);
-    border-radius: 6px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thumb);
-    border-radius: 6px;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: var(--scrollbar-thumb-hover);
-  }
-
-  ::selection {
-    background-color: var(--selection);
-    color: var(--text-bright);
-  }
-
-  details {
   display: flex;
   flex-direction: column;
-    align-items: flex-start;
+  width: 100%;
-    background-color: var(--background-alt);
+  flex: 1;
-    padding: 10px 10px 0;
-    margin: 1em 0;
-    border-radius: 6px;
-    overflow: hidden;
 }
 
-  details[open] {
+.flex-1 {
-    padding: 10px;
+  flex: 1
 }
 
-  details> :last-child {
+.wrap {
-    margin-bottom: 0;
+  flex-wrap: wrap;
 }
 
-  details[open] summary {
+
-    margin-bottom: 10px;
+/* WIDTH HEIGHT ---------------------------------*/
+.sm {
+  width: 1rem;
+  height: 1rem;
 }
 
-  summary {
+.md {
-    display: list-item;
+  width: 2rem;
-    background-color: var(--background);
+  height: 2rem;
-    padding: 10px;
-    margin: -10px -10px 0;
-    cursor: pointer;
-    outline: none;
 }
 
-  summary:hover,
+.lg {
-  summary:focus {
+  width: 3rem;
-    text-decoration: underline;
+  height: 3rem;
 }
 
-  details> :not(summary) {
+.xl {
-    margin-top: 0;
+  width: 4rem;
+  height: 4rem;
 }
 
-  summary::-webkit-details-marker {
+.w-full {
-    color: var(--text-main);
+  width: 100dvw;
 }
 
-  dialog {
+.h-full {
-    background-color: var(--background-alt);
+  height: 100dvh;
-    color: var(--text-main);
-    border: none;
-    border-radius: 6px;
-    border-color: var(--border);
-    padding: 10px 30px;
 }
 
-  dialog>header:first-child {
+.x-center {
-    background-color: var(--background);
+  align-items: center;
-    border-radius: 6px 6px 0 0;
-    margin: -10px -30px 10px;
-    padding: 10px;
-    text-align: center;
 }
 
-  dialog::backdrop {
+.y-center {
-    background: #0000009c;
+  justify-content: center;
-    backdrop-filter: blur(4px);
 }
 
-  footer {
+.y-bottom {
-    border-top: 1px solid var(--border);
+  align-items: baseline;
-    padding-top: 10px;
+}
+
+.flex-between {
+  justify-content: space-between;
+}
+
+.flex {
+  display: flex;
+}
+
+.gap-05 {
+  gap: .5rem;
+}
+
+.gap-1 {
+  gap: 1rem;
+}
+
+.bg-grey {
+  background-color: grey;
+}
+
+.p-sm {
+  padding: 4px;
+}
+
+.p-md {
+  padding: 8px;
+}
+
+.p-lg {
+  padding: 1rem;
+}
+
+.p-xl {
+  padding: 2rem;
+}
+
+.text-sm {
+  font-size: 1rem;
+}
+
+.text-md {
+  font-size: 1.2rem;
+}
+
+.text-lg {
+  font-size: 1.4rem;
+}
+
+.font-muted {
   color: var(--text-muted);
 }
 
-  body>footer {
+.font-main {
-    margin-top: 40px;
+  color: var(--text-main);
 }
 
-  /* print --------------------------------*/
+.font-bold {
-  @media print {
+  font-weight: bold;
-
-    body,
-    pre,
-    code,
-    summary,
-    details,
-    button,
-    input,
-    textarea {
-      background-color: #fff;
 }
 
-    button,
+.h-0 {
-    input,
+  height: 0;
-    textarea {
-      border: 1px solid #000;
 }
 
-    body,
+/* BORDER ---------------------------------- */
-    h1,
+.border-dashed {
-    h2,
+  border-style: dashed;
-    h3,
-    h4,
-    h5,
-    h6,
-    pre,
-    code,
-    button,
-    input,
-    textarea,
-    footer,
-    summary,
-    strong {
-      color: #000;
 }
 
-    summary::marker {
+.border-grey {
-      color: #000;
+  border-color: grey;
 }
 
-    summary::-webkit-details-marker {
+.border-1 {
-      color: #000;
+  border-width: 1px;
 }
 
-    tbody tr:nth-child(even) {
+.rounded {
-      background-color: #f2f2f2;
+  border-radius: 100%;
 }
 
-    a {
+.rounded-sm {
-      color: #00f;
+  border-radius: 10px;
-      text-decoration: underline;
-    }
 }
 
-  /* range --------------------------------*/
+/* MARGIN ----------------------------------*/
-  input[type='range'] {
+.mt-4 {
-    margin: 10px 0;
+  margin-top: 4rem;
-    padding: 10px 0;
-    background: transparent;
 }
 
-  input[type='range']:focus {
+.m-0 {
-    outline: none;
+  margin: 0;
 }
 
-  input[type='range']::-webkit-slider-runnable-track {
+
-    width: 100%;
+/* HOVER ----------------------------------*/
-    height: 9.5px;
+.hover-scale:hover {
-    transition: 0.2s;
+  transform: scale(1.2);
-    background: var(--background);
-    border-radius: 3px;
 }
 
-  input[type='range']::-webkit-slider-thumb {
+.hover-font-yellow:hover {
-    box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
+  color: var(--links);
-    height: 20px;
-    width: 20px;
-    border-radius: 50%;
-    background: var(--border);
-    -webkit-appearance: none;
-    margin-top: -7px;
 }
 
-  input[type='range']:focus::-webkit-slider-runnable-track {
+.hover-pointer:hover {
-    background: var(--background);
+  cursor: pointer;
 }
 
-  input[type='range']::-moz-range-track {
+
-    width: 100%;
+/* BACKGROUND ----------------------------------*/
-    height: 9.5px;
+.bg-elevated {
-    transition: 0.2s;
+  background-color: var(--elevated);
-    background: var(--background);
-    border-radius: 3px;
 }
 
-  input[type='range']::-moz-range-thumb {
+
-    box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+/* OVERRIDES ----------------------------------*/
-    height: 20px;
+article {
-    width: 20px;
+  @apply bg-elevated;
-    border-radius: 50%;
-    background: var(--border);
 }
 
-  input[type='range']::-ms-track {
+body nav:first-of-type::before {
-    width: 100%;
+  backdrop-filter: unset;
-    height: 9.5px;
+  -webkit-backdrop-filter: unset;
-    background: transparent;
+  content: unset;
-    border-color: transparent;
+  position: unset;
-    border-width: 16px 0;
+  z-index: unset;
-    color: transparent;
+  top: unset;
+  left: unset;
+  right: unset;
+  bottom: unset;
 }
 
-  input[type='range']::-ms-fill-lower {
+body nav:first-of-type {
-    background: var(--background);
+  position: unset;
-    border: 0.2px solid #010101;
+  padding: 1rem !important;
-    border-radius: 3px;
+  align-items: unset !important;
-    box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+  width: unset !important;
+  min-height: 100dvh !important;
+  flex-direction: column !important;
+  overflow-y: auto !important;
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Safari */
+  -khtml-user-select: none;
+  /* Konqueror HTML */
+  -moz-user-select: none;
+  /* Old versions of Firefox */
+  -ms-user-select: none;
+  /* Internet Explorer/Edge */
+  user-select: none;
+  backdrop-filter: saturate(180%) blur(5px);
+  -webkit-backdrop-filter: saturate(180%) blur(5px);
 }
 
-  input[type='range']::-ms-fill-upper {
+body nav:first-of-type ul {
-    background: var(--background);
+  list-style-type: unset !important;
-    border: 0.2px solid #010101;
+  margin: unset !important;
-    border-radius: 3px;
+  padding: unset !important;
-    box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+  overflow: unset !important;
+  display: unset !important;
 }
 
-  input[type='range']::-ms-thumb {
+body nav:first-of-type ul li {
-    box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+  float: unset !important;
-    border: 1px solid #000;
-    height: 20px;
-    width: 20px;
-    border-radius: 50%;
-    background: var(--border);
 }
 
-  input[type='range']:focus::-ms-fill-lower {
+body nav:first-of-type ul li ul {
-    background: var(--background);
+  display: unset !important;
-  }
+  position: unset !important;
-
+  background: unset !important;
-  input[type='range']:focus::-ms-fill-upper {
+  backdrop-filter: unset !important;
-    background: var(--background);
+  -webkit-backdrop-filter: unset !important;
-  }
-
-  /* typography --------------------------------*/
-  h1 {
-    font-size: 2.2em;
-    margin-top: 0;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-bottom: 12px;
-    margin-top: 24px;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  strong {
-    color: var(--text-bright);
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  b,
-  strong,
-  th {
-    font-weight: 600;
-  }
-
-  q::before {
-    content: none;
-  }
-
-  q::after {
-    content: none;
-  }
-
-  blockquote,
-  q {
-    border-left: 4px solid var(--focus);
-    margin: 1.5em 0;
-    padding: 0.5em 1em;
-    font-style: italic;
-  }
-
-  blockquote>footer {
-    font-style: normal;
-    border: 0;
-  }
-
-  blockquote cite {
-    font-style: normal;
-  }
-
-  address {
-    font-style: normal;
-  }
-
-  a[href^='mailto\:']::before {
-    content: '📧 ';
-  }
-
-  a[href^='tel\:']::before {
-    content: '📞 ';
-  }
-
-  a[href^='sms\:']::before {
-    content: '💬 ';
-  }
-
-  mark {
-    background-color: var(--highlight);
-    border-radius: 2px;
-    padding: 0 2px 0 2px;
-    color: #000;
-  }
-
-  a>code,
-  a>strong {
-    color: inherit;
-  }
 }

tailwind.config.js

@@ -1,16 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-import defaultTheme, { fontFamily as _fontFamily } from 'tailwindcss/defaultTheme'
-
-export const content = [
-  './pages/**/*.{js,ts,jsx,tsx,mdx}',
-  './components/**/*.{js,ts,jsx,tsx,mdx}'
-]
-export const theme = {
-  ...defaultTheme,
-  extend: {
-    fontFamily: {
-      sans: ['Inter var', ..._fontFamily.sans]
-    }
-  }
-}
-export const plugins = []