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

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" />