various updates, gh actions flow

.github/workflows/main.yml

@@ -0,0 +1,20 @@
+name: build check (mikayla dot dev)
+
+on:
+  push:
+    branches:
+        - master
+        - next-migration
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: checkout
+      uses: actions/checkout@v2
+      with:
+        ref: master
+    - name: install
+      run: npm install
+    - name: build check
+      run: npm run build

app/about/me/page.tsx

@@ -8,7 +8,8 @@ export default function AboutMe() {
 
     return (
         <div>
-            <h1>So, who is Mikayla Dobson?</h1>
+            <h1>This page is also coming soon!</h1>
+            {/* <h1>So, who is Mikayla Dobson?</h1>
 
             <div>
                 <button onClick={() => setSelected('developer')}>Software Engineer</button>
@@ -34,7 +35,7 @@ export default function AboutMe() {
                         I have experience with the piano, guitar, and more.
                     </p>
                 </div>
-            )}
+            )} */}
         </div>
     )
 }

app/about/music/projects/page.tsx

@@ -2,6 +2,8 @@ export default function MusicProjectPage() {
     return (
         <div>
             <h1>Music Project Page</h1>
+
+            <p>This is where I&apos;ll keep a running list of my projects</p>
         </div>
     )
 }

app/about/music/works/[id]/page.tsx

@@ -7,6 +7,10 @@ export default function MusicalWorkPage({ params }: { params: { id: string }}) {
         <div>
             <h1>Music Works Page</h1>
             <p>Work No. {params.id}</p>
+
+            <div>
+                <p>This page is coming soon!</p>
+            </div>
         </div>
     )
 }

app/about/page.tsx

@@ -25,8 +25,8 @@ export default function Resume() {
                 </div>
 
                 <div className="flex pt-2">
-                    <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 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 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 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>
 

app/about/resume/content.mdx

@@ -1,28 +0,0 @@
-
-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.

app/about/skills/content.mdx

@@ -1,24 +0,0 @@
-Check out my skills, and some of the technologies I work with the most:
-
-# Programming Languages
-
-## JavaScript
-
-- Typescript
-- React / Next.js
-    - Redux
-    - tRPC
-- Node.js
-    - Express.js
-    - ToneJS
-- jQuery
-- Jest
-
-## Python
-
-- Pandas
-- Micropython
-
-# Front End Skills
-
-

app/about/skills/page.tsx

@@ -1,2 +0,0 @@
-'use client'
-export { default } from "./content.mdx"

app/about/work/[employer]/page.tsx

@@ -9,6 +9,10 @@ export default function ExperiencePage() {
             <div id="spacer" className='h-[6rem] w-full' />
             <h1>Work Page</h1>
             <p>Employer: {path.split('/').at(-1)}</p>
+
+            <div>
+                <p>This section is coming soon!</p>
+            </div>
         </div>
     )
 }

app/components/content.mdx

@@ -1,11 +0,0 @@
-# First Component
-
-Let's see if MDX styling gets passed into a JSX component!
-
-## Formatting
-
-wewewew
-
-- One
-- Two
-- Three

app/components/page.tsx

@@ -1,14 +0,0 @@
-'use client';
-import Panel from "@/components/ui/Panel";
-import Content from "./content.mdx";
-
-export default function FirstComponent() {
-    return (
-        <div className="flex flex-col items-center w-full h-full">
-            <div className="h-48" />
-            <Panel width={"1/2"}>
-                <Content />
-            </Panel>
-        </div>
-    )
-}

app/contact/page.tsx

