diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
new file mode 100644
index 0000000..4df28c2
--- /dev/null
+++ b/.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
diff --git a/app/about/me/page.tsx b/app/about/me/page.tsx
index d42ff1d..62bc58c 100644
--- a/app/about/me/page.tsx
+++ b/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>
     )
 }
diff --git a/app/about/music/projects/page.tsx b/app/about/music/projects/page.tsx
index b51f687..465a104 100644
--- a/app/about/music/projects/page.tsx
+++ b/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>
     )
 }
diff --git a/app/about/music/works/[id]/page.tsx b/app/about/music/works/[id]/page.tsx
index 3e1b0f4..7b8ed18 100644
--- a/app/about/music/works/[id]/page.tsx
+++ b/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>
     )
 }
diff --git a/app/about/page.tsx b/app/about/page.tsx
index 83c5707..3c2d566 100644
--- a/app/about/page.tsx
+++ b/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 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://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>
 
diff --git a/app/about/resume/content.mdx b/app/about/resume/content.mdx
deleted file mode 100644
index 345b2e0..0000000
--- a/app/about/resume/content.mdx
+++ /dev/null
@@ -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.
diff --git a/app/about/resume/experience/[employer].tsx b/app/about/resume/experience/[employer].tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/app/about/skills/content.mdx b/app/about/skills/content.mdx
deleted file mode 100644
index 60ddb57..0000000
--- a/app/about/skills/content.mdx
+++ /dev/null
@@ -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
-
-
diff --git a/app/about/skills/page.tsx b/app/about/skills/page.tsx
deleted file mode 100644
index cb829aa..0000000
--- a/app/about/skills/page.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-'use client'
-export { default } from "./content.mdx"
diff --git a/app/about/work/[employer]/page.tsx b/app/about/work/[employer]/page.tsx
index 7474843..86b3b4a 100644
--- a/app/about/work/[employer]/page.tsx
+++ b/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>
     )
 }
diff --git a/app/components/content.mdx b/app/components/content.mdx
deleted file mode 100644
index ba76b2f..0000000
--- a/app/components/content.mdx
+++ /dev/null
@@ -1,11 +0,0 @@
-# First Component
-
-Let's see if MDX styling gets passed into a JSX component!
-
-## Formatting
-
-wewewew
-
-- One
-- Two
-- Three
diff --git a/app/components/page.tsx b/app/components/page.tsx
deleted file mode 100644
index 16dfd21..0000000
--- a/app/components/page.tsx
+++ /dev/null
@@ -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>
-    )
-}
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index 5fceee8..b5e6bcf 100644
--- a/app/contact/page.tsx
+++ b/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>
-            <h1>Contact</h1>
+        <div className="flex flex-col mx-24 items-center">
+            <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>
     )
 }
diff --git a/app/page.tsx b/app/page.tsx
index 9397747..a5cfc37 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,26 +1,12 @@
-'use client';
-import { useColorShift } from "@/components/logo";
-import { ColorListType } from "@/components/logo/useColorShift";
+import { ColorChangeName } from "@/components/Home";  
 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('-')}`}>
-          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>
+        <ColorChangeName />
 
         {/* <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" />
diff --git a/components/Home/index.tsx b/components/Home/index.tsx
new file mode 100644
index 0000000..e966ea3
--- /dev/null
+++ b/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>
+        </>
+    )
+}
diff --git a/package.json b/package.json
index 736b411..6dca4dd 100644
--- a/package.json
+++ b/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-config-next": "^12.0.4",
-    "next": "13.4.4",
+    "eslint": "^8.46.0",
+    "eslint-config-next": "^13.4.12",
+    "next": "^13.4.12",
     "postcss": "8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",