Clear our build errors

app/components/exp_entry.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+import Image from 'next/image';
+
 import { Wiggle } from "../animations/wiggle";
 import { motion } from "framer-motion";
 
@@ -48,7 +50,7 @@ export default function ExpEntry(props: expEntryProps){
                   }}
                 >
                     <Wiggle delay={Math.random() * 1.5}>
-                        <img src={logo} alt={props.company} height="50px" width="50px"/>
+                        <Image src={logo} alt={props.company} height={50} width={50}/>
                     </Wiggle>
                 </motion.a>
                 <motion.svg

app/components/experience_block.tsx

@@ -25,21 +25,21 @@ const jobs = [
         title: "Director of Engineering",
         company: "RotoQL",
         url: "https://rotoql.com",
-        logo: "./img/rotoql.png",
+        logo: "/img/rotoql.png",
         description: "Constructing the whole new products"
     },
     {
         title: "Lead Database Engineer",
         company: "Knewton",
         url: "https://knewton.com",
-        logo: "./img/knewton.png",
+        logo: "/img/knewton.png",
         description: "Running a lot of cassandra"
     },
     {
         title: "Lead Database Engineer",
         company: "Sailthru",
         url: "https://sailthru.com",
-        logo: "./img/sailthru.png",
+        logo: "/img/sailthru.png",
         description: "All the mongo r belong to me"
     },
     {

app/components/framer_eq.tsx

@@ -29,14 +29,15 @@ export default function MotionEquation(props: equationProps){
       // window is accessible here.
       test_mathjax();
       if((window as any).MathJax){
-        let eq = (window as any).MathJax.tex2svg(props.equation).children[0];
-        let scale = props.scale || 1;
-        let height = eq.getAttribute("height");
-        let width = eq.getAttribute("width");
+        const eq = (window as any).MathJax.tex2svg(props.equation).children[0];
+        const scale = props.scale || 1;
+        const height = eq.getAttribute("height");
+        const width = eq.getAttribute("width");
+        const scope_target = scope.current;
         eq.setAttribute("width", `${scale * parseFloat(width)}ex`);
         eq.setAttribute("height", `${scale * parseFloat(height)}ex`);
 
-        scope.current?.appendChild(eq);
+        scope_target.appendChild(eq);
         if (isInview) {
             animate(
                 "path,rect",
@@ -53,11 +54,11 @@ export default function MotionEquation(props: equationProps){
                 }
             )
         }
-        return () => {scope.current?.removeChild(eq);}
+        return () => {scope_target.removeChild(eq);}
       }else{
-        setTimeout(test_mathjax, 1000);
+        setTimeout(test_mathjax, 300);
       }
-    }, [isInview]);
+    });
 
     return <span ref={scope}/>;
 };

app/components/skills_radar.tsx

@@ -1,37 +1,48 @@
-import React, { useEffect, useRef } from 'react';
+'use client'
 
-import Sunburst from 'sunburst-chart';
+import React, { useEffect, useRef, useState } from 'react';
 
 import data from '../data';
 
 export default function SkillsRadar () {
    const skillgraph = useRef(null);
+   const [sunburstLoaded, setSunburstLoaded] = useState(false);
+
+   const test_sunburst = () => {
+    if((window as any).Sunburst){
+      setSunburstLoaded(true);  // Used to trigger a rerender
+    }
+  }
 
    useEffect(() => {
-      const skills_div = skillgraph.current;
-      if (skills_div) {
-        Sunburst()
-            .data(data)
-            .size('size')
-            .width(600)
-            .height(600)
-            .excludeRoot(true)
-            .tooltipContent(
-                (_, node: any) => {
-                    return node.data.text;
-                }
-            )
-            .labelOrientation('angular')
-            .tooltipTitle((d, node: any) => {return node.data.name})
-            .color('color')
-            (skills_div);
+      if ((window as any).Sunburst) {
+          const skills_div = skillgraph.current;
+          test_sunburst();
+          if (skills_div) {
+            (window as any).Sunburst()
+                .data(data)
+                .size('size')
+                .width(400)
+                .height(400)
+                .excludeRoot(true)
+                .tooltipContent(
+                    (_: any, node: any) => {
+                        return node.data.text;
+                    }
+                )
+                .labelOrientation('angular')
+                .tooltipTitle((_: any, node: any) => {return node.data.name})
+                .color('color')
+                (skills_div);
+          }
+          return () => {
+            if (skills_div) {
+                (skills_div as any).innerHTML = '';
+            }
+          }
+      } else {
+        setTimeout(test_sunburst, 300);
       }
-      return () => {
-        const skills_div = skillgraph.current;
-        if (skills_div) {
-            (skills_div as any).innerHTML = '';
-        }
-    }
   } , []);
 
   return <div className='w-600' ref={skillgraph} />;

app/data.js

@@ -1,4 +1,4 @@
-export default {
+let data = {
     name: 'Skills',
     color: '#81272e',
     text: "Some of my skills",
@@ -296,4 +296,6 @@ export default {
             }
         ]}
     ]
-};
+};
+
+export default data;

