From 12340c2d2267b71e2d30b1d62d3639f03fdc7c19 Mon Sep 17 00:00:00 2001 From: Aditya Tapshalkar Date: Wed, 13 Dec 2023 15:43:43 -0500 Subject: [PATCH] basic FE wip --- client/index.html | 3 + client/package-lock.json | 486 +++++++++++++++++- client/package.json | 9 +- client/src/{App.css => App.scss} | 27 +- client/src/App.tsx | 155 +++--- .../components/NavBar/NavBar.module.scss | 40 ++ client/src/common/components/NavBar/index.tsx | 96 ++++ .../ScrollView/ScrollView.module.scss | 8 + .../common/components/ScrollView/index.tsx | 17 + client/src/common/constants.scss | 0 client/src/index.css | 22 +- client/src/index.tsx | 10 + client/src/main.tsx | 29 +- .../contactIcons/contactIcons.module.scss | 11 + .../home/components/contactIcons/index.tsx | 20 + client/src/pages/home/index.tsx | 13 + 16 files changed, 834 insertions(+), 112 deletions(-) rename client/src/{App.css => App.scss} (84%) create mode 100644 client/src/common/components/NavBar/NavBar.module.scss create mode 100644 client/src/common/components/NavBar/index.tsx create mode 100644 client/src/common/components/ScrollView/ScrollView.module.scss create mode 100644 client/src/common/components/ScrollView/index.tsx create mode 100644 client/src/common/constants.scss create mode 100644 client/src/index.tsx create mode 100644 client/src/pages/home/components/contactIcons/contactIcons.module.scss create mode 100644 client/src/pages/home/components/contactIcons/index.tsx create mode 100644 client/src/pages/home/index.tsx diff --git a/client/index.html b/client/index.html index e4b78ea..77b861b 100644 --- a/client/index.html +++ b/client/index.html @@ -5,6 +5,9 @@ Vite + React + TS +
diff --git a/client/package-lock.json b/client/package-lock.json index 7fa5ef8..2e5014b 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -8,8 +8,15 @@ "name": "client", "version": "0.0.0", "dependencies": { + "@phosphor-icons/react": "^2.0.15", + "@types/react-router-dom": "^5.3.3", + "bootstrap": "^5.3.2", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-bootstrap": "^2.9.1", + "react-dom": "^18.2.0", + "react-router-dom": "^6.20.1", + "react-scroll": "^1.9.0", + "sass": "^1.69.5" }, "devDependencies": { "@types/react": "^18.2.15", @@ -33,6 +40,17 @@ "node": ">=0.10.0" } }, + "node_modules/@babel/runtime": { + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz", + "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==", + "dependencies": { + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@esbuild/android-arm": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", @@ -509,6 +527,88 @@ "node": ">= 8" } }, + "node_modules/@phosphor-icons/react": { + "version": "2.0.15", + "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.0.15.tgz", + "integrity": "sha512-PQKNcRrfERlC8gJGNz0su0i9xVmeubXSNxucPcbCLDd9u0cwJVTEyYK87muul/svf0UXFdL2Vl6bbeOhT1Mwow==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">= 16.8", + "react-dom": ">= 16.8" + } + }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/@react-aria/ssr": { + "version": "3.9.0", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.0.tgz", + "integrity": "sha512-Bz6BqP6ZorCme9tSWHZVmmY+s7AU8l6Vl2NUYmBzezD//fVHHfFo4lFBn5tBuAaJEm3AuCLaJQ6H2qhxNSb7zg==", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "engines": { + "node": ">= 12" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@remix-run/router": { + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.1.tgz", + "integrity": "sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q==", + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/@restart/hooks": { + "version": "0.4.15", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.15.tgz", + "integrity": "sha512-cZFXYTxbpzYcieq/mBwSyXgqnGMHoBVh3J7MU0CCoIB4NRZxV9/TuwTBAaLMqpNhC3zTPMCgkQ5Ey07L02Xmcw==", + "dependencies": { + "dequal": "^2.0.3" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@restart/ui": { + "version": "1.6.6", + "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.6.tgz", + "integrity": "sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@popperjs/core": "^2.11.6", + "@react-aria/ssr": "^3.5.0", + "@restart/hooks": "^0.4.9", + "@types/warning": "^3.0.0", + "dequal": "^2.0.3", + "dom-helpers": "^5.2.0", + "uncontrollable": "^8.0.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + } + }, + "node_modules/@restart/ui/node_modules/uncontrollable": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz", + "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==", + "peerDependencies": { + "react": ">=16.14.0" + } + }, "node_modules/@swc/core": { "version": "1.3.93", "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.93.tgz", @@ -713,12 +813,25 @@ "integrity": "sha512-9F4ys4C74eSTEUNndnER3VJ15oru2NumfQxS8geE+f3eB5xvfxpWyqE5XlVnxb/R14uoXi6SLbBwwiDSkv+XEw==", "dev": true }, + "node_modules/@swc/helpers": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.3.tgz", + "integrity": "sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@swc/types": { "version": "0.1.5", "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.5.tgz", "integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==", "dev": true }, + "node_modules/@types/history": { + "version": "4.7.11", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", + "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==" + }, "node_modules/@types/json-schema": { "version": "7.0.13", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.13.tgz", @@ -728,14 +841,12 @@ "node_modules/@types/prop-types": { "version": "15.7.8", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.8.tgz", - "integrity": "sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==", - "dev": true + "integrity": "sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==" }, "node_modules/@types/react": { "version": "18.2.28", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.28.tgz", "integrity": "sha512-ad4aa/RaaJS3hyGz0BGegdnSRXQBkd1CCYDCdNjBPg90UUpLgo+WlJqb9fMYUxtehmzF3PJaTWqRZjko6BRzBg==", - "dev": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -751,11 +862,37 @@ "@types/react": "*" } }, + "node_modules/@types/react-router": { + "version": "5.1.20", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz", + "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==", + "dependencies": { + "@types/history": "^4.7.11", + "@types/react": "*" + } + }, + "node_modules/@types/react-router-dom": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz", + "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==", + "dependencies": { + "@types/history": "^4.7.11", + "@types/react": "*", + "@types/react-router": "*" + } + }, + "node_modules/@types/react-transition-group": { + "version": "4.4.10", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", + "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.4", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.4.tgz", - "integrity": "sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==", - "dev": true + "integrity": "sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==" }, "node_modules/@types/semver": { "version": "7.5.3", @@ -763,6 +900,11 @@ "integrity": "sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw==", "dev": true }, + "node_modules/@types/warning": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz", + "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==" + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "6.7.5", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.7.5.tgz", @@ -1025,6 +1167,18 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -1046,6 +1200,32 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "engines": { + "node": ">=8" + } + }, + "node_modules/bootstrap": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz", + "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -1060,7 +1240,6 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, "dependencies": { "fill-range": "^7.0.1" }, @@ -1093,6 +1272,48 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/chokidar/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -1134,8 +1355,7 @@ "node_modules/csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", - "dev": true + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, "node_modules/debug": { "version": "4.3.4", @@ -1160,6 +1380,14 @@ "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "dev": true }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "engines": { + "node": ">=6" + } + }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -1184,6 +1412,15 @@ "node": ">=6.0.0" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/esbuild": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", @@ -1466,7 +1703,6 @@ "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, "dependencies": { "to-regex-range": "^5.0.1" }, @@ -1520,7 +1756,6 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -1621,6 +1856,11 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz", + "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -1662,11 +1902,29 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -1675,7 +1933,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, "dependencies": { "is-extglob": "^2.1.1" }, @@ -1687,7 +1944,6 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, "engines": { "node": ">=0.12.0" } @@ -1785,6 +2041,11 @@ "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true }, + "node_modules/lodash.throttle": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", + "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==" + }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -1872,6 +2133,22 @@ "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "dev": true }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -1986,7 +2263,6 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, "engines": { "node": ">=8.6" }, @@ -2031,6 +2307,28 @@ "node": ">= 0.8.0" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "node_modules/prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "dependencies": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + }, + "peerDependencies": { + "react": ">=0.14.0" + } + }, "node_modules/punycode": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz", @@ -2071,6 +2369,35 @@ "node": ">=0.10.0" } }, + "node_modules/react-bootstrap": { + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.1.tgz", + "integrity": "sha512-ezgmh/ARCYp18LbZEqPp0ppvy+ytCmycDORqc8vXSKYV3cer4VH7OReV8uMOoKXmYzivJTxgzGHalGrHamryHA==", + "dependencies": { + "@babel/runtime": "^7.22.5", + "@restart/hooks": "^0.4.9", + "@restart/ui": "^1.6.6", + "@types/react-transition-group": "^4.4.6", + "classnames": "^2.3.2", + "dom-helpers": "^5.2.1", + "invariant": "^2.2.4", + "prop-types": "^15.8.1", + "prop-types-extra": "^1.1.0", + "react-transition-group": "^4.4.5", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "@types/react": ">=16.14.8", + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -2083,6 +2410,90 @@ "react": "^18.2.0" } }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "node_modules/react-router": { + "version": "6.20.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.1.tgz", + "integrity": "sha512-ccvLrB4QeT5DlaxSFFYi/KR8UMQ4fcD8zBcR71Zp1kaYTC5oJKYAp1cbavzGrogwxca+ubjkd7XjFZKBW8CxPA==", + "dependencies": { + "@remix-run/router": "1.13.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.20.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.20.1.tgz", + "integrity": "sha512-npzfPWcxfQN35psS7rJgi/EW0Gx6EsNjfdJSAk73U/HqMEJZ2k/8puxfwHFgDQhBGmS3+sjnGbMdMSV45axPQw==", + "dependencies": { + "@remix-run/router": "1.13.1", + "react-router": "6.20.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/react-scroll": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.9.0.tgz", + "integrity": "sha512-mamNcaX9Ng+JeSbBu97nWwRhYvL2oba+xR2GxvyXsbDeGP+gkYIKZ+aDMMj/n20TbV9SCWm/H7nyuNTSiXA6yA==", + "dependencies": { + "lodash.throttle": "^4.1.1", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/regenerator-runtime": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", + "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==" + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -2156,6 +2567,22 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/sass": { + "version": "1.69.5", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz", + "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/scheduler": { "version": "0.23.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", @@ -2213,7 +2640,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -2264,7 +2690,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, "dependencies": { "is-number": "^7.0.0" }, @@ -2284,6 +2709,11 @@ "typescript": ">=4.2.0" } }, + "node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -2321,6 +2751,20 @@ "node": ">=14.17" } }, + "node_modules/uncontrollable": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", + "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", + "dependencies": { + "@babel/runtime": "^7.6.3", + "@types/react": ">=16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + }, + "peerDependencies": { + "react": ">=15.0.0" + } + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", @@ -2385,6 +2829,14 @@ } } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/client/package.json b/client/package.json index 9606bbb..2c7006f 100644 --- a/client/package.json +++ b/client/package.json @@ -10,8 +10,15 @@ "preview": "vite preview" }, "dependencies": { + "@phosphor-icons/react": "^2.0.15", + "@types/react-router-dom": "^5.3.3", + "bootstrap": "^5.3.2", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-bootstrap": "^2.9.1", + "react-dom": "^18.2.0", + "react-router-dom": "^6.20.1", + "react-scroll": "^1.9.0", + "sass": "^1.69.5" }, "devDependencies": { "@types/react": "^18.2.15", diff --git a/client/src/App.css b/client/src/App.scss similarity index 84% rename from client/src/App.css rename to client/src/App.scss index 4970e94..c93f27f 100644 --- a/client/src/App.css +++ b/client/src/App.scss @@ -3,9 +3,9 @@ margin: 0 auto; padding: 2rem; text-align: center; -} +} */ -.logo { +/* .logo { height: 6em; padding: 1.5em; will-change: filter; @@ -25,15 +25,15 @@ to { transform: rotate(360deg); } -} +} */ -@media (prefers-reduced-motion: no-preference) { +/* @media (prefers-reduced-motion: no-preference) { a:nth-of-type(2) .logo { animation: logo-spin infinite 20s linear; } -} +} */ -.card { +/* .card { padding: 2em; } @@ -43,12 +43,12 @@ -.grid-background { +/* .grid-background { display: grid; grid-template-columns: repeat(25, 20px); - /* 5 columns, 20px each */ + grid-template-rows: repeat(50, 20px); - /* 5 rows, 20px each */ + gap: 24px; width: 100%; height: 100vh; @@ -63,4 +63,11 @@ border-radius: 50%; transition: 0.5s; transition-timing-function: ease-out; -} \ No newline at end of file +} +*/ + +.views-container { + height: 100vh; + + +} diff --git a/client/src/App.tsx b/client/src/App.tsx index 2925e00..cf40bc9 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,96 +1,105 @@ -import React, { useState, useEffect } from 'react' -// import reactLogo from './assets/react.svg' -// import viteLogo from '/vite.svg' -import './App.css' +import React, { useState, useEffect } from 'react'; +import { Element, scroller } from 'react-scroll'; +import './App.scss'; -// function App() { -// const [count, setCount] = useState(0) +import Home from './pages/home'; -// return ( -// <> -//
-// -// Vite logo -// -// -// React logo -// -//
-//

Vite + React

-//
-// -//

-// Edit src/App.tsx and save to test HMR -//

-//
-//

-// Click on the Vite and React logos to learn more -//

-// -// ) -// } -// export default App +import NavBar from './common/components/NavBar' +import ScrollView from './common/components/ScrollView' -// import React from 'react'; -// import './GridBackground.css'; -function GridBackground() { +const routes = [ + "/", + "/about", + "/blog", + "/experiences", + "/resume", + "/contact", +] - // Inside the GridBackground component +function App() { - const generateGrid = (numCircles) => { - const grid = []; - for (let i = 0; i < numCircles; i++) { - grid.push(
); - } - return grid; - }; + - const handleMouseMove = (e: MouseEvent) => { - const circles = document.querySelectorAll('.circle') as NodeListOf; + return ( +
+ + + + + + + + + +
+ ); +} - const cursorX = e.clientX; - const cursorY = e.clientY; +export default App - circles.forEach((circle) => { - const circleX = circle.offsetLeft + circle.offsetWidth / 2; - const circleY = circle.offsetTop + circle.offsetHeight / 2; - const deltaX = cursorX - circleX; - const deltaY = cursorY - circleY; - // const angle = Math.atan2(deltaY, deltaX); - const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2); - const maxDistance = 100; // Adjust this value to control the interaction range - if (distance < maxDistance) { - const scale = 1 - distance / maxDistance; - const transform = `translate(-50%, -50%) scale(${scale})`; - circle.style.transform = transform; - } else { - circle.style.transform = 'translate(-50%, -50%) scale(1)'; - } - }); - }; +// // import React from 'react'; +// // import './GridBackground.css'; - window.addEventListener('mousemove', handleMouseMove); +// function GridBackground() { - // console.log('testing') +// // Inside the GridBackground component - return ( -
- {generateGrid(500)} {/* Adjust the number of circles as needed */} -
- ); +// const generateGrid = (numCircles) => { +// const grid = []; +// for (let i = 0; i < numCircles; i++) { +// grid.push(
); +// } +// return grid; +// }; -} +// const handleMouseMove = (e: MouseEvent) => { +// const circles = document.querySelectorAll('.circle') as NodeListOf; + +// const cursorX = e.clientX; +// const cursorY = e.clientY; + +// circles.forEach((circle) => { +// const circleX = circle.offsetLeft + circle.offsetWidth / 2; +// const circleY = circle.offsetTop + circle.offsetHeight / 2; +// const deltaX = cursorX - circleX; +// const deltaY = cursorY - circleY; +// // const angle = Math.atan2(deltaY, deltaX); +// const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2); + +// const maxDistance = 100; // Adjust this value to control the interaction range + +// if (distance < maxDistance) { +// const scale = 1 - distance / maxDistance; +// const transform = `translate(-50%, -50%) scale(${scale})`; +// circle.style.transform = transform; +// } else { +// circle.style.transform = 'translate(-50%, -50%) scale(1)'; +// } +// }); +// }; + + + +// window.addEventListener('mousemove', handleMouseMove); + +// // console.log('testing') + +// return ( +//
+// {generateGrid(500)} {/* Adjust the number of circles as needed */} +//
+// ); + +// } -export default GridBackground; +// export default GridBackground; diff --git a/client/src/common/components/NavBar/NavBar.module.scss b/client/src/common/components/NavBar/NavBar.module.scss new file mode 100644 index 0000000..f4704f3 --- /dev/null +++ b/client/src/common/components/NavBar/NavBar.module.scss @@ -0,0 +1,40 @@ +#navbar { + height: 128px; + bottom: 0; + // top: calc(100vh - 128px); + position: absolute; + background: rgba($color: white, $alpha: 0.5); + width: 100vw; + + font-family: 'Volkhov', serif; + + --bs-navbar-brand-font-size: 36px; + --bs-nav-link-font-size: 24px; + --bs-navbar-nav-link-padding-x: 16px; + + .linkSeparator { + pointer-events: none; + font-size: 24px; + } + +} + +// .navbar-text { +// // font-family: 'Volkhov', serif; +// // font-size: 24px; +// } + + +.link-separator { + font-size: 24px; + pointer-events: none; +} + +.sticky { + position: fixed !important; + top: 0; +} + +.scrollView + .sticky { + padding-top: 96px; +} \ No newline at end of file diff --git a/client/src/common/components/NavBar/index.tsx b/client/src/common/components/NavBar/index.tsx new file mode 100644 index 0000000..0ddc042 --- /dev/null +++ b/client/src/common/components/NavBar/index.tsx @@ -0,0 +1,96 @@ +import React, { useEffect, useState } from 'react'; +import styles from './NavBar.module.scss'; + + +import Container from "react-bootstrap/Container"; +import Nav from "react-bootstrap/Nav"; +import Navbar from "react-bootstrap/Navbar"; +import NavDropdown from "react-bootstrap/NavDropdown"; + +function NavBar() { + + const handleScroll = () => { + if (window.scrollY >= (window.innerHeight - 128)) { + document.getElementById(styles.navbar)?.classList.add(styles.sticky); + } else { + document.getElementById(styles.navbar)?.classList.remove(styles.sticky); + } + }; + + useEffect(() => { + window.addEventListener("scroll", handleScroll); + return () => window.removeEventListener("scroll", handleScroll); + }, []) + + return ( + // + + + + Aditya Tapshalkar, + + + + + + + + // + // + // React-Bootstrap + // + // + // + // + // + // + ); +} + +export default NavBar; diff --git a/client/src/common/components/ScrollView/ScrollView.module.scss b/client/src/common/components/ScrollView/ScrollView.module.scss new file mode 100644 index 0000000..7162326 --- /dev/null +++ b/client/src/common/components/ScrollView/ScrollView.module.scss @@ -0,0 +1,8 @@ +.scrollView { + width: 100vw; + height: 100vh; + outline: 5px dashed black; + outline-offset: -16px; + scroll-snap-align: start; + // scroll-padding-top: 96px; +} diff --git a/client/src/common/components/ScrollView/index.tsx b/client/src/common/components/ScrollView/index.tsx new file mode 100644 index 0000000..443e945 --- /dev/null +++ b/client/src/common/components/ScrollView/index.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import styles from './ScrollView.module.scss'; + +function ScrollView(props) { + + + + return ( +
+ + {props.children} + +
+ ) +} + +export default ScrollView; \ No newline at end of file diff --git a/client/src/common/constants.scss b/client/src/common/constants.scss new file mode 100644 index 0000000..e69de29 diff --git a/client/src/index.css b/client/src/index.css index 2c3fac6..b12c466 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -3,17 +3,25 @@ line-height: 1.5; font-weight: 400; - color-scheme: light dark; color: rgba(255, 255, 255, 0.87); - background-color: #242424; + background-color: #b7b7b7; + scroll-behavior: smooth; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; + + overflow-y: auto; + overscroll-behavior-y: contain; + scroll-snap-type: y mandatory; + + } +@import url('https://fonts.googleapis.com/css2?family=Volkhov:ital,wght@0,400;0,700;1,400;1,700&display=swap'); + a { font-weight: 500; color: #646cff; @@ -26,9 +34,15 @@ a:hover { body { margin: 0; display: flex; - place-items: center; - min-width: 320px; + min-width: 100vw; min-height: 100vh; + + + + /* overflow-y: auto; + overscroll-behavior-y: contain; + scroll-snap-type: y mandatory; */ + } h1 { diff --git a/client/src/index.tsx b/client/src/index.tsx new file mode 100644 index 0000000..8e8491c --- /dev/null +++ b/client/src/index.tsx @@ -0,0 +1,10 @@ +// import React from "react"; +// import { render } from "react-dom"; +// import { BrowserRouter } from "react-router-dom"; +// import App from "./App"; +// render( +// +// +// , +// document.querySelector("#root") +// ); diff --git a/client/src/main.tsx b/client/src/main.tsx index 3d7150d..ff14485 100644 --- a/client/src/main.tsx +++ b/client/src/main.tsx @@ -1,10 +1,25 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App.tsx' -import './index.css' +// import React from "react"; +import { render } from "react-dom"; +import { BrowserRouter } from "react-router-dom"; -ReactDOM.createRoot(document.getElementById('root')!).render( + +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; + +import "bootstrap/dist/css/bootstrap.css"; + + + +import App from "./App"; +const root = ReactDOM.createRoot( + document.getElementById("root") as HTMLElement +); + +root.render( + - , -) + +); + diff --git a/client/src/pages/home/components/contactIcons/contactIcons.module.scss b/client/src/pages/home/components/contactIcons/contactIcons.module.scss new file mode 100644 index 0000000..246888e --- /dev/null +++ b/client/src/pages/home/components/contactIcons/contactIcons.module.scss @@ -0,0 +1,11 @@ +#iconsContainer { + display: flex; + flex-direction: column; + background-color: gray; + width: calc(64px + 16px); + padding: 8px; + top: 16px; + position: relative; + border: 1px solid black; +} + diff --git a/client/src/pages/home/components/contactIcons/index.tsx b/client/src/pages/home/components/contactIcons/index.tsx new file mode 100644 index 0000000..d0e8037 --- /dev/null +++ b/client/src/pages/home/components/contactIcons/index.tsx @@ -0,0 +1,20 @@ +import React, {useEffect} from "react"; +import {At, LinkedinLogo, GithubLogo} from '@phosphor-icons/react'; + +import styles from './contactIcons.module.scss'; + + + +function ContactIcons() { + + return ( +
+ + + +
+ ) +} + + +export default ContactIcons; diff --git a/client/src/pages/home/index.tsx b/client/src/pages/home/index.tsx new file mode 100644 index 0000000..aac3caa --- /dev/null +++ b/client/src/pages/home/index.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +import ContactIcons from './components/contactIcons'; + +function Home() { + return ( +
+ +
+ ) +} + +export default Home;