Merge pull request #35 from reedoooo/siteEdit

reedoooo · Aug 28, 2023 · 164910b · 164910b
2 parents bf680d8 + 7707a99
commit 164910b
Show file tree

Hide file tree

Showing 6 changed files with 184 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -30,7 +30,11 @@
     "extends": "react-app"
   },
   "browserslist": {
-    "production": [">0.2%", "not dead", "not op_mini all"],
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",
@@ -49,10 +53,8 @@
     "autoprefixer": "^10.4.14",
     "axios": "^1.4.0",
     "bootstrap": "^5.3.0",
-    "cors": "^2.8.5",
     "debug": "^4.3.4",
     "dotenv": "^16.3.1",
-    "express": "^4.18.2",
     "express-openid-connect": "^2.16.0",
     "framer-motion": "^10.12.18",
     "jquery": "^3.7.0",
@@ -79,7 +81,6 @@
     "react-tsparticles": "^2.10.1",
     "react-use-gesture": "^9.1.3",
     "react-vertical-timeline-component": "^3.6.0",
-    "redux": "^4.2.1",
     "web-vitals": "^3.3.2"
   },
   "devDependencies": {
@@ -95,7 +96,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@typescript-eslint/eslint-plugin": "^5.5.0",
-    "@typescript-eslint/parser": "^5.5.0", 
+    "@typescript-eslint/parser": "^5.5.0",
     "eslint": "^8.47.0",
     "eslint-config-google": "0.14.0",
     "eslint-config-prettier": "^8.10.0",

diff --git a/src/components/headings/navbar/NavLinks.js b/src/components/headings/navbar/NavLinks.js
@@ -25,7 +25,7 @@ function NavLinks({ textColor }) {
         as={RouterLink}
         to="/home"
         fontSize="lg"
-        fontWeight="400"
+        fontWeight="bold"
         position="relative"
         zIndex="1"
         _after={{

diff --git a/src/pages/home/HomeComponent.js b/src/pages/home/HomeComponent.js
@@ -241,7 +241,7 @@ const HomeComponent = () => {
             borderWidth={2}
             borderStyle="double"
           >
-            Scroll
+            About Me
           </ScrollButton>
         </Box>
       </ScaleFade>

diff --git a/src/pages/projects/sub-components/Carousel.jsx b/src/pages/projects/sub-components/Carousel.jsx
@@ -43,7 +43,7 @@ const Carousel = ({ items, onDetails, size, itemHeight, isLg, isMd, isSm }) => {
       perspective="1000px"
     >
       {items.map((item, index) => (
-        <>
+        <React.Fragment key={index}>
           <Box
             ref={index === 2 ? middleRef : null}
             position="absolute"
@@ -74,7 +74,7 @@ const Carousel = ({ items, onDetails, size, itemHeight, isLg, isMd, isSm }) => {
               isLg={size === 'lg'}
             />
           </Box>
-        </>
+        </React.Fragment>
       ))}
       <CarouselControls
         prevSlide={prevSlide}

diff --git a/src/pages/splash/Splash.css b/src/pages/splash/Splash.css
@@ -1,11 +1,22 @@
+:root {
+  --calendar-width: 200px;
+  --calendar-height: 100px;
+}
+
+/* Combine styles for splash_wrapper */
 .splash_wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100vw;
   height: 100vh;
-  background-color: #f5f5f5; /* Taken from the '#root' background-color of your theme */
+  background: linear-gradient(
+    45deg,
+    #305270, #284b60, #20444f, #173d3e, #0e362e, #052f1d
+  );
+  background-size: 600% 600%;
+  animation: Gradient 16s ease infinite;
 }
 
 .logo_container {
@@ -20,20 +31,6 @@
   letter-spacing: 1.5px;
 }
 
-.splash_wrapper {
-  background: linear-gradient(
-    45deg,
-    #305270,
-    /* Adjusted Midnight green */ #284b60,
-    /* Adjusted Indigo dye */ #20444f,
-    /* Adjusted Berkeley blue */ #173d3e,
-    /* Adjusted Oxford blue */ #0e362e,
-    /* Adjusted Penn blue */ #052f1d /* Very dark greenish-blue */
-  );
-  background-size: 600% 600%;
-  animation: Gradient 16s ease infinite;
-}
-
 @keyframes Gradient {
   0% {
     background-position: 0% 50%;
@@ -45,3 +42,65 @@
     background-position: 0% 50%;
   }
 }
+
+/* splash calendar animation */
+
+.github_calendar_container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 60px; /* More space from the animation */
+  padding: 20px;
+  /* width: 200px;
+  height: 100px; */
+  width: var(--calendar-width);
+  height: var(--calendar-height);
+}
+
+/* 
+  .rotating-border {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1; /* Place it below the GitHub calendar 
+}
+*/
+
+.rotating-border rect {
+  width: var(--calendar-width);
+  height: var(--calendar-height);
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: rotateBorder 9s infinite linear, dashOffset 9s infinite linear;
+}
+
+.calendar-box {
+  position: relative;
+  z-index: 1; /* Place it above the rotating border */
+}
+
+@keyframes rotateBorder {
+  0% {
+    /* stroke: #4db0a8; */
+    stroke: red;
+  }
+  50% {
+    stroke: #052f1d;
+  }
+  100% {
+    /* stroke: #4db0a8; */
+    stroke: red;
+  }
+}
+
+@keyframes dashOffset {
+  0% {
+    stroke-dashoffset: 1000;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
diff --git a/src/pages/splash/Splash.js b/src/pages/splash/Splash.js
@@ -1,10 +1,12 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import './Splash.css';
 import { motion } from 'framer-motion';
 import { theme } from '../../assets/theme';
 import Particle from '../utils/Particle';
 import logo from '../../assets/logo.png'; // Import the logo
+import GitHubCalendar from 'react-github-calendar';
+import { Box } from '@chakra-ui/react';
 
 const logoVariants = {
   hidden: { opacity: 0 },
@@ -57,6 +59,73 @@ const textVariants = {
 };
 
 function AnimatedSplash() {
+  const [calendarSize, setCalendarSize] = useState({ width: 0, height: 0 });
+  const calendarRef = useRef(null);
+  // const rect = document.getElementById('myElement').getBoundingClientRect();
+
+  // Declare minimum dimensions here
+  const minWidth = window.innerWidth * 0.65;
+  const minHeight = 100;
+
+  useEffect(() => {
+    if (calendarRef.current) {
+      // Check if the ref is assigned to a DOM element
+      const rect = calendarRef.current.getBoundingClientRect();
+
+      const breakpoints = {
+        xs: 20 * 16,
+        sm: 28 * 16,
+        md: 36 * 16,
+        lg: 45 * 16,
+        xl: 60 * 16,
+      };
+
+      const adjustSize = () => {
+        const width = window.innerWidth;
+        let newWidth, newHeight;
+        if (width <= breakpoints.xs) {
+          newWidth = '40px';
+          newHeight = '20px';
+        } else if (width <= breakpoints.sm) {
+          newWidth = '50px';
+          newHeight = '25px';
+        } else if (width <= breakpoints.md) {
+          newWidth = '60px';
+          newHeight = '30px';
+        } else if (width <= breakpoints.lg) {
+          newWidth = '70px';
+          newHeight = '35px';
+        } else {
+          newWidth = '200px';
+          newHeight = '40px';
+        }
+        document.documentElement.style.setProperty(
+          '--calendar-width',
+          newWidth,
+        );
+        document.documentElement.style.setProperty(
+          '--calendar-height',
+          newHeight,
+        );
+      };
+      adjustSize();
+      window.addEventListener('resize', adjustSize);
+
+      if (calendarRef.current) {
+        const rect = calendarRef.current.getBoundingClientRect();
+        setCalendarSize({
+          width: Math.max(rect.width + 15, minWidth),
+          height: Math.max(rect.height + 15, minHeight),
+        });
+      }
+      console.log('Updated calendar size:', calendarSize);
+
+      return () => {
+        window.removeEventListener('resize', adjustSize);
+      };
+    }
+  }, [calendarSize]);
+
   return (
     <motion.div
       className="splash_wrapper"
@@ -66,9 +135,10 @@ function AnimatedSplash() {
       style={{
         backgroundColor: theme.colors.quaternary[100],
         display: 'flex',
+        flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
-      }} // center the contents
+      }}
     >
       <motion.div
         className="logo_container"
@@ -124,6 +194,34 @@ function AnimatedSplash() {
           <motion.span>.</motion.span>
         </motion.span>
       </div>
+
+      <div
+        className="github_calendar_container"
+        style={{ position: 'relative' }}
+      >
+        <svg
+          className="rotating-border"
+          viewBox={`0 0 ${calendarSize.width} ${calendarSize.height}`}
+          style={{ position: 'absolute', zIndex: 0 }}
+        >
+          <rect
+            x="0"
+            y="0"
+            rx="15"
+            ry="15"
+            width={calendarSize.width}
+            height={calendarSize.height}
+          />
+        </svg>
+        <Box
+          className="calendar-box"
+          ref={calendarRef}
+          minW="50vw"
+          style={{ position: 'relative', zIndex: 1 }}
+        >
+          <GitHubCalendar username="reedoooo" />
+        </Box>
+      </div>
     </motion.div>
   );
 }