diff --git a/.prettierrc.json b/.prettierrc.json index 122d9d22..f6f707ea 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,4 +1,5 @@ { + "plugins": ["prettier-plugin-tailwindcss"], "printWidth": 120, "semi": true, "singleQuote": true, diff --git a/dist/output.css b/dist/output.css new file mode 100644 index 00000000..67dba04e --- /dev/null +++ b/dist/output.css @@ -0,0 +1,593 @@ +/* +! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + /* 3 */ + tab-size: 4; + /* 3 */ + font-family: + ui-sans-serif, + system-ui, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + 'Helvetica Neue', + Arial, + 'Noto Sans', + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji'; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role='button'] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, +::before, +::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.filter { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) + var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +html { + font-size: 16px; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --primary-color: rgba(20, 29, 47, 1); + --secondary-color: #1e2a47; + --border-color: rgba(194, 183, 183, 0.1); + --text-color: #fff; +} + +/* light theme */ + +html.light { + --primary-color: rgb(243, 244, 246); + --secondary-color: white; + --border-color: rgba(20, 29, 47, 0.1); + --text-color: rgba(20, 29, 47, 1); +} + +body { + margin: 0; + padding: 0; + font-family: 'Poppins', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background-color: var(--primary-color); + color: var(--text-color); +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; +} + +@media (max-width: 480px) { + html { + font-size: 12px; + } +} diff --git a/package.json b/package.json index 75c08720..c23c0c90 100644 --- a/package.json +++ b/package.json @@ -10,11 +10,11 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.5.1", - "@vercel/analytics": "^1.1.2", "flag": "^5.0.1", "pnpm": "^8.10.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^5.0.1", "react-router-dom": "^6.21.1", "react-scripts": "5.0.1", "web-vitals": "^3.5.0" @@ -49,8 +49,11 @@ ] }, "devDependencies": { + "flag": "^5.0.1", "husky": "^8.0.3", "json-loader": "^0.5.7", - "prettier": "^3.0.3" + "prettier": "^3.0.3", + "prettier-plugin-tailwindcss": "^0.5.7", + "tailwindcss": "^3.3.5" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 94b30cf0..44314937 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -43,6 +43,9 @@ importers: react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) + react-icons: + specifier: ^5.0.1 + version: 5.0.1(react@18.2.0) react-scripts: specifier: 5.0.1 version: 5.0.1(@babel/plugin-syntax-flow@7.22.5)(@babel/plugin-transform-react-jsx@7.22.15)(eslint@8.53.0)(react@18.2.0)(typescript@5.2.2) @@ -50,6 +53,9 @@ importers: specifier: ^3.5.0 version: 3.5.0 devDependencies: + flag: + specifier: ^5.0.1 + version: 5.0.1(react@18.2.0) husky: specifier: ^8.0.3 version: 8.0.3 @@ -59,6 +65,12 @@ importers: prettier: specifier: ^3.0.3 version: 3.0.3 + prettier-plugin-tailwindcss: + specifier: ^0.5.7 + version: 0.5.7(prettier@3.0.3) + tailwindcss: + specifier: ^3.3.5 + version: 3.3.5 packages: /@aashutoshrathi/word-wrap@1.2.6: @@ -76,7 +88,6 @@ packages: resolution: { integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw== } engines: { node: '>=10' } - dev: false /@ampproject/remapping@2.2.1: resolution: @@ -2250,19 +2261,16 @@ packages: '@jridgewell/set-array': 1.1.2 '@jridgewell/sourcemap-codec': 1.4.15 '@jridgewell/trace-mapping': 0.3.20 - dev: false /@jridgewell/resolve-uri@3.1.1: resolution: { integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA== } engines: { node: '>=6.0.0' } - dev: false /@jridgewell/set-array@1.1.2: resolution: { integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw== } engines: { node: '>=6.0.0' } - dev: false /@jridgewell/source-map@0.3.5: resolution: @@ -2275,7 +2283,6 @@ packages: /@jridgewell/sourcemap-codec@1.4.15: resolution: { integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg== } - dev: false /@jridgewell/trace-mapping@0.3.20: resolution: @@ -2283,7 +2290,6 @@ packages: dependencies: '@jridgewell/resolve-uri': 3.1.1 '@jridgewell/sourcemap-codec': 1.4.15 - dev: false /@leichtgewicht/ip-codec@2.0.4: resolution: @@ -2304,13 +2310,11 @@ packages: dependencies: '@nodelib/fs.stat': 2.0.5 run-parallel: 1.2.0 - dev: false /@nodelib/fs.stat@2.0.5: resolution: { integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A== } engines: { node: '>= 8' } - dev: false /@nodelib/fs.walk@1.2.8: resolution: @@ -2319,7 +2323,6 @@ packages: dependencies: '@nodelib/fs.scandir': 2.1.5 fastq: 1.15.0 - dev: false /@pmmmwh/react-refresh-webpack-plugin@0.5.11(react-refresh@0.11.0)(webpack-dev-server@4.15.1)(webpack@5.89.0): resolution: @@ -2862,7 +2865,6 @@ packages: /@types/prop-types@15.7.9: resolution: { integrity: sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g== } - dev: false /@types/q@1.5.7: resolution: @@ -2893,7 +2895,6 @@ packages: '@types/prop-types': 15.7.9 '@types/scheduler': 0.16.5 csstype: 3.1.2 - dev: false /@types/resolve@1.17.1: resolution: @@ -2910,7 +2911,6 @@ packages: /@types/scheduler@0.16.5: resolution: { integrity: sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw== } - dev: false /@types/semver@7.5.4: resolution: @@ -3474,7 +3474,6 @@ packages: /any-promise@1.3.0: resolution: { integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A== } - dev: false /anymatch@3.1.3: resolution: @@ -3483,12 +3482,10 @@ packages: dependencies: normalize-path: 3.0.0 picomatch: 2.3.1 - dev: false /arg@5.0.2: resolution: { integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg== } - dev: false /argparse@1.0.10: resolution: @@ -3882,7 +3879,6 @@ packages: /balanced-match@1.0.2: resolution: { integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== } - dev: false /batch@0.6.1: resolution: @@ -3910,7 +3906,6 @@ packages: resolution: { integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== } engines: { node: '>=8' } - dev: false /bluebird@3.7.2: resolution: @@ -3959,7 +3954,6 @@ packages: dependencies: balanced-match: 1.0.2 concat-map: 0.0.1 - dev: false /brace-expansion@2.0.1: resolution: @@ -3974,7 +3968,6 @@ packages: engines: { node: '>=8' } dependencies: fill-range: 7.0.1 - dev: false /browser-process-hrtime@1.0.0: resolution: @@ -4050,7 +4043,6 @@ packages: resolution: { integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA== } engines: { node: '>= 6' } - dev: false /camelcase@5.3.1: resolution: @@ -4144,7 +4136,6 @@ packages: readdirp: 3.6.0 optionalDependencies: fsevents: 2.3.3 - dev: false /chrome-trace-event@1.0.3: resolution: @@ -4253,7 +4244,6 @@ packages: resolution: { integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA== } engines: { node: '>= 6' } - dev: false /commander@7.2.0: resolution: @@ -4310,7 +4300,6 @@ packages: /concat-map@0.0.1: resolution: { integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg== } - dev: false /confusing-browser-globals@1.0.11: resolution: @@ -4585,7 +4574,6 @@ packages: { integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== } engines: { node: '>=4' } hasBin: true - dev: false /cssnano-preset-default@5.2.14(postcss@8.4.31): resolution: @@ -4678,7 +4666,6 @@ packages: /csstype@3.1.2: resolution: { integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== } - dev: false /damerau-levenshtein@1.0.8: resolution: @@ -4867,7 +4854,6 @@ packages: /didyoumean@1.2.2: resolution: { integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw== } - dev: false /diff-sequences@27.5.1: resolution: @@ -4892,7 +4878,6 @@ packages: /dlv@1.1.3: resolution: { integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA== } - dev: false /dns-equal@1.0.0: resolution: @@ -5777,7 +5762,6 @@ packages: glob-parent: 5.1.2 merge2: 1.4.1 micromatch: 4.0.5 - dev: false /fast-json-stable-stringify@2.1.0: resolution: @@ -5794,7 +5778,6 @@ packages: { integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw== } dependencies: reusify: 1.0.4 - dev: false /faye-websocket@0.11.4: resolution: @@ -5850,7 +5833,6 @@ packages: engines: { node: '>=8' } dependencies: to-regex-range: 5.0.1 - dev: false /finalhandler@1.2.0: resolution: @@ -5913,7 +5895,7 @@ packages: '@types/react': 18.2.35 async-ref: 0.1.6 react: 18.2.0 - dev: false + dev: true /flat-cache@3.1.1: resolution: @@ -6037,7 +6019,6 @@ packages: /fs.realpath@1.0.0: resolution: { integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== } - dev: false /fsevents@2.3.3: resolution: @@ -6045,13 +6026,11 @@ packages: engines: { node: ^8.16.0 || ^10.6.0 || >=11.0.0 } os: [darwin] requiresBuild: true - dev: false optional: true /function-bind@1.1.2: resolution: { integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA== } - dev: false /function.prototype.name@1.1.6: resolution: @@ -6123,7 +6102,6 @@ packages: engines: { node: '>= 6' } dependencies: is-glob: 4.0.3 - dev: false /glob-parent@6.0.2: resolution: @@ -6131,7 +6109,6 @@ packages: engines: { node: '>=10.13.0' } dependencies: is-glob: 4.0.3 - dev: false /glob-to-regexp@0.4.1: resolution: @@ -6148,7 +6125,6 @@ packages: minimatch: 3.1.2 once: 1.4.0 path-is-absolute: 1.0.1 - dev: false /glob@7.2.3: resolution: @@ -6300,7 +6276,6 @@ packages: engines: { node: '>= 0.4' } dependencies: function-bind: 1.1.2 - dev: false /he@1.2.0: resolution: @@ -6570,7 +6545,6 @@ packages: dependencies: once: 1.4.0 wrappy: 1.0.2 - dev: false /inherits@2.0.3: resolution: @@ -6580,7 +6554,6 @@ packages: /inherits@2.0.4: resolution: { integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== } - dev: false /ini@1.3.8: resolution: @@ -6653,7 +6626,6 @@ packages: engines: { node: '>=8' } dependencies: binary-extensions: 2.2.0 - dev: false /is-boolean-object@1.1.2: resolution: @@ -6675,7 +6647,6 @@ packages: { integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw== } dependencies: hasown: 2.0.0 - dev: false /is-date-object@1.0.5: resolution: @@ -6696,7 +6667,6 @@ packages: resolution: { integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ== } engines: { node: '>=0.10.0' } - dev: false /is-finalizationregistry@1.0.2: resolution: @@ -6731,7 +6701,6 @@ packages: engines: { node: '>=0.10.0' } dependencies: is-extglob: 2.1.1 - dev: false /is-map@2.0.2: resolution: @@ -6761,7 +6730,6 @@ packages: resolution: { integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng== } engines: { node: '>=0.12.0' } - dev: false /is-obj@1.0.1: resolution: @@ -7614,12 +7582,10 @@ packages: resolution: { integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q== } hasBin: true - dev: false /js-tokens@4.0.0: resolution: { integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== } - dev: false /js-yaml@3.14.1: resolution: @@ -7853,12 +7819,10 @@ packages: resolution: { integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ== } engines: { node: '>=10' } - dev: false /lines-and-columns@1.2.4: resolution: { integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg== } - dev: false /loader-runner@4.3.0: resolution: @@ -7943,7 +7907,6 @@ packages: hasBin: true dependencies: js-tokens: 4.0.0 - dev: false /lower-case@2.0.2: resolution: @@ -8041,7 +8004,6 @@ packages: resolution: { integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg== } engines: { node: '>= 8' } - dev: false /methods@1.1.2: resolution: @@ -8056,7 +8018,6 @@ packages: dependencies: braces: 3.0.2 picomatch: 2.3.1 - dev: false /mime-db@1.52.0: resolution: @@ -8112,7 +8073,6 @@ packages: { integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw== } dependencies: brace-expansion: 1.1.11 - dev: false /minimatch@5.1.6: resolution: @@ -8166,14 +8126,12 @@ packages: any-promise: 1.3.0 object-assign: 4.1.1 thenify-all: 1.6.0 - dev: false /nanoid@3.3.6: resolution: { integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA== } engines: { node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1 } hasBin: true - dev: false /natural-compare-lite@1.4.0: resolution: @@ -8224,7 +8182,6 @@ packages: resolution: { integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== } engines: { node: '>=0.10.0' } - dev: false /normalize-range@0.1.2: resolution: @@ -8269,13 +8226,11 @@ packages: resolution: { integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg== } engines: { node: '>=0.10.0' } - dev: false /object-hash@3.0.0: resolution: { integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw== } engines: { node: '>= 6' } - dev: false /object-inspect@1.13.1: resolution: @@ -8392,7 +8347,6 @@ packages: { integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w== } dependencies: wrappy: 1.0.2 - dev: false /onetime@5.1.2: resolution: @@ -8555,7 +8509,6 @@ packages: resolution: { integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg== } engines: { node: '>=0.10.0' } - dev: false /path-key@3.1.1: resolution: @@ -8566,7 +8519,6 @@ packages: /path-parse@1.0.7: resolution: { integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== } - dev: false /path-to-regexp@0.1.7: resolution: @@ -8592,25 +8544,21 @@ packages: /picocolors@1.0.0: resolution: { integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== } - dev: false /picomatch@2.3.1: resolution: { integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== } engines: { node: '>=8.6' } - dev: false /pify@2.3.0: resolution: { integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog== } engines: { node: '>=0.10.0' } - dev: false /pirates@4.0.6: resolution: { integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg== } engines: { node: '>= 6' } - dev: false /pkg-dir@4.2.0: resolution: @@ -8918,7 +8866,6 @@ packages: postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.8 - dev: false /postcss-initial@4.0.1(postcss@8.4.31): resolution: @@ -8938,7 +8885,6 @@ packages: dependencies: camelcase-css: 2.0.1 postcss: 8.4.31 - dev: false /postcss-lab-function@4.2.1(postcss@8.4.31): resolution: @@ -8968,7 +8914,6 @@ packages: lilconfig: 2.1.0 postcss: 8.4.31 yaml: 2.3.4 - dev: false /postcss-loader@6.2.1(postcss@8.4.31)(webpack@5.89.0): resolution: @@ -9133,7 +9078,6 @@ packages: dependencies: postcss: 8.4.31 postcss-selector-parser: 6.0.13 - dev: false /postcss-nesting@10.2.0(postcss@8.4.31): resolution: @@ -9435,7 +9379,6 @@ packages: dependencies: cssesc: 3.0.0 util-deprecate: 1.0.2 - dev: false /postcss-svgo@5.1.0(postcss@8.4.31): resolution: @@ -9463,7 +9406,6 @@ packages: /postcss-value-parser@4.2.0: resolution: { integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== } - dev: false /postcss@7.0.39: resolution: @@ -9482,7 +9424,6 @@ packages: nanoid: 3.3.6 picocolors: 1.0.0 source-map-js: 1.0.2 - dev: false /prelude-ls@1.1.2: resolution: @@ -9496,6 +9437,62 @@ packages: engines: { node: '>= 0.8.0' } dev: false + /prettier-plugin-tailwindcss@0.5.7(prettier@3.0.3): + resolution: + { integrity: sha512-4v6uESAgwCni6YF6DwJlRaDjg9Z+al5zM4JfngcazMy4WEf/XkPS5TEQjbD+DZ5iNuG6RrKQLa/HuX2SYzC3kQ== } + engines: { node: '>=14.21.3' } + peerDependencies: + '@ianvs/prettier-plugin-sort-imports': '*' + '@prettier/plugin-pug': '*' + '@shopify/prettier-plugin-liquid': '*' + '@shufo/prettier-plugin-blade': '*' + '@trivago/prettier-plugin-sort-imports': '*' + prettier: ^3.0 + prettier-plugin-astro: '*' + prettier-plugin-css-order: '*' + prettier-plugin-import-sort: '*' + prettier-plugin-jsdoc: '*' + prettier-plugin-marko: '*' + prettier-plugin-organize-attributes: '*' + prettier-plugin-organize-imports: '*' + prettier-plugin-style-order: '*' + prettier-plugin-svelte: '*' + prettier-plugin-twig-melody: '*' + peerDependenciesMeta: + '@ianvs/prettier-plugin-sort-imports': + optional: true + '@prettier/plugin-pug': + optional: true + '@shopify/prettier-plugin-liquid': + optional: true + '@shufo/prettier-plugin-blade': + optional: true + '@trivago/prettier-plugin-sort-imports': + optional: true + prettier-plugin-astro: + optional: true + prettier-plugin-css-order: + optional: true + prettier-plugin-import-sort: + optional: true + prettier-plugin-jsdoc: + optional: true + prettier-plugin-marko: + optional: true + prettier-plugin-organize-attributes: + optional: true + prettier-plugin-organize-imports: + optional: true + prettier-plugin-style-order: + optional: true + prettier-plugin-svelte: + optional: true + prettier-plugin-twig-melody: + optional: true + dependencies: + prettier: 3.0.3 + dev: true + /prettier@3.0.3: resolution: { integrity: sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg== } @@ -9620,7 +9617,6 @@ packages: /queue-microtask@1.2.3: resolution: { integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A== } - dev: false /raf@3.4.1: resolution: @@ -9725,6 +9721,15 @@ packages: { integrity: sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg== } dev: false + /react-icons@5.0.1(react@18.2.0): + resolution: + { integrity: sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw== } + peerDependencies: + react: '*' + dependencies: + react: 18.2.0 + dev: false + /react-is@16.13.1: resolution: { integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== } @@ -9850,14 +9855,12 @@ packages: engines: { node: '>=0.10.0' } dependencies: loose-envify: 1.4.0 - dev: false /read-cache@1.0.0: resolution: { integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA== } dependencies: pify: 2.3.0 - dev: false /readable-stream@2.3.8: resolution: @@ -9888,7 +9891,6 @@ packages: engines: { node: '>=8.10.0' } dependencies: picomatch: 2.3.1 - dev: false /recursive-readdir@2.2.3: resolution: @@ -10074,7 +10076,6 @@ packages: is-core-module: 2.13.1 path-parse: 1.0.7 supports-preserve-symlinks-flag: 1.0.0 - dev: false /resolve@2.0.0-next.5: resolution: @@ -10096,7 +10097,6 @@ packages: resolution: { integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw== } engines: { iojs: '>=1.0.0', node: '>=0.10.0' } - dev: false /rimraf@3.0.2: resolution: @@ -10134,7 +10134,6 @@ packages: { integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA== } dependencies: queue-microtask: 1.2.3 - dev: false /safe-array-concat@1.0.1: resolution: @@ -10460,7 +10459,6 @@ packages: resolution: { integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== } engines: { node: '>=0.10.0' } - dev: false /source-map-loader@3.0.2(webpack@5.89.0): resolution: @@ -10777,7 +10775,6 @@ packages: mz: 2.7.0 pirates: 4.0.6 ts-interface-checker: 0.1.13 - dev: false /supports-color@5.5.0: resolution: @@ -10816,7 +10813,6 @@ packages: resolution: { integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== } engines: { node: '>= 0.4' } - dev: false /svg-parser@2.0.4: resolution: @@ -10895,7 +10891,6 @@ packages: sucrase: 3.34.0 transitivePeerDependencies: - ts-node - dev: false /tapable@1.1.3: resolution: @@ -10993,14 +10988,12 @@ packages: engines: { node: '>=0.8' } dependencies: thenify: 3.3.1 - dev: false /thenify@3.3.1: resolution: { integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw== } dependencies: any-promise: 1.3.0 - dev: false /throat@6.0.2: resolution: @@ -11029,7 +11022,6 @@ packages: engines: { node: '>=8.0' } dependencies: is-number: 7.0.0 - dev: false /toidentifier@1.0.1: resolution: @@ -11071,7 +11063,6 @@ packages: /ts-interface-checker@0.1.13: resolution: { integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA== } - dev: false /tsconfig-paths@3.14.2: resolution: @@ -11323,7 +11314,6 @@ packages: /util-deprecate@1.0.2: resolution: { integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw== } - dev: false /util.promisify@1.0.1: resolution: @@ -11893,7 +11883,6 @@ packages: /wrappy@1.0.2: resolution: { integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ== } - dev: false /write-file-atomic@3.0.3: resolution: @@ -11969,7 +11958,6 @@ packages: resolution: { integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA== } engines: { node: '>= 14' } - dev: false /yargs-parser@20.2.9: resolution: diff --git a/public/data/AkshayPratapSingh09.json b/public/data/AkshayPratapSingh09.json index 2a421752..d521c9b9 100644 --- a/public/data/AkshayPratapSingh09.json +++ b/public/data/AkshayPratapSingh09.json @@ -4,7 +4,20 @@ "bio": "MERN Full Stack Developer And AI Enthusiast", "avatar": "https://github.com/AkshayPratapSingh09.png", "portfolio": "https://akshay09.pages.dev/", - "skills": ["ReactJs", "MongoDb", "ExpressJs","NodeJs", "Javascript", "Python", "C", "GraphQL", "Django", "Flask", "FastApi", "Mysql"], + "skills": [ + "ReactJs", + "MongoDb", + "ExpressJs", + "NodeJs", + "Javascript", + "Python", + "C", + "GraphQL", + "Django", + "Flask", + "FastApi", + "Mysql" + ], "social": { "GitHub": "https://github.com/AkshayPratapSingh09", "Twitter": "https://twitter.com/AkshayPSingh09", diff --git a/public/data/shagunsharma6677.json b/public/data/shagunsharma6677.json index b331f24e..2371c7d0 100644 --- a/public/data/shagunsharma6677.json +++ b/public/data/shagunsharma6677.json @@ -1,28 +1,27 @@ { - "name": "Shagun Sharma", - "location": "Uttrakhand, India", - "bio": "A passionate Full Stack Web Developer with strong problem-solving abilities, proficient in React Js, Mongo DB, Express Js Next Js, Typescript and Chakra Ui, keen to learn new technologies and frameworks.", - "avatar": "https://github.com/shagunsharma6677.png", - "portfolio": "https://shagunsharma6677.github.io/", - "skills": [ - "Docker 🐳", - "MERN Stack Dev 🔥", - "Alum @Masai", - "React/Next.js 🌐", - "MongoDB", - "TypeScript/JavaScript ✨", - "Express.js/Node.js", - "Mongoose", - "React Redux", - "Tailwind Css ☀️", - "Material UI", - "Jest", - "Git" - ] - , - "social": { - "GitHub": "https://github.com/shagunsharma6677", - "Twitter": "https://twitter.com/i_nicck", - "LinkedIn": "https://www.linkedin.com/in/shagun-s67/" - } - } \ No newline at end of file + "name": "Shagun Sharma", + "location": "Uttrakhand, India", + "bio": "A passionate Full Stack Web Developer with strong problem-solving abilities, proficient in React Js, Mongo DB, Express Js Next Js, Typescript and Chakra Ui, keen to learn new technologies and frameworks.", + "avatar": "https://github.com/shagunsharma6677.png", + "portfolio": "https://shagunsharma6677.github.io/", + "skills": [ + "Docker 🐳", + "MERN Stack Dev 🔥", + "Alum @Masai", + "React/Next.js 🌐", + "MongoDB", + "TypeScript/JavaScript ✨", + "Express.js/Node.js", + "Mongoose", + "React Redux", + "Tailwind Css ☀️", + "Material UI", + "Jest", + "Git" + ], + "social": { + "GitHub": "https://github.com/shagunsharma6677", + "Twitter": "https://twitter.com/i_nicck", + "LinkedIn": "https://www.linkedin.com/in/shagun-s67/" + } +} diff --git a/src/App.css b/src/App.css index 8436a996..520f937a 100644 --- a/src/App.css +++ b/src/App.css @@ -18,3 +18,17 @@ border-radius: 8px; background-clip: content-box; } + +.skills-container::-webkit-scrollbar { + width: 10px; + height: 5px; +} + +.skills-container::-webkit-scrollbar-track { + background: var(--secondary-color); +} + +.skills-container::-webkit-scrollbar-thumb { + background: var(--primary-color); + border-radius: 5px; +} diff --git a/src/App.js b/src/App.js index 94fbee71..de2f5506 100644 --- a/src/App.js +++ b/src/App.js @@ -7,12 +7,8 @@ import ErrorPage from './components/ErrorPage/ErrorPage'; import NoResultFound from './components/NoResultFound/NoResultFound'; import Pagination from './components/Pagination/Pagination'; import './App.css'; -import './components/Pagination/Pagination.css'; import filenames from './ProfilesList.json'; -import { inject } from '@vercel/analytics'; -inject(); - function App() { const [profiles, setProfiles] = useState([]); const [searching, setSearching] = useState(false); @@ -122,24 +118,22 @@ function App() { return paginatedData.map((currentRecord, index) => ); }; - return ( -
+ return currentUrl === '/' ? ( +
- - {currentUrl === '/' ? ( - <> - {profiles.length === 0 && searching ? : renderProfiles()} - - - ) : ( - - )} +
+ + {profiles.length === 0 && searching ? : renderProfiles()} + +
+ ) : ( + ); } diff --git a/src/components/ErrorPage/ErrorPage.css b/src/components/ErrorPage/ErrorPage.css deleted file mode 100644 index bf6d3d9c..00000000 --- a/src/components/ErrorPage/ErrorPage.css +++ /dev/null @@ -1,20 +0,0 @@ -.error-page { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; -} - -.error-page-content { - text-align: center; - color: var(--text-color); -} - -.error-page-content h1 { - font-size: 2.5rem; - margin-bottom: 1rem; -} - -.error-page-content p { - font-size: 1.5rem; -} diff --git a/src/components/ErrorPage/ErrorPage.jsx b/src/components/ErrorPage/ErrorPage.jsx index d071a58d..94c887de 100644 --- a/src/components/ErrorPage/ErrorPage.jsx +++ b/src/components/ErrorPage/ErrorPage.jsx @@ -1,13 +1,12 @@ import React from 'react'; -import './ErrorPage.css'; const ErrorPage = () => { return ( -
-
-

404 - Page Not Found

+
+
+

404 - Page Not Found

Oops! The page you're looking for does not exist.

-

Please check the Url.

+

Please check the URL.

); diff --git a/src/components/NoResultFound/NoResultFound.css b/src/components/NoResultFound/NoResultFound.css deleted file mode 100644 index d8d17343..00000000 --- a/src/components/NoResultFound/NoResultFound.css +++ /dev/null @@ -1,22 +0,0 @@ -.no-result-container { - margin-left: 20rem; - padding: 0rem 1.5rem; -} - -.no-result-card { - border-radius: 10px; - background: transparent; - margin-bottom: 1.5rem; - padding: 1rem; - height: auto; - color: var(--text-color); - text-align: center; -} - -.no-result-card .top-container { - display: flex; - gap: 1rem; -} -.no-results .text { - margin-top: 16px; -} diff --git a/src/components/NoResultFound/NoResultFound.jsx b/src/components/NoResultFound/NoResultFound.jsx index b423db7e..971e6e2f 100644 --- a/src/components/NoResultFound/NoResultFound.jsx +++ b/src/components/NoResultFound/NoResultFound.jsx @@ -1,18 +1,13 @@ import React from 'react'; -import './NoResultFound.css'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faFrown } from '@fortawesome/free-solid-svg-icons'; +import { FaFrown } from 'react-icons/fa'; + export default function NoResultFound() { return ( -
-
-
- -
-

No Results Found

-

We couldn't find any results for your search.

-
-
+
+ +
+

No Results Found

+

We couldn't find any results for your search.

); diff --git a/src/components/Pagination/Pagination.css b/src/components/Pagination/Pagination.css deleted file mode 100644 index c13fb2a8..00000000 --- a/src/components/Pagination/Pagination.css +++ /dev/null @@ -1,34 +0,0 @@ -.pagination { - margin-left: 12rem; - padding: 1rem 1rem 1rem 1rem; - height: auto; - text-align: center; -} - -.pagination-button { - background-color: inherit; - padding: 1rem; - margin-left: 3rem; - align-items: center; - justify-content: space-between; - border-radius: 8px; - border: none; - width: 60px; -} - -.pagination-text { - color: var(--text-color); - text-decoration: none; - font-family: 'Space Mono', monospace, sans-serif; - font-size: 1rem; - cursor: pointer; -} - -.pagination-text:hover { - color: #00a6fb; -} - -.pagination-button:disabled { - opacity: 0.5; - pointer-events: none; -} diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index 7a9163fd..6534e5ce 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -14,19 +14,24 @@ function Pagination({ currentPage, totalPages, onNextPage, onPrevPage }) { }; return ( -
- diff --git a/src/components/Profile/Profile.css b/src/components/Profile/Profile.css deleted file mode 100644 index 4c3cd2cf..00000000 --- a/src/components/Profile/Profile.css +++ /dev/null @@ -1,214 +0,0 @@ -@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css); - -.profile-container { - margin-left: 20rem; - padding: 0rem 1.5rem; -} - -.profile-card { - border-radius: 10px; - background: var(--secondary-color); - margin-bottom: 1.5rem; - padding: 1rem 1rem 0rem 1rem; - height: auto; - box-shadow: - 0 20px 25px -5px rgba(0, 0, 0, 0.1), - 0 10px 10px -5px rgba(0, 0, 0, 0.04); -} - -.profile-card .top-container { - display: flex; - gap: 1rem; -} - -.profile-card .profile-photo { - height: 6.1rem; - width: 6.1rem; - flex-shrink: 0; -} - -.profile-photo img { - width: 100%; - height: 100%; - border-radius: 50%; -} - -.profile-name { - color: inherit; - text-decoration: none; -} - -.profile-name:hover { - color: #00a6fb; -} - -.profile-details { - width: -webkit-fill-available; - overflow: hidden; -} - -.profile-details p { - font-size: 14px; -} - -.profile-details .skills-container { - margin-top: 1rem; - display: flex; - gap: 1rem; - height: 35px; - overflow: hidden; -} - -.skills-container:hover { - overflow-x: scroll; - scroll-behavior: auto; -} - -.skills-container::-webkit-scrollbar { - width: 10px; - height: 5px; -} - -.skills-container::-webkit-scrollbar-track { - background: var(--secondary-color); -} - -.skills-container::-webkit-scrollbar-thumb { - background: var(--primary-color); - border-radius: 5px; -} - -.skills-container .skill { - background-color: rgba(20, 29, 47, 1); - padding: 0.25rem 0.5rem; - border-radius: 5px; - font-size: 0.875rem; - white-space: nowrap; - height: 30px; - cursor: default; - display: inline; - color: #fff; -} - -.profile-link, -.profile-link-disabled { - width: 10rem; -} - -.profile-link a { - text-decoration: none; - color: #00a6fb; -} - -.profile-link a:hover { - text-decoration: underline; -} - -.profile-link-disabled a { - text-decoration: none; - color: #00a6fb; - filter: brightness(70%); - cursor: not-allowed; -} - -.bottom-container { - margin-top: 1rem; -} - -.bottom-container .social { - display: flex; - margin-top: 0.5rem; -} - -.social .github, -.social .twitter, -.social .linkedin { - display: flex; - gap: 0.5rem; - align-items: center; - margin-right: 2rem; -} - -.social-link { - text-decoration: none; - color: #fff; -} - -@media (max-width: 480px) { - .skills-container .skill { - height: 2rem; - } -} - -.social-container { - width: 200px; - margin: -10px; - text-align: left; -} - -.social-icons { - padding: 1px 0px 0px 0px; - list-style: none; - margin: 0; -} - -.social-icons li { - display: inline-block; - margin: 0; - position: relative; - font-size: 1.2em; -} - -.social-icons .social-icon { - color: #fff; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - transition: all 265ms ease-out; -} - -.social-icons a:before { - transform: scale(0.5); - -ms-transform: scale(0.5); - -webkit-transform: scale(0.5); - content: ' '; - width: 50px; - height: 50px; - border-radius: 15%; - display: block; - background: linear-gradient(45deg, #195c6c, #2727ff); - transition: all 265ms ease-out; -} - -.social-icons a:hover:before { - transform: scale(0); - transition: all 265ms ease-in; - -webkit-tap-highlight-color: transparent; /* Add the WebKit-specific property to remove the border in safari browser*/ -} - -.social-icons a:hover .social-icon { - transform: scale(2) translate(-25%, -25%); - -ms-transform: scale(2) translate(-25%, -25%); - -webkit-transform: scale(2) translate(-25%, -25%); - color: #3474ec; - background: -webkit-linear-gradient(45deg, #1b58c9, #0daae9); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - transition: all 265ms ease-in; -} - -@media only screen and (max-width: 478px) { - .social-icons i { - top: 19px; - left: 19.75px; - } -} - -/* Add this CSS to specifically target Safari */ -@media screen and (-webkit-min-device-pixel-ratio: 0) { - .social-icons i { - -webkit-backface-visibility: hidden; - } -} diff --git a/src/components/Profile/Profile.jsx b/src/components/Profile/Profile.jsx index 2090b9fc..f8f25e10 100644 --- a/src/components/Profile/Profile.jsx +++ b/src/components/Profile/Profile.jsx @@ -1,105 +1,102 @@ import React from 'react'; -import './Profile.css'; +import { FaGithub } from 'react-icons/fa'; +import { FaTwitter } from 'react-icons/fa'; +import { FaLinkedin } from 'react-icons/fa'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faLocationDot } from '@fortawesome/free-solid-svg-icons'; -import { faXTwitter } from '@fortawesome/free-brands-svg-icons'; -import { faGithub } from '@fortawesome/free-brands-svg-icons'; -import { faLinkedinIn } from '@fortawesome/free-brands-svg-icons'; - function Profile({ data }) { - return ( -
- -
- ); + return ; +} - function Card({ data }) { - const cardRef = React.useRef(); - const [avatarSrc, setAvatarSrc] = React.useState(data.avatar); - const handleWheel = (event) => { - event.stopPropagation(); - event.preventDefault(); - let container = event.target; - if (!container) return false; +function Card({ data }) { + const cardRef = React.useRef(); - while (!container.classList.contains('skills-container')) { - container = container.parentNode; - } + const handleWheel = (event) => { + event.stopPropagation(); + event.preventDefault(); + let container = event.target; + if (!container) return false; - const delta = event.deltaX || event.deltaY; - container.scrollLeft += delta; - }; + while (!container.classList.contains('skills-container')) { + container = container.parentNode; + } - React.useEffect(() => { - cardRef.current.addEventListener('wheel', handleWheel, { passive: false }); - }, []); + const delta = event.deltaX || event.deltaY; + container.scrollLeft += delta; + }; + React.useEffect(() => { + cardRef.current.addEventListener('wheel', handleWheel, { passive: false }); + }, []); - return ( -
-
-
- User logo setAvatarSrc('default.png')} - /> -
-
-

- - {data.name} - -

-

- - - - {data.location} -

-
- {data.skills && - data.skills.map((skill, index) => { - return ( -
- {skill} -
- ); - })} -
-
-
- - View Profile → + return ( +
+
+
+ User logo +
+
+

+ + {data.name} +

+

+ + + + {data.location} +

+
+ {data.skills && + data.skills.map((skill, index) => { + return ( +
+ {skill} +
+ ); + })}
-
-
{data.bio}
-
- -
+
- ); - } +
+
{data.bio}
+ +
+
+ ); } export default Profile; diff --git a/src/components/ProfileSkeleton/ProfileSkeleton.css b/src/components/ProfileSkeleton/ProfileSkeleton.css index 3ceed9c3..ce31d870 100644 --- a/src/components/ProfileSkeleton/ProfileSkeleton.css +++ b/src/components/ProfileSkeleton/ProfileSkeleton.css @@ -1,6 +1,6 @@ .profile-container-sk { - margin-left: 20rem; - padding: 0rem 1.5rem; + /* margin-left: 20rem; */ + /* padding: 0rem 1.5rem; */ } .profile-card-sk { diff --git a/src/components/Search/Search.css b/src/components/Search/Search.css deleted file mode 100644 index 3f413ff5..00000000 --- a/src/components/Search/Search.css +++ /dev/null @@ -1,52 +0,0 @@ -.search-bar { - display: flex; - align-items: center; - justify-content: flex-end; - margin-left: 20rem; - margin-top: 2rem; - margin-bottom: 2rem; - padding: 0px 1.5rem; - position: relative; -} - -.search-bar input { - width: 100%; - height: 3rem; - border-radius: 6px; - border: 2px solid var(--border-color); - background: var(--primary-color); - padding: 0.25rem 0.8rem; - font-size: 1rem; - outline: none; - color: var(--text-color); - font-family: 'Space Mono', sans-serif; -} - -.search-bar .search-icon { - position: absolute; - margin-right: 10px; - font-size: 1.25rem; - cursor: pointer; -} - -.search-icon:hover { - color: #00a6fb; -} - -.search-bar .delete-icon { - position: absolute; - margin-right: 40px; - font-size: 1.25rem; - cursor: pointer; - color: var(--text-color); -} - -.delete-icon:hover { - color: #00a6fb; -} - -@media (max-width: 768px) { - .search-bar input { - width: 100%; - } -} diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx index 19861090..09a0508e 100644 --- a/src/components/Search/Search.jsx +++ b/src/components/Search/Search.jsx @@ -1,6 +1,5 @@ import React, { useState, useRef, useEffect } from 'react'; import useDebounce from '../../hooks/useDebouncer'; -import './Search.css'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faMagnifyingGlass, faXmark } from '@fortawesome/free-solid-svg-icons'; @@ -54,8 +53,9 @@ function Search({ onSearch }) { }, []); return ( -
+
- - {searchValue && } + + {searchValue && ( + + )}
); } diff --git a/src/components/Sidebar/Sidebar.css b/src/components/Sidebar/Sidebar.css deleted file mode 100644 index 75c93f27..00000000 --- a/src/components/Sidebar/Sidebar.css +++ /dev/null @@ -1,106 +0,0 @@ -.sidebar { - font-family: 'Space Mono', monospace, sans-serif; - margin-top: 30px; - margin-bottom: 30px; - padding: 0px 30px; - position: fixed; - top: 0; - left: 0; - width: 20rem; - height: 90vh; - border-right: 2px solid var(--border-color); -} - -.header { - display: flex; - align-items: center; - gap: 10px; - height: 3rem; - margin-bottom: 0.5rem; -} - -.title { - display: flex; - font-weight: bold; - font-size: 2rem; -} - -.title .dev { - color: var(--text-color); -} - -.title .find { - color: #00a6fb; -} - -.titlelink { - text-decoration: none; -} - -.headline { - color: var(--text-color); -} - -.description a { - text-decoration: underline; - color: var(--text-color); - transition: color 0.2s ease; -} - -.description a:hover { - text-decoration: underline; - color: #00a6fb; -} - -.description { - padding-top: 25px; -} -.link_button { - background-color: #00a6fb; - font-family: 'Poppins'; - border-radius: 8px; - cursor: pointer; - transition: all; - transition-duration: 500ms; - border: none; - color: white; - padding: 5px 15px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 14px; - border: 2px solid #00a6fb; -} - -.link_button:hover { - background-color: transparent; - color: #00a6fb; -} - -.theme { - margin-left: auto; -} - -.theme-button { - width: 42px; - height: 42px; - border-radius: 8px; - color: var(--text-color); - border: solid 2px var(--border-color); - background-color: var(--secondary-color); - transition: all 0.2s ease; - cursor: pointer; -} - -.theme-button:hover { - color: #00a6fb; - border: solid 2px #00a6fb; -} - -@media screen and (max-width: 768px) { - .sidebar { - position: relative; - width: auto; - height: auto; - } -} diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx index 72649518..4ae74420 100644 --- a/src/components/Sidebar/Sidebar.jsx +++ b/src/components/Sidebar/Sidebar.jsx @@ -1,26 +1,40 @@ -import React from 'react'; -import './Sidebar.css'; +import React, { useState } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCode, faMoon, faSun } from '@fortawesome/free-solid-svg-icons'; -import useTheme from '../../hooks/useTheme'; -// import {UserForm} from '../UserFrom/UserFrom'; function Sidebar() { - const { theme, toogleTheme } = useTheme(); + const [theme, setTheme] = useState('dark'); + + function toggleTheme() { + const htmlElement = document.documentElement; + const isDarkModeEnabled = htmlElement.classList.contains('dark'); + + if (isDarkModeEnabled) { + htmlElement.classList.remove('dark'); + setTheme('light'); + } else { + htmlElement.classList.add('dark'); + setTheme('dark'); + } + } return ( -
-
-
+
+
+
- -
-

dev

-

Find

+ +
+

dev

+

Find

 -
-
-
Discover and Connect with Skilled Developers.
- diff --git a/src/index.css b/src/index.css index 0325afc4..004aadb1 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,6 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lato:wght@700;900&family=Poppins:wght@400;600;700&display=swap'); @@ -11,20 +14,21 @@ html { box-sizing: border-box; } -:root { +/* :root { --primary-color: rgba(20, 29, 47, 1); --secondary-color: #1e2a47; --border-color: rgba(194, 183, 183, 0.1); --text-color: #fff; -} +} */ /* light theme */ -html.light { + +/* html.light { --primary-color: rgb(243, 244, 246); --secondary-color: white; --border-color: rgba(20, 29, 47, 0.1); --text-color: rgba(20, 29, 47, 1); -} +} */ body { margin: 0; diff --git a/src/index.js b/src/index.js index e664ce85..dac4ede3 100644 --- a/src/index.js +++ b/src/index.js @@ -2,12 +2,10 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; -import { Analytics } from '@vercel/analytics/react'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - , ); diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 00000000..b70d3d84 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,51 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + darkMode: 'class', + variants: { + dark: ['media: (prefers-color-scheme: dark)'], + }, + content: ['./src/**/*.{html,js,jsx}'], + theme: { + extend: { + fontFamily: { + spaceMono: ['"Space Mono"', 'monospace', 'sans-serif'], + poppoins: ['Poppins'], + }, + colors: ({ colors }) => ({ + borderColor: 'rgba(194, 183, 183, 0.1)', + borderSecondary: 'rgba(20, 29, 47, 0.1)', + textPrimary: '#1E2A47', + textSecondary: '#00A6FB', + primaryColor: 'rgb(243, 244, 246)', + secondaryColor: 'rgba(20, 29, 47, 1)', + inherit: colors.inherit, + current: colors.current, + transparent: colors.transparent, + black: colors.black, + white: colors.white, + slate: colors.slate, + zinc: colors.zinc, + neutral: colors.neutral, + stone: colors.stone, + red: colors.red, + orange: colors.orange, + amber: colors.amber, + yellow: colors.yellow, + lime: colors.lime, + green: colors.green, + emerald: colors.emerald, + teal: colors.teal, + cyan: colors.cyan, + sky: colors.sky, + blue: colors.blue, + indigo: colors.indigo, + violet: colors.violet, + purple: colors.purple, + fuchsia: colors.fuchsia, + pink: colors.pink, + rose: colors.rose, + }), + }, + }, + plugins: [], +};