innocuous-symmetry/mikayla-dobson-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

in progress: os theme matching

Browse Source
This commit is contained in:
Mikayla Dobson
2023-10-03 16:18:56 -05:00
parent 0c04824df3
commit 62d9c9627e
18 changed files with 179 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/about/page.tsx
View File

@@ -5,6 +5,7 @@ import { Experience, Projects, Skills } from "../../components/Resume";
import { RxChevronDown } from "react-icons/rx"; import { RxChevronDown } from "react-icons/rx";
import { useState } from "react"; import { useState } from "react";
import { FaGithub, FaLinkedin } from "react-icons/fa"; import { FaGithub, FaLinkedin } from "react-icons/fa";
import Card from "@/components/ui/Card";
export default function Resume() { export default function Resume() {
const [skillsVisible, setSkillsVisible] = useState(true); const [skillsVisible, setSkillsVisible] = useState(true);
@@ -13,27 +14,27 @@ export default function Resume() {
const [projectsVisible, setProjectsVisible] = useState(true); const [projectsVisible, setProjectsVisible] = useState(true);
return ( return (
<div className="min-h-screen bg-gradient-to-b from-black to-slate-950 bg-fixed flex flex-col items-center p-4 z-10"> <div className="min-h-screen bg-gradient-to-b from-slate-300 to-blue-100 dark:from-black dark:to-slate-900 bg-fixed flex flex-col items-center p-4 z-10">
<section className="w-full pb-4"> <section className="w-full pb-4">
<h1 className="uppercase text-4xl text-rose-300 tracking-wide leading-relaxed font-light">Mikayla Dobson</h1> <h1 className="uppercase text-4xl text-rose-600 dark:text-rose-300 tracking-wide leading-relaxed font-light">Mikayla Dobson</h1>
<h2 className="text-2xl tracking-wide font-light">Software Engineer | Nashville, TN</h2> <h2 className="text-2xl tracking-wide font-light dark:text-rose-100">Software Engineer | Nashville, TN</h2>
<div className="hidden bg-slate-950"></div> <div className="hidden bg-slate-950"></div>
<div className="flex items-center pt-2"> <div className="flex items-center pt-2 dark:text-rose-100">
<p className="mr-2">Download a copy for later?</p> <p className="mr-2">Download a copy for later?</p>
<a download href="/resume/Mikayla Resume 0623.pdf" target="_blank" referrerPolicy="no-referrer" rel="noopener" className="mr-2 cursor-pointer hover:text-sky-300 active:text-white bg-slate-800 p-1 rounded-lg">.pdf</a> <a download href="/resume/Mikayla Resume 0623.pdf" target="_blank" referrerPolicy="no-referrer" rel="noopener" className="mr-2 cursor-pointer hover:text-sky-300 active:text-white bg-slate-500 dark:bg-slate-800 py-1 px-1.5 rounded-lg">.pdf</a>
<a download href="/resume/Mikayla Resume 0623.docx" target="_blank" referrerPolicy="no-referrer" rel="noopener" className="mr-2 cursor-pointer hover:text-sky-300 active:text-white bg-slate-800 p-1 rounded-lg">.docx</a> <a download href="/resume/Mikayla Resume 0623.docx" target="_blank" referrerPolicy="no-referrer" rel="noopener" className="mr-2 cursor-pointer hover:text-sky-300 active:text-white bg-slate-500 dark:bg-slate-800 py-1 px-1.5 rounded-lg">.docx</a>
</div> </div>
<div className="flex pt-2"> <div className="flex pt-2">
<Link passHref className="flex items-center mr-8 hover:text-sky-300 active:text-white" href="https://github.com/innocuous-symmetry"><FaGithub className="mr-2" />innocuous-symmetry</Link> <Link passHref className="flex items-center dark:text-white mr-8 hover:text-sky-300 active:text-white" href="https://github.com/innocuous-symmetry"><FaGithub className="mr-2" />innocuous-symmetry</Link>
<Link passHref className="flex items-center mr-8 hover:text-sky-300 active:text-white" href="https://linkedin.com/in/mikayla-dobson"><FaLinkedin className="mr-2" />mikayla-dobson</Link> <Link passHref className="flex items-center dark:text-white mr-8 hover:text-sky-300 active:text-white" href="https://linkedin.com/in/mikayla-dobson"><FaLinkedin className="mr-2" />mikayla-dobson</Link>
</div> </div>
</section> </section>
<section className="place-self-start mt-8 w-full"> <section className="place-self-start mt-8 w-full">
<button onClick={() => setSkillsVisible(!skillsVisible)} className={"sticky top-[5.5rem] w-full flex items-center text-rose-300 uppercase tracking-wide list-none" + (skillsVisible ? " bg-black" : "")}> <button onClick={() => setSkillsVisible(!skillsVisible)} className={"sticky top-[5.5rem] w-full flex items-center text-rose-500 dark:text-rose-300 uppercase tracking-wide list-none" + (skillsVisible ? " bg-slate-400 dark:bg-black" : "")}>
<span className="font-light text-3xl leading-relaxed">Skills</span> <span className="font-light text-3xl leading-relaxed">Skills</span>
<RxChevronDown className={`ml-2 transition ${skillsVisible ? "rotate-180" : "rotate-0"}`} /> <RxChevronDown className={`ml-2 transition ${skillsVisible ? "rotate-180" : "rotate-0"}`} />
</button> </button>
@@ -41,7 +42,7 @@ export default function Resume() {
</section> </section>
<section className="place-self-start mt-8 w-full"> <section className="place-self-start mt-8 w-full">
<button onClick={() => setExperienceVisible(!experienceVisible)} className="sticky top-[5.5rem] w-full bg-black flex items-center text-rose-300 uppercase tracking-wide list-none"> <button onClick={() => setExperienceVisible(!experienceVisible)} className={"sticky top-[5.5rem] w-full flex items-center text-rose-500 dark:text-rose-300 uppercase tracking-wide list-none" + (experienceVisible ? "bg-slate-400 dark:bg-black" : "")}>
<span className="font-light text-3xl leading-relaxed">Experience</span> <span className="font-light text-3xl leading-relaxed">Experience</span>
<RxChevronDown className={`ml-2 transition ${experienceVisible ? "rotate-180" : "rotate-0"}`} /> <RxChevronDown className={`ml-2 transition ${experienceVisible ? "rotate-180" : "rotate-0"}`} />
</button> </button>
@@ -49,26 +50,26 @@ export default function Resume() {
</section> </section>
<section className="place-self-start mt-8 w-full"> <section className="place-self-start mt-8 w-full">
<button onClick={() => setEducationVisible(!educationVisible)} className={"sticky top-[5.5rem] w-full flex items-center text-rose-300 uppercase tracking-wide list-none" + (educationVisible ? " bg-black" : "")}> <button onClick={() => setEducationVisible(!educationVisible)} className={"sticky top-[5.5rem] w-full flex items-center text-rose-300 uppercase tracking-wide list-none" + (educationVisible ? " bg-slate-400 dark:bg-black" : "")}>
<h2 className="font-light text-3xl leading-relaxed">Education</h2> <h2 className="font-light text-3xl leading-relaxed">Education</h2>
<RxChevronDown className={`ml-2 transition ${educationVisible ? "rotate-0" : "rotate-180"}`} /> <RxChevronDown className={`ml-2 transition ${educationVisible ? "rotate-0" : "rotate-180"}`} />
</button> </button>
{ {
educationVisible ? ( educationVisible ? (
<article className={(educationVisible ? "h-auto my-4 opacity-100 bg-black" : "h-0 opacity-0 my-0") + " transition duration-500 bg-opacity-40 shadow shadow-black p-3 rounded-lg"}> <Card>
<h3 className="uppercase text-2xl text-rose-600">Southern Methodist University</h3> <h3 className="uppercase text-2xl text-rose-600">Southern Methodist University</h3>
<p className="font-light italic text-rose-300">Dallas, TX - B.A. Music</p> <p className="font-light italic text-rose-300">Dallas, TX - B.A. Music</p>
<div className="h-[1px] w-full my-3 bg-rose-300" /> <div className="h-[1px] w-full my-3 bg-rose-300" />
<p className="leading-relaxed font-light">Concentrations in Piano Performance and Music Composition. Special focus on orchestral composition and arranging. Minor in French Language and Culture.</p> <p className="dark:text-white leading-relaxed font-light">Concentrations in Piano Performance and Music Composition. Special focus on orchestral composition and arranging. Minor in French Language and Culture.</p>
</article> </Card>
) : null ) : null
} }
</section> </section>
<section className="place-self-start mt-8 w-full"> <section className="place-self-start mt-8 w-full">
<button onClick={() => setProjectsVisible(!projectsVisible)} className={"sticky top-[5.5rem] w-full flex items-center text-rose-300 uppercase tracking-wide list-none " + (projectsVisible ? " bg-black" : "")}> <button onClick={() => setProjectsVisible(!projectsVisible)} className={"sticky top-[5.5rem] w-full flex items-center text-rose-300 uppercase tracking-wide list-none " + (projectsVisible ? " bg-slate-400 dark:bg-black" : "")}>
<h2 className="font-light text-3xl leading-relaxed">Projects</h2> <h2 className="font-light text-3xl leading-relaxed">Projects</h2>
<RxChevronDown className={`ml-2 transition ${projectsVisible ? "rotate-180" : "rotate-0"}`} /> <RxChevronDown className={`ml-2 transition ${projectsVisible ? "rotate-180" : "rotate-0"}`} />
</button> </button>

23
app/content.mdx
View File

@@ -1,23 +0,0 @@
# Mikayla Dobson | Software Engineer
Software design at the confluence of efficiency, ingenuity, and artistry.
## Why do you want me on your team?
Here are some things I've provided for my teams in the past:
### Connecting the dots
My strength lies in the big picture. My background as a composer of classical music has given me a lasting sense for how to assemble the pieces of a project into a cohesive whole.
As a software engineer, this means:
- I'm comfortable living in the world between the front-end and back-end
- I love solving emergent problems as a project's stack is expanding
---
## Want to know more?
You're in the right place! This site is the best place to learn about the work I've done, what I know, and what I've
done with the knowledge I have.

24
app/globals.css
View File

@@ -1,27 +1,3 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}
}
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}

11
app/layout.tsx
View File

@@ -18,7 +18,7 @@ export const cabin = Cabin({ subsets: ['latin'] })
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({ children }: { children: React.ReactNode }) {
const pathname = usePathname(); const pathname = usePathname();
const [bg, setBg] = useState('bg-slate-900'); const [bg, setBg] = useState('bg-slate-400 dark:bg-slate-900');
const [overlay, setOverlay] = useState(false); const [overlay, setOverlay] = useState(false);
const [pageIsScrolled, setPageIsScrolled] = useState(false); const [pageIsScrolled, setPageIsScrolled] = useState(false);
@@ -29,10 +29,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
setBg('bg-darkPlum'); setBg('bg-darkPlum');
setOverlay(true); setOverlay(true);
break; break;
case '/':
case '/about': case '/about':
setBg("bg-blue-100 dark:bg-slate-900");
setOverlay(false);
break;
case '/':
default: default:
setBg('bg-slate-900'); setBg('bg-slate-400 dark:bg-slate-900');
setOverlay(false); setOverlay(false);
break; break;
} }
@@ -62,7 +65,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<IconContext.Provider value={{}}> <IconContext.Provider value={{}}>
<MDXProvider components={components}> <MDXProvider components={components}>
<main className={`${bg} min-h-screen`}> <main className={`${bg} min-h-screen`}>
<div id="navbar-spacer" className="h-[6rem] w-full bg-black" /> <div id="navbar-spacer" className="h-[6rem] w-full bg-slate-300 dark:bg-black " />
{children} {children}
</main> </main>
</MDXProvider> </MDXProvider>

12
app/page.tsx
View File

@@ -5,7 +5,7 @@ import Link from "next/link";
export default function Home() { export default function Home() {
return ( return (
<div className="flex flex-col w-full"> <div className="flex flex-col w-full">
<div id="hero" className="bg-gradient-to-b from-black to-slate-900 p-4 flex flex-col items-end"> <div id="hero" className="bg-gradient-to-b from-slate-300 to-slate-400 dark:from-black dark:to-slate-900 p-4 flex flex-col items-end">
<ColorChangeName /> <ColorChangeName />
{/* <div className="w-full h-[10vh] object-scale-down bg-no-repeat"> {/* <div className="w-full h-[10vh] object-scale-down bg-no-repeat">
@@ -18,17 +18,17 @@ export default function Home() {
<Link passHref href="/about"> <Link passHref href="/about">
<Image className="rounded-full my-4" src="/img/profile.jpeg" alt="image of Mikayla Dobson" width={125} height={125} /> <Image className="rounded-full my-4" src="/img/profile.jpeg" alt="image of Mikayla Dobson" width={125} height={125} />
</Link> </Link>
<h2 className="text-blue-300 text-2xl mb-2">Hi! My name is Mikayla.</h2> <h2 className="text-slate-700 dark:text-blue-300 text-2xl mb-2">Hi! My name is Mikayla.</h2>
<p className="px-4 sm:px-12">I build full-stack software solutions for the web, answer open-ended questions, and pet cats.</p> <p className="px-4 sm:px-12 dark:text-white">I build full-stack software solutions for the web, answer open-ended questions, and pet cats.</p>
<div id="actions" className="flex justify-around my-8"> <div id="actions" className="flex justify-around my-8">
<Link className="flex flex-col items-center justify-center text-center px-4 sm:px-8 border-white border-[1px] p-2 w-2/5 rounded-md" href="/contact"> <Link className="flex flex-col items-center justify-center text-center px-4 sm:px-8 border-slate-700 dark:border-white dark:text-white border-[1px] p-2 w-2/5 rounded-md" href="/contact">
Tell me what I can do for you Tell me what I can do for you
</Link> </Link>
<Link className="hidden sm:flex flex-col items-center justify-center text-center px-8 border-white border p-2 w-2/5 rounded-md" href="/projects"> <Link className="hidden sm:flex flex-col items-center justify-center text-center px-8 border-slate-700 dark:border-white dark:text-white border p-2 w-2/5 rounded-md" href="/projects">
And check out some of my work while you&apos;re at it And check out some of my work while you&apos;re at it
</Link> </Link>
<Link className="sm:hidden flex flex-col items-center justify-center px-4 border-white border p-2 w-2/5 rounded-md" href="/projects"> <Link className="sm:hidden flex flex-col items-center justify-center px-4 border-slate-700 dark:border-white dark:text-white border p-2 w-2/5 rounded-md" href="/projects">
Check out my work Check out my work
</Link> </Link>
</div> </div>

2
components/Home/index.tsx
View File

@@ -13,7 +13,7 @@ export const ColorChangeName = () => {
<h2 className={"px-4 uppercase text-2xl text-transparent font-bold bg-opacity-100 animate-text-gradient bg-clip-text bg-gradient-to-r " + `from-${secondColor.split('-').slice(1).join('-')} to-${thirdColor.split('-').slice(1).join('-')}`}>Software Engineer</h2> <h2 className={"px-4 uppercase text-2xl text-transparent font-bold bg-opacity-100 animate-text-gradient bg-clip-text bg-gradient-to-r " + `from-${secondColor.split('-').slice(1).join('-')} to-${thirdColor.split('-').slice(1).join('-')}`}>Software Engineer</h2>
<div id="hero-mask" className="bg-inherit bg-opacity-10 p-4 flex flex-col"> <div id="hero-mask" className="bg-inherit bg-opacity-10 p-4 flex flex-col">
<p className="mt-4 text-right text-sky-300 tracking-wide">Pragmatic software design with style and artistry.</p> <p className="mt-4 text-right text-slate-700 dark:text-sky-300 tracking-wide">Pragmatic software design with style and artistry.</p>
</div> </div>
</> </>
) )

2
components/Links/FeaturedLink.tsx
View File

@@ -7,7 +7,7 @@ export default function FeaturedLink({ href, label, logo, disabled = false}: Lin
<Panel width="1/2"> <Panel width="1/2">
<div className="flex flex-col items-center p-8"> <div className="flex flex-col items-center p-8">
{logo} {logo}
<a aria-disabled={disabled} href="https://app.dropper.studio/store/innocuous-symmetry" target="_blank">{label}</a> <a aria-disabled={disabled} href={href} target="_blank">{label}</a>
</div> </div>
</Panel> </Panel>

2
components/Navbar/index.tsx
View File

@@ -12,7 +12,7 @@ export default function Navbar({ pageIsScrolled = false }) {
return ( return (
<> <>
<div id="navbar" className={"w-full z-50 fixed flex flex-nowrap items-baseline justify-apart bg-opacity-95 px-8 py-4 " + (mobileMenuOpen ? "bg-[#131313] " : pageIsScrolled ? "bg-black " : "bg-inherit ") + " text-white transition-all duration-200"}> <div id="navbar" className={"w-full z-50 fixed flex flex-nowrap items-baseline justify-apart bg-opacity-95 px-8 py-4 " + (mobileMenuOpen ? "bg-slate-300 dark:bg-[#131313] " : pageIsScrolled ? "bg-slate-300 dark:bg-black " : "bg-inherit ") + " text-white transition-all duration-200"}>
<Link passHref href="/" className="w-1/4"> <Link passHref href="/" className="w-1/4">
<InlineLogo customHookInstance={navbarColorShift} /> <InlineLogo customHookInstance={navbarColorShift} />
</Link> </Link>

41
components/Resume/Experience.tsx
View File

@@ -1,41 +1,42 @@
import Link from "next/link"; import Link from "next/link";
import Card from "../ui/Card";
const Experience = () => { const Experience = () => {
return ( return (
<section className="w-full"> <section className="w-full">
<article className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg"> <Card>
<Link target="_blank" referrerPolicy="no-referrer" href="https://dropper.studio" className="uppercase text-2xl text-rose-600 hover:text-rose-400 active:text-rose-600">Dropper Studio</Link> <Link target="_blank" referrerPolicy="no-referrer" href="https://dropper.studio" className="uppercase text-2xl text-rose-600 hover:text-rose-400 active:text-rose-600">Dropper Studio</Link>
<p className="font-light italic text-rose-300">Nashville, TN (hybrid) - Software Engineer</p> <p className="font-light italic text-black dark:text-rose-300">Nashville, TN (hybrid) - Software Engineer</p>
<p>March 2023 - present</p> <p className="dark:text-white">March 2023 - present</p>
<div className="h-[1px] w-full my-3 bg-rose-300" /> <div className="h-[1px] w-full my-3 bg-rose-600 dark:bg-rose-300" />
<p className="leading-relaxed font-light">Building a full-stack e-commerce platform for the music industry. Experience includes: producing a functional proof of concept from design specifications; constructing a scalable, performant full-stack architecture; and project/team management skills.</p> <p className="dark:text-white leading-relaxed font-light">Building a full-stack e-commerce platform for the music industry. Experience includes: producing a functional proof of concept from design specifications; constructing a scalable, performant full-stack architecture; and project/team management skills.</p>
<Link href="/about/work/dropper" className="text-rose-300 hover:text-rose-500 active:text-rose-300">Learn more about my work with Dropper</Link> <Link href="/about/work/dropper" className="text-rose-600 hover:text-rose-400 active:text-rose-300">Learn more about my work with Dropper</Link>
</article> </Card>
<article className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg"> <Card>
<Link target="_blank" referrerPolicy="no-referrer" href="https://dization.com/" className="uppercase text-2xl text-rose-600 hover:text-rose-400 active:text-rose-600">Dization, Inc.</Link> <Link target="_blank" referrerPolicy="no-referrer" href="https://dization.com/" className="uppercase text-2xl text-rose-600 hover:text-rose-400 active:text-rose-600">Dization, Inc.</Link>
<p className="font-light italic text-rose-300">Pittsburgh, PA (remote) - Software Engineer (intern)</p> <p className="font-light italic text-black dark:text-rose-300">Pittsburgh, PA (remote) - Software Engineer (intern)</p>
<p>October 2022 - March 2023</p> <p className="dark:text-white">October 2022 - March 2023</p>
<div className="h-[1px] w-full my-3 bg-rose-300" /> <div className="h-[1px] w-full my-3 bg-rose-600 dark:bg-rose-300" />
<p className="leading-relaxed font-light">Participated in the development of an enterprise project management solution. Built several new features, contributed to design and UX discussions, and took initiative on debugging efforts. Technologies included PHP, MySQL, jQuery, and Bootstrap.</p> <p className="dark:text-white leading-relaxed font-light">Participated in the development of an enterprise project management solution. Built several new features, contributed to design and UX discussions, and took initiative on debugging efforts. Technologies included PHP, MySQL, jQuery, and Bootstrap.</p>
<Link href="/about/work/dization" className="text-rose-300 hover:text-rose-500 active:text-rose-300">Learn more about my work with Dization</Link> <Link href="/about/work/dization" className="text-rose-600 hover:text-rose-400 active:text-rose-300">Learn more about my work with Dization</Link>
</article> </Card>
<article className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg"> <Card>
<h3 className="uppercase text-2xl text-rose-600">Metazu Studio</h3> <h3 className="uppercase text-2xl text-rose-600">Metazu Studio</h3>
<p className="font-light italic text-rose-300">Nashville, TN (hybrid) - Software Engineer (consultant)</p> <p className="font-light italic text-black dark:text-rose-300">Nashville, TN (hybrid) - Software Engineer (consultant)</p>
<p>March 2022 - December 2022</p> <p className="dark:text-white">March 2022 - December 2022</p>
<div className="h-[1px] w-full my-3 bg-rose-300" /> <div className="h-[1px] w-full my-3 bg-rose-600 dark:bg-rose-300" />
<p className="leading-relaxed font-light">Consulted on small teams for the design and engineering of full-stack web applications for clients. Used technologies including Node.js, React, MongoDB, and PostgreSQL.</p> <p className="dark:text-white leading-relaxed font-light">Consulted on small teams for the design and engineering of full-stack web applications for clients. Used technologies including Node.js, React, MongoDB, and PostgreSQL.</p>
</article> </Card>
<Link href="/about/work" className="text-rose-300 hover:text-rose-500 active:text-rose-300 bg-slate-950 p-2 rounded-lg shadow-lg">See more about my experience</Link> <Link href="/about/work" className="text-rose-300 hover:text-rose-500 active:text-rose-300 bg-slate-950 p-2 rounded-lg shadow-lg">See more about my experience</Link>
</section> </section>

22
components/Resume/Projects.tsx
View File

@@ -1,24 +1,26 @@
import Card from "../ui/Card"
const Projects = () => ( const Projects = () => (
<section className="w-full"> <section className="w-full">
<article className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg"> <Card>
<h3 className="uppercase text-2xl text-rose-600">Subsequent</h3> <h3 className="uppercase text-2xl text-rose-600">Subsequent</h3>
<p className="font-light italic text-rose-300">May 2023 - present</p> <p className="font-light italic text-rose-300">May 2023 - present</p>
<p>TypeScript, Tone.js</p> <p className="text-rose-300">TypeScript, Tone.js</p>
<div className="h-[1px] w-full my-3 bg-rose-300" /> <div className="h-[1px] w-full my-3 bg-rose-600 dark:bg-rose-300" />
<p className="leading-relaxed font-light">A tool for music creators to explore generative music composition. Composed of an engine that wraps around Tone.js, allowing the end user to specify parameters for indefinite generative music output. To be published as an NPM package, including providers to be consumed in front-end web frameworks.</p> <p className="dark:text-white leading-relaxed font-light">A tool for music creators to explore generative music composition. Composed of an engine that wraps around Tone.js, allowing the end user to specify parameters for indefinite generative music output. To be published as an NPM package, including providers to be consumed in front-end web frameworks.</p>
</article> </Card>
<article className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg"> <Card>
<h3 className="uppercase text-2xl text-rose-600">Recipin</h3> <h3 className="uppercase text-2xl text-rose-600">Recipin</h3>
<p className="font-light italic text-rose-300">October 2022 - present</p> <p className="font-light italic text-rose-300">October 2022 - present</p>
<p>React, Express, TypeScript, PostgreSQL</p> <p className="text-rose-300">React, Express, TypeScript, PostgreSQL</p>
<div className="h-[1px] w-full my-3 bg-rose-300" /> <div className="h-[1px] w-full my-3 bg-rose-600 dark:bg-rose-300" />
<p className="leading-relaxed font-light">A full stack web application for storing personal recipes in collections and sharing them in a lightweight social network.</p> <p className="dark:text-white leading-relaxed font-light">A full stack web application for storing personal recipes in collections and sharing them in a lightweight social network.</p>
</article> </Card>
</section> </section>
) )

113
components/Resume/Skills.tsx
View File

@@ -1,138 +1,139 @@
import { RxChevronDown } from "react-icons/rx"; import { RxChevronDown } from "react-icons/rx";
import Link from "next/link"; import Link from "next/link";
import Chip from "../ui/Chip";
const Skills = () => ( const Skills = () => (
<section className="w-full"> <section className="w-full">
<div className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg"> <div id="strong-skills" className="bg-slate-400 dark:bg-slate-800 dark:bg-opacity-40 p-3 my-4 rounded-lg">
<h3 className="uppercase text-2xl text-rose-600">Strong:</h3> <h3 className="uppercase text-2xl text-rose-600 dark:text-rose-300">Strong:</h3>
<article className="mt-2"> <article className="mt-2">
<details className="group"> <details className="group">
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none"> <summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
<p className="mr-2">JavaScript</p> <p className="mr-2">JavaScript</p>
<RxChevronDown className="transition group-open:rotate-180" /> <RxChevronDown className="transition group-open:rotate-180" />
</summary> </summary>
<div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap"> <div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
<Link target="_blank" referrerPolicy="no-referrer" href="https://github.com/innocuous-symmetry?tab=repositories&language=typescript" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">TypeScript</Link> <Chip label="Typescript" href="https://github.com/innocuous-symmetry?tab=repositories&language=typescript" />
<Link target="_blank" referrerPolicy="no-referrer" href="https://github.com/innocuous-symmetry?tab=repositories&q=react" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">React</Link> <Chip label="React" href="https://github.com/innocuous-symmetry?tab=repositories&q=react" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Next.js</p> <Chip label="AWS S3 SDK" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">tRPC</p> <Chip label="Next.js" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">React Query</p> <Chip label="tRPC" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">jQuery</p> <Chip label="React Query" />
<Link target="_blank" referrerPolicy="no-referrer" href="https://github.com/innocuous-symmetry?tab=repositories&q=express" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">Express</Link> <Chip label="jQuery" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Node.js</p> <Chip label="Express.js" href="https://github.com/innocuous-symmetry?tab=repositories&q=express" />
<Chip label="Node.js" />
</div> </div>
</details> </details>
</article> </article>
<article className="mt-2"> <article className="mt-2">
<details className="group"> <details className="group">
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none"> <summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
<p className="mr-2">CSS</p> <p className="mr-2">CSS</p>
<RxChevronDown className="transition group-open:rotate-180" /> <RxChevronDown className="transition group-open:rotate-180" />
</summary> </summary>
<div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap"> <div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Tailwind</p> <Chip label="Tailwind" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Bootstrap</p> <Chip label="Bootstrap" />
<Link target="_blank" referrerPolicy="no-referrer" href="https://github.com/innocuous-symmetry/recipe-manager" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">Sass</Link> <Chip label="Sass" href="https://github.com/innocuous-symmetry/recipe-manager" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Material UI</p> <Chip label="Material UI" />
</div> </div>
</details> </details>
</article> </article>
</div> </div>
<div className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg"> <div id="intermediate-skills" className="bg-slate-400 dark:bg-slate-800 dark:bg-opacity-40 p-3 my-4 rounded-lg">
<h3 className="uppercase text-2xl text-rose-600">Experienced:</h3> <h3 className="uppercase text-2xl text-rose-600 dark:text-rose-300">Experienced:</h3>
<article className="mt-2"> <article className="mt-2">
<details className="group"> <details className="group">
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none"> <summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
<p className="mr-2">Python</p> <p className="mr-2">Python</p>
<RxChevronDown className="transition group-open:rotate-180" /> <RxChevronDown className="transition group-open:rotate-180" />
</summary> </summary>
<div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap"> <div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
<Link target="_blank" referrerPolicy="no-referrer" href="https://github.com/innocuous-symmetry/picosynth" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">Micropython</Link> <Chip label="Micropython" href="https://github.com/innocuous-symmetry/picosynth" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Flask</p> <Chip label="Flask" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Flet</p> <Chip label="Flet" />
</div> </div>
</details> </details>
</article> </article>
<article className="mt-2"> <article className="mt-2">
<details className="group"> <details className="group">
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none"> <summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
<p className="mr-2">Database Operations</p> <p className="mr-2">Database Operations</p>
<RxChevronDown className="transition group-open:rotate-180" /> <RxChevronDown className="transition group-open:rotate-180" />
</summary> </summary>
<div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap"> <div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
<Link target="_blank" referrerPolicy="no-referrer" href="https://github.com/innocuous-symmetry/recipe-manager" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">PostgreSQL</Link> <Chip label="PostgreSQL" href="https://github.com/innocuous-symmetry/recipe-manager" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">MySQL</p> <Chip label="MySQL" />
<Link href="/about/work/dropper" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">MongoDB</Link> <Chip label="MongoDB" href="/about/dropper" />
<Link href="/about/work/dropper" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">Caching with Redis</Link> <Chip label="Redis" href="/about/dropper" />
</div> </div>
</details> </details>
</article> </article>
<article className="mt-2"> <article className="mt-2">
<details className="group"> <details className="group">
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none"> <summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
<p className="mr-2">Tooling</p> <p className="mr-2">Tooling</p>
<RxChevronDown className="transition group-open:rotate-180" /> <RxChevronDown className="transition group-open:rotate-180" />
</summary> </summary>
<div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap"> <div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Docker</p> <Chip label="Docker" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Github Actions</p> <Chip label="Github Actions" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Git / Github</p> <Chip label="Git / Github" />
</div> </div>
</details> </details>
</article> </article>
</div> </div>
<div className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg"> <div id="learning-skills" className="bg-slate-400 dark:bg-slate-800 dark:bg-opacity-40 p-3 my-4 rounded-lg">
<h3 className="uppercase text-2xl text-rose-600">Learning:</h3> <h3 className="uppercase text-2xl text-rose-600 dark:text-rose-300">Learning:</h3>
<article className="mt-2"> <article className="mt-2">
<details className="group"> <details className="group">
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none"> <summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
<p className="mr-2">Design Principles</p> <p className="mr-2">Design Principles</p>
<RxChevronDown className="transition group-open:rotate-180" /> <RxChevronDown className="transition group-open:rotate-180" />
</summary> </summary>
<div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap"> <div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Domain Driven Design</p> <Chip label="Domain Driven Design" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Microservices</p> <Chip label="Microservices" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Readable Code</p>
</div> </div>
</details> </details>
</article> </article>
<article className="mt-2"> <article className="mt-2">
<details className="group"> <details className="group">
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none"> <summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
<p className="mr-2">Cloud Development and Infrastructure</p> <p className="mr-2">Cloud Development and Infrastructure</p>
<RxChevronDown className="transition group-open:rotate-180" /> <RxChevronDown className="transition group-open:rotate-180" />
</summary> </summary>
<div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap"> <div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">AWS SDK</p> <Chip label="AWS" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Proxmox</p> <Chip label="Proxmox" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Minio</p> <Chip label="Minio" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Linux</p> <Chip label="Linux" />
</div> </div>
</details> </details>
</article> </article>
<article className="mt-2"> <article className="mt-2">
<details className="group"> <details className="group">
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none"> <summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
<p className="mr-2">Server-side programming languages</p> <p className="mr-2">Server-side programming languages</p>
<RxChevronDown className="transition group-open:rotate-180" /> <RxChevronDown className="transition group-open:rotate-180" />
</summary> </summary>
<div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap"> <div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Ruby / Rails</p> <Chip label="Ruby / Rails" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Golang</p> <Chip label="Golang" />
</div> </div>
</details> </details>
</article> </article>
<article className="mt-2"> {/* <article className="mt-2">
<details className="group"> <details className="group">
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none"> <summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
<p className="mr-2">Natural Language Processing</p> <p className="mr-2">Natural Language Processing</p>
<RxChevronDown className="transition group-open:rotate-180" /> <RxChevronDown className="transition group-open:rotate-180" />
</summary> </summary>
@@ -141,21 +142,21 @@ const Skills = () => (
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Spacy</p> <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Spacy</p>
</div> </div>
</details> </details>
</article> </article> */}
</div> </div>
<details className="group bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg"> <details className="group bg-slate-400 dark:bg-slate-800 dark:bg-opacity-40 p-3 my-4 rounded-lg">
<summary className="flex items-center uppercase text-2xl text-rose-600 list-none"> <summary className="flex items-center uppercase text-2xl text-rose-600 dark:text-rose-300 list-none">
<p className="mr-2">Soft Skills:</p> <p className="mr-2">Soft Skills:</p>
<RxChevronDown className="transition group-open:rotate-180" /> <RxChevronDown className="transition group-open:rotate-180" />
</summary> </summary>
<div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap"> <div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Strong communicator</p> <Chip label="Strong communicator" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Fast learner</p> <Chip label="Fast learner" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Self-driver</p> <Chip label="Self-driver" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Improviser</p> <Chip label="Improviser" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Problem solver</p> <Chip label="Problem solver" />
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Design thinker</p> <Chip label="Design thinker" />
</div> </div>
</details> </details>
</section> </section>

6
components/ui/Button.tsx
View File

@@ -2,13 +2,13 @@ import Link from "next/link";
export function NavbarButton({ href, label, children }: { href: string, label?: string, children?: React.ReactNode }) { export function NavbarButton({ href, label, children }: { href: string, label?: string, children?: React.ReactNode }) {
return ( return (
<Link passHref href={href} /* onMouseOver={() => mouseOver('about')} onMouseOut={() => mouseOut('about')} */ className={`ml-2 ${/* colors.firstColor */ ''} rounded-lg transition-colors ease-quick-start duration-${/* hoverState.about ? '[5000ms]' : */ '0'}`}> <Link passHref href={href} className={`ml-2 rounded-lg`}>
{ label ? ( { label ? (
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'> <p className='text-lg text-slate-700 dark:text-white text-opacity-80 hover:text-opacity-100 uppercase border-slate-700 dark:border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>
{ label } { label }
</p> </p>
) : children ? children : ( ) : children ? children : (
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'> <p className='text-lg text-slate-700 dark:text-white text-opacity-80 hover:text-opacity-100 uppercase border-slate-700 dark:border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>
Button text Button text
</p> </p>
)} )}

7
components/ui/Card.tsx Normal file
View File

@@ -0,0 +1,7 @@
const Card = ({ children }: { children: React.ReactNode }) => (
<article className="bg-slate-400 dark:bg-slate-800 dark:bg-opacity-40 p-3 my-4 rounded-lg">
{children}
</article>
)
export default Card;

16
components/ui/Chip.tsx Normal file
View File

@@ -0,0 +1,16 @@
import Link from "next/link"
const Chip = ({ label, href }: { label: string, href?: string }) => (
href ? (
<Link
href={href}
target="_blank"
referrerPolicy="no-referrer"
className="py-0.5 px-2 bg-rose-300 text-black dark:text-white dark:bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900"
>
<p>{label}</p>
</Link>
) : <p className="py-0.5 px-2 bg-rose-300 dark:bg-rose-900 text-black dark:text-white rounded-xl m-0.5">{label}</p>
)
export default Chip

1
components/ui/Panel.tsx
View File

@@ -8,6 +8,7 @@ interface PanelProps {
height?: TailwindFraction | TailwindNumber | undefined height?: TailwindFraction | TailwindNumber | undefined
} }
/** @deprecated i kinda hate this */
const Panel: FC<PanelProps> = ({ children, width, height }) => { const Panel: FC<PanelProps> = ({ children, width, height }) => {
const narrow = (input: TailwindNumber | TailwindFraction | undefined) => { const narrow = (input: TailwindNumber | TailwindFraction | undefined) => {
if (typeof input === 'number') return input.toString(); if (typeof input === 'number') return input.toString();

12
server/entities/audiocollection.ts Normal file
View File

@@ -0,0 +1,12 @@
export type Track = {
name: string;
date: Date;
description: string;
}
export type AudioCollection = {
name: string;
date: Date;
tracklist: Track[];
directory: string;
}

9
server/entities/post.ts Normal file
View File

@@ -0,0 +1,9 @@
export type Post = {
name: string;
date: Date;
author: string;
description: string;
body: string;
tagIDs: string[];
media?: string[]; // array of URLs
}

9
server/entities/project.ts Normal file
View File

@@ -0,0 +1,9 @@
type Project = {
name: string;
startDate: Date;
endDate: Date;
current: boolean;
description: string;
tagIDs: string[];
media?: string[]; // array of URLs
}