From fd51f273f41e970e8a6024faa1bd0d36e9b84f32 Mon Sep 17 00:00:00 2001 From: Triston Armstrong Date: Sat, 6 Jan 2024 21:04:57 -0600 Subject: [PATCH] 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 +- components/CustomLink.js | 22 - components/ExternalLinkIcon.js | 12 +- components/FolderTree.js | 31 +- components/Job.tsx | 18 +- components/ListItem.tsx | 36 +- components/MDContainer.js | 2 +- components/MDContent.tsx | 18 +- components/Skill.tsx | 4 +- components/SocialLinks/SocialLink.js | 6 +- components/SocialLinks/SocialLinks.js | 15 +- components/UsefulLinks/UsefulLink.js | 6 +- components/UsefulLinks/UsefulLinks.js | 36 +- package.json | 3 +- pages/_app.tsx | 2 +- pages/index.tsx | 141 ++-- pages/notes/[id].tsx | 8 +- pages/notes/index.tsx | 8 +- styles/global.css | 918 +++++++------------------- tailwind.config.js | 16 - 20 files changed, 441 insertions(+), 863 deletions(-) delete mode 100644 components/CustomLink.js delete mode 100644 tailwind.config.js diff --git a/components/Border.tsx b/components/Border.tsx index 94c66f1..ec76af1 100644 --- a/components/Border.tsx +++ b/components/Border.tsx @@ -2,6 +2,6 @@ import type { HTMLAttributes } from "react"; export function Border({ className }: { className?: HTMLAttributes['className'] }) { return ( -
+ ) } diff --git a/components/CustomLink.js b/components/CustomLink.js deleted file mode 100644 index f9d6287..0000000 --- a/components/CustomLink.js +++ /dev/null @@ -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 === '' ? ( - - - {children} - - - ) : ( - - {children} - - ); -} \ No newline at end of file diff --git a/components/ExternalLinkIcon.js b/components/ExternalLinkIcon.js index 6b4f532..95c5f90 100644 --- a/components/ExternalLinkIcon.js +++ b/components/ExternalLinkIcon.js @@ -1,11 +1,9 @@ export default function ExternalLinkIcon() { return ( -
- - - -
+ + + ) } diff --git a/components/FolderTree.js b/components/FolderTree.js index ae63181..b0a8922 100644 --- a/components/FolderTree.js +++ b/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) => ( - - {Array.isArray(nodes.children) - ? nodes.children.map((node) => renderTree(node)) - : null} - - ); - 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 ( <> - {"<-"} Back To Portfolio + {"<-"} Back To Portfolio - {renderTree(props.tree)} + {memoTree} ); @@ -69,3 +67,12 @@ function ChevronDownIcon() { ) } +function renderTree(nodes, layer) { + return ( + + {Array.isArray(nodes.children) + ? nodes.children.map((node) => renderTree(node, layer + 1)) + : null} + + ) +} diff --git a/components/Job.tsx b/components/Job.tsx index f7eb029..bbd0868 100644 --- a/components/Job.tsx +++ b/components/Job.tsx @@ -8,15 +8,15 @@ export interface JobProps { export default function Job({ logo, name, details, dateFrom, dateTo }: JobProps) { return ( -
- -
-
- {name} - {dateFrom} - {dateTo} +
+ + +
+ {name} + {dateFrom} - {dateTo}
- {details} -
-
+ {details} + + ) } diff --git a/components/ListItem.tsx b/components/ListItem.tsx index 93040e0..514ba35 100644 --- a/components/ListItem.tsx +++ b/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 ( -
- -

{label}

- - -
- {!!date && {date}} - -
+
+ + + +
) } + +function Link({ url, label }) { + return ( + + {label} + + + ) +} + +function Divider() { + return ( +
+ ) +} + +function Date({ date }) { + if (!date) return null + return {date} + +} diff --git a/components/MDContainer.js b/components/MDContainer.js index 0e4ac66..38f95d1 100644 --- a/components/MDContainer.js +++ b/components/MDContainer.js @@ -12,7 +12,7 @@ function MDContainer({ post, fileNames }) { } return ( -
+
{posts.map(p => ( ))} diff --git a/components/MDContent.tsx b/components/MDContent.tsx index d22148d..e31f833 100644 --- a/components/MDContent.tsx +++ b/components/MDContent.tsx @@ -12,25 +12,25 @@ interface BackLinksProps { } function BackLinks({ linkList }: BackLinksProps) { - return (
-

Link to this note

+ return (
+

Link to this note

{(linkList != null && linkList.length > 0) ? <> -
+
{linkList.map(aLink => - - : <>

No backlinks found

} + : <>

No backlinks found

}
); } @@ -45,7 +45,7 @@ function MDContent({ content, backLinks }: MDContentProps) { return ( -
+
@@ -64,7 +64,7 @@ function BackLinksGroup({ links }: BackLinksGroupProps) { if (!links?.length) { return ( -

No backlinks found

+

No backlinks found

) } diff --git a/components/Skill.tsx b/components/Skill.tsx index fdf58aa..ec42bb4 100644 --- a/components/Skill.tsx +++ b/components/Skill.tsx @@ -6,9 +6,7 @@ export interface SkillProps { export default function Skill({ label, link = "#" }: SkillProps) { return ( -
- {label} -
+ {label} ) } diff --git a/components/SocialLinks/SocialLink.js b/components/SocialLinks/SocialLink.js index d023f30..0b48182 100644 --- a/components/SocialLinks/SocialLink.js +++ b/components/SocialLinks/SocialLink.js @@ -1,9 +1,9 @@ export function SocialLink({ SvgElement, link = "#" }) { return ( - + ) } diff --git a/components/SocialLinks/SocialLinks.js b/components/SocialLinks/SocialLinks.js index 3aa1fde..da97d0e 100644 --- a/components/SocialLinks/SocialLinks.js +++ b/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 ( -
- } /> - } /> - } /> - } /> - } /> +
+ } /> + } /> + } /> + } /> + } />
) } diff --git a/components/UsefulLinks/UsefulLink.js b/components/UsefulLinks/UsefulLink.js index 33a20ad..dbfad4f 100644 --- a/components/UsefulLinks/UsefulLink.js +++ b/components/UsefulLinks/UsefulLink.js @@ -2,10 +2,10 @@ import ExternalLinkIcon from "../ExternalLinkIcon.js"; export function UsefulLink({ title, link }) { return ( - -
  • + +
  • {title}
    -
    +
    • diff --git a/components/UsefulLinks/UsefulLinks.js b/components/UsefulLinks/UsefulLinks.js index 5aca2ad..c611270 100644 --- a/components/UsefulLinks/UsefulLinks.js +++ b/components/UsefulLinks/UsefulLinks.js @@ -3,15 +3,31 @@ import { UsefulLink } from "./UsefulLink" export function UsefulLinksList() { return ( -
      - - - - - - - - -
    + <> +
    +
    ๐Ÿงฐ Tools
    + + + + + + + + +
    + +
    +
    ๐ŸŽจ NoCss
    + + + + + + + + + +
    + ) } diff --git a/package.json b/package.json index 907f98f..b923b3b 100644 --- a/package.json +++ b/package.json @@ -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" } -} \ No newline at end of file +} diff --git a/pages/_app.tsx b/pages/_app.tsx index 4428e05..79ac448 100644 --- a/pages/_app.tsx +++ b/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"; diff --git a/pages/index.tsx b/pages/index.tsx index 6d28fb6..bc8bd51 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -13,86 +13,93 @@ interface LandingProps { projects: ProjectsType[] } +/* + * bahunya.css + * + * new.css + + + */ export default function Landing({ jobs, skills, projects }: LandingProps) { return (
    - + + -
    - + -
    -
    -
    -
    - -

    Triston Armstrong

    -
    -

    Full Stack Software Developer @ VentraHealth

    -
    -

    I am a self taught Full Stack Software Developer with an unhealthy addiction to solving - problems using code.

    +
    +

    ๐Ÿ’ผ Jobs

    +
    + {jobs.map(job => )} +
    +
    -
    -
    - -
    -
    - -
    -
    -
    -

    Skills

    -
    - {skills.map(skill => )} -
    -
    - -
    -

    Jobs

    -
    - {jobs.map(job => )} -
    -
    - -
    -

    Personal Projects

    -
    - {projects.map(project => )} -
    -
    - - - - +
    +

    ๐Ÿšง Projects

    +
    + {projects.map(project => )} +
    -
    + + +
    ) } diff --git a/pages/notes/[id].tsx b/pages/notes/[id].tsx index 8a77420..dc02ea7 100644 --- a/pages/notes/[id].tsx +++ b/pages/notes/[id].tsx @@ -21,11 +21,13 @@ export default function Home({ note, backLinks, fileNames: _, tree, flattenNodes {note.title && } - -
    -