Merge pull request #3 from mrkthmpsn/july-24-update

July '24 update

app/about/about.md

@@ -1,21 +1,20 @@
-I'm Mark. I make stuff, make sense of stuff, or make sense of it for others.
+### Journey
+My career is typical for a twenty-first century worker:
+- Formal studies in history and journalism
+- A hobby writing and reading about football analytics
+- A first job as a football writer
+- Transitioning to a software developer
 
-At varying points in time, the focus of that has been:
-
-- History (university)
-- The current world (journalism)
-- Football data (as a blogger, researcher, industry newsletterer)
-- Software development
-
-I primarily work in Python, but take an interest in things beyond that - the [Projects](/projects) page gives a sense of where my curiousities lie. Day-to-day I also have experience of API development and data engineering that doesn't fit into, or can't be shared as, a discrete 'project'.
+I primarily work in Python, but take an interest in things beyond that - the Typescript site you're reading this on, for example.
+The [Projects](/projects) page gives a sense of where my curiousities lie, although my day-to-day involves more API development and data engineering too.
 
 ### Football
 
-I have extensive experience with football data, and with using it for data science projects and various types of software products. That experience lies across statistics, event data, and tracking data.
+It's all a case of right place, right time. In 2013/2014 I fell into the crowd of people on Twitter delving into football stats. I began blogging, within a few years wrote for renowned site Statsbomb (on [Sean Dyche's Burnley](https://statsbomb.com/articles/soccer/burnley-doing-it-differently/)), and in 2019 began a [football analytics newsletter](https://www.getgoalsideanalytics.com/).
 
-It's little wonder, then, that I also occasionally write a newsletter about football data and analytics, called [Get Goalside](https://www.getgoalsideanalytics.com/). It's read by a lot of smart people.
+I've written about [understanding AI](https://www.getgoalsideanalytics.com/understand-football-and-youll-understand-ai/), ['possession adjusting' statistics](https://www.getgoalsideanalytics.com/duels-position-possession-adjusting/), [labelling unlabelled data](https://www.getgoalsideanalytics.com/high-fat-data-for-low-er-fat-costs/), [football analytics history](https://www.getgoalsideanalytics.com/36315087-analytics-is-older-than-you-think/), [why 'ball-in-play time' measures had no sensible grounding](https://www.getgoalsideanalytics.com/ball-in-play-kick-into-touch/), and [how much we actually understand football](https://www.getgoalsideanalytics.com/what-do-we-actually-know-about-football/). 
 
-The number of data providers whose data I've worked with in some capacity currently stands at **10**. (In alphabetical order, they are: Impect, Metrica Sports, Opta, Ortec, Second Spectrum, Skillcorner, Sportlogiq, StatsBomb, Strategem, Wyscout).
+The number of data providers whose data I've worked with in some capacity currently stands at **10**. In alphabetical order: Impect, Metrica Sports, Opta, Ortec, Second Spectrum, Skillcorner, Sportlogiq, StatsBomb, Strategem, Wyscout. Sadly, the number of analytics conferences I've attended stands at just **3**: Opta Pro Forum, StatsBomb, Training Ground Guru. 
 
 ---
 

app/page.tsx

@@ -4,27 +4,24 @@ import "bootstrap/dist/css/bootstrap.min.css";
 import CustomNavbar from "@/components/navbar";
 import PitchScreenWrapper from "@/components/pitchAnimation/pitchScreenWrapper";
 import "./globals.css";
-import { BeakerIcon } from "@heroicons/react/24/solid";
-import {
-  InformationCircleIcon,
-  PaperAirplaneIcon,
-} from "@heroicons/react/24/outline";
+
+import NavIconsGroup from "@/components/navIconsGroup";
 
 const HomePage = () => {
   return (
     <>
       <CustomNavbar />
-      <div className="w-10/12 mx-auto md:my-4">
-        <div className="w-3/5 md:w-3/5 mx-auto mt-4 md:!mt-8 text-left md:text-center text-4xl md:text-5xl lg:text-6xl font-['Roboto_Slab'] relative">
+      <div className="w-10/12 mx-auto md:my-4 gap-y-6">
+        <div className="w-3/5 md:w-3/5 mx-auto mt-4 md:!mt-8 text-left md:text-center text-4xl md:text-5xl lg:text-6xl relative">
           <span className="inline-block"></span>
           <span className="bg-brandStraw-200 w-full h-full absolute left-0 top-0 z-0 origin-center -rotate-2"></span>
           <span className="z-10 relative">
             Mark
             <span className="font-bold tracking-wide"> Thompson</span>
           </span>
         </div>
-        <div className="grid grid-cols-6 grid-rows-6 mt-8 md:mt-8">
-          <div className="col-span-6 row-span-1 md:row-span-1 content-center px-2">
+        <div className="grid grid-cols-6 grid-rows-8 mt-8 md:mt-4 gap-y-4 md:gap-y-10">
+          <div className="col-span-6 row-span-1 md:row-span-1 content-center px-2 mt-6 md:mt-10">
             <div className="flex flex-wrap items-center gap-x-8 justify-around font-normal text-sm md:text-base lg:text-lg md:w-4/5 lg:w-3/4 mx-auto">
               <p className="mb-2 leading-tight text-gray-700">
                 <span className="text-brandStraw-600">Python </span>
@@ -48,34 +45,22 @@ const HomePage = () => {
               <p>React</p>
             </div>
           </div>
-          <div className="col-span-6 md:col-span-4 row-span-3 md:col-start-3 md:row-span-5 mt-4 md:mt-0">
+          <div className="col-span-6 md:col-span-4 row-span-3 md:col-start-3 md:row-span-5 mt-4">
             <PitchScreenWrapper />
           </div>
+          <div
+            id="homepage-intro"
+            className="col-span-6 md:col-span-2 row-span-2 md:row-span-4 md:row-start-2 mt-8 md:mt-8 md:flex md:flex-wrap md:grow space-y-4 md:gap-x-8 text-sm md:text-md lg:text-lg bg-white md:bg-white content-center md:sticky md:top-40 lg:top-48 text-gray-700"
+          >
+            <p>I’m Mark. And I have 10 years’ experience with football data, five years of software development, and three of data engineering.</p>
+            <p>I’m a Python guy, but really a ‘build something to make things better’ guy.</p>
+            <p>This site was fun to make. Check out the ‘Projects’ page for other things I’ve worked on, or just have fun watching the tracking data animation.</p>
+          </div>
           <div
             id="homepage-links"
-            className="col-span-6 md:col-span-2 row-span-2 md:row-span-4 md:row-start-2 mt-8 md:mt-4 md:flex md:flex-wrap md:grow space-y-4 md:gap-x-8 md:space-y-0 md:gap-y-4 md:justify-center text-base md:text-lg lg:text-xl bg-white md:bg-white content-center  md:sticky md:top-40 lg:top-48"
+            className="col-span-6 row-span-2 row-start-7 mt-4 mb-8 md:mb-4 md:flex md:flex-wrap md:grow space-y-4 md:gap-x-8 md:space-y-0 md:gap-y-4 md:justify-center text-base md:text-lg lg:text-xl bg-white md:bg-white content-center"
           >
-            <div className="flex justify-center items-center">
-              <a href="/about" className="space-x-2">
-                <InformationCircleIcon className="h-4 w-4 md:h-6 md:w-6" />
-                <p className="mb-0">About</p>
-                <InformationCircleIcon className="h-4 w-4 md:h-6 md:w-6" />
-              </a>
-            </div>
-            <div className="flex justify-center items-center">
-              <a href="/projects" className="space-x-2">
-                <BeakerIcon className="h-4 w-4 md:h-6 md:w-6" />
-                <p className="mb-0">Projects</p>
-                <BeakerIcon className="h-4 w-4 md:h-6 md:w-6" />
-              </a>
-            </div>
-            <div className="flex justify-center items-center">
-              <a href="/contact" className="space-x-2">
-                <PaperAirplaneIcon className="h-4 w-4 md:h-6 md:w-6" />
-                <p className="mb-0">Contact</p>
-                <PaperAirplaneIcon className="h-4 w-4 md:h-6 md:w-6" />
-              </a>
-            </div>
+            <NavIconsGroup/>
           </div>
         </div>
       </div>

app/pages-styles.css

@@ -26,7 +26,7 @@ ul .in-vis {
 }
 
 .navbar-title {
-  font-family: "Roboto Slab";
+  /* font-family: "Roboto Slab"; */
   font-size: 18pt;
   margin-left: 3vw;
 }
@@ -115,7 +115,6 @@ h2 {
 }
 h3 {
   padding: 20px;
-  font-family: "Roboto Slab";
 }
 
 header {

components/navIconsGroup.tsx

@@ -0,0 +1,36 @@
+import { BeakerIcon } from "@heroicons/react/24/solid";
+import {
+  InformationCircleIcon,
+  PaperAirplaneIcon,
+} from "@heroicons/react/24/outline";
+
+const NavIconsGroup = () => {
+
+
+return (<>
+            <div className="flex justify-center items-center">
+              <a href="/about" className="space-x-2">
+                <InformationCircleIcon className="h-4 w-4 md:h-6 md:w-6" />
+                <p className="mb-0">About</p>
+                <InformationCircleIcon className="h-4 w-4 md:h-6 md:w-6" />
+              </a>
+            </div>
+            <div className="flex justify-center items-center">
+              <a href="/projects" className="space-x-2">
+                <BeakerIcon className="h-4 w-4 md:h-6 md:w-6" />
+                <p className="mb-0">Projects</p>
+                <BeakerIcon className="h-4 w-4 md:h-6 md:w-6" />
+              </a>
+            </div>
+            <div className="flex justify-center items-center">
+              <a href="/contact" className="space-x-2">
+                <PaperAirplaneIcon className="h-4 w-4 md:h-6 md:w-6" />
+                <p className="mb-0">Contact</p>
+                <PaperAirplaneIcon className="h-4 w-4 md:h-6 md:w-6" />
+              </a>
+            </div>
+            </>
+          )
+}
+
+export default NavIconsGroup