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

redo some of the styles

Browse Source
This commit is contained in:
Triston Armstrong 2023-12-27 20:34:50 -06:00
parent a1826fdcba
commit 723cf54237
4 changed files with 33 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/Job.js
View File

@ -1,13 +1,13 @@
export default function Job({ logo, name, details, dateFrom, dateTo }) { export default function Job({ logo, name, details, dateFrom, dateTo }) {
return ( return (
<div className="flex items-center gap-x-3 border rounded-xl w-full p-2 bg-gray-200"> <div className="flex items-center gap-x-3 border rounded-xl w-full p-2 bg-slate-500 bg-opacity-50 border-slate-500">
<img src={logo} className="w-10 h-10 rounded-full" /> <img src={logo} className="w-10 h-10 rounded-full" />
<div className="flex flex-col flex-1"> <div className="flex flex-col flex-1">
<div className="flex justify-between"> <div className="flex justify-between">
<span className="block text-sm font-bold text-gray-900">{name}</span> <span className="block text-sm font-bold ">{name}</span>
<span className="block text-xs font-bold text-gray-500">{dateFrom} - {dateTo}</span> <span className="block text-xs font-bold ">{dateFrom} - {dateTo}</span>
</div> </div>
<span className="block text-xs text-gray-700">{details}</span> <span className="block text-xs ">{details}</span>
</div> </div>
</div> </div>
) )

4
components/Project.js
View File

@ -1,10 +1,10 @@
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">
<p className="text-gray-900 text-sm ">{label}</p> <p className="text-sm ">{label}</p>
<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 text-gray-800">{date}</i> <i className="text-xs">{date}</i>
<a href={url}> <a href={url}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5"
stroke="currentColor" className="w-5 h-5 cursor-pointer text-blue-500 hover:text-blue-600"> stroke="currentColor" className="w-5 h-5 cursor-pointer text-blue-500 hover:text-blue-600">

17
pages/index.js
View File

@ -1,4 +1,3 @@
import Script from "next/script";
import Job from "../components/Job"; 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";
@ -8,20 +7,20 @@ export default function Landing({ jobs, skills, projects }) {
return ( return (
<div> <div>
<Head> <Head>
<body className="bg-gradient-to-b from-gray-300 to-blue-200 container max-w-xl mx-auto text-gray-800 py-24 px-8 w-full " /> <body className="bg-gradient-to-b from-slate-900 to-slate-950 container max-w-xl mx-auto text-white py-24 px-8 w-full " />
</Head> </Head>
<main className="flex gap-6 flex-col"> <main className="flex gap-1 flex-col">
<section> <section>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="flex gap-4 items-center"> <div className="flex gap-4 items-center">
<img className="inline-block h-10 w-10 rounded-full ring-2 ring-white" <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="" /> src="https://gitlab.com/uploads/-/system/user/avatar/5083849/avatar.png?width=400" alt="" />
<h1 className="text-2xl text-gray-900 font-bold">Triston Armstrong</h1> <h1 className="text-2xl font-bold">Triston Armstrong</h1>
</div> </div>
<p className="text-sm">Full Stack Software Developer @ <a href="ventrahealth.com" <p className="text-sm">Full Stack Software Developer @ <a href="ventrahealth.com"
className="text-blue-500">VentraHealth</a></p> className="text-blue-500">VentraHealth</a></p>
<div className="w-full border-dashed border-gray-700 border-opacity-10 my-4 border "></div> <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 <p className="text-sm">I am a self taught Full Stack Software Developer with an unhealthy addiction to solving
problems using code.</p> problems using code.</p>
<div className="w-full border-dashed border-gray-700 border-opacity-10 my-4 border "></div> <div className="w-full border-dashed border-gray-700 border-opacity-10 my-4 border "></div>
@ -29,28 +28,28 @@ export default function Landing({ jobs, skills, projects }) {
</section> </section>
<section> <section>
<h2 className="text-1xl text-gray-900 font-bold uppercase">Skills</h2> <h2 className="text-1xl font-bold uppercase">Skills</h2>
<div className="flex gap-2 py-4" id="skills"> <div className="flex gap-2 py-4" id="skills">
{skills.map(skill => <Skill key={skill.label} label={skill.label} color={skill.color} />)} {skills.map(skill => <Skill key={skill.label} label={skill.label} color={skill.color} />)}
</div> </div>
</section> </section>
<section> <section>
<h2 className="text-1xl text-gray-900 font-bold uppercase">Jobs</h2> <h2 className="text-1xl font-bold uppercase">Jobs</h2>
<div className="flex flex-col gap-3 py-4" id="jobs"> <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} />)} {jobs.map(job => <Job key={job.name} logo={job.logo} name={job.name} details={job.details} dateFrom={job.dateFrom} dateTo={job.dateTo} />)}
</div> </div>
</section> </section>
<section> <section>
<h2 className="text-1xl text-gray-900 font-bold uppercase">Personal Projects</h2> <h2 className="text-1xl font-bold uppercase">Personal Projects</h2>
<div className="flex flex-col gap-3 py-4" id="projects"> <div className="flex flex-col gap-3 py-4" id="projects">
{projects.map(project => <Project key={project.label} label={project.label} date={project.date} url={project.url} />)} {projects.map(project => <Project key={project.label} label={project.label} date={project.date} url={project.url} />)}
</div> </div>
</section> </section>
<section> <section>
<h2 className="text-1xl text-gray-900 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">Go To Notes {"->"}</a>
</section> </section>

38
styles/global.css
View File

@ -3,27 +3,27 @@
@tailwind utilities; @tailwind utilities;
:root { :root {
--background-body: #fff; --background-body: #202b38;
--background: #efefef; --background: #161f27;
--background-alt: #f7f7f7; --background-alt: #1a242f;
--selection: #9e9e9e; --selection: #1c76c5;
--text-main: #363636; --text-main: #dbdbdb;
--text-bright: #000; --text-bright: #fff;
--text-muted: #70777f; --text-muted: #a9b1ba;
--links: #0076d1; --links: #41adff;
--focus: #0096bfab; --focus: #0096bfab;
--border: #dbdbdb; --border: #526980;
--code: #000; --code: #ffbe85;
--animation-duration: 0.1s; --animation-duration: 0.1s;
--button-base: #d0cfcf; --button-base: #0c151c;
--button-hover: #9b9b9b; --button-hover: #040a0f;
--scrollbar-thumb: color-mod(var(--button-hover) lightness(+6%)); --scrollbar-thumb: var(--button-hover);
--scrollbar-thumb-hover: var(--button-hover); --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(-30%));
--form-placeholder: #949494; --form-placeholder: #a9a9a9;
--form-text: #1d1d1d; --form-text: #fff;
--variable: #39a33c; --variable: #d941e2;
--highlight: #ff0; --highlight: #efdb43;
--select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27); --select-arrow: svg-load('./assets/select-arrow.svg', fill: #efefef);
} }
@layer components { @layer components {