@@ -1,7 +1,40 @@
+'use client';
+import { useState } from "react";
+
 export default function ContactPage() {
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    const [message, setMessage] = useState('');
+
+    function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+        e.preventDefault();
+        console.log(name, email, message);
+    }
+
     return (
-        <div>
+        <div className="flex flex-col mx-24 items-center">
-            <h1>Contact</h1>
+            <h1 className="text-3xl my-8 place-self-start">Thanks for your interest! I&apos;m looking forward to hearing from you.</h1>
+
+            <form onSubmit={handleSubmit} className="w-full">
+                <div className="flex w-full">
+                    <div className="flex flex-col w-1/2 mr-2">
+                        <label htmlFor="name">Name</label>
+                        <input className="bg-neutral-100 px-1.5 py-1 text-black" value={name} onChange={(e) => setName(e.target.value)} type="text" name="name" id="name" />
+                    </div>
+
+                    <div className="flex flex-col w-1/2 ml-2">
+                        <label htmlFor="email">Email</label>
+                        <input className="bg-neutral-100 px-1.5 py-1 text-black" value={email} onChange={(e) => setEmail(e.target.value)} type="email" name="email" id="email" />
+                    </div>
+                </div>
+
+                <div className="flex flex-col w-full mt-4">
+                    <label htmlFor="message">Message</label>
+                    <textarea className="bg-neutral-100 px-1.5 py-1 text-black" value={message} onChange={(e) => setMessage(e.target.value)} name="message" id="message" cols={30} rows={5}></textarea>
+                </div>
+
+                <button className="p-2 px-8 mt-8 rounded-lg bg-rose-300 hover:bg-rose-400 text-black" type="submit">Send!</button>
+            </form>
         </div>
     )
 }

app/page.tsx

@@ -1,26 +1,12 @@
-'use client';
+import { ColorChangeName } from "@/components/Home";  
-import { useColorShift } from "@/components/logo";
-import { ColorListType } from "@/components/logo/useColorShift";
 import Image from "next/image";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
 
 export default function Home() {
-  const router = useRouter();
-  const { firstColor, secondColor, thirdColor } = useColorShift(14000);
-
   return (
     <>
       <div id="hero" className="bg-gradient-to-b from-black to-slate-900 p-4 flex flex-col min-h-[50vh]">
-        <span className={"px-4 mb-2 mt-4 bg-clip-text text-transparent uppercase text-3xl sm:text-6xl font-extrabold bg-opacity-100 animate-text-gradient bg-gradient-to-r " + `from-${firstColor.split('-').slice(1).join('-')} to-${secondColor.split('-').slice(1).join('-')}`}>
+        <ColorChangeName />
-          Mikayla Dobson
-        </span>
-        <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">Pragmatic software design with style and artistry.</p>
-        </div>
 
         {/* <div className="w-full h-[10vh] object-scale-down bg-no-repeat">
           <Image fill src="/backdrops/jean-beller-peW5dg2-cLI-unsplash.jpg" alt="geometric pattern in wood and metal" />

components/Home/index.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { useColorShift } from "../logo";
+
+export const ColorChangeName = () => {
+    const { firstColor, secondColor, thirdColor } = useColorShift(14000);
+
+    return (
+        <>
+        <span className={"px-4 mb-2 mt-4 bg-clip-text text-transparent uppercase text-3xl sm:text-6xl font-extrabold bg-opacity-100 animate-text-gradient bg-gradient-to-r " + `from-${firstColor.split('-').slice(1).join('-')} to-${secondColor.split('-').slice(1).join('-')}`}>
+          Mikayla Dobson
+        </span>
+        <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 min-h-[50vh]">
+          <p className="mt-4 text-sky-300 tracking-wide">Pragmatic software design with style and artistry.</p>
+        </div>
+        </>
+    )
+}

package.json

@@ -15,9 +15,9 @@
     "@next/mdx": "^13.4.4",
     "@supabase/supabase-js": "^2.26.0",
     "autoprefixer": "10.4.14",
-    "eslint": "8.41.0",
+    "eslint": "^8.46.0",
-    "eslint-config-next": "^12.0.4",
+    "eslint-config-next": "^13.4.12",
-    "next": "13.4.4",
+    "next": "^13.4.12",
     "postcss": "8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",