80 lines
5.2 KiB
TypeScript
80 lines
5.2 KiB
TypeScript
"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);
|
|
|
|
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">
|
|
<section className="w-full 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="hidden bg-slate-950"></div>
|
|
|
|
<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">
|
|
<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 mr-8 hover:text-sky-300 active:text-white" href="https://linkedin.com/in/mikayla-dobson"><FaLinkedin className="mr-2" />mikayla-dobson</Link>
|
|
</div>
|
|
</section>
|
|
|
|
<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" : "")}>
|
|
<span className="font-light text-3xl leading-relaxed">Skills</span>
|
|
<RxChevronDown className={`ml-2 transition ${skillsVisible ? "rotate-180" : "rotate-0"}`} />
|
|
</button>
|
|
{ skillsVisible ? <Skills /> : null }
|
|
</section>
|
|
|
|
<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">
|
|
<span className="font-light text-3xl leading-relaxed">Experience</span>
|
|
<RxChevronDown className={`ml-2 transition ${experienceVisible ? "rotate-180" : "rotate-0"}`} />
|
|
</button>
|
|
{ experienceVisible ? <Experience /> : null }
|
|
</section>
|
|
|
|
<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" : "")}>
|
|
<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 bg-black" : "h-0 opacity-0 my-0") + " transition duration-500 bg-opacity-40 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={"sticky top-[5.5rem] w-full flex items-center text-rose-300 uppercase tracking-wide list-none " + (projectsVisible ? " bg-black" : "")}>
|
|
<h2 className="font-light text-3xl leading-relaxed">Projects</h2>
|
|
<RxChevronDown className={`ml-2 transition ${projectsVisible ? "rotate-180" : "rotate-0"}`} />
|
|
</button>
|
|
{ projectsVisible ? <Projects /> : null }
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|