add mouse cursor gradient

.gitignore

@@ -1,11 +1,6 @@
-# Project dependencies
-.cache
 node_modules
+.cache
 yarn-error.log
-package-lock.json
-
-# Build directory
 /public
 .DS_Store
-
-.vscode/
+.vscode/

README.md

@@ -1,4 +1,5 @@
 Live site: [xavierelon.com](https://xavierelon.com)
+
 <!--
 ## 🚨 Forking this repo (please read!)
 
@@ -10,8 +11,8 @@ Please also note that I did not build this site with the intention of it being a
 
 ### TL;DR
 
-Yes, you can fork this repo. Please give me proper credit by linking back to [brittanychiang.com](https://brittanychiang.com). Thanks!
 -->
+
 ## 🛠 Installation & Set Up
 
 1. Install the Gatsby CLI

package.json

@@ -2,7 +2,7 @@
   "name": "v4",
   "description": "Personal Website V4",
   "version": "1.0.0",
-  "author": "Brittany Chiang <brittany.chiang@gmail.com>",
+  "author": "Xavier Hollingsworth (xavierelon93@gmail.com)",
   "repository": {
     "type": "git",
     "url": "https://github.com/xavierelon/v4"
@@ -34,11 +34,11 @@
   "dependencies": {
     "animejs": "^3.2.1",
     "babel-plugin-styled-components": "^2.1.4",
-    "gatsby": "^5.12.4",
+    "gatsby": "^5.12.5",
     "gatsby-plugin-google-analytics": "^5.12.0",
     "gatsby-plugin-image": "^3.12.0",
     "gatsby-plugin-manifest": "^5.12.0",
-    "gatsby-plugin-netlify": "^5.1.0",
+    "gatsby-plugin-netlify": "^5.1.1",
     "gatsby-plugin-offline": "^6.12.0",
     "gatsby-plugin-react-helmet": "^6.12.0",
     "gatsby-plugin-robots-txt": "^1.8.0",
@@ -60,16 +60,20 @@
     "react-transition-group": "^4.4.5",
     "scrollreveal": "^4.0.9",
     "smooth-scroll": "^16.1.3",
-    "styled-components": "^6.0.8"
+    "styled-components": "^6.0.8",
+    "ts-node-dev": "^2.0.0",
+    "typescript": "^5.2.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.20",
+    "@babel/core": "^7.23.0",
     "@babel/eslint-parser": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
+    "@types/react": "^18.2.23",
+    "@types/react-dom": "^18.2.8",
     "@upstatement/eslint-config": "^2.0.0",
     "@upstatement/prettier-config": "^1.1.0",
     "babel-preset-gatsby": "^3.12.0",
-    "eslint": "^8.49.0",
+    "eslint": "^8.50.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",

src/components/footer.js

@@ -106,7 +106,7 @@ const Footer = () => {
 
       <StyledCredit tabindex="-1">
         <a href="https://github.com/bchiang7/v4">
-          <div>Designed &amp; Built by Brittany Chiang</div>
+          <div>Xavier Elon :)</div>
 
           {githubInfo.stars && githubInfo.forks && (
             <div className="github-stats">

src/globals.d.ts

@@ -0,0 +1,6 @@
+declare module '*.module.css';
+declare module '*.module.scss';
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

src/hooks/useScrollDirection.js

@@ -1,8 +1,7 @@
+import { useState, useEffect } from 'react';
 const SCROLL_UP = 'up';
 const SCROLL_DOWN = 'down';
 
-import { useState, useEffect } from 'react';
-
 const useScrollDirection = ({ initialDirection, thresholdPixels, off } = {}) => {
   const [scrollDir, setScrollDir] = useState(initialDirection);
 

src/pages/index.jsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Layout, Hero, About, Jobs, Featured, Projects, Contact } from '@components';
+
+const StyledMainContainer = styled.main`
+  counter-reset: section;
+`;
+
+const IndexPage = ({ location }) => {
+  const heroRef = useRef(null)
+
+  useEffect(() => {
+    const updateMousePosition = ev => {
+      if (!heroRef.current) return;
+      const { clientX, clientY } = ev;
+      document.documentElement.style.setProperty('--x', `${clientX}px`);
+      document.documentElement.style.setProperty('--y', `${clientY}px`);
+      console.log(clientX, clientY)
+    };
+
+
+    window.addEventListener('mousemove', updateMousePosition);
+
+    return () => {
+      window.removeEventListener('mousemove', updateMousePosition);
+    };
+  }, []);
+
+  return (
+    <div ref={heroRef}>
+     <style jsx global>{`
+        html body{
+          height: 100vh;
+          width: 100%;
+          background-color: var(--navy) !important;
+
+          background-image: radial-gradient(
+            circle 250px at var(--x, 10px) var(--y, 10px),
+            #0404b5 0%,
+            var(--navy) 100%
+          ) !important;
+        }
+`}</style>
+  <div >
+      <Layout location={location}>
+        <StyledMainContainer >
+          <Hero />
+          <About />
+          <Jobs />
+          <Featured />
+          <Projects />
+          <Contact />
+        </StyledMainContainer>
+      </Layout>
+    </div>
+    </div>
+  );
+};
+
+IndexPage.propTypes = {
+  location: PropTypes.object.isRequired,
+};
+
+export default IndexPage;

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@components/*": ["src/components/*"]
+    },
+    "target": "es2016",
+    "jsx": "react",
+    "module": "commonjs",
+    "allowJs": true,
+    "outDir": "./dist",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "exclude": ["node_modules", "public", ".cache"]
+}