From e5147e90b20fdc887c8ab8f2d452906a025439f2 Mon Sep 17 00:00:00 2001 From: OkunElya Date: Wed, 15 Apr 2026 23:29:17 +1000 Subject: [PATCH] hw7 started, added project info page --- labs/lab7/src/App.tsx | 11 - site/package-lock.json | 438 +++++++++++++++++- site/package.json | 5 +- site/src/App.tsx | 26 -- site/src/components/Sidebar.tsx | 19 - site/src/main.tsx | 38 +- site/src/main/Main.tsx | 27 ++ site/src/{ => main}/components/BigCard.tsx | 0 site/src/{ => main}/components/Content.tsx | 2 +- site/src/{ => main}/components/Gallery.tsx | 2 +- site/src/main/components/Sidebar.tsx | 18 + site/src/{ => main}/components/SmallCard.tsx | 35 +- site/src/projectDetails/ProjectDetails.tsx | 57 +++ .../components/BackgroundVideo.tsx | 36 ++ site/src/styles/index.css | 2 +- 15 files changed, 636 insertions(+), 80 deletions(-) delete mode 100644 labs/lab7/src/App.tsx delete mode 100644 site/src/App.tsx delete mode 100644 site/src/components/Sidebar.tsx create mode 100644 site/src/main/Main.tsx rename site/src/{ => main}/components/BigCard.tsx (100%) rename site/src/{ => main}/components/Content.tsx (92%) rename site/src/{ => main}/components/Gallery.tsx (96%) create mode 100644 site/src/main/components/Sidebar.tsx rename site/src/{ => main}/components/SmallCard.tsx (67%) create mode 100644 site/src/projectDetails/ProjectDetails.tsx create mode 100644 site/src/projectDetails/components/BackgroundVideo.tsx diff --git a/labs/lab7/src/App.tsx b/labs/lab7/src/App.tsx deleted file mode 100644 index ea5da48..0000000 --- a/labs/lab7/src/App.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import Main from "./main/Main"; -import List from "./list/List"; -function App() { - return ( - <> - {/*
*/} - - - ); -} -export default App; \ No newline at end of file diff --git a/site/package-lock.json b/site/package-lock.json index 601c8ce..325a7e4 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -12,8 +12,11 @@ "@emotion/styled": "^11.14.1", "@mui/icons-material": "^9.0.0", "@mui/material": "^9.0.0", + "@mui/x-charts": "^9.0.1", + "@mui/x-data-grid": "^9.0.1", "react": "^19.2.4", - "react-dom": "^19.2.4" + "react-dom": "^19.2.4", + "react-router-dom": "^7.14.1" }, "devDependencies": { "@babel/core": "^7.29.0", @@ -947,6 +950,165 @@ } } }, + "node_modules/@mui/x-charts": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-9.0.1.tgz", + "integrity": "sha512-0LyhlGhUm07wGJY0d0U+hSljGS1EHKWgPBsTJ/lBNGDrNc4DI9zSbp4h802LN/eLwMUVXJSI7DH2W3Ef3WsqnQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.28.6", + "@mui/utils": "9.0.0", + "@mui/x-charts-vendor": "^9.0.0", + "@mui/x-internal-gestures": "^9.0.0", + "@mui/x-internals": "^9.0.0", + "bezier-easing": "^2.1.0", + "clsx": "^2.1.1", + "prop-types": "^15.8.1", + "reselect": "^5.1.1", + "use-sync-external-store": "^1.6.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@mui/material": "^7.3.0 || ^9.0.0", + "@mui/system": "^7.3.0 || ^9.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/x-charts-vendor": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/@mui/x-charts-vendor/-/x-charts-vendor-9.0.0.tgz", + "integrity": "sha512-Do91i+fZiNj/4LN5oaGpJoutolzDBDwdfw6tHrx2LKXDMCRlaImCfreLbdbkk7dFsi9fuIP7hWiMV4vDJKPJTA==", + "license": "MIT AND ISC", + "dependencies": { + "@babel/runtime": "^7.28.6", + "@types/d3-array": "^3.2.2", + "@types/d3-color": "^3.1.3", + "@types/d3-format": "^3.0.4", + "@types/d3-interpolate": "^3.0.4", + "@types/d3-path": "^3.1.1", + "@types/d3-scale": "^4.0.9", + "@types/d3-shape": "^3.1.8", + "@types/d3-time": "^3.0.4", + "@types/d3-time-format": "^4.0.3", + "@types/d3-timer": "^3.0.2", + "d3-array": "^3.2.4", + "d3-color": "^3.1.0", + "d3-format": "^3.1.2", + "d3-interpolate": "^3.0.1", + "d3-path": "^3.1.0", + "d3-scale": "^4.0.2", + "d3-shape": "^3.2.0", + "d3-time": "^3.1.0", + "d3-time-format": "^4.1.0", + "d3-timer": "^3.0.1", + "flatqueue": "^3.0.0", + "internmap": "^2.0.3" + } + }, + "node_modules/@mui/x-data-grid": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-9.0.1.tgz", + "integrity": "sha512-CR8S2ZH4Egj/3CXjiruJ/hGtwqcO9UXxLFqHbDpp7cbijU6O3GEhgYEAEJ/4rwMLJJzevKoqOb9A77Xemdy6dA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.28.6", + "@mui/utils": "9.0.0", + "@mui/x-internals": "^9.0.0", + "@mui/x-virtualizer": "9.0.0-alpha.0", + "clsx": "^2.1.1", + "prop-types": "^15.8.1", + "use-sync-external-store": "^1.6.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@mui/material": "^7.3.0 || ^9.0.0", + "@mui/system": "^7.3.0 || ^9.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/x-internal-gestures": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/@mui/x-internal-gestures/-/x-internal-gestures-9.0.0.tgz", + "integrity": "sha512-+fW1EUai25GJbivGRsi3GX4GYsSvzFPvUEjmMgB4POkRBDjrEZNaLdVWfapT6DlWv/Vfbi08bYSuyvhPXGMZjw==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.28.6" + } + }, + "node_modules/@mui/x-internals": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-9.0.0.tgz", + "integrity": "sha512-E/4rdg69JjhyybpPGypCjAKSKLLnSdCFM+O6P/nkUg47+qt3uftxQEhjQO53rcn6ahHl6du/uNZ9BLgeY6kYxQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.28.6", + "@mui/utils": "9.0.0", + "reselect": "^5.1.1", + "use-sync-external-store": "^1.6.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/@mui/x-virtualizer": { + "version": "9.0.0-alpha.0", + "resolved": "https://registry.npmjs.org/@mui/x-virtualizer/-/x-virtualizer-9.0.0-alpha.0.tgz", + "integrity": "sha512-K52TKCuWlkMEWOeB2nPfhIAHaWsYEb9h1ME9Wb+gmw4FloMA03VvKsrqvn8o6l8hYUi4/5F8NfYOIfPwqW3EhA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.28.6", + "@mui/utils": "9.0.0", + "@mui/x-internals": "^9.0.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/@napi-rs/wasm-runtime": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.3.tgz", @@ -1355,6 +1517,75 @@ "@babel/types": "^7.28.2" } }, + "node_modules/@types/d3-array": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz", + "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==", + "license": "MIT" + }, + "node_modules/@types/d3-color": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz", + "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==", + "license": "MIT" + }, + "node_modules/@types/d3-format": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz", + "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==", + "license": "MIT" + }, + "node_modules/@types/d3-interpolate": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz", + "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==", + "license": "MIT", + "dependencies": { + "@types/d3-color": "*" + } + }, + "node_modules/@types/d3-path": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz", + "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==", + "license": "MIT" + }, + "node_modules/@types/d3-scale": { + "version": "4.0.9", + "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz", + "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==", + "license": "MIT", + "dependencies": { + "@types/d3-time": "*" + } + }, + "node_modules/@types/d3-shape": { + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz", + "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==", + "license": "MIT", + "dependencies": { + "@types/d3-path": "*" + } + }, + "node_modules/@types/d3-time": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz", + "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==", + "license": "MIT" + }, + "node_modules/@types/d3-time-format": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz", + "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==", + "license": "MIT" + }, + "node_modules/@types/d3-timer": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz", + "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==", + "license": "MIT" + }, "node_modules/@types/estree": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", @@ -1848,6 +2079,12 @@ "node": ">=6.0.0" } }, + "node_modules/bezier-easing": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz", + "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==", + "license": "MIT" + }, "node_modules/brace-expansion": { "version": "1.1.14", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz", @@ -1983,6 +2220,19 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz", + "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==", + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, "node_modules/cosmiconfig": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", @@ -2029,6 +2279,118 @@ "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", "license": "MIT" }, + "node_modules/d3-array": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz", + "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==", + "license": "ISC", + "dependencies": { + "internmap": "1 - 2" + }, + "engines": { + "node": ">=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==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-format": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz", + "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==", + "license": "ISC", + "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==", + "license": "ISC", + "dependencies": { + "d3-color": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-path": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz", + "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==", + "license": "ISC", + "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==", + "license": "ISC", + "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-shape": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz", + "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==", + "license": "ISC", + "dependencies": { + "d3-path": "^3.1.0" + }, + "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==", + "license": "ISC", + "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==", + "license": "ISC", + "dependencies": { + "d3-time": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-timer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz", + "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, "node_modules/debug": { "version": "4.4.3", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", @@ -2393,6 +2755,12 @@ "node": ">=16" } }, + "node_modules/flatqueue": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/flatqueue/-/flatqueue-3.0.0.tgz", + "integrity": "sha512-y1deYaVt+lIc/d2uIcWDNd0CrdQTO5xoCjeFdhX0kSXvm2Acm0o+3bAOiYklTEoRyzwio3sv3/IiBZdusbAe2Q==", + "license": "ISC" + }, "node_modules/flatted": { "version": "3.4.2", "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz", @@ -2550,6 +2918,15 @@ "node": ">=0.8.19" } }, + "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==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, "node_modules/is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", @@ -3308,6 +3685,44 @@ "integrity": "sha512-Dn0t8IQhCmeIT3wu+Apm1/YVsJXsGWi6k4sPdnBIdqMVtHtv0IGi6dcpNpNkNac0zB2uUAqNX3MHzN8c+z2rwQ==", "license": "MIT" }, + "node_modules/react-router": { + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.14.1.tgz", + "integrity": "sha512-5BCvFskyAAVumqhEKh/iPhLOIkfxcEUz8WqFIARCkMg8hZZzDYX9CtwxXA0e+qT8zAxmMC0x3Ckb9iMONwc5jg==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.14.1.tgz", + "integrity": "sha512-ZkrQuwwhGibjQLqH1eCdyiZyLWglPxzxdl5tgwgKEyCSGC76vmAjleGocRe3J/MLfzMUIKwaFJWpFVJhK3d2xA==", + "license": "MIT", + "dependencies": { + "react-router": "7.14.1" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -3324,6 +3739,12 @@ "react-dom": ">=16.6.0" } }, + "node_modules/reselect": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz", + "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==", + "license": "MIT" + }, "node_modules/resolve": { "version": "1.22.12", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz", @@ -3411,6 +3832,12 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz", + "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -3634,6 +4061,15 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz", + "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/vite": { "version": "8.0.8", "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.8.tgz", diff --git a/site/package.json b/site/package.json index ca46fba..7ece650 100644 --- a/site/package.json +++ b/site/package.json @@ -14,8 +14,11 @@ "@emotion/styled": "^11.14.1", "@mui/icons-material": "^9.0.0", "@mui/material": "^9.0.0", + "@mui/x-charts": "^9.0.1", + "@mui/x-data-grid": "^9.0.1", "react": "^19.2.4", - "react-dom": "^19.2.4" + "react-dom": "^19.2.4", + "react-router-dom": "^7.14.1" }, "devDependencies": { "@babel/core": "^7.29.0", diff --git a/site/src/App.tsx b/site/src/App.tsx deleted file mode 100644 index a9cc7f2..0000000 --- a/site/src/App.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import NavBar from './components/Navbar' -import Gallery from "./components/Gallery"; -import MainContent from "./components/Content"; -import CustomFooter from "./components/CustomFooter"; -import Sidebar from "./components/Sidebar"; - -import {Container} from "@mui/material"; - -import './styles/App.css' - -function App() { - return ( - <> - - - - - - - - - - ) -} - -export default App diff --git a/site/src/components/Sidebar.tsx b/site/src/components/Sidebar.tsx deleted file mode 100644 index ac011ff..0000000 --- a/site/src/components/Sidebar.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import Container from '@mui/material/Container'; -import Grid from '@mui/material/Grid'; -import {sidecardData} from "../data"; -import SmallCard from "./SmallCard" -const cardData = sidecardData - -function Content() { - return ( - - {cardData.map((item, index) => ( - - - - ))} - - ); -} - -export default Content; \ No newline at end of file diff --git a/site/src/main.tsx b/site/src/main.tsx index d68fac9..4a53167 100644 --- a/site/src/main.tsx +++ b/site/src/main.tsx @@ -1,10 +1,42 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' -import './styles/index.css' -import App from './App.tsx' +import { + createBrowserRouter, + RouterProvider, +} from "react-router-dom"; + +// import List from "./list/List"; +// import Chart from "./chart/Chart"; +import Main from "./main/Main"; +import ProjectDetails from "./projectDetails/ProjectDetails"; + + + +const router = createBrowserRouter([ + { + path: "", + element:
, + }, + { + path: "/project-details/:id", + element: , + }, + // { + // path: "/chart", + // element: , + // }, + // { + // path: "/building/:id", + // element: , + // }, +]); + + + +import './styles/index.css' createRoot(document.getElementById('root')!).render( - + , ) diff --git a/site/src/main/Main.tsx b/site/src/main/Main.tsx new file mode 100644 index 0000000..7177d80 --- /dev/null +++ b/site/src/main/Main.tsx @@ -0,0 +1,27 @@ +import NavBar from '../components/Navbar' +import CustomFooter from "../components/CustomFooter"; + +import Gallery from "./components/Gallery"; +import MainContent from "./components/Content"; +import Sidebar from "./components/Sidebar"; + +import { Container } from "@mui/material"; + +import '../styles/App.css' + +function App() { + return ( + <> + + + + + + + + + + ) +} + +export default App diff --git a/site/src/components/BigCard.tsx b/site/src/main/components/BigCard.tsx similarity index 100% rename from site/src/components/BigCard.tsx rename to site/src/main/components/BigCard.tsx diff --git a/site/src/components/Content.tsx b/site/src/main/components/Content.tsx similarity index 92% rename from site/src/components/Content.tsx rename to site/src/main/components/Content.tsx index eafde97..71ff240 100644 --- a/site/src/components/Content.tsx +++ b/site/src/main/components/Content.tsx @@ -1,6 +1,6 @@ import Container from '@mui/material/Container'; import Grid from '@mui/material/Grid'; -import {mainCards} from "../data"; +import {mainCards} from "../../data"; import BigCard from "./BigCard" const cardData = mainCards diff --git a/site/src/components/Gallery.tsx b/site/src/main/components/Gallery.tsx similarity index 96% rename from site/src/components/Gallery.tsx rename to site/src/main/components/Gallery.tsx index e5ebbbb..206a5bf 100644 --- a/site/src/components/Gallery.tsx +++ b/site/src/main/components/Gallery.tsx @@ -1,6 +1,6 @@ import ImageList from '@mui/material/ImageList'; import ImageListItem from '@mui/material/ImageListItem'; -import {realPhotos} from "../data"; +import {realPhotos} from "../../data"; import Box from '@mui/material/Box'; import Container from '@mui/material/Container'; import ImageListItemBar from '@mui/material/ImageListItemBar'; diff --git a/site/src/main/components/Sidebar.tsx b/site/src/main/components/Sidebar.tsx new file mode 100644 index 0000000..ff3dee6 --- /dev/null +++ b/site/src/main/components/Sidebar.tsx @@ -0,0 +1,18 @@ +import Container from '@mui/material/Container'; +import {sidecardData} from "../../data"; +import SmallCard from "./SmallCard" +const cardData = sidecardData + +function Content() { + return ( + + {cardData.map((item, index) => ( + // + + // + ))} + + ); +} + +export default Content; \ No newline at end of file diff --git a/site/src/components/SmallCard.tsx b/site/src/main/components/SmallCard.tsx similarity index 67% rename from site/src/components/SmallCard.tsx rename to site/src/main/components/SmallCard.tsx index 72d370a..3626ec1 100644 --- a/site/src/components/SmallCard.tsx +++ b/site/src/main/components/SmallCard.tsx @@ -6,13 +6,14 @@ import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import { styled } from '@mui/material/styles'; +import { Link } from 'react-router-dom'; interface ComponentProps { data: { img: string, title: string, description: string[] }, - cardNum: number; + idx: number; } @@ -21,20 +22,20 @@ const StyledTypography = styled(Typography)(({ theme }) => ({ textAlign: 'justify', marginBottom: '2px', fontSize: '12px', - padding:"5px" + padding: "5px" })); -function SmallCard({ data }: ComponentProps) { +function SmallCard({ data,idx }: ComponentProps) { // if(reverseModifier){ // [textA,textB] = [textB,textA]; // } - let buf=data.description.reduce((acc, val) => acc + " " + val, ""); - - if(buf.length>70){ - buf = buf.slice(0,70)+"..."; + let buf = data.description.reduce((acc, val) => acc + " " + val, ""); + + if (buf.length > 70) { + buf = buf.slice(0, 70) + "..."; } const textPart = buf; @@ -50,14 +51,16 @@ function SmallCard({ data }: ComponentProps) { }}> - - {textPart} - - - {data.description} - - - + + {textPart} + + + {data.description} + + + + + @@ -65,7 +68,7 @@ function SmallCard({ data }: ComponentProps) { component="img" alt={data.title} image={data.img} - sx={{objectFit: 'fill' }} + sx={{ objectFit: 'fill' }} /> diff --git a/site/src/projectDetails/ProjectDetails.tsx b/site/src/projectDetails/ProjectDetails.tsx new file mode 100644 index 0000000..4c7972e --- /dev/null +++ b/site/src/projectDetails/ProjectDetails.tsx @@ -0,0 +1,57 @@ +import Card from '@mui/material/Card'; +import CardContent from '@mui/material/CardContent'; +import CardMedia from '@mui/material/CardMedia'; + +import Typography from '@mui/material/Typography'; +import Box from '@mui/material/Box'; +import { styled } from '@mui/material/styles'; +import {sidecardData} from '../data.tsx'; +import { useParams, Link } from 'react-router-dom'; +import BackgroundVideo from "./components/BackgroundVideo"; + +const StyledTypography = styled(Typography)(({ theme }) => ({ + color: theme.palette.text.secondary, + textAlign: 'justify', + marginBottom: '1em', +})); + + +function ProjectDetails() { + const { id } = useParams(); + const projectDetails = sidecardData[Number(id)]; + return ( + <> +
+ + + Main > {projectDetails.title} + + + {projectDetails.title} + + + + + + {projectDetails.description.map((item, ind) => ( + + {item} + + ))} + + + + + + +
+ + ) +} + +export default ProjectDetails; \ No newline at end of file diff --git a/site/src/projectDetails/components/BackgroundVideo.tsx b/site/src/projectDetails/components/BackgroundVideo.tsx new file mode 100644 index 0000000..0be221e --- /dev/null +++ b/site/src/projectDetails/components/BackgroundVideo.tsx @@ -0,0 +1,36 @@ +import { useState } from "react"; + +import { playbackVideo } from '../../data.tsx'; + +const BgVideo = () => { + const videoSrc = playbackVideo; + const [loading, setLoading] = useState(true); + const makeVisible = () => { + setLoading(false); + } + + return ( + + ); + +} + +export default BgVideo; \ No newline at end of file diff --git a/site/src/styles/index.css b/site/src/styles/index.css index 5fb3313..32d37df 100644 --- a/site/src/styles/index.css +++ b/site/src/styles/index.css @@ -2,7 +2,7 @@ --text: #6b6375; --text-h: #08060d; --bg: #fff; - --border: #e5e4e7; + /* --border: #e5e4e7; */ --code-bg: #f4f3ec; --accent: #aa3bff; --accent-bg: rgba(170, 59, 255, 0.1);