added some typing before updates

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["flexslider", "socialimage", "socialimages"]
+}

TODO.md

@@ -23,4 +23,4 @@
 - maybe transition to markdown loader?
 - add language switcher + download for both
 - add highlight to "languages I like"
-- tech turns red when hovered over link
+- tech turns red when hovered over link (need to hover on text too)

src/components/info-pill.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 type Props = { title: string; value: string; link: string; rest?: {} };
 

src/components/section-title.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { FunctionComponent } from "react";
 
-type Props = {};
+type Props = { children: ReactNode };
 
 export const SectionTitle: FunctionComponent<Props> = ({ children }) => {
   return (

src/components/section.tsx

@@ -1,7 +1,8 @@
 import React, { FunctionComponent } from "react";
+import { ReactNode } from "react";
 import { SectionTitle } from "./section-title";
 
-type Props = { title: string };
+type Props = { title: string; children: ReactNode };
 
 export const Section: FunctionComponent<Props> = ({ title, children }) => {
   return (

src/layout/layout.tsx

@@ -1,13 +1,14 @@
-import React, { FunctionComponent } from "react";
-import PropTypes from "prop-types";
+import React, { FunctionComponent, ReactNode } from "react";
 // import CookieConsent from "react-cookie-consent";
 // import { Link } from "gatsby"
 import "./../styles/style.scss";
-import { ProfilePicture } from "./profile-pic";
-import { NavBar } from "./navigation/navbar";
 import { Footer } from "./footer";
+import { NavBar } from "./navigation/navbar";
+import { ProfilePicture } from "./profile-pic";
 
-export const Layout: FunctionComponent<{}> = ({ children }) => {
+type Props = { children: ReactNode[] };
+
+export const Layout: FunctionComponent<Props> = ({ children }) => {
   return (
     <div className="body-red">
       <div className="main-content">
@@ -51,7 +52,3 @@ export const Layout: FunctionComponent<{}> = ({ children }) => {
     </div>
   );
 };
-
-Layout.propTypes = {
-  children: PropTypes.node.isRequired,
-};