V2

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-pdf": "^5.7.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.4.3",
     "react-use": "^13.27.0",

src/App.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat:regular,bold,italic&subset=latin,latin-ext');
+
 * {
   padding: 0px;
   margin: 0px;
@@ -19,39 +21,53 @@ a {
 
 .text {
   color: black;
-  font-family: 'Avenir';
+  font-family: 'Montserrat';
   font-size: 18px;
 }
 
 .full-page {
   display: flex;
   width: 100vw;
   flex-direction: row;
+  scroll-behavior: smooth;
 }
 
 .content {
   width: 100vw;
   transition: 500ms ease-out;
   border: none;
   outline: none;
+  /* overflow: hidden; */
+  height: 100%;
 }
 
 .row {
   display: flex;
   flex-direction: row;
 }
+
+@keyframes fadeInOpacity {
+  0% { opacity: 0 }
+  100% { opacity: 1 }
+}
+
 .fade-in {
   opacity: 1;
   animation-name: fadeInOpacity;
   animation-iteration-count: 1;
   animation-timing-function: ease-in;
-  animation-duration: 1s;
+  animation-duration: 0.8s;
 }
 
 .disable-selection {
+  user-select: none;
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer */
   -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
   -webkit-user-select: none; /* Chrome, Safari, and Opera */
   -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
 }
+
+body {
+  height: 100%;
+}

src/App.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
-import { Home } from 'containers/Home';
+import { NewHome } from 'containers/NewHome';
 import { NoMatchPage } from 'containers/NoMatchPage';
 
 import './App.css';
@@ -16,7 +16,7 @@ const App = () => {
         <div className="content">
           <Switch>
             <Route exact path="/">
-              <Home />
+              <NewHome />
             </Route>
             <Route>
               <NoMatchPage />

src/assets/data/projects.jsx

@@ -139,7 +139,7 @@ const PROJECTS = [
     wideSS: true,
   },
   {
-    name: 'CoverLove',
+    name: 'coverlove',
     logo: coverloveLogo,
     color: '#d35400',
     title: 'A simple tool to create new playlist cover art.',
@@ -168,20 +168,20 @@ const PROJECTS = [
     techs: ['React Native, Voximplant API, Google Speech-to-Text API, Twilio API'],
     contributors: 'Harun Kaneti, Eytan Nahmiyas',
   },
-  {
-    name: 'ClaimMate',
-    logo: claimmateLogo,
-    color: '#2c3e50',
-    title: 'Global Legal Hackathon 2019 finalist.',
-    // description: 'Done in 48 hours. I slept like 5 hours.',
-    awards: ['2nd Place, Global Legal Hackathon 2019'],
-    platforms: {
-      github: 'https://github.com/ralfisalhon/CLAIMate',
-      website: 'https://globallegalhackathon.com/',
-    },
-    video: 'https://www.youtube.com/embed/3uotkVSIglA',
-    techs: ['React Native'],
-  },
+  // {
+  //   name: 'ClaimMate',
+  //   logo: claimmateLogo,
+  //   color: '#2c3e50',
+  //   title: 'Global Legal Hackathon 2019 finalist.',
+  //   // description: 'Done in 48 hours. I slept like 5 hours.',
+  //   awards: ['2nd Place, Global Legal Hackathon 2019'],
+  //   platforms: {
+  //     github: 'https://github.com/ralfisalhon/CLAIMate',
+  //     website: 'https://globallegalhackathon.com/',
+  //   },
+  //   video: 'https://www.youtube.com/embed/3uotkVSIglA',
+  //   techs: ['React Native'],
+  // },
 ];
 
 export default PROJECTS;

src/components/projects/FloatingProjects.js

@@ -0,0 +1,85 @@
+import React, { useCallback, useState } from 'react';
+import './styles.css';
+import { Base, Item, RoundIcon } from './styles.js';
+
+import PROJECTS from 'assets/data/projects';
+
+// const getLink = name => {
+//   const proj = PROJECTS.find(proj => proj.name === name);
+//   return proj.platforms.appstore || proj.platforms.github;
+// };
+
+export const FloatingProjects = ({ isPaused, setIsPaused }) => {
+  const [someAnimationState, setSomeAnimationState] = useState(0);
+  const [selectedIndex, setSelectedIndex] = useState(100);
+  const [numClicksGreater, setNumClicksGreater] = useState(0);
+  const [preventClicks, setPreventClicks] = useState(false);
+
+  const handleOnClickProject = useCallback(
+    index => {
+      if (selectedIndex === index) {
+        setSelectedIndex(-1);
+        return setIsPaused(false);
+      }
+      setPreventClicks(true);
+      setTimeout(() => {
+        setPreventClicks(false);
+      }, 500);
+      if (selectedIndex < index || index === 0) {
+        setNumClicksGreater(numClicksGreater + 1);
+      }
+      setSomeAnimationState(2 + numClicksGreater - index * 0.125 - 0.125);
+      setIsPaused(true);
+      setSelectedIndex(index);
+      // const el = document.getElementById('base');
+      // el.classList.remove('base');
+      // void el.offsetHeight; /* trigger reflow */
+      // el.classList.add('base');
+
+      // const el2 = document.getElementById('item');
+      // el2.classList.remove('item');
+      // void el2.offsetHeight; /* trigger reflow */
+      // el2.classList.add('item');
+    },
+    [numClicksGreater, selectedIndex, setIsPaused]
+  );
+  return (
+    <>
+      {/* <button onClick={() => setIsPaused(false)}>unpause</button> */}
+      <Base
+        className="base"
+        someAnimationState={someAnimationState}
+        isPaused={isPaused}
+        id="base"
+        selectedIndex={selectedIndex}
+      >
+        {PROJECTS.map((project, index) => (
+          <Item
+            someAnimationState={someAnimationState}
+            isPaused={isPaused}
+            className={`item item-${index + 1} ${
+              selectedIndex === index ? 'drop-glow' : ''
+            }`}
+            key={index}
+            index={index}
+            id="item"
+            selected={selectedIndex === index}
+          >
+            <div
+              onClick={() => !preventClicks && handleOnClickProject(index)}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <RoundIcon
+                className="round_icon"
+                alt="app_icon"
+                src={project.logo}
+              />
+              <p className={`text small m--${index + 1}`}>{project.name}</p>
+            </div>
+          </Item>
+        ))}
+      </Base>
+    </>
+  );
+};

src/components/projects/index.js

@@ -0,0 +1 @@
+export * from './FloatingProjects';

src/components/projects/styles.css

@@ -0,0 +1,159 @@
+
+.base p {
+  color: var(--light-color);
+}
+
+.base a {
+  text-decoration-line: none;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+.drop-glow {
+  filter: drop-shadow(0 0 0.75rem gray);
+}
+
+.round_icon {
+  width: 100px;
+  height: 100px;
+  cursor: pointer;
+  filter: drop-shadow(0 0 0.75rem #2f3640); 
+}
+
+.centertext {
+  position: absolute;
+  top: 50%;
+  left: calc(50% + 5vw);
+  transform: translate(-50%, -50%);
+  opacity: 1 !important;
+}
+
+.centertext-mobile {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  justify-content: center;
+  overflow: hidden;
+}
+
+:root {
+  --size: 800px;
+}
+
+.base {
+  width: var(--size);
+  height: var(--size);
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin-left: -135px;
+  margin-top: -380px;
+  position: absolute;
+  border-radius: 50%;
+  /* border: 1px solid white; */
+
+
+  animation-delay: -2s;
+  animation-name: spin;
+  animation-fill-mode: forwards;
+  /* animation-iteration-count: infinite; */
+  animation-timing-function: linear;
+
+  pointer-events: none;
+}
+
+.item {
+  position: absolute;
+  font-family: Arial;
+  font-size: 85px;
+  text-align: center;
+  width: 100px;
+  height: 100px;
+
+  animation-delay: -2s;
+  animation-name: spin;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-direction: reverse;
+
+  pointer-events: auto;
+}
+
+
+
+.base:hover .item {
+  /* animation-play-state: paused; */
+  opacity: 0.5;
+
+}
+
+.base:hover {
+  /* animation-play-state: paused; */
+}
+
+.item:hover {
+  opacity: 1 !important;
+  filter: drop-shadow(0 0 0.75rem gray);
+}
+
+.item-8 {
+  top: calc(50% - 50px);
+  left: calc(100% - 100px);
+}
+
+.item-6 {
+  top: 0px;
+  left: calc(50% - 50px);
+}
+
+.item-4 {
+  top: calc(50% - 54px);
+  left: 0px;
+}
+
+.item-2 {
+  top: calc(100% - 100px);
+  left: calc(50% - 54px);
+}
+
+.item-1 {
+  top: calc(84% - 75px);
+  left: calc(84% - 79px);
+}
+
+.item-3 {
+  top: calc(84% - 71px);
+  left: calc(16% - 33px);
+}
+
+.item-7 {
+  top: calc(16% - 33px);
+  left: calc(84% - 67px);
+}
+
+.item-5 {
+  top: calc(16% - 37px);
+  left: calc(16% - 33px);
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.footer-mobile {
+  display: flex;
+  flex-direction: row;
+  min-height: 35px;
+}