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
This commit is contained in:
Triston Armstrong 2024-01-06 21:04:57 -06:00
parent 78be0209ae
commit fd51f273f4
20 changed files with 441 additions and 863 deletions

View File

@ -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>
)
}

View File

@ -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>
);
}

View File

@ -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 ">
<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>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5"
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>
)
}

View File

@ -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>
)
}

View File

@ -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" >
<img src={logo} className="w-10 h-10 rounded-full" />
<div className="flex flex-col flex-1" >
<div className="flex justify-between" >
<span className="block text-sm font-bold " > {name} </span>
<span className="block text-xs font-bold " > {dateFrom} - {dateTo} </span>
<article className="flex gap-1" >
<img src={logo} className="rounded lg bg-grey" />
<span className="flex-1">
<div className="flex flex-between">
<span className="font-bold" > {name} </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>
)
}

View File

@ -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">
<a href={url} target="_blank">
<p className="text-xs ">{label}</p>
</a>
<Border />
<div className="flex gap-1 items-baseline">
{!!date && <i className="text-xs">{date}</i>}
<ExternalLinkIcon />
</div>
<div className="flex-row flex-between y-bottom gap-1">
<Link {...{ url, label }} />
<Divider />
<Date {...{ date }} />
<ExternalLinkIcon />
</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>
}

View File

@ -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} />
))}

View File

@ -12,25 +12,25 @@ interface BackLinksProps {
}
function BackLinks({ linkList }: BackLinksProps) {
return (<div className="note-footer">
<h3 className="backlink-heading">Link to this note</h3>
return (<div className="">
<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="backlink-preview">{aLink.shortSummary} </p>
<p className="">{aLink.title}</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>
)
}

View File

@ -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>
{label}
</a>
)
}

View File

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

View File

@ -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 ">
<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>} />
<div className="flex gap-1">
<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 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 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 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 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 >
)
}

View File

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

View File

@ -3,15 +3,31 @@ import { UsefulLink } from "./UsefulLink"
export function UsefulLinksList() {
return (
<ul className="list-none m-0 p-0 flex flex-col">
<ListItem label="CSS-Tricks" url="" />
<ListItem label="Indie Hackers" url="" />
<ListItem label="W3Schools" url="" />
<ListItem label="Simple Icons" url="https://simpleicons.org" />
<ListItem label="Hero Icons" url="https://heroicons.com" />
<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 className="flex-col">
<h5>🧰 Tools</h5>
<ListItem label="CSS-Tricks" url="" />
<ListItem label="Indie Hackers" url="" />
<ListItem label="W3Schools" url="" />
<ListItem label="Simple Icons" url="https://simpleicons.org" />
<ListItem label="Hero Icons" url="https://heroicons.com" />
<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" />
</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>
</>
)
}

View File

@ -68,7 +68,6 @@
"remark-frontmatter": "latest",
"remark-react": "latest",
"remark-stringify": "latest",
"tailwindcss": "latest",
"uuid": "latest"
},
"resolutions": {
@ -81,4 +80,4 @@
"peerDependencies": {
"typescript": "^5.0.0"
}
}
}

View File

@ -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";

View File

@ -13,86 +13,93 @@ 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>
<article>
<p>Probably going to put something here</p>
</article>
<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>
<header>
<div className="flex-col gap-05">
<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>
</aside>
</section>
<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">
<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>
<h4>💼 Jobs</h4>
<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>
</section>
<section className="sm:hidden" >
<div className="row-span-1 ">
<SocialLinksList />
</div>
</section>
<Border className="sm:hidden" />
</div>
</article>
<article>
<h2 className="text-1xl font-bold uppercase">Skills</h2>
<div className="flex gap-2 py-4" id="skills">
{skills.map(skill => <Skill key={skill.label} label={skill.label} />)}
</div>
</article>
<article>
<h2 className="text-1xl font-bold uppercase">Jobs</h2>
<div className="flex flex-col gap-3 py-4" 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>
<article>
<h2 className="text-1xl font-bold uppercase">Personal Projects</h2>
<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>
<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>
<h4>🚧 Projects</h4>
<div className='flex-col'>
{projects.map(project => <ListItem key={project.label} label={project.label} date={project.date} url={project.url} />)}
</div>
</section>
</main>
</div>
<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 >
)
}

View File

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

View File

@ -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 '>
<nav className="nav-bar">
<Head>
<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} />

View File

