mark2-2020 🚀

.babelrc

@@ -1,7 +1,10 @@
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": [
-
-
-  ]
+  "env": {
+    "production": {
+      "presets": [
+        ["@babel/preset-env", { "modules": false, "useBuiltIns": true }]
+      ]
+    }
+  }
 }

.eslintrc

@@ -2,28 +2,34 @@
   "env": {
     "es6": true
   },
+  "parser": "babel-eslint",
   "parserOptions": {
     "ecmaVersion": 6,
     "sourceType": "module",
     "ecmaFeatures": {
-      "jsx": true
+      "modules": true,
+      "experimentalObjectRestSpread": true
     }
   },
   "extends": [
     "airbnb-base",
     "eslint:recommended",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:react/recommended"
   ],
   "rules": {
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
     "no-plusplus": "off",
-    "no-param-reassign":[
-      "error",{
-        "props": false 
+    "no-param-reassign": [
+      "error",
+      {
+        "props": false
       }
     ]
   },
   "globals": {
     "window": true,
-    "document": true
+    "document": true,
+    "IntersectionObserver": true
   }
-}
+}

.gitignore

@@ -1,2 +1,3 @@
-build
-.now
+dist
+.now
+.vercel

.vscode/launch.json

@@ -0,0 +1,23 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "🏗 debug build",
+      "program": "${workspaceFolder}/node_modules/.bin/webpack",
+      "args": [
+        "--mode",
+        "development",
+        "--config",
+        "./webpack.config.babel.js",
+        "--no-cache"
+      ],
+      "console": "integratedTerminal",
+      "cwd": "${workspaceFolder}"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "files.associations": {
+    "*.css": "postcss"
+  },
+  "editor.formatOnSave": true
+}

README.md

@@ -1,20 +1,22 @@
 [![Build Status](https://travis-ci.org/albinotonnina/albinotonnina.com.svg?branch=master)](https://travis-ci.org/albinotonnina/albinotonnina.com)
 [![License: CC BY-NC-ND 4.0](https://img.shields.io/badge/License-CC%20BY--NC--ND%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by-nc-nd/4.0/)
 
-
 # albinotonnina.com
 
 [www.albinotonnina.com](http://www.albinotonnina.com) - source code
 
 ## Install
+
 `yarn`
 
 ## Dev
+
 `yarn dev`
 
 ## Build
+
 `yarn build`
 
 ## Test
-`yarn test`
 
+`yarn test`

package.json

@@ -9,48 +9,65 @@
     "url": "http://www.albinotonnina.com"
   },
   "scripts": {
-    "dev": "webpack-dev-server",
+    "dev": "webpack-dev-server --mode development",
     "build": "webpack --mode production",
+    "analyze": "webpack --mode production --analyze",
     "test": "jest"
   },
   "dependencies": {
-    "animejs": "^3.1.0",
-    "knuth-shuffle": "^1.0.8",
-    "throttle-debounce": "^2.1.0",
-    "webfontloader": "^1.6.28"
+    "d3-interpolate": "^1.4.0",
+    "ease-component": "^1.0.0",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
+    "scroll": "^3.0.1",
+    "scroll-doc": "^0.2.1",
+    "style-object-to-css-string": "^1.0.1",
+    "svg-filter": "^1.2.1"
   },
   "repository": {
     "type": "git",
     "url": "[email protected]:albinotonnina/albinotonnina.com.git"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
-    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-react": "^7.10.1",
+    "@babel/register": "^7.9.0",
+    "@babel/runtime": "^7.9.2",
+    "@svgr/webpack": "^5.4.0",
+    "autoprefixer": "^9.7.6",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "css-loader": "^3.4.2",
+    "cssnano": "^4.1.10",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-base": "^14.1.0",
     "eslint-config-prettier": "^6.10.1",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.20.0",
     "favicons-webpack-plugin": "^3.0.1",
     "file-loader": "^6.0.0",
-    "html-loader": "^1.0.0",
+    "html-loader": "^1.1.0",
     "html-webpack-plugin": "^4.0.3",
     "image-webpack-loader": "^6.0.0",
     "jest": "^25.2.4",
     "mini-css-extract-plugin": "^0.9.0",
-    "node-sass": "^4.13.1",
+    "postcss-import": "^12.0.1",
+    "postcss-js": "^2.0.3",
+    "postcss-loader": "^3.0.0",
+    "postcss-nested": "^4.2.1",
+    "postcss-preset-env": "^6.7.0",
     "prettier": "^2.0.2",
     "raw-loader": "^4.0.0",
-    "sass-loader": "^8.0.2",
     "string-replace-webpack-plugin": "^0.1.3",
     "stylelint": "^13.3.0",
     "stylelint-config-standard": "^20.0.0",
     "svg-inline-loader": "^0.8.2",
-    "url-loader": "^4.0.0",
+    "svg-url-loader": "^5.0.0",
     "webpack": "^4.42.1",
+    "webpack-bundle-analyzer": "^3.6.1",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3"
   }

src/App.js

@@ -0,0 +1,63 @@
+import React from "react";
+import sceneTransitions1 from "./scene/transitions";
+import Scene from "./scene";
+import Subtitles from "./subtitles";
+import "./styles/main.css";
+
+function throttle(func, wait, immediate) {
+  let timeout;
+  return (...args) => {
+    const context = this;
+    const later = () => {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    const callNow = immediate && !timeout;
+    if (!timeout) timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+}
+
+const getDimentions = () => ({
+  height: window.innerHeight,
+  width: window.innerWidth,
+  isPortrait: window.innerHeight > window.innerWidth,
+});
+
+export default function App() {
+  const [dimensions, setDimensions] = React.useState(getDimentions);
+
+  const screens = Math.round(sceneTransitions1.duration / dimensions.height);
+  const arrayScreens = Array.from(Array(screens).keys());
+
+  React.useEffect(() => {
+    const debouncedHandleResize = throttle(
+      setDimensions.bind(null, getDimentions),
+      100,
+      true
+    );
+    window.addEventListener("resize", debouncedHandleResize);
+    return () => {
+      window.removeEventListener("resize", debouncedHandleResize);
+    };
+  });
+
+  return (
+    <>
+      {arrayScreens.map((el) => (
+        <div
+          key={el}
+          data-scene-placeholder
+          style={{ height: dimensions.height }}
+        ></div>
+      ))}
+
+      <Scene
+        width={dimensions.width}
+        height={dimensions.height}
+        isPortrait={dimensions.isPortrait}
+      />
+      <Subtitles isPortrait={dimensions.isPortrait} />
+    </>
+  );
+}