Merge pull request #17 from jchojna/finalize

Finalize

src/App.tsx

@@ -4,11 +4,11 @@ import { useEffect, useRef, useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
 
 import Header from './components/Header';
-import Projects from './components/Projects';
 import About from './views/About';
 import Contact from './views/Contact';
 import CurrentViewContext from './views/CurrentViewContext';
 import Intro from './views/Intro';
+import Projects from './views/Projects';
 import Resume from './views/Resume';
 
 import classes from './App.module.scss';

src/components/Demo.module.scss

@@ -8,20 +8,20 @@ $icon-size: 1.3rem;
 
   .link {
     background-color: rgba(
-      $color: map-get(var.$colors, #{$project}-dark),
+      $color: map-get(var.$colors, #{$project}-diff),
       $alpha: var.$background-opacity
     );
-    color: map-get(var.$colors, #{$project}-light);
+    color: map-get(var.$colors, #{$project}-white);
 
     &::before {
-      border-color: map-get(var.$colors, #{$project}-shadow);
+      border-color: map-get(var.$colors, #{$project}-diff-dark);
     }
     &:active,
     &:focus,
     &:hover {
-      color: map-get(var.$colors, #{$project});
+      color: map-get(var.$colors, #{$project}-white);
       background-color: rgba(
-        $color: map-get(var.$colors, #{$project}-shadow),
+        $color: map-get(var.$colors, #{$project}-diff-dark),
         $alpha: var.$background-opacity
       );
     }
@@ -36,7 +36,6 @@ $icon-size: 1.3rem;
   grid-area: demo;
 
   :global(.slider-container) {
-    box-shadow: 20px 20px 0 0 var.$color-tasktimer-dark;
     width: 99%;
   }
 

src/components/Demo.tsx

@@ -1,18 +1,17 @@
 import clsx from 'clsx';
 
 import Carousel from 'nuka-carousel';
-import img1 from '../assets/img/img1.png';
-import img2 from '../assets/img/img2.png';
-import img3 from '../assets/img/img3.png';
 import classes from './Demo.module.scss';
 
 type DemoProps = {
   projectName: string;
   demoUrl: string;
   repoUrl: string;
+  snapshots: string[];
 };
 
-const Demo = ({ projectName, demoUrl, repoUrl }: DemoProps) => {
+const Demo = ({ projectName, demoUrl, repoUrl, snapshots }: DemoProps) => {
+  if (!snapshots.length) return null;
   return (
     <div className={classes.demo}>
       <Carousel
@@ -25,9 +24,9 @@ const Demo = ({ projectName, demoUrl, repoUrl }: DemoProps) => {
           ),
         }}
       >
-        <img src={img1} />
-        <img src={img2} />
-        <img src={img3} />
+        {snapshots.map((img, index) => (
+          <img key={index} src={img} />
+        ))}
       </Carousel>
       <div className={clsx(classes.links, classes[projectName])}>
         <a

src/components/Menu.tsx

@@ -70,7 +70,7 @@ const Menu = ({
       sectionsRefCopy.addEventListener('scroll', handleScroll);
       return () => sectionsRefCopy.removeEventListener('scroll', handleScroll);
     }
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   // handle indicator position
   useEffect(() => {

src/components/MenuButton.tsx

@@ -60,7 +60,7 @@ const MenuButton = ({
     const index = offset >= 0 ? offsetedSectionIndex : offsetedSectionIndex + 1;
     const sections = menuItems.map(({ label }) => label);
     setBackgroundSection(sections[index]);
-  }, [relativeTopOffset]);
+  }, [relativeTopOffset]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const handleClick = (index: number) => {
     scrollToSection(sectionsRef, index, !isMenuMode);

src/styles/mixins.scss

@@ -59,24 +59,60 @@
   }
   &.tasktimer {
     background-color: $color-tasktimer;
+    background: radial-gradient(
+      circle,
+      $color-tasktimer 0%,
+      $color-tasktimer 40%,
+      $color-tasktimer-dark 100%
+    );
   }
   &.hydrapp {
     background-color: $color-hydrapp;
+    background: radial-gradient(
+      circle,
+      $color-hydrapp 0%,
+      $color-hydrapp 40%,
+      $color-hydrapp-dark 100%
+    );
   }
   &.portfolio {
     background-color: $color-portfolio;
+    background: radial-gradient(
+      circle,
+      $color-portfolio 0%,
+      $color-portfolio 40%,
+      $color-portfolio-dark 100%
+    );
   }
   &.archviz {
     background-color: $color-archviz;
+    background: radial-gradient(
+      circle,
+      $color-archviz 0%,
+      $color-archviz 40%,
+      $color-archviz-dark 100%
+    );
   }
   &.quotes {
     background-color: $color-quotes;
+    background: radial-gradient(
+      circle,
+      $color-quotes 0%,
+      $color-quotes 40%,
+      $color-quotes-dark 100%
+    );
   }
   &.other {
     background-color: $color-other;
   }
   &.contact {
     background-color: $color-contact;
+    background: radial-gradient(
+      circle,
+      $color-contact 0%,
+      $color-contact 40%,
+      $color-contact-dark 100%
+    );
   }
 }
 
@@ -185,9 +221,9 @@
     &.quotes {
       grid-template-areas:
         'description demo'
-        'tags demo'
         'features demo'
-        'icons demo';
+        'icons demo'
+        'tags demo';
       grid-template-columns: 2fr 3fr;
       grid-template-rows: auto 1fr repeat(2, auto);
     }
@@ -214,6 +250,15 @@
 
   @media screen and (min-width: $media-l) {
     max-width: 1800px;
+
+    &.tasktimer,
+    &.portfolio,
+    &.hydrapp,
+    &.archviz,
+    &.quotes {
+      align-items: start;
+      grid-template-rows: repeat(3, auto) 1fr;
+    }
   }
 }
 

src/styles/variables.scss

@@ -83,15 +83,15 @@ $color-resume-diff: #1c4658;
 $color-resume-diff-dark: rgb(26, 63, 78);
 
 // TASKTIMER
-$color-tasktimer-white: #c5d8d9;
-$color-tasktimer-light: #9ab5b6;
-$color-tasktimer: #50787c;
-$color-tasktimer-dark: #305b60;
+$color-tasktimer: #4c787c;
+$color-tasktimer-white: lighten($color-tasktimer, 50%);
+$color-tasktimer-light: lighten($color-tasktimer, 30%);
+$color-tasktimer-dark: darken($color-tasktimer, 12%);
+$color-tasktimer-shadow: darken($color-tasktimer, 20%);
 $color-tasktimer-letter: #703035;
 $color-tasktimer-letterShadow: #441c20;
-$color-tasktimer-shadow: rgb(35, 53, 54);
-$color-tasktimer-diff: #4f3d41;
-$color-tasktimer-diff-dark: rgb(63, 47, 50);
+$color-tasktimer-diff: #643438;
+$color-tasktimer-diff-dark: darken($color-tasktimer-diff, 5%);
 
 // HYDRAPP
 $color-hydrapp-white: #d3f3ff;
@@ -103,22 +103,22 @@ $color-hydrapp-diff: rgb(168, 148, 131);
 $color-hydrapp-diff-dark: rgb(82, 70, 62);
 
 // PORTFOLIO
-$color-portfolio-white: rgb(235, 184, 177);
-$color-portfolio-light: rgb(197, 106, 94);
-$color-portfolio: rgb(163, 67, 55);
-$color-portfolio-dark: rgb(129, 51, 41);
-$color-portfolio-shadow: rgb(83, 36, 30);
-$color-portfolio-diff: rgb(67, 76, 88);
-$color-portfolio-diff-dark: rgb(50, 59, 70);
+$color-portfolio: rgb(67, 32, 171);
+$color-portfolio-white: lighten($color-portfolio, 60%);
+$color-portfolio-light: lighten($color-portfolio, 30%);
+$color-portfolio-dark: darken($color-portfolio, 12%);
+$color-portfolio-shadow: darken($color-portfolio, 25%);
+$color-portfolio-diff: rgb(205, 152, 28);
+$color-portfolio-diff-dark: darken($color-portfolio-diff, 5%);
 
 // ARCHVIZ
 $color-archviz-white: #eee7d6;
 $color-archviz-light: #e5c887;
 $color-archviz: #d2a239;
 $color-archviz-dark: #b98922;
 $color-archviz-shadow: #715822;
-$color-archviz-diff: #4c4864;
-$color-archviz-diff-dark: rgb(62, 58, 85);
+$color-archviz-diff: #3e3281;
+$color-archviz-diff-dark: darken($color-archviz-diff, 5%);
 
 // QUOTES
 $color-quotes-white: #e7ebbf;

src/types.d.ts

@@ -33,17 +33,6 @@ type RepoObj = {
   html_url: string;
 };
 
-type ProjectProps = {
-  name: string;
-  about: string[];
-  features: {
-    label: string;
-    items: string[];
-  }[];
-  icons: IconDetails[];
-  fetchedData: RepoObj;
-};
-
 type TextGroupProps = {
   title: string;
   projectName: string;

src/views/Project.tsx

@@ -13,12 +13,25 @@ import CurrentViewContext from './CurrentViewContext';
 
 import classes from './Project.module.scss';
 
+type ProjectProps = {
+  name: string;
+  about: string[];
+  features: {
+    label: string;
+    items: string[];
+  }[];
+  icons: IconDetails[];
+  fetchedData: RepoObj;
+  snapshots: string[];
+};
+
 const Project = ({
   name,
   about,
   features,
   icons,
   fetchedData,
+  snapshots,
 }: ProjectProps) => {
   const [currentView] = useContext(CurrentViewContext);
   const { created_at, updated_at, homepage, html_url } = fetchedData;
@@ -44,7 +57,12 @@ const Project = ({
           <Tag projectName={name} label="Created" date={created_at} />
           <Tag projectName={name} label="Last update" date={updated_at} />
         </div>
-        <Demo projectName={name} demoUrl={homepage} repoUrl={html_url} />
+        <Demo
+          projectName={name}
+          demoUrl={homepage}
+          repoUrl={html_url}
+          snapshots={snapshots}
+        />
         <ProjectFeatures projectName={name} content={features} />
         <IconsList view={name} icons={icons} />
       </div>