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

style fixes, setup for backend?

Browse Source
This commit is contained in:
Mikayla Dobson
2023-07-06 20:05:48 -05:00
parent 32399c2195
commit 598b229689
11 changed files with 73 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/about/page.tsx
View File

@@ -13,8 +13,8 @@ export default function Resume() {
const [projectsVisible, setProjectsVisible] = useState(true);
return (
<div className="flex flex-col items-center p-4">
<section className="w-full sticky top-24 bg-slate-900 pb-4">
<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 bg-black bg-opacity-80 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>
@@ -25,36 +25,36 @@ export default function Resume() {
</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>
<Link 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 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="flex items-center text-rose-300 uppercase tracking-wide list-none">
<button onClick={() => setSkillsVisible(!skillsVisible)} 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">Skills</span>
<RxChevronDown className={`ml-2 transition ${skillsVisible ? "rotate-180" : "rotate-0"}`} />
</button>
{ skillsVisible ? <Skills visible={skillsVisible} /> : null }
{ skillsVisible ? <Skills /> : 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">
<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 visible={experienceVisible} /> : null }
{ experienceVisible ? <Experience /> : 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">
<button onClick={() => setEducationVisible(!educationVisible)} className="sticky top-[5.5rem] w-full bg-black 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"}>
<article className={(educationVisible ? "h-auto my-4 opacity-100" : "h-0 opacity-0 my-0") + " transition duration-500 bg-slate-800 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" />
@@ -66,11 +66,11 @@ export default function Resume() {
</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">
<button onClick={() => setProjectsVisible(!projectsVisible)} className="sticky top-[5.5rem] w-full 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 }
{ projectsVisible ? <Projects /> : null }
</section>
</div>
)

3
components/Navbar/index.tsx
View File

@@ -2,7 +2,6 @@ import Link from 'next/link'
import { InlineLogo, useColorShift } from '../logo'
import { useEffect, useState } from 'react';
import { UseColorShiftReturnType } from '../logo/useColorShift';
import { FaTrash } from "react-icons/fa";
import { RxActivityLog } from "react-icons/rx";
interface HoverState {
@@ -102,7 +101,7 @@ export default function Navbar({ pageIsScrolled = false }) {
</button>
</div>
</div>
<div onMouseLeave={() => setMobileMenuOpen(false)} className={`flex flex-col rounded-bl-lg justify-end md:hidden fixed top-24 w-[25vw] text-right place-self-end bg-[#131313] ${mobileMenuOpen ? 'translate-x-[75vw]' : 'translate-x-[100vw]'} transition-all duration-500`}>
<div onMouseLeave={() => setMobileMenuOpen(false)} className={`flex flex-col z-50 rounded-bl-lg justify-end md:hidden fixed top-24 w-[25vw] text-right place-self-end bg-[#131313] ${mobileMenuOpen ? 'translate-x-[75vw]' : 'translate-x-[100vw]'} transition-all duration-500`}>
{/* <div className="bg-black h-48" /> */}
<Link onClick={() => setMobileMenuOpen(false)} passHref href="/" className="w-full">
<p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 uppercase p-2 border-opacity-50 hover:border-opacity-75'>Home</p>

21
components/Resume/Experience.tsx
View File

@@ -1,12 +1,9 @@
import Link from "next/link";
import { useState } from "react";
const Experience = ({ visible }: { visible: boolean }) => {
const [showAll, setShowAll] = useState(false);
const Experience = () => {
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">
<section className="w-full">
<article className="bg-slate-800 bg-opacity-40 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>
@@ -15,11 +12,11 @@ const Experience = ({ visible }: { visible: boolean }) => {
<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>
<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>
</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>
<article className="bg-slate-800 bg-opacity-40 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 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>October 2022 - March 2023</p>
@@ -27,10 +24,10 @@ const Experience = ({ visible }: { visible: boolean }) => {
<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>
<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>
</article>
<article className="bg-slate-800 shadow shadow-black p-3 my-4 rounded-lg">
<article className="bg-slate-800 bg-opacity-40 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>
@@ -40,7 +37,7 @@ const Experience = ({ visible }: { visible: boolean }) => {
<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>
<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>
)
}

8
components/Resume/Projects.tsx
View File

@@ -1,6 +1,6 @@
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">
const Projects = () => (
<section className="w-full">
<article className="bg-slate-800 bg-opacity-40 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>
@@ -10,7 +10,7 @@ const Projects = ({ visible }: { visible: boolean }) => (
<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">
<article className="bg-slate-800 bg-opacity-40 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>

20
components/Resume/Skills.tsx
View File

@@ -1,9 +1,9 @@
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">
const Skills = () => (
<section className="w-full">
<div className="bg-slate-800 bg-opacity-40 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">
@@ -40,7 +40,7 @@ const Skills = ({ visible }: { visible: boolean }) => (
</article>
</div>
<div className="bg-slate-800 shadow shadow-black p-3 my-4 rounded-lg">
<div className="bg-slate-800 bg-opacity-40 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">
@@ -49,9 +49,9 @@ const Skills = ({ visible }: { visible: boolean }) => (
<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/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>
<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>
@@ -63,10 +63,10 @@ const Skills = ({ visible }: { visible: boolean }) => (
<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>
<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>
<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>
<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>
<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>
</div>
</details>
</article>
@@ -86,7 +86,7 @@ const Skills = ({ visible }: { visible: boolean }) => (
</article>
</div>
<div className="bg-slate-800 shadow shadow-black p-3 my-4 rounded-lg">
<div className="bg-slate-800 bg-opacity-40 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">
@@ -144,7 +144,7 @@ const Skills = ({ visible }: { visible: boolean }) => (
</article>
</div>
<details className="group bg-slate-800 shadow shadow-black p-3 my-4 rounded-lg">
<details className="group bg-slate-800 bg-opacity-40 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" />

2
package.json
View File

@@ -9,9 +9,11 @@
"lint": "next lint"
},
"dependencies": {
"@aws-sdk/client-s3": "^3.367.0",
"@mdx-js/loader": "^2.3.0",
"@mdx-js/react": "^2.3.0",
"@next/mdx": "^13.4.4",
"@supabase/supabase-js": "^2.26.0",
"autoprefixer": "10.4.14",
"eslint": "8.41.0",
"eslint-config-next": "^12.0.4",

BIN
public/resume/Mikayla Resume 0623.docx
View File

Binary file not shown.

BIN
public/resume/Mikayla Resume 0623.pdf
View File

Binary file not shown.

3
server/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export default async function main() {
return await Promise.resolve(12);
}

19
server/services/s3.ts Normal file
View File

@@ -0,0 +1,19 @@
import { S3Client } from "@aws-sdk/client-s3";
export default function createS3Client() {
if (typeof process.env.S3_ACCESS_KEY !== "string") {
throw new Error("S3_ACCESS_KEY is not defined");
}
if (typeof process.env.S3_SECRET !== "string") {
throw new Error("S3_SECRET is not defined");
}
return new S3Client({
region: "us-east-1",
credentials: {
accessKeyId: process.env.S3_ACCESS_KEY,
secretAccessKey: process.env.S3_SECRET,
},
});
}

13
server/services/supabase.ts Normal file
View File

@@ -0,0 +1,13 @@
import { createClient } from "@supabase/supabase-js";
export default function supabaseClient() {
if (typeof process.env.SUPABASE_URL !== "string") {
throw new Error("SUPABASE_URL is not defined");
}
if (typeof process.env.SUPABASE_KEY !== "string") {
throw new Error("SUPABASE_KEY is not defined");
}
return createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY);
}