tristonarmstrong/XeNote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Portfolio improvements

Browse Source
This commit is contained in:
Triston Armstrong 2023-12-29 00:03:35 -06:00
parent a3441a5f91
commit 4ce7d3fcf0
4 changed files with 72 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/ExternalLinkIcon.js Normal file
View File

@ -0,0 +1,11 @@
export default function ExternalLinkIcon() {
return (
<>
<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">
<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>
</>
)
}

10
components/Project.js
View File

@ -1,3 +1,5 @@
import ExternalLinkIcon from "./ExternalLinkIcon";
export default function Project({ label, date, url }) { export default function Project({ label, date, url }) {
return ( return (
<div className="flex flex-row items-baseline justify-between gap-2"> <div className="flex flex-row items-baseline justify-between gap-2">
@ -5,12 +7,8 @@ export default function Project({ label, date, url }) {
<div className="border border-dashed flex-1 border-gray-500 h-0"></div> <div className="border border-dashed flex-1 border-gray-500 h-0"></div>
<div className="flex gap-1 items-baseline"> <div className="flex gap-1 items-baseline">
<i className="text-xs">{date}</i> <i className="text-xs">{date}</i>
<a href={url}> <a href={url} target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" <ExternalLinkIcon />
stroke="currentColor" className="w-5 h-5 cursor-pointer text-blue-500 hover:text-blue-600">
<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>
</a> </a>
</div> </div>
</div> </div>

8
components/Skill.js
View File

@ -1,4 +1,8 @@
export default function Skill({ label, color }) { export default function Skill({ label, link = "#" }) {
return <div className={`bg-slate-500 text-white rounded-xl px-2 py-1 text-xs`}>{label}</div> 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>
)
} }

73
pages/index.js
View File

@ -2,6 +2,53 @@ import Job from "../components/Job";
import Skill from "../components/Skill"; import Skill from "../components/Skill";
import Project from "../components/Project"; import Project from "../components/Project";
import Head from "next/head"; import Head from "next/head";
import ExternalLinkIcon from "../components/ExternalLinkIcon";
function UsefulLink({ title, link }) {
return (
<a href={link}>
<li className="flex w-full items-baseline gap-1">
<div>{title}</div>
<div className="border flex-1 h-0 border-dashed border-blue-400" />
<ExternalLinkIcon />
</li>
</a>
)
}
function UsefulLinksList() {
return (
<ul className="list-none m-0 p-0 flex flex-col gap-1">
<UsefulLink title="CSS-Tricks" link="" />
<UsefulLink title="Indie Hackers" link="" />
<UsefulLink title="W3Schools" link="" />
<UsefulLink title="Simple Icons" link="https://simpleicons.org" />
<UsefulLink title="Another dummy link" link="" />
</ul>
)
}
function SocialLink({ SvgElement, link = "#" }) {
return (
<li className="m-auto hover:scale-150 transition duration-100">
<a href={link}>
{SvgElement}
</a>
</li>
)
}
function SocialLinksList() {
return (
<ul className="flex gap-2 list-none m-0 p-0 py-4">
<SocialLink SvgElement={<svg class="h-7 w-7 text-white" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="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 class="h-7 w-7 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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 class="h-7 w-7 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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 class="h-7 w-7 text-white" viewBox="0 0 24 24" 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 class="h-7 w-7 text-white" viewBox="0 0 24 24" 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>
)
}
export default function Landing({ jobs, skills, projects }) { export default function Landing({ jobs, skills, projects }) {
return ( return (
@ -10,28 +57,16 @@ export default function Landing({ jobs, skills, projects }) {
<body className="bg-gradient-to-b from-slate-900 to-slate-950 container max-w-full mx-auto text-gray-300 py-24 px-8 w-full " /> <body className="bg-gradient-to-b from-slate-900 to-slate-950 container max-w-full mx-auto text-gray-300 py-24 px-8 w-full " />
</Head> </Head>
<main className="grid grid-cols-8 gap-4"> <main className="grid grid-cols-8 gap-10">
<aside className="col-start-1 grid col-span-2 grid-rows-6 gap-3"> <aside className="col-start-1 grid col-span-2 grid-rows-6 gap-3">
<section className="sticky top-10 p-2 bg-slate-500 bg-opacity-10 rounded-xl row-span-1 col-span-6" > <section className="sticky top-10 p-2 bg-slate-500 bg-opacity-10 rounded-xl row-span-1 col-span-6" >
<h3 className="mt-1">Useful Links</h3> <h3 className="mt-1">Useful Links</h3>
<ul className="list-none m-0 p-0 flex flex-col gap-1"> <UsefulLinksList />
<a><li className="flex w-full items-baseline gap-1">CSS-Tricks<div className="border flex-1 h-0 border-dashed" />{"->"}</li></a>
<a><li className="flex w-full items-baseline gap-1">Indie Hackers<div className="border flex-1 h-0 border-dashed" />{"->"}</li></a>
<a><li className="flex w-full items-baseline gap-1">W3Schools<div className="border flex-1 h-0 border-dashed" />{"->"}</li></a>
<a href="https://simpleicons.org"><li className="flex w-full items-baseline gap-1">Simple Icons<div className="border flex-1 h-0 border-dashed" />{"->"}</li></a>
<a><li className="flex w-full items-baseline gap-1">Another dummy link<div className="border flex-1 h-0 border-dashed" />{"->"}</li></a>
</ul>
</section> </section>
<section className="grid grid-rows-3 col-start-1 col-span-6 sticky top-72 row-span-1" > <section className="grid grid-rows-3 col-start-1 col-span-6 sticky top-72 row-span-1" >
<div className="row-span-1 p-2 bg-slate-500 bg-opacity-10 rounded-xl "> <div className="row-span-1 p-2 bg-slate-500 bg-opacity-10 rounded-xl ">
<ul className="flex gap-2 list-none m-0 p-0 py-4"> <SocialLinksList />
<li className="m-auto"><a><svg class="h-7 w-7 text-white" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="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></a></li>
<li className="m-auto"><a><svg class="h-7 w-7 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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></a></li>
<li className="m-auto"><a><svg class="h-7 w-7 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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></a></li>
<li className="m-auto"><a><svg class="h-7 w-7 text-white" viewBox="0 0 24 24" 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></a></li>
<li className="m-auto"><a><svg class="h-7 w-7 text-white" viewBox="0 0 24 24" 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></a></li>
</ul>
</div> </div>
</section> </section>
</aside> </aside>
@ -77,15 +112,9 @@ export default function Landing({ jobs, skills, projects }) {
<article> <article>
<h2 className="text-1xl font-bold uppercase">Notes</h2> <h2 className="text-1xl font-bold uppercase">Notes</h2>
<p>An endless trail of links to my personal notes</p> <p>An endless trail of links to my personal notes</p>
<a href="/notes">Go To Notes {"->"}</a> <a href="/notes" target="_blank">Go To Notes {"->"}</a>
</article> </article>
</section> </section>
<section className=" col-span-2">
<h3>Tweets</h3>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">My code is like a fine wine - it only gets better with age... until it turns into vinegar. 🍷🤖 <a href="https://twitter.com/hashtag/CodeAgingGracefully?src=hash&amp;ref_src=twsrc%5Etfw">#CodeAgingGracefully</a></p>&mdash; Triston Armstrong (@triston_armstr) <a href="https://twitter.com/triston_armstr/status/1698395432471462005?ref_src=twsrc%5Etfw">September 3, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Now that’s a display! Thanks to <a href="https://twitter.com/ImmersedVR?ref_src=twsrc%5Etfw">@ImmersedVR</a> and BetterDisplay! <a href="https://t.co/qLdUGXUK7y">pic.twitter.com/qLdUGXUK7y</a></p>&mdash; Triston Armstrong (@triston_armstr) <a href="https://twitter.com/triston_armstr/status/1590096694951436288?ref_src=twsrc%5Etfw">November 8, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</section>
</main> </main>
</div> </div>
); );