diff --git a/.eslintrc.js b/.eslintrc.js
index 6ae6087..7753207 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -11,4 +11,12 @@ module.exports = {
   rules: {
     "react/no-unescaped-entities": "off",
   },
+  overrides: [
+    {
+      files: ["*.ts", "*.tsx"],
+      rules: {
+        "no-undef": "off",
+      },
+    },
+  ],
 }
diff --git a/.gitignore b/.gitignore
index 1437c53..e221123 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@
 # next.js
 /.next/
 /out/
+next-env.d.ts
 
 # production
 /build
diff --git a/components/Accordion.jsx b/components/Accordion.tsx
similarity index 98%
rename from components/Accordion.jsx
rename to components/Accordion.tsx
index afdada5..9ff6db5 100644
--- a/components/Accordion.jsx
+++ b/components/Accordion.tsx
@@ -60,7 +60,7 @@ export default function Accordion({ job }) {
             dangerouslySetInnerHTML={{ __html: job.description }}
           />
           <ul className="grid grid-cols-3 xs:m-2 md:w-1/3 md:grid-cols-1 md:grid-rows-3">
-            {job.skills.map((skill) => {
+            {job.skills.map((skill: string) => {
               return (
                 <li className=" md:ml-6" key={skill}>
                   <Badge logo={skill} />
diff --git a/components/Badge.jsx b/components/Badge.tsx
similarity index 100%
rename from components/Badge.jsx
rename to components/Badge.tsx
diff --git a/components/Entry.jsx b/components/Entry.tsx
similarity index 100%
rename from components/Entry.jsx
rename to components/Entry.tsx
diff --git a/components/Footer.jsx b/components/Footer.tsx
similarity index 100%
rename from components/Footer.jsx
rename to components/Footer.tsx
diff --git a/components/Header.jsx b/components/Header.tsx
similarity index 77%
rename from components/Header.jsx
rename to components/Header.tsx
index d2e9344..bd1c5aa 100644
--- a/components/Header.jsx
+++ b/components/Header.tsx
@@ -1,8 +1,8 @@
-import Link from "next/link"
-import Toggle from "./Toggle"
-import TabBar from "./TabBar"
 import { useTheme } from "next-themes"
+import Link from "next/link"
 import { useRouter } from "next/router"
+import TabBar from "./TabBar"
+import Toggle from "./Toggle"
 
 export default function Header() {
   const router = useRouter()
@@ -47,18 +47,20 @@ export default function Header() {
         </a>
       </Link>
       <nav className="flex max-w-lg flex-grow items-center justify-end">
-        {navigation}
-        <Toggle
-          id="toggleTheme"
-          alt="Toggle dark mode"
-          onClick={() => {
-            document.body.classList.add("transition-stop")
-            setTheme(theme === "dark" ? "light" : "dark")
-            setTimeout(() => {
-              document.body.classList.remove("transition-stop")
-            }, 1000)
-          }}
-        />
+        <>
+          {navigation}
+          <Toggle
+            id="toggleTheme"
+            alt="Toggle dark mode"
+            onClick={() => {
+              document.body.classList.add("transition-stop")
+              setTheme(theme === "dark" ? "light" : "dark")
+              setTimeout(() => {
+                document.body.classList.remove("transition-stop")
+              }, 1000)
+            }}
+          />
+        </>
       </nav>
     </header>
   )
diff --git a/components/Heading.jsx b/components/Heading.tsx
similarity index 85%
rename from components/Heading.jsx
rename to components/Heading.tsx
index 76af653..5c72d31 100644
--- a/components/Heading.jsx
+++ b/components/Heading.tsx
@@ -1,5 +1,5 @@
 export default function Heading({ tag, children }) {
-  const HTag = `${tag}`
+  const HTag = `${tag}` as keyof JSX.IntrinsicElements
   const anchor = getAnchor(children)
   const link = `#${anchor}`
   return (
@@ -16,7 +16,7 @@ export default function Heading({ tag, children }) {
   )
 }
 
-function getAnchor(text) {
+function getAnchor(text: string): string {
   return text
     .toLowerCase()
     .replace(/[^a-z0-9 ]/g, "")
diff --git a/components/Layout.jsx b/components/Layout.tsx
similarity index 100%
rename from components/Layout.jsx
rename to components/Layout.tsx
diff --git a/components/Post.jsx b/components/Post.tsx
similarity index 82%
rename from components/Post.jsx
rename to components/Post.tsx
index 78b6875..37deb84 100644
--- a/components/Post.jsx
+++ b/components/Post.tsx
@@ -1,6 +1,7 @@
-import Title from "../components/Title"
-import Layout from "../components/Layout"
-import PostCard from "../components/PostCard"
+import { Post as PostType } from "../lib/types"
+import Layout from "./Layout"
+import PostCard from "./PostCard"
+import Title from "./Title"
 
 export default function Post({ meta, children }) {
   return (
@@ -32,7 +33,7 @@ export default function Post({ meta, children }) {
   )
 }
 
-export function getPostBySlug(slug) {
+export function getPostBySlug(slug: string): PostType {
   const post = require(`../pages/blog/${slug}.mdx`)
 
   return {
diff --git a/components/PostCard.jsx b/components/PostCard.tsx
similarity index 100%
rename from components/PostCard.jsx
rename to components/PostCard.tsx
diff --git a/components/SkillCard.jsx b/components/SkillCard.tsx
similarity index 100%
rename from components/SkillCard.jsx
rename to components/SkillCard.tsx
diff --git a/components/TabBar.jsx b/components/TabBar.tsx
similarity index 100%
rename from components/TabBar.jsx
rename to components/TabBar.tsx
diff --git a/components/Title.jsx b/components/Title.tsx
similarity index 93%
rename from components/Title.jsx
rename to components/Title.tsx
index 31139b8..a5fc50a 100644
--- a/components/Title.jsx
+++ b/components/Title.tsx
@@ -11,7 +11,7 @@ export default function Title({ meta }) {
           })}
         </time>
         <div className="flex">
-          {meta.tags.map((tag) => {
+          {meta.tags.map((tag: string) => {
             return (
               <span className="chip my-1 first:ml-0" key={tag}>
                 {tag}
diff --git a/components/Toggle.jsx b/components/Toggle.tsx
similarity index 97%
rename from components/Toggle.jsx
rename to components/Toggle.tsx
index a4b3e86..4f1c324 100644
--- a/components/Toggle.jsx
+++ b/components/Toggle.tsx
@@ -2,7 +2,6 @@ export default function Toggle({ id, alt, onClick }) {
   return (
     <label
       className="ml-2 inline-flex h-6 w-10 flex-shrink-0 cursor-pointer rounded-full bg-gray-400 align-middle shadow-inner dark:bg-gray-500 xs:h-7 xs:w-12 md:ml-5"
-      alt={alt}
       aria-label={"A toggle controlling " + alt}
     >
       <input
diff --git a/lib/jobs.js b/lib/jobs.ts
similarity index 53%
rename from lib/jobs.js
rename to lib/jobs.ts
index 3c4eb75..cb7c2c5 100644
--- a/lib/jobs.js
+++ b/lib/jobs.ts
@@ -1,10 +1,11 @@
 import fs from "fs"
 import path from "path"
+import { Job } from "./types"
 
 const dataDirectory = path.join(process.cwd(), "/public/data")
 
-export function getJobs() {
-  const file = fs.readFileSync(dataDirectory + "/jobs.json")
+export function getJobs(): Job[] {
+  const file = fs.readFileSync(dataDirectory + "/jobs.json").toString()
   const jobs = JSON.parse(file)
 
   return jobs
diff --git a/lib/posts.js b/lib/posts.ts
similarity index 78%
rename from lib/posts.js
rename to lib/posts.ts
index 123d483..2f207c3 100644
--- a/lib/posts.js
+++ b/lib/posts.ts
@@ -1,9 +1,10 @@
 import fs from "fs"
 import path from "path"
+import { Post } from "./types"
 
 const postDirectory = path.join(process.cwd(), "/pages/blog")
 
-export function getAllPosts() {
+export function getAllPosts(): Post[] {
   const files = fs.readdirSync(postDirectory)
   const posts = files.map((file) => {
     const post = require(`../pages/blog/${file}`)
@@ -13,6 +14,6 @@ export function getAllPosts() {
       ...post.meta,
     }
   })
-
+  console.log(posts)
   return posts
 }
diff --git a/lib/types.ts b/lib/types.ts
new file mode 100644
index 0000000..e5e9fcd
--- /dev/null
+++ b/lib/types.ts
@@ -0,0 +1,23 @@
+export type Job = {
+  id: number
+  company: string
+  title: string
+  startDate: string
+  endDate: string
+  location: string
+  image: string
+  skills: string[]
+  description: string
+}
+
+export type Post = {
+  slug: string
+  title: string
+  description: string
+  date: string
+  tags: string[]
+  image: string
+  alt: string
+  icon: string
+  related: string
+}
diff --git a/next.config.js b/next.config.js
index 10f4da3..f38690a 100644
--- a/next.config.js
+++ b/next.config.js
@@ -28,6 +28,6 @@ const withMDX = require("@next/mdx")({
 module.exports = {
   ...config,
   ...withMDX({
-    pageExtensions: ["js", "jsx", "mdx"],
+    pageExtensions: ["ts", "tsx", "mdx"],
   }),
 }
diff --git a/package-lock.json b/package-lock.json
index d9871ad..65cc2c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,8 @@
         "shiki": "^0.10.1"
       },
       "devDependencies": {
+        "@types/node": "^18.7.16",
+        "@types/react": "^18.0.19",
         "autoprefixer": "^10.4.2",
         "eslint": "^8.6.0",
         "eslint-config-next": "^12.0.7",
@@ -30,7 +32,8 @@
         "postcss": "^8.4.5",
         "prettier": "^2.5.1",
         "prettier-plugin-tailwindcss": "^0.1.4",
-        "tailwindcss": "^3.0.13"
+        "tailwindcss": "^3.0.13",
+        "typescript": "^4.8.3"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -845,11 +848,40 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/node": {
+      "version": "18.7.16",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.16.tgz",
+      "integrity": "sha512-EQHhixfu+mkqHMZl1R2Ovuvn47PUw18azMJOTwSZr9/fhzHNGXAJ0ma0dayRVchprpCj0Kc1K1xKoWaATWF1qg==",
+      "dev": true
+    },
     "node_modules/@types/parse5": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-5.0.3.tgz",
       "integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw=="
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+      "dev": true
+    },
+    "node_modules/@types/react": {
+      "version": "18.0.19",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.19.tgz",
+      "integrity": "sha512-BDc3Q+4Q3zsn7k9xZrKfjWyJsSlEDMs38gD1qp2eDazLCdcPqAT+vq1ND+Z8AGel/UiwzNUk8ptpywgNQcJ1MQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+      "dev": true
+    },
     "node_modules/@types/unist": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
@@ -1648,6 +1680,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==",
+      "dev": true
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -5585,11 +5623,10 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.7.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
-      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
+      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
       "dev": true,
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6562,11 +6599,40 @@
         "@types/unist": "*"
       }
     },
+    "@types/node": {
+      "version": "18.7.16",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.16.tgz",
+      "integrity": "sha512-EQHhixfu+mkqHMZl1R2Ovuvn47PUw18azMJOTwSZr9/fhzHNGXAJ0ma0dayRVchprpCj0Kc1K1xKoWaATWF1qg==",
+      "dev": true
+    },
     "@types/parse5": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-5.0.3.tgz",
       "integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw=="
     },
+    "@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+      "dev": true
+    },
+    "@types/react": {
+      "version": "18.0.19",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.19.tgz",
+      "integrity": "sha512-BDc3Q+4Q3zsn7k9xZrKfjWyJsSlEDMs38gD1qp2eDazLCdcPqAT+vq1ND+Z8AGel/UiwzNUk8ptpywgNQcJ1MQ==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+      "dev": true
+    },
     "@types/unist": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
@@ -7101,6 +7167,12 @@
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
     },
+    "csstype": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==",
+      "dev": true
+    },
     "damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -9866,11 +9938,10 @@
       "dev": true
     },
     "typescript": {
-      "version": "4.7.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
-      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
-      "dev": true,
-      "peer": true
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
+      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
+      "dev": true
     },
     "unbox-primitive": {
       "version": "1.0.2",
diff --git a/package.json b/package.json
index 8c4aaa8..f1a58ae 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,8 @@
     "shiki": "^0.10.1"
   },
   "devDependencies": {
+    "@types/node": "^18.7.16",
+    "@types/react": "^18.0.19",
     "autoprefixer": "^10.4.2",
     "eslint": "^8.6.0",
     "eslint-config-next": "^12.0.7",
@@ -34,7 +36,8 @@
     "postcss": "^8.4.5",
     "prettier": "^2.5.1",
     "prettier-plugin-tailwindcss": "^0.1.4",
-    "tailwindcss": "^3.0.13"
+    "tailwindcss": "^3.0.13",
+    "typescript": "^4.8.3"
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"
diff --git a/pages/404.js b/pages/404.tsx
similarity index 100%
rename from pages/404.js
rename to pages/404.tsx
diff --git a/pages/_app.tsx b/pages/_app.tsx
new file mode 100644
index 0000000..f01add5
--- /dev/null
+++ b/pages/_app.tsx
@@ -0,0 +1,13 @@
+import { ThemeProvider } from "next-themes"
+import type { AppProps } from "next/app"
+import "../styles/globals.css"
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <ThemeProvider attribute="class" defaultTheme="light">
+        <Component {...pageProps} />
+      </ThemeProvider>
+    </>
+  )
+}
diff --git a/pages/_document.js b/pages/_document.js
deleted file mode 100644
index e6de96b..0000000
--- a/pages/_document.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Document, { Html, Head, Main, NextScript } from "next/document"
-
-class MyDocument extends Document {
-  static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx)
-    return { ...initialProps }
-  }
-
-  render() {
-    return (
-      <Html lang="en">
-        <Head />
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    )
-  }
-}
-
-export default MyDocument
diff --git a/pages/_app.js b/pages/_document.tsx
similarity index 52%
rename from pages/_app.js
rename to pages/_document.tsx
index 8a91e75..a087e44 100644
--- a/pages/_app.js
+++ b/pages/_document.tsx
@@ -1,11 +1,9 @@
-import Head from "next/head"
+import { Head, Html, Main, NextScript } from "next/document"
 import Script from "next/script"
-import { ThemeProvider } from "next-themes"
-import "../styles/globals.css"
 
-export default function App({ Component, pageProps }) {
+export default function Document() {
   return (
-    <>
+    <Html lang="en">
       <Head>
         {/* Favicons */}
         <link
@@ -38,26 +36,27 @@ export default function App({ Component, pageProps }) {
         <link rel="preconnect" href="https://www.googletagmanager.com" />
         <link rel="preconnect" href="https://www.google-analytics.com" />
       </Head>
-      <ThemeProvider attribute="class" defaultTheme="light">
-        <Component {...pageProps} />
-      </ThemeProvider>
-      <Script src="/scripts/fade-in.js" strategy="beforeInteractive" />
-      <Script src="/scripts/update-selector.js" />
-      <Script src="/scripts/smoothscroll.min.js" />
-      <Script src="/scripts/smoothscroll-anchor.min.js" />
-      <Script
-        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
-      />
-      <Script id="gtag">
-        {`
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
-          gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
-            page_path: window.location.pathname,
-          });
-        `}
-      </Script>
-    </>
+      <body>
+        <Main />
+        <NextScript />
+        <Script src="/scripts/fade-in.js" strategy="beforeInteractive" />
+        <Script src="/scripts/update-selector.js" />
+        <Script src="/scripts/smoothscroll.min.js" />
+        <Script src="/scripts/smoothscroll-anchor.min.js" />
+        <Script
+          src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
+        />
+        <Script id="gtag">
+          {`
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
+              page_path: window.location.pathname,
+            });
+          `}
+        </Script>
+      </body>
+    </Html>
   )
 }
diff --git a/pages/about.js b/pages/about.tsx
similarity index 100%
rename from pages/about.js
rename to pages/about.tsx
diff --git a/pages/blog.js b/pages/blog.tsx
similarity index 84%
rename from pages/blog.js
rename to pages/blog.tsx
index 83fb43d..ede10d5 100644
--- a/pages/blog.js
+++ b/pages/blog.tsx
@@ -1,7 +1,9 @@
+import type { GetStaticProps } from "next"
 import Entry from "../components/Entry"
 import Layout from "../components/Layout"
 import PostCard from "../components/PostCard"
 import { getAllPosts } from "../lib/posts"
+import { Post } from "../lib/types"
 
 export default function Blog({ posts, postCount, postsByYear, years }) {
   return (
@@ -23,13 +25,13 @@ export default function Blog({ posts, postCount, postsByYear, years }) {
             })}
           </div>
         </section>
-        {years.map((year) => {
+        {years.map((year: string) => {
           return (
             <section key={year}>
               <h2 className="mb-0">{year}</h2>
               <hr className="mt-2 mb-8 md:mt-3 md:mb-10" />
               <ul className="list">
-                {postsByYear[year].map((post) => {
+                {postsByYear[year].map((post: Post) => {
                   return <Entry key={post.slug} post={post} />
                 })}
               </ul>
@@ -41,7 +43,8 @@ export default function Blog({ posts, postCount, postsByYear, years }) {
   )
 }
 
-export async function getStaticProps() {
+// export async function getStaticProps() {
+export const getStaticProps: GetStaticProps = async () => {
   const posts = getAllPosts().reverse()
   const postCount = posts.length
   let postsByYear = {}
@@ -58,7 +61,7 @@ export async function getStaticProps() {
   }
 }
 
-export function getFeaturedPosts(posts) {
+export function getFeaturedPosts(posts: Post[]): Post[] {
   const featured = ["twitt3r", "tech-stack"]
 
   const sorted = posts
diff --git a/pages/blog/tech-stack.mdx b/pages/blog/tech-stack.mdx
index d4f8a47..c103502 100644
--- a/pages/blog/tech-stack.mdx
+++ b/pages/blog/tech-stack.mdx
@@ -3,7 +3,7 @@
 import Image from "next/image"
 import Post from "../../components/Post"
 import banner from "../../public/images/stack.png"
-import Badge from "../../components/Badge.jsx"
+import Badge from "../../components/Badge.tsx"
 
 export const meta = {
   title: "Building This Blog",
diff --git a/pages/contact.js b/pages/contact.tsx
similarity index 90%
rename from pages/contact.js
rename to pages/contact.tsx
index ff78022..138e783 100644
--- a/pages/contact.js
+++ b/pages/contact.tsx
@@ -20,23 +20,22 @@ export default function Contact() {
               className="form"
               type="email"
               name="_replyto"
-              tabIndex="1"
+              tabIndex={1}
               placeholder="Email address"
               required
             />
             <input type="hidden" name="_subject" value="Contact Form" />
             <textarea
               className="form"
-              rows="8"
-              type="text"
-              tabIndex="2"
+              rows={8}
+              tabIndex={2}
               placeholder="Message"
               required
             />
             <input
               className="button mt-4 ml-auto mr-0 block outline-none"
               type="submit"
-              tabIndex="3"
+              tabIndex={3}
               value="Send"
             />
           </form>
diff --git a/pages/index.js b/pages/index.tsx
similarity index 97%
rename from pages/index.js
rename to pages/index.tsx
index 1c64a01..18ef130 100644
--- a/pages/index.js
+++ b/pages/index.tsx
@@ -1,9 +1,11 @@
+import type { GetStaticProps } from "next"
 import Link from "next/link"
 import Accordion from "../components/Accordion"
 import Badge from "../components/Badge"
 import Layout from "../components/Layout"
 import SkillCard from "../components/SkillCard"
 import { getJobs } from "../lib/jobs"
+import { Job } from "../lib/types"
 
 export default function Home({ jobs }) {
   return (
@@ -167,6 +169,7 @@ export default function Home({ jobs }) {
           <p className="mt-14">Languages I know:</p>
           <ul className="fade grid grid-cols-3 md:grid-cols-4 md:gap-2">
             {[
+              "TypeScript",
               "Solidity",
               "Python",
               "Terraform",
@@ -213,7 +216,7 @@ export default function Home({ jobs }) {
           </h2>
           <hr className="mt-2 mb-8 md:mt-3 md:mb-10" />
           <ul className="list">
-            {jobs.map((job) => {
+            {jobs.map((job: Job) => {
               return <Accordion key={job.title} job={job} />
             })}
           </ul>
@@ -240,7 +243,8 @@ export default function Home({ jobs }) {
   )
 }
 
-export async function getStaticProps() {
+// export async function getStaticProps() {
+export const getStaticProps: GetStaticProps = async () => {
   const jobs = getJobs()
 
   return {
diff --git a/public/logos/typescript.svg b/public/logos/typescript.svg
new file mode 100644
index 0000000..313e5e7
--- /dev/null
+++ b/public/logos/typescript.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M20,0 L236,0 C247.045695,0 256,8.954305 256,20 L256,236 C256,247.045695 247.045695,256 236,256 L20,256 C8.954305,256 0,247.045695 0,236 L0,20 C0,8.954305 8.954305,0 20,0 Z" fill="#3178C6"></path>
+        <path d="M150.518,200.475 L150.518,228.095 C155.01,230.397 160.323,232.123 166.456,233.274 C172.589,234.425 179.053,235 185.849,235 C192.471,235 198.763,234.367 204.723,233.101 C210.683,231.835 215.91,229.749 220.401,226.844 C224.893,223.938 228.449,220.14 231.07,215.45 C233.69,210.761 235,204.964 235,198.059 C235,193.053 234.251,188.665 232.754,184.896 C231.257,181.127 229.097,177.775 226.275,174.841 C223.454,171.906 220.07,169.274 216.126,166.943 C212.181,164.613 207.732,162.412 202.779,160.341 C199.151,158.844 195.898,157.392 193.018,155.982 C190.139,154.572 187.691,153.134 185.676,151.666 C183.66,150.199 182.105,148.645 181.011,147.005 C179.917,145.365 179.37,143.51 179.37,141.438 C179.37,139.539 179.859,137.828 180.838,136.303 C181.817,134.778 183.2,133.469 184.985,132.376 C186.77,131.282 188.958,130.434 191.55,129.829 C194.141,129.225 197.021,128.923 200.188,128.923 C202.492,128.923 204.925,129.096 207.487,129.441 C210.05,129.786 212.627,130.318 215.219,131.038 C217.81,131.757 220.329,132.663 222.777,133.757 C225.224,134.85 227.485,136.116 229.558,137.554 L229.558,111.747 C225.354,110.136 220.761,108.942 215.78,108.165 C210.799,107.388 205.083,107 198.633,107 C192.068,107 185.849,107.705 179.975,109.115 C174.101,110.524 168.932,112.725 164.469,115.717 C160.006,118.71 156.479,122.522 153.887,127.154 C151.296,131.786 150,137.324 150,143.769 C150,151.997 152.375,159.017 157.127,164.829 C161.878,170.64 169.09,175.56 178.765,179.588 C182.566,181.142 186.108,182.666 189.39,184.163 C192.673,185.659 195.509,187.212 197.899,188.823 C200.289,190.434 202.175,192.189 203.557,194.088 C204.939,195.987 205.63,198.145 205.63,200.562 C205.63,202.345 205.198,204 204.334,205.525 C203.471,207.049 202.16,208.373 200.404,209.495 C198.648,210.617 196.459,211.494 193.839,212.127 C191.219,212.76 188.152,213.077 184.639,213.077 C178.65,213.077 172.719,212.027 166.845,209.926 C160.97,207.826 155.528,204.676 150.518,200.475 L150.518,200.475 Z M104.482,131.742 L140,131.742 L140,109 L41,109 L41,131.742 L76.3447,131.742 L76.3447,233 L104.482,233 L104.482,131.742 Z" fill="#FFFFFF"></path>
+    </g>
+</svg>
diff --git a/tailwind.config.js b/tailwind.config.js
index 4de6736..4035c2c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   mode: "jit",
-  content: ["./pages/**/*.js", "./pages/**/*.mdx", "./components/**/*.jsx"],
+  content: ["./pages/**/*{.ts,tsx,mdx}", "./components/**/*.tsx"],
   safelist: ["opacity-0", "animate-fade-in"],
   darkMode: "class",
   theme: {
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..281d072
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es2015",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}