@ -1,683 +1,249 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
/* LOGO Theme colors */
--rich-black: #071425ff;
--air-force-blue: #6f8fa5ff;
--light-blue: #a5c6cdff;
--white: #ffffffff;
/* PUT OVERRIDES HERE */
/*--links: #ff0000 !important;*/
--elevated: #ffffff0a;
}
@layer components {
.nav-bar {
@apply px-5 py-2 bg-slate-500 bg-opacity-20 flex flex-col;
}
.notes-container {
@apply flex min-h-screen;
}
.markdown-rendered {
@apply container mx-auto p-10 max-w-3xl;
}
* {
transition: all .1s ease-in-out;
}
@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%;
}
textarea:not([rows]) {
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;
background-color: var(--background-alt);
padding: 10px 10px 0;
margin: 1em 0;
border-radius: 6px;
overflow: hidden;
}
details[open] {
padding: 10px;
}
details> :last-child {
margin-bottom: 0;
}
details[open] summary {
margin-bottom: 10px;
}
summary {
display: list-item;
background-color: var(--background);
padding: 10px;
margin: -10px -10px 0;
cursor: pointer;
outline: none;
}
summary:hover,
summary:focus {
text-decoration: underline;
}
details> :not(summary) {
margin-top: 0;
}
summary::-webkit-details-marker {
color: var(--text-main);
}
dialog {
background-color: var(--background-alt);
color: var(--text-main);
border: none;
border-radius: 6px;
border-color: var(--border);
padding: 10px 30px;
}
dialog>header:first-child {
background-color: var(--background);
border-radius: 6px 6px 0 0;
margin: -10px -30px 10px;
padding: 10px;
text-align: center;
}
dialog::backdrop {
background: #0000009c;
backdrop-filter: blur(4px);
}
footer {
border-top: 1px solid var(--border);
padding-top: 10px;
color: var(--text-muted);
}
body>footer {
margin-top: 40px;
}
/* print --------------------------------*/
@media print {
body,
pre,
code,
summary,
details,
button,
input,
textarea {
background-color: #fff;
}
button,
input,
textarea {
border: 1px solid #000;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
button,
input,
textarea,
footer,
summary,
strong {
color: #000;
}
summary::marker {
color: #000;
}
summary::-webkit-details-marker {
color: #000;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
a {
color: #00f;
text-decoration: underline;
}
}
/* range --------------------------------*/
input[type='range'] {
margin: 10px 0;
padding: 10px 0;
background: transparent;
}
input[type='range']:focus {
outline: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 100%;
height: 9.5px;
transition: 0.2s;
background: var(--background);
border-radius: 3px;
}
input[type='range']::-webkit-slider-thumb {
box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
height: 20px;
width: 20px;
border-radius: 50%;
background: var(--border);
-webkit-appearance: none;
margin-top: -7px;
}
input[type='range']:focus::-webkit-slider-runnable-track {
background: var(--background);
}
input[type='range']::-moz-range-track {
width: 100%;
height: 9.5px;
transition: 0.2s;
background: var(--background);
border-radius: 3px;
}
input[type='range']::-moz-range-thumb {
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
height: 20px;
width: 20px;
border-radius: 50%;
background: var(--border);
}
input[type='range']::-ms-track {
width: 100%;
height: 9.5px;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type='range']::-ms-fill-lower {
background: var(--background);
border: 0.2px solid #010101;
border-radius: 3px;
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
}
input[type='range']::-ms-fill-upper {
background: var(--background);
border: 0.2px solid #010101;
border-radius: 3px;
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
}
input[type='range']::-ms-thumb {
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
border: 1px solid #000;
height: 20px;
width: 20px;
border-radius: 50%;
background: var(--border);
}
input[type='range']:focus::-ms-fill-lower {
background: var(--background);
}
input[type='range']:focus::-ms-fill-upper {
background: var(--background);
}
/* 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;
}
.flex-row {
display: flex;
flex-direction: row;
width: 100%;
flex: 1;
}
.flex-col {
display: flex;
flex-direction: column;
width: 100%;
flex: 1;
}
.flex-1 {
flex: 1
}
.wrap {
flex-wrap: wrap;
}
/* WIDTH HEIGHT ---------------------------------*/
.sm {
width: 1rem;
height: 1rem;
}
.md {
width: 2rem;
height: 2rem;
}
.lg {
width: 3rem;
height: 3rem;
}
.xl {
width: 4rem;
height: 4rem;
}
.w-full {
width: 100dvw;
}
.h-full {
height: 100dvh;
}
.x-center {
align-items: center;
}
.y-center {
justify-content: center;
}
.y-bottom {
align-items: baseline;
}
.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);
}
.font-main {
color: var(--text-main);
}
.font-bold {
font-weight: bold;
}
.h-0 {
height: 0;
}
/* BORDER ---------------------------------- */
.border-dashed {
border-style: dashed;
}
.border-grey {
border-color: grey;
}
.border-1 {
border-width: 1px;
}
.rounded {
border-radius: 100%;
}
.rounded-sm {
border-radius: 10px;
}
/* MARGIN ----------------------------------*/
.mt-4 {
margin-top: 4rem;
}
.m-0 {
margin: 0;
}
/* HOVER ----------------------------------*/
.hover-scale:hover {
transform: scale(1.2);
}
.hover-font-yellow:hover {
color: var(--links);
}
.hover-pointer:hover {
cursor: pointer;
}
/* BACKGROUND ----------------------------------*/
.bg-elevated {
background-color: var(--elevated);
}
/* OVERRIDES ----------------------------------*/
article {
@apply bg-elevated;
}
body nav:first-of-type::before {
backdrop-filter: unset;
-webkit-backdrop-filter: unset;
content: unset;
position: unset;
z-index: unset;
top: unset;
left: unset;
right: unset;
bottom: unset;
}
body nav:first-of-type {
position: unset;
padding: 1rem !important;
align-items: unset !important;
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);
}
body nav:first-of-type ul {
list-style-type: unset !important;
margin: unset !important;
padding: unset !important;
overflow: unset !important;
display: unset !important;
}
body nav:first-of-type ul li {
float: unset !important;
}
body nav:first-of-type ul li ul {
display: unset !important;
position: unset !important;
background: unset !important;
backdrop-filter: unset !important;
-webkit-backdrop-filter: unset !important;
}

View File

@ -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 = []