app/layout.tsx

@@ -21,9 +21,8 @@ export default function RootLayout({
   return (
     <html lang="en">
       <head>
-        <script type="text/javascript" id="MathJax-script" async
-          src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
-        </script>
+        <script type="text/javascript" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
+        <script type="text/javascript" async src="https://unpkg.com/sunburst-chart"></script>
       </head>
       <body className={"bg-slate900 " + inter.className}>
         <NavBar />

app/page.tsx

@@ -1,4 +1,5 @@
 'use client'
+
 import React from "react";
 
 import ExperienceBlock from "./components/experience_block";
@@ -9,30 +10,33 @@ export default function Home() {
 
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24 max-w-7xl mx-auto">
-      <div className="flex gap-x-2">
+      <div className="flex gap-x-2 h-36 align-middle">
+        <MotionEquation
+          equation='\ \left( i \partial \!\!\!/ - m  \right) \psi  = 0 \'
+          scale={2}
+          start_color="rgb(0,0,0)"
+          end_color="rgb(230,250,210)"
+          draw_sec={6}
+        />
         <div className="text-4xl">
           Jeffrey Berger, Ph.D.
         </div>
-        <div>
-          <MotionEquation
-            equation='\ \left( i \partial \!\!\!/ - m  \right) \psi  = 0 \'
-            scale={2}
-            start_color="rgb(0,0,0)"
-            end_color="rgb(230,250,210)"
-            draw_sec={6}
-          />
-          <MotionEquation
-            equation='\ \hat{H}|\psi\rangle = i \hbar \frac{d}{dt}|\psi\rangle\'
-            scale={2}
-            start_color="rgb(0,0,0)"
-            end_color="rgb(230,250,210)"
-            draw_sec={6}
-          />
-        </div>
+        <MotionEquation
+          equation='\ \hat{H}|\psi\rangle = i \hbar \frac{d}{dt}|\psi\rangle\'
+          scale={2}
+          start_color="rgb(0,0,0)"
+          end_color="rgb(230,250,210)"
+          draw_sec={6}
+        />
       </div>
       <div className="flex gap-x-2">
-        <div className="text-lg">
-            I specialize in building things for other people.  If you are another person and you need something built go ahead and reach out.
+        <div>
+          <div className="text-lg">
+              I specialize in building things for other people.  If you are another person and you need something built go ahead and reach out.
+          </div>
+          <div className="text-lg">
+              I have a summary of the skills I&aposve picked up over the years on the right that you can click through.
+          </div>
         </div>
         <SkillsRadar />
       </div>

app/types/index.d.ts

@@ -3,5 +3,6 @@ export {};
 declare global {
     interface Window {
         MathJax: any;
+        Sunburst: any;
     }
 }

package.json

@@ -15,8 +15,7 @@
     "next": "14.1.4",
     "p5": "^1.9.2",
     "react": "^18",
-    "react-dom": "^18",
-    "sunburst-chart": "^1.19.2"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",