diff --git a/index.html b/index.html index 84dad04..f3e7f46 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@
- + =12" + } + }, + "node_modules/d3-color": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", + "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==", + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-delaunay": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz", + "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==", + "peer": true, + "dependencies": { + "delaunator": "5" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-format": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz", + "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==", + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-geo": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz", + "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==", + "peer": true, + "dependencies": { + "d3-array": "2.5.0 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-geo-voronoi": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/d3-geo-voronoi/-/d3-geo-voronoi-2.0.1.tgz", + "integrity": "sha512-KeBrhSLyN6fdcjGxpmil9I7JNsRQIbp58PybKFnebG1qpbwon5ia43epUpYgjgZZxfrhjb+3up0f6IwkQuPkwg==", + "peer": true, + "dependencies": { + "d3-array": "3", + "d3-delaunay": "6", + "d3-geo": "3", + "d3-tricontour": "1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", + "peer": true, + "dependencies": { + "d3-color": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-scale": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", + "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", + "peer": true, + "dependencies": { + "d3-array": "2.10.0 - 3", + "d3-format": "1 - 3", + "d3-interpolate": "1.2.0 - 3", + "d3-time": "2.1.1 - 3", + "d3-time-format": "2 - 4" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz", + "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==", + "peer": true, + "dependencies": { + "d3-array": "2 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time-format": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz", + "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==", + "peer": true, + "dependencies": { + "d3-time": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-tricontour": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/d3-tricontour/-/d3-tricontour-1.0.2.tgz", + "integrity": "sha512-HIRxHzHagPtUPNabjOlfcyismJYIsc+Xlq4mlsts4e8eAcwyq9Tgk/sYdyhlBpQ0MHwVquc/8j+e29YjXnmxeA==", + "peer": true, + "dependencies": { + "d3-delaunay": "6", + "d3-scale": "4" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -1265,6 +1434,15 @@ "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "dev": true }, + "node_modules/delaunator": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz", + "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==", + "peer": true, + "dependencies": { + "robust-predicates": "^3.0.2" + } + }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -1289,6 +1467,12 @@ "node": ">=6.0.0" } }, + "node_modules/earcut": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz", + "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==", + "peer": true + }, "node_modules/esbuild": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", @@ -1666,6 +1850,16 @@ "node": ">=10.13.0" } }, + "node_modules/glob3d": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/glob3d/-/glob3d-0.2.0.tgz", + "integrity": "sha512-6YmbYh4DFRSxs4Nh12DmlMdaRUgLLVyVB032P4eareqN49LEYiDm/65ymIzbCY85K2ZDjqEL49QQkUFR65yUrg==", + "peerDependencies": { + "h3-js": "^4.1.0", + "three": "^0.162.0", + "three-conic-polygon-geometry": "^1.6.3" + } + }, "node_modules/globals": { "version": "13.23.0", "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz", @@ -1707,6 +1901,17 @@ "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", "dev": true }, + "node_modules/h3-js": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/h3-js/-/h3-js-4.1.0.tgz", + "integrity": "sha512-LQhmMl1dRQQjMXPzJc7MpZ/CqPOWWuAvVEoVJM9n/s7vHypj+c3Pd5rLQCkAsOgAoAYKbNCsYFE++LF7MvSfCQ==", + "peer": true, + "engines": { + "node": ">=4", + "npm": ">=3", + "yarn": ">=1.3.0" + } + }, "node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", @@ -1776,6 +1981,15 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true }, + "node_modules/internmap": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", + "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==", + "peer": true, + "engines": { + "node": ">=12" + } + }, "node_modules/is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", @@ -2322,6 +2536,12 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/robust-predicates": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz", + "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==", + "peer": true + }, "node_modules/rollup": { "version": "3.29.4", "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", @@ -2485,6 +2705,33 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, + "node_modules/three": { + "version": "0.162.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.162.0.tgz", + "integrity": "sha512-xfCYj4RnlozReCmUd+XQzj6/5OjDNHBy5nT6rVwrOKGENAvpXe2z1jL+DZYaMu4/9pNsjH/4Os/VvS9IrH7IOQ==", + "peer": true + }, + "node_modules/three-conic-polygon-geometry": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/three-conic-polygon-geometry/-/three-conic-polygon-geometry-1.6.3.tgz", + "integrity": "sha512-uJhuUBHc5K4IFQ+31qVQboMIlEQ485WWX7+pN4qR2p4ctTO66nlJ2NWrXNn8x2A89Utyf09v+zyBIpWUVe1inQ==", + "peer": true, + "dependencies": { + "@turf/boolean-point-in-polygon": "^6.5", + "d3-array": "1 - 3", + "d3-geo": "1 - 3", + "d3-geo-voronoi": "^2.0", + "d3-scale": "1 - 4", + "delaunator": "5", + "earcut": "2" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "three": ">=0.72.0" + } + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", diff --git a/package.json b/package.json index 705c680..c03626d 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "@tanstack/react-query": "^5.17.19", "clsx": "^2.0.0", + "glob3d": "^0.2.0", "nuka-carousel": "^7.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/public/assets/favicon.svg b/public/assets/favicon.svg new file mode 100644 index 0000000..8d8f2a2 --- /dev/null +++ b/public/assets/favicon.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/public/assets/icons/icon-128x128.png b/public/assets/icons/icon-128x128.png deleted file mode 100644 index ba44cbf..0000000 Binary files a/public/assets/icons/icon-128x128.png and /dev/null differ diff --git a/public/assets/icons/icon-144x144.png b/public/assets/icons/icon-144x144.png deleted file mode 100644 index d95ea86..0000000 Binary files a/public/assets/icons/icon-144x144.png and /dev/null differ diff --git a/public/assets/icons/icon-152x152.png b/public/assets/icons/icon-152x152.png deleted file mode 100644 index 3ef646b..0000000 Binary files a/public/assets/icons/icon-152x152.png and /dev/null differ diff --git a/public/assets/icons/icon-192x192.png b/public/assets/icons/icon-192x192.png deleted file mode 100644 index 91917b2..0000000 Binary files a/public/assets/icons/icon-192x192.png and /dev/null differ diff --git a/public/assets/icons/icon-384x384.png b/public/assets/icons/icon-384x384.png deleted file mode 100644 index 913a50f..0000000 Binary files a/public/assets/icons/icon-384x384.png and /dev/null differ diff --git a/public/assets/icons/icon-512x512.png b/public/assets/icons/icon-512x512.png deleted file mode 100644 index a06edfc..0000000 Binary files a/public/assets/icons/icon-512x512.png and /dev/null differ diff --git a/public/assets/icons/icon-72x72.png b/public/assets/icons/icon-72x72.png deleted file mode 100644 index 189e1df..0000000 Binary files a/public/assets/icons/icon-72x72.png and /dev/null differ diff --git a/public/assets/icons/icon-96x96.png b/public/assets/icons/icon-96x96.png deleted file mode 100644 index ce03848..0000000 Binary files a/public/assets/icons/icon-96x96.png and /dev/null differ diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/svg/menu.svg b/src/assets/svg/menu.svg index a48baad..edd9158 100644 --- a/src/assets/svg/menu.svg +++ b/src/assets/svg/menu.svg @@ -1,74 +1,86 @@ \ No newline at end of file diff --git a/src/components/Accordion.module.scss b/src/components/Accordion.module.scss index 4401e64..67f6cfa 100644 --- a/src/components/Accordion.module.scss +++ b/src/components/Accordion.module.scss @@ -92,6 +92,9 @@ &.resume { @include accordionLabel(resume); } + &.glob3d { + @include accordionLabel(glob3d); + } &.tasktimer { @include accordionLabel(tasktimer); } diff --git a/src/components/BlockTitle.module.scss b/src/components/BlockTitle.module.scss index b75bfe0..5910c24 100644 --- a/src/components/BlockTitle.module.scss +++ b/src/components/BlockTitle.module.scss @@ -32,6 +32,9 @@ &.resume { @include blockTitle(resume); } + &.glob3d { + @include blockTitle(glob3d); + } &.tasktimer { @include blockTitle(tasktimer); } @@ -44,12 +47,6 @@ &.archviz { @include blockTitle(archviz); } - &.quotes { - @include blockTitle(quotes); - } - &.other { - @include blockTitle(other); - } @media only screen and (min-width: $media-m) { font-size: $tabHeading-size-lg; diff --git a/src/components/Burger.module.scss b/src/components/Burger.module.scss index c795669..515633f 100644 --- a/src/components/Burger.module.scss +++ b/src/components/Burger.module.scss @@ -27,6 +27,9 @@ &.resume { fill: $color-resume; } + &.glob3d { + fill: $color-glob3d; + } &.tasktimer { fill: $color-tasktimer; } @@ -39,12 +42,6 @@ &.archviz { fill: $color-archviz; } - &.quotes { - fill: $color-quotes; - } - &.other { - fill: $color-other; - } &.contact { fill: $color-contact; } diff --git a/src/components/Demo.module.scss b/src/components/Demo.module.scss index aa251b3..c0d3aa6 100644 --- a/src/components/Demo.module.scss +++ b/src/components/Demo.module.scss @@ -1,44 +1,17 @@ @use '../styles/variables.scss' as var; -@use '../styles/mixins.scss' as mix; $icon-size: 1.3rem; -@mixin projectLink($project) { - border-color: map-get(var.$colors, #{$project}-diff); - - .link { - background-color: map-get(var.$colors, #{$project}-diff); - color: map-get(var.$colors, #{$project}-white); - - &::before { - border-color: map-get(var.$colors, #{$project}-diff-dark); - } - &:active, - &:focus, - &:hover { - color: map-get(var.$colors, #{$project}-white); - background-color: rgba( - $color: map-get(var.$colors, #{$project}-diff-dark), - $alpha: var.$background-opacity - ); - } - } -} - .demo { align-items: center; display: flex; - flex-direction: column; - gap: 50px; - grid-area: demo; - margin: 20px -1.2 * var.$offset-right-s 0 -1.2 * var.$offset-left-s; + justify-content: flex-end; + max-width: 1200px; + overflow: hidden; + width: 100%; @media screen and (min-width: var.$media-m) { - margin: 0; - } - - :global(.slider-container) { - width: 99%; + height: 100vh; } .arrow { @@ -64,70 +37,12 @@ $icon-size: 1.3rem; } } - .links { - display: flex; - font-size: 1.6rem; - gap: 10px; - grid-area: links; - - .link { - @include mix.button; - @include mix.flex-center; + .globe { + height: 500px; + width: 100%; - min-width: 50px; - padding: 0.3em 1em; - position: relative; - text-decoration: none; - text-transform: uppercase; - transition: background-color var.$button-hover, color var.$button-hover; - - &::before { - border-style: solid; - border-width: 0; - bottom: 0; - content: ''; - left: 0; - opacity: 0.6; - position: absolute; - right: 0; - top: 0; - transition: border-width var.$button-hover; - } - - &:active::before, - &:focus::before, - &:hover::before { - border-left-width: 10px; - border-top-width: 10px; - } - } - - &.about { - border-color: var.$color-about-diff; - - .link { - border-color: inherit; - color: var.$color-about-diff; - &:hover { - border-color: var.$color-about-shadow; - color: var.$color-about-shadow; - } - } - } - &.tasktimer { - @include projectLink('tasktimer'); - } - &.portfolio { - @include projectLink('portfolio'); - } - &.hydrapp { - @include projectLink('hydrapp'); - } - &.archviz { - @include projectLink('archviz'); - } - &.quotes { - @include projectLink('quotes'); + @media screen and (min-width: var.$media-m) { + height: 100%; } } } diff --git a/src/components/Demo.tsx b/src/components/Demo.tsx index f6f06f8..677c921 100644 --- a/src/components/Demo.tsx +++ b/src/components/Demo.tsx @@ -1,53 +1,61 @@ import clsx from 'clsx'; - +// @ts-expect-error types not available +import { BarGlob3d } from 'glob3d'; import Carousel from 'nuka-carousel'; +import { useEffect, useRef, useState } from 'react'; + +import { getCitiesData } from '../utils/citiesData'; import classes from './Demo.module.scss'; type DemoProps = { projectName: string; - demoUrl: string; - repoUrl: string; snapshots: string[]; }; -const Demo = ({ projectName, demoUrl, repoUrl, snapshots }: DemoProps) => { - if (!snapshots.length) return null; +const Demo = ({ projectName, snapshots }: DemoProps) => { + const globeRef = useRef