Merge pull request #307 from BlackCubes/development

Minor Dev to Main

README.md

@@ -3,7 +3,7 @@
 </p>
 <h1 align="center">Personal Portfolio</h1>
 <h3 align="center">
-  Software and Full-Stack Developer.<br>Creating beautiful user-centered interactivity and experiences.
+  Full-Stack Software Engineer.<br>Creating beautiful user-centered interactivity and experiences.
 </h3>
 <p align="center">
     <br>

web/common/components/GlassRectangle/styles.ts

@@ -48,6 +48,33 @@ export const GlassContainer = styled.div<IGlassContainer>`
   }, 0.27)`};
   overflow: hidden;
 
+  &.home-page {
+    width: 51rem;
+    height: 37rem;
+    margin-right: auto;
+    margin-left: auto;
+
+    @media ${({ theme }) => theme.responsive.below1199} {
+      width: 35rem;
+      height: 25rem;
+    }
+
+    @media ${({ theme }) => theme.responsive.below599} {
+      width: 32rem;
+      height: 23rem;
+    }
+
+    @media ${({ theme }) => theme.responsive.below479} {
+      width: 24rem;
+      height: 17rem;
+    }
+
+    @media ${({ theme }) => theme.responsive.below379} {
+      width: 100%;
+      height: 16rem;
+    }
+  }
+
   &.about-page {
     width: 51rem;
     height: 37rem;
@@ -150,6 +177,10 @@ export const GlassImageWrapper = styled.div<IGlassImageWrapper>`
   margin-right: auto;
   opacity: ${({ opacity }) => opacity ?? '1'};
 
+  &.home-page {
+    width: 100%;
+  }
+
   &.about-page {
     width: 100%;
   }
@@ -192,6 +223,16 @@ export const GlassImageWrapper = styled.div<IGlassImageWrapper>`
 export const GlassImage = styled.img`
   width: 100%;
 
+  &.home-page {
+    &--image-1 {
+      transform: scale(1.1);
+    }
+
+    &--image-2 {
+      transform: scale(1.5);
+    }
+  }
+
   &.about-page {
     transform: scale(1.1);
   }

web/common/components/ItemLink/itemData.ts

@@ -15,11 +15,11 @@ const itemData: TItemData[] = [
     title: 'Articles',
     path: '/articles',
   },
-  {
-    id: '4c5c324a-92ed-4575-a731-25370c21379a',
-    title: 'About',
-    path: '/about',
-  },
+  // {
+  //   id: '4c5c324a-92ed-4575-a731-25370c21379a',
+  //   title: 'About',
+  //   path: '/about',
+  // },
 ];
 
 export default itemData;

web/components/home/AboutImage/index.tsx

@@ -0,0 +1,56 @@
+import { FC, useEffect } from 'react';
+import { useAnimation } from 'framer-motion';
+import { useInView } from 'react-intersection-observer';
+
+import GlassRectangle from 'common/components/GlassRectangle';
+
+import { ImageWrapper } from './styles';
+
+interface IAboutImageProps {
+  customClassName?: string;
+  imgAlt: string;
+  imgSrc: string;
+}
+
+const AboutImage: FC<IAboutImageProps> = ({
+  customClassName,
+  imgAlt,
+  imgSrc,
+}) => {
+  const imageAnimateControls = useAnimation();
+
+  const { inView: imageInView, ref: imageRef } = useInView();
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (imageInView) {
+        imageAnimateControls.start('visible');
+      }
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [imageAnimateControls, imageInView]);
+
+  return (
+    <ImageWrapper
+      animate={imageAnimateControls}
+      className="default-margin-bottom"
+      ref={imageRef}
+    >
+      <GlassRectangle
+        customClassName={customClassName}
+        glassDarkShadowBlur={0.4}
+        glassDarkShadowHorizontalOffset={0.3}
+        glassDarkShadowVerticalOffset={0.3}
+        glassLightShadowBlur={0.4}
+        glassLightShadowHorizontalOffset={-0.3}
+        glassLightShadowVerticalOffset={-0.3}
+        imageAlt={imgAlt}
+        imageSrc={imgSrc}
+        opacity={1}
+      />
+    </ImageWrapper>
+  );
+};
+
+export default AboutImage;

web/components/home/AboutImage/styles.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { motion } from 'framer-motion';
+
+export const ImageWrapper = styled(motion.div).attrs(() => ({
+  initial: 'hidden',
+  variants: {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: { duration: 0.5 },
+    },
+  },
+}))`
+  margin-top: 5rem;
+
+  @media ${({ theme }) => theme.responsive.below899} {
+    margin-top: 0;
+  }
+`;

web/components/home/AboutSection/index.tsx

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+
+import HeadingPrimary from 'common/typography/HeadingPrimary';
+import Paragraph from 'common/typography/Paragraph';
+
+import { MainAboutWrapper, SecondaryAboutWrapper, Section } from './styles';
+
+const AboutSection: FC = () => (
+  <Section>
+    <MainAboutWrapper>
+      <HeadingPrimary>
+        Hello! I love drinking coffee while learning and improving on new and
+        existing technologies
+      </HeadingPrimary>
+    </MainAboutWrapper>
+
+    <SecondaryAboutWrapper>
+      <Paragraph>
+        A passionate and curious individual with a BS degree in Physics from
+        UCLA currently working as a Full-Stack Software Engineer at Aerobotics7
+        to remove landmines from around the world. I have experiences with
+        Python, Django, Node.js, React.js, Figma/Lucid Charts and other
+        platforms and tools to facilitate on creating and solving real-world
+        problems for the users to enjoy, and the companies to succeed their
+        vision
+      </Paragraph>
+    </SecondaryAboutWrapper>
+  </Section>
+);
+
+export default AboutSection;

web/components/home/AboutSection/styles.ts

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+export const Section = styled.section`
+  width: 100%;
+  text-align: right;
+`;
+
+export const MainAboutWrapper = styled.div`
+  width: 80%;
+  margin-bottom: 3rem;
+  margin-left: auto;
+
+  @media ${({ theme }) => theme.responsive.below1199} {
+    width: 97%;
+  }
+
+  @media ${({ theme }) => theme.responsive.below899} {
+    width: 100%;
+    margin-bottom: 5rem;
+  }
+
+  @media ${({ theme }) => theme.responsive.below479} {
+    margin-bottom: 3rem;
+  }
+`;
+
+export const SecondaryAboutWrapper = styled.div`
+  width: 95%;
+  margin-bottom: 3rem;
+  margin-left: auto;
+
+  @media ${({ theme }) => theme.responsive.below1199} {
+    width: 97%;
+  }
+
+  @media ${({ theme }) => theme.responsive.below899} {
+    width: 100%;
+    margin-bottom: 5rem;
+  }
+
+  @media ${({ theme }) => theme.responsive.below479} {
+    margin-bottom: 3rem;
+  }
+`;