chore: update packages

.eslintrc.js

@@ -0,0 +1,90 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+  plugins: ["@typescript-eslint"],
+  extends: [
+    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+    "prettier",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
+    "plugin:prettier/recommended",
+    "eslint:recommended",
+    "prettier/@typescript-eslint"
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: "module",
+  },
+  plugins: ["react", "@typescript-eslint"],
+  rules: {
+    indent: ["error", 2],
+    "linebreak-style": ["error", "unix"],
+    quotes: ["error", "double"],
+    semi: ["error", "always"],
+    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/ban-ts-ignore": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "react/display-name": "off",
+    "react/no-unescaped-entities": "off",
+    "import/no-named-as-default": 0,
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/ban-types": "warn",
+    "import/order": [
+      "error",
+      {
+        groups: ["builtin", "external", "internal", ["sibling", "parent"]],
+        pathGroups: [
+          {
+            pattern: "react",
+            group: "builtin",
+            position: "before",
+          },
+          {
+            pattern: "pages/**",
+            group: "internal",
+            position: "after",
+          },
+          {
+            pattern: "components/**",
+            group: "internal",
+            position: "after",
+          },
+          {
+            pattern: "data/**",
+            group: "internal",
+            position: "after",
+          },
+        ],
+        pathGroupsExcludedImportTypes: ["react"],
+        "newlines-between": "never",
+        alphabetize: {
+          order: "asc",
+          caseInsensitive: true,
+        },
+      },
+    ],
+  },
+  settings: {
+    react: {
+      version: "detect", // Tells eslint-plugin-react to automatically detect the version of React to use
+    },
+    "import/resolver": {
+      node: {
+        moduleDirectory: ["node_modules", "src/"],
+      },
+    },
+  },
+};

.prettierrc

@@ -1,4 +1,7 @@
 {
-  "arrowParens": "avoid",
-  "semi": false
-}
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": false,
+  "printWidth": 80,
+  "tabWidth": 2
+}

gatsby-browser.js

@@ -3,5 +3,4 @@
  *
  * See: https://www.gatsbyjs.org/docs/browser-apis/
  */
-
-// You can delete this file if you're not using it
+import "./../styles/global.scss"

package.json

@@ -1,11 +1,12 @@
 {
-  "name": "tsjamin",
+  "name": "codejagaban",
   "private": true,
-  "description": " Portfolio of tsjamin",
+  "description": " Portfolio of Trust Jamin",
   "version": "0.1.0",
   "author": "Trust Jamin Okpukoro <[email protected]>",
   "dependencies": {
     "@types/react-helmet": "^6.1.4",
+    "@types/styled-components": "^5.1.16",
     "babel-plugin-styled-components": "^2.0.2",
     "gatsby": "^4.3.0",
     "gatsby-image": "^3.11.0",
@@ -28,8 +29,18 @@
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.5.0",
+    "@typescript-eslint/parser": "^5.5.0",
     "env-cmd": "^10.1.0",
-    "prettier": "2.5.1"
+    "eslint": "^8.4.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.27.1",
+    "husky": "7.0.4",
+    "lint-staged": "12.1.2",
+    "prettier": "^2.5.1"
   },
   "keywords": [
     "gatsby"
@@ -38,18 +49,18 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
-    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
+    "format": "prettier --write \"**/*.{js,jsx,json,md,ts,tsx}\"",
+    "eslint:fix": "eslint --fix 'src/**/*.tsx'",
     "dev": "env-cmd -f .env.development gatsby develop",
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
-  },
-  "bugs": {
-    "url": "https://github.com/gatsbyjs/gatsby/issues"
+  "lint-staged": {
+    "src/**/*.ts": [
+      "eslint --fix",
+      "git add"
+    ]
   }
 }

src/components/Button/index.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { Link } from "gatsby";
+
+interface ButtonProps {
+  linkTo: string;
+  content?: string;
+  type?: string
+}
+
+export default function Button({
+  linkTo,
+  content,
+  type,
+}: ButtonProps): JSX.Element {
+  if (type === "mail") {
+    return (
+      <a href={linkTo} className="btn aniBottom">
+        <div className="btn__content">
+          {" "}
+          {content}
+          <div className="bounce">
+            <svg
+              width="20"
+              height="22"
+              viewBox="0 0 72 22"
+              xmlns="http://www.w3.org/2000/svg"
+              className=" bow-arrow"
+            >
+              <path
+                fill="none"
+                stroke=""
+                stroke-width="5"
+                stroke-miterlimit="0"
+                d="M.043 11.119h70.714M60.917 1.319l9.8 9.8-9.8
+                                9.8"
+              ></path>
+            </svg>
+          </div>
+        </div>
+      </a>
+    );
+  } else {
+    return (
+      <Link to={linkTo} className="btn aniBottom">
+        <div className="btn__content">
+          {" "}
+          {content}
+          <div className="bounce">
+            <svg
+              width="20"
+              height="22"
+              viewBox="0 0 72 22"
+              xmlns="http://www.w3.org/2000/svg"
+              className=" bow-arrow"
+            >
+              <path
+                fill="none"
+                stroke=""
+                strokeWidth="5"
+                strokeMiterlimit="0"
+                d="M.043 11.119h70.714M60.917 1.319l9.8 9.8-9.8
+                                9.8"
+              ></path>
+            </svg>
+          </div>
+        </div>
+      </Link>
+    );
+  }
+}