resume expansion model for content

This commit is contained in:
2023-07-06 13:55:54 -05:00
parent 61c5de39fe
commit 32399c2195
14 changed files with 354 additions and 24 deletions

View File

@@ -1,14 +1,77 @@
import Link from 'next/link';
"use client";
import Link from "next/link";
import { Experience, Projects, Skills } from "../../components/Resume";
import { RxChevronDown } from "react-icons/rx";
import { useState } from "react";
import { FaGithub, FaLinkedin } from "react-icons/fa";
export default function Resume() {
const [skillsVisible, setSkillsVisible] = useState(true);
const [experienceVisible, setExperienceVisible] = useState(true);
const [educationVisible, setEducationVisible] = useState(true);
const [projectsVisible, setProjectsVisible] = useState(true);
export default function AboutPage() {
return (
<div className="flex flex-col min-h-[50vh] bg-gradient-to-b from-black to-purple-950">
<Link href="/about/me">About me</Link>
<Link href="/about/resume">My resume</Link>
<Link href="/about/skills">Skills</Link>
<Link href="/about/education">Education</Link>
<Link href="/about/experience">Experience</Link>
<Link href="/about/music">Music</Link>
<div className="flex flex-col items-center p-4">
<section className="w-full sticky top-24 bg-slate-900 pb-4">
<h1 className="uppercase text-4xl 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>
<div className="flex items-center pt-2">
<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.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>
</div>
<div className="flex pt-2">
<div className="flex items-center"><FaGithub className="mr-2" /> <Link className="mr-8 hover:text-sky-300 active:text-white" href="https://github.com/innocuous-symmetry">innocuous-symmetry</Link></div>
<div className="flex items-center"><FaLinkedin className="mr-2" /> <Link className="mr-8 hover:text-sky-300 active:text-white" href="https://linkedin.com/in/mikayla-dobson">mikayla-dobson</Link></div>
</div>
</section>
<section className="place-self-start mt-8 w-full">
<button onClick={() => setSkillsVisible(!skillsVisible)} className="flex items-center text-rose-300 uppercase tracking-wide list-none">
<span className="font-light text-3xl leading-relaxed">Skills</span>
<RxChevronDown className={`ml-2 transition ${skillsVisible ? "rotate-180" : "rotate-0"}`} />
</button>
{ skillsVisible ? <Skills visible={skillsVisible} /> : null }
</section>
<section className="place-self-start mt-8 w-full">
<button onClick={() => setExperienceVisible(!experienceVisible)} className="flex items-center text-rose-300 uppercase tracking-wide list-none">
<span className="font-light text-3xl leading-relaxed">Experience</span>
<RxChevronDown className={`ml-2 transition ${experienceVisible ? "rotate-180" : "rotate-0"}`} />
</button>
{ experienceVisible ? <Experience visible={experienceVisible} /> : null }
</section>
<section className="place-self-start mt-8 w-full">
<button onClick={() => setEducationVisible(!educationVisible)} className="flex items-center text-rose-300 uppercase tracking-wide list-none">
<h2 className="font-light text-3xl leading-relaxed">Education</h2>
<RxChevronDown className={`ml-2 transition ${educationVisible ? "rotate-0" : "rotate-180"}`} />
</button>
{
educationVisible ? (
<article className={(educationVisible ? "h-auto my-4 opacity-100" : "h-0 opacity-0 my-0") + " transition duration-500 bg-slate-800 shadow shadow-black p-3 rounded-lg"}>
<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>
<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>
</article>
) : null
}
</section>
<section className="place-self-start mt-8 w-full">
<button onClick={() => setProjectsVisible(!projectsVisible)} className="flex items-center text-rose-300 uppercase tracking-wide list-none">
<h2 className="font-light text-3xl leading-relaxed">Projects</h2>
<RxChevronDown className={`ml-2 transition ${projectsVisible ? "rotate-180" : "rotate-0"}`} />
</button>
{ projectsVisible ? <Projects visible={projectsVisible} /> : null }
</section>
</div>
)
}

View File

@@ -0,0 +1,28 @@
MIKAYLA DOBSON
Software Engineer | Nashville, TN
https://mikayla.dev
Mobile: (615) 815-5536 Email: mikaylaherself@gmail.com
Github: innocuous-symmetry LinkedIn: https://linkedin.com/in/mikayla-dobson
SKILLS
STRONG: JavaScript (TypeScript, React/Next, Node.js), CSS (Sass, Tailwind, Bootstrap), Git
INTERMEDIATE: PostgreSQL, Python (Micropython, Flask), MongoDB, Docker, Ruby (Rails)
SOFT SKILLS: problem solving; self-driven; design thinking; communication; improvisation
EXPERIENCE
DROPPER STUDIO | Nashville, TN (hybrid) - Software Engineer
MAR 2023 - present
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.
DIZATION | Pittsburgh, PA (remote) - Intern, Full Stack Engineer
OCT 2022 - MAR 2023
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.
METAZU STUDIO | Nashville, TN (hybrid) - Consultant, Software Engineer
MAR 2022 - DEC 2022
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.
EDUCATION
SOUTHERN METHODIST UNIVERSITY | Dallas, TX - B.A. in Music
Concentrations in Piano Performance and Music Composition. Special focus on orchestral composition and arranging. Minor in French Language and Culture.
PROJECTS
SUBSEQUENT - TypeScript, Tone.js - May 2023 - present
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.
RECIPIN - React, Express, TypeScript, PostgreSQL - Oct 2022 - present
A full stack web application for storing personal recipes in collections and sharing them in a lightweight social network.

View File

@@ -1,7 +0,0 @@
export default function Resume() {
return (
<div>
<h1>Resume Page</h1>
</div>
)
}

View File

@@ -1,10 +1,14 @@
'use client';
import { usePathname } from "next/navigation";
export default function ExperiencePage() {
const path = usePathname();
return (
<div>
<div id="spacer" className='h-[6rem] w-full' />
<h1>Work Page</h1>
<p>Employer: {path.split('/').at(-1)}</p>
</div>
)
}

7
app/about/work/page.tsx Normal file
View File

@@ -0,0 +1,7 @@
const WorkHistory = () => {
return (
<div>
<h1>Work History</h1>
</div>
);
}

View File

@@ -29,12 +29,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
useEffect(() => {
switch (pathname) {
case '/':
setBg('bg-slate-900');
break;
case '/about':
case '/about/me':
setBg('bg-purple-950');
break;
default:
setBg('bg-slate-900');
break;

View File

@@ -19,7 +19,7 @@ export default function Home() {
<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-gradient-to-b from-black to-slate-900 bg-opacity-10 p-4 flex flex-col min-h-[50vh]">
<p className="mt-4 text-sky-300 tracking-wide">Software design with style, ingenuity, and artistry.</p>
<p className="mt-4 text-sky-300 tracking-wide">Pragmatic software design with style and artistry.</p>
</div>
{/* <div className="w-full h-[10vh] object-scale-down bg-no-repeat">

View File

@@ -0,0 +1,48 @@
import Link from "next/link";
import { useState } from "react";
const Experience = ({ visible }: { visible: boolean }) => {
const [showAll, setShowAll] = useState(false);
return (
<section className={`w-full transition duration-500 ${visible ? "h-auto opacity-100" : "h-0 opacity-0"}`}>
<article className="bg-slate-800 shadow shadow-black p-3 my-4 rounded-lg">
<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>March 2023 - present</p>
<div className="h-[1px] w-full my-3 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>
<Link href="/about/work/dropper" className="hover:text-sky-300 active:text-white">Learn more about my work with Dropper</Link>
</article>
<article className="bg-slate-800 shadow shadow-black p-3 my-4 rounded-lg">
<Link target="_blank" referrerPolicy="no-referrer" href="https://dization.com/" className="uppercase text-2xl text-rose-600">Dization, Inc.</Link>
<p className="font-light italic text-rose-300">Pittsburgh, PA (remote) - Software Engineer (intern)</p>
<p>October 2022 - March 2023</p>
<div className="h-[1px] w-full my-3 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>
<Link href="/about/work/dization" className="hover:text-sky-300 active:text-white">Learn more about my work with Dization</Link>
</article>
<article className="bg-slate-800 shadow shadow-black p-3 my-4 rounded-lg">
<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>March 2022 - December 2022</p>
<div className="h-[1px] w-full my-3 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>
</article>
<Link href="/about/work" className="hover:text-sky-300 active:text-white bg-slate-950 p-2 rounded-lg shadow-lg">Go further back</Link>
</section>
)
}
export default Experience;

View File

@@ -0,0 +1,25 @@
const Projects = ({ visible }: { visible: boolean }) => (
<section className={`w-full transition duration-500 ${visible ? "h-auto opacity-100" : "h-0 opacity-0"}`}>
<article className="bg-slate-800 shadow shadow-black p-3 my-4 rounded-lg">
<h3 className="uppercase text-2xl text-rose-600">Subsequent</h3>
<p className="font-light italic text-rose-300">May 2023 - present</p>
<p>TypeScript, Tone.js</p>
<div className="h-[1px] w-full my-3 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>
</article>
<article className="bg-slate-800 shadow shadow-black p-3 my-4 rounded-lg">
<h3 className="uppercase text-2xl text-rose-600">Recipin</h3>
<p className="font-light italic text-rose-300">October 2022 - present</p>
<p>React, Express, TypeScript, PostgreSQL</p>
<div className="h-[1px] w-full my-3 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>
</article>
</section>
)
export default Projects

View File

@@ -0,0 +1,164 @@
import { RxChevronDown } from "react-icons/rx";
import Link from "next/link";
const Skills = ({ visible }: { visible: boolean }) => (
<section className={`w-full transition duration-500 ${visible ? "h-auto opacity-100" : "h-0 opacity-0"}`}>
<div className="bg-slate-800 shadow shadow-black p-3 my-4 rounded-lg">
<h3 className="uppercase text-2xl text-rose-600">Strong:</h3>
<article className="mt-2">
<details className="group">
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
<p className="mr-2">JavaScript</p>
<RxChevronDown className="transition group-open:rotate-180" />
</summary>
<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>
<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>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Next.js</p>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">tRPC</p>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">React Query</p>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">jQuery</p>
<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>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Node.js</p>
</div>
</details>
</article>
<article className="mt-2">
<details className="group">
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
<p className="mr-2">CSS</p>
<RxChevronDown className="transition group-open:rotate-180" />
</summary>
<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>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Bootstrap</p>
<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>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Material UI</p>
</div>
</details>
</article>
</div>
<div className="bg-slate-800 shadow shadow-black p-3 my-4 rounded-lg">
<h3 className="uppercase text-2xl text-rose-600">Experienced:</h3>
<article className="mt-2">
<details className="group">
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
<p className="mr-2">Python</p>
<RxChevronDown className="transition group-open:rotate-180" />
</summary>
<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">Flask</p>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Flet</p>
<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>
</div>
</details>
</article>
<article className="mt-2">
<details className="group">
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
<p className="mr-2">Database Operations</p>
<RxChevronDown className="transition group-open:rotate-180" />
</summary>
<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">PostgreSQL</p>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">MySQL</p>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">MongoDB</p>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Caching with Redis</p>
</div>
</details>
</article>
<article className="mt-2">
<details className="group">
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
<p className="mr-2">Tooling</p>
<RxChevronDown className="transition group-open:rotate-180" />
</summary>
<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>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Github Actions</p>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Git / Github</p>
</div>
</details>
</article>
</div>
<div className="bg-slate-800 shadow shadow-black p-3 my-4 rounded-lg">
<h3 className="uppercase text-2xl text-rose-600">Learning:</h3>
<article className="mt-2">
<details className="group">
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
<p className="mr-2">Design Principles</p>
<RxChevronDown className="transition group-open:rotate-180" />
</summary>
<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>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Microservices</p>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Readable Code</p>
</div>
</details>
</article>
<article className="mt-2">
<details className="group">
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
<p className="mr-2">Cloud Development and Infrastructure</p>
<RxChevronDown className="transition group-open:rotate-180" />
</summary>
<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>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Proxmox</p>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Minio</p>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Linux</p>
</div>
</details>
</article>
<article className="mt-2">
<details className="group">
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
<p className="mr-2">Server-side programming languages</p>
<RxChevronDown className="transition group-open:rotate-180" />
</summary>
<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>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Golang</p>
</div>
</details>
</article>
<article className="mt-2">
<details className="group">
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
<p className="mr-2">Natural Language Processing</p>
<RxChevronDown className="transition group-open:rotate-180" />
</summary>
<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">NLPT</p>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Spacy</p>
</div>
</details>
</article>
</div>
<details className="group bg-slate-800 shadow shadow-black p-3 my-4 rounded-lg">
<summary className="flex items-center uppercase text-2xl text-rose-600 list-none">
<p className="mr-2">Soft Skills:</p>
<RxChevronDown className="transition group-open:rotate-180" />
</summary>
<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>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Fast learner</p>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Self-driver</p>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Improviser</p>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Problem solver</p>
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Design thinker</p>
</div>
</details>
</section>
);
export default Skills;

View File

@@ -0,0 +1,3 @@
export { default as Skills } from "./Skills";
export { default as Experience } from "./Experience";
export { default as Projects } from "./Projects";

Binary file not shown.

Binary file not shown.