diff --git a/.eslintrc.json b/.eslintrc.json index 957cd15..fc32a21 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,3 @@ { - "extends": ["next/core-web-vitals"] + "extends": ["next/core-web-vitals"] } diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index a2b852c..7aac04a 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -12,59 +12,59 @@ name: "CodeQL" on: - push: - branches: [main] - pull_request: - # The branches below must be a subset of the branches above - branches: [main] - schedule: - - cron: "15 19 * * 5" + push: + branches: [main] + pull_request: + # The branches below must be a subset of the branches above + branches: [main] + schedule: + - cron: "15 19 * * 5" jobs: - analyze: - name: Analyze - runs-on: ubuntu-latest - permissions: - actions: read - contents: read - security-events: write + analyze: + name: Analyze + runs-on: ubuntu-latest + permissions: + actions: read + contents: read + security-events: write - strategy: - fail-fast: false - matrix: - language: ["javascript"] - # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] - # Learn more about CodeQL language support at https://git.io/codeql-language-support + strategy: + fail-fast: false + matrix: + language: ["javascript"] + # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] + # Learn more about CodeQL language support at https://git.io/codeql-language-support - steps: - - name: Checkout repository - uses: actions/checkout@v3 + steps: + - name: Checkout repository + uses: actions/checkout@v3 - # Initializes the CodeQL tools for scanning. - - name: Initialize CodeQL - uses: github/codeql-action/init@v2 - with: - languages: ${{ matrix.language }} - # If you wish to specify custom queries, you can do so here or in a config file. - # By default, queries listed here will override any specified in a config file. - # Prefix the list here with "+" to use these queries and those in the config file. - # queries: ./path/to/local/query, your-org/your-repo/queries@main + # Initializes the CodeQL tools for scanning. + - name: Initialize CodeQL + uses: github/codeql-action/init@v2 + with: + languages: ${{ matrix.language }} + # If you wish to specify custom queries, you can do so here or in a config file. + # By default, queries listed here will override any specified in a config file. + # Prefix the list here with "+" to use these queries and those in the config file. + # queries: ./path/to/local/query, your-org/your-repo/queries@main - # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). - # If this step fails, then you should remove it and run the build manually (see below) - - name: Autobuild - uses: github/codeql-action/autobuild@v2 + # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). + # If this step fails, then you should remove it and run the build manually (see below) + - name: Autobuild + uses: github/codeql-action/autobuild@v2 - # ℹī¸ Command-line programs to run using the OS shell. - # 📚 https://git.io/JvXDl + # ℹī¸ Command-line programs to run using the OS shell. + # 📚 https://git.io/JvXDl - # ✏ī¸ If the Autobuild fails above, remove it and uncomment the following three lines - # and modify them (or add more) to build your code if your project - # uses a compiled language + # ✏ī¸ If the Autobuild fails above, remove it and uncomment the following three lines + # and modify them (or add more) to build your code if your project + # uses a compiled language - #- run: | - # make bootstrap - # make release + #- run: | + # make bootstrap + # make release - - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v2 + - name: Perform CodeQL Analysis + uses: github/codeql-action/analyze@v2 diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml index bef2b00..b115eaf 100644 --- a/.github/workflows/gh-pages.yml +++ b/.github/workflows/gh-pages.yml @@ -5,91 +5,91 @@ name: Deploy Next.js site to Pages on: - # Runs on pushes targeting the default branch - push: - branches: ["main"] + # Runs on pushes targeting the default branch + push: + branches: ["main"] - # Allows you to run this workflow manually from the Actions tab - workflow_dispatch: + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages permissions: - contents: read - pages: write - id-token: write + contents: read + pages: write + id-token: write # Allow one concurrent deployment concurrency: - group: "pages" - cancel-in-progress: true + group: "pages" + cancel-in-progress: true jobs: - # Build job - build: - runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v3 - - name: Detect package manager - id: detect-package-manager - run: | - if [ -f "${{ github.workspace }}/yarn.lock" ]; then - echo "::set-output name=manager::yarn" - echo "::set-output name=command::install" - echo "::set-output name=runner::yarn" - exit 0 - elif [ -f "${{ github.workspace }}/package.json" ]; then - echo "::set-output name=manager::npm" - echo "::set-output name=command::ci" - echo "::set-output name=runner::npx --no-install" - exit 0 - else - echo "Unable to determine packager manager" - exit 1 - fi - - name: Setup Node - uses: actions/setup-node@v3 - with: - node-version: "16" - cache: ${{ steps.detect-package-manager.outputs.manager }} - - name: Setup Pages - id: pages - uses: actions/configure-pages@v1 - with: - # Automatically inject basePath in your Next.js configuration file and disable - # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized). - # - # You may remove this line if you want to manage the configuration yourself. - static_site_generator: next - - name: Restore cache - uses: actions/cache@v3 - with: - path: | - .next/cache - # Generate a new cache whenever packages or source files change. - key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }} - # If source files changed but packages didn't, rebuild from a prior cache. - restore-keys: | - ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}- - - name: Install dependencies - run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }} - - name: Build with Next.js - run: ${{ steps.detect-package-manager.outputs.runner }} next build - - name: Static HTML export with Next.js - run: ${{ steps.detect-package-manager.outputs.runner }} next export - - name: Upload artifact - uses: actions/upload-pages-artifact@v1 - with: - path: ./out + # Build job + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v3 + - name: Detect package manager + id: detect-package-manager + run: | + if [ -f "${{ github.workspace }}/yarn.lock" ]; then + echo "::set-output name=manager::yarn" + echo "::set-output name=command::install" + echo "::set-output name=runner::yarn" + exit 0 + elif [ -f "${{ github.workspace }}/package.json" ]; then + echo "::set-output name=manager::npm" + echo "::set-output name=command::ci" + echo "::set-output name=runner::npx --no-install" + exit 0 + else + echo "Unable to determine packager manager" + exit 1 + fi + - name: Setup Node + uses: actions/setup-node@v3 + with: + node-version: "16" + cache: ${{ steps.detect-package-manager.outputs.manager }} + - name: Setup Pages + id: pages + uses: actions/configure-pages@v1 + with: + # Automatically inject basePath in your Next.js configuration file and disable + # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized). + # + # You may remove this line if you want to manage the configuration yourself. + static_site_generator: next + - name: Restore cache + uses: actions/cache@v3 + with: + path: | + .next/cache + # Generate a new cache whenever packages or source files change. + key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }} + # If source files changed but packages didn't, rebuild from a prior cache. + restore-keys: | + ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}- + - name: Install dependencies + run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }} + - name: Build with Next.js + run: ${{ steps.detect-package-manager.outputs.runner }} next build + - name: Static HTML export with Next.js + run: ${{ steps.detect-package-manager.outputs.runner }} next export + - name: Upload artifact + uses: actions/upload-pages-artifact@v1 + with: + path: ./out - # Deployment job - deploy: - environment: - name: github-pages - url: ${{ steps.deployment.outputs.page_url }} - runs-on: ubuntu-latest - needs: build - steps: - - name: Deploy to GitHub Pages - id: deployment - uses: actions/deploy-pages@v1 + # Deployment job + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v1 diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..7a81785 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "tabWidth": 4, + "arrowParens": "always", + "semi": true, + "useTabs": true +} diff --git a/.vscode/settings.json b/.vscode/settings.json index afb940f..9c34289 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "discord.enabled": true -} \ No newline at end of file + "discord.enabled": true +} diff --git a/README.md b/README.md index a24d0df..b9a032c 100644 --- a/README.md +++ b/README.md @@ -26,13 +26,13 @@ This Repo cotains source code for my developer portfolio at https://itsmebravo.d #### Features :- -- Discord Integration -- Online Status Checker -- Resume Embed -- Custom User Stats representations -- Art and Project Showcase -- Custom Error page (including 404 and 500 response error) -- More to be added soon ... +- Discord Integration +- Online Status Checker +- Resume Embed +- Custom User Stats representations +- Art and Project Showcase +- Custom Error page (including 404 and 500 response error) +- More to be added soon ... #### Technologies Used:- @@ -44,10 +44,10 @@ This Repo cotains source code for my developer portfolio at https://itsmebravo.d **BRAVO68WEB** -- Website: https://itsmebravo.dev -- Twitter: [@BRAVO68WEB](https://twitter.com/BRAVO68WEB) -- GitHub: [@BRAVO68WEB](https://github.com/BRAVO68WEB) -- LinkedIn: [@BRAVO68WEB](https://linkedin.com/in/BRAVO68WEB) +- Website: https://itsmebravo.dev +- Twitter: [@BRAVO68WEB](https://twitter.com/BRAVO68WEB) +- GitHub: [@BRAVO68WEB](https://github.com/BRAVO68WEB) +- LinkedIn: [@BRAVO68WEB](https://linkedin.com/in/BRAVO68WEB)
diff --git a/components/404Page.jsx b/components/404Page.jsx index faec65f..41141d6 100644 --- a/components/404Page.jsx +++ b/components/404Page.jsx @@ -2,16 +2,16 @@ import { Page404Style } from "./404Page.style"; import Link from "next/link"; function Page404() { - return ( - -
- 404 !! -
- Back to Home -
-
-
- ); + return ( + +
+ 404 !! +
+ Back to Home +
+
+
+ ); } export default Page404; diff --git a/components/404Page.style.jsx b/components/404Page.style.jsx index 319d456..229ef4b 100644 --- a/components/404Page.style.jsx +++ b/components/404Page.style.jsx @@ -1,98 +1,98 @@ import styled from "styled-components"; export const Page404Style = styled.div` - @import url("https://fonts.googleapis.com/css?family=Fira+Mono:400"); + @import url("https://fonts.googleapis.com/css?family=Fira+Mono:400"); - display: flex; - width: 100vw; - height: 100vh; - align-items: center; - justify-content: center; - margin: 0; - background: #131313; - color: #fff; - font-size: 96px; - font-family: "Fira Mono", monospace; - letter-spacing: -7px; + display: flex; + width: 100vw; + height: 100vh; + align-items: center; + justify-content: center; + margin: 0; + background: #131313; + color: #fff; + font-size: 96px; + font-family: "Fira Mono", monospace; + letter-spacing: -7px; - div { - animation: glitch 1s linear infinite; - } + div { + animation: glitch 1s linear infinite; + } - @keyframes glitch { - 2%, - 64% { - transform: translate(2px, 0) skew(0deg); - } - 4%, - 60% { - transform: translate(-2px, 0) skew(0deg); - } - 62% { - transform: translate(0, 0) skew(5deg); - } - } + @keyframes glitch { + 2%, + 64% { + transform: translate(2px, 0) skew(0deg); + } + 4%, + 60% { + transform: translate(-2px, 0) skew(0deg); + } + 62% { + transform: translate(0, 0) skew(5deg); + } + } - div:before, - div:after { - content: attr(title); - position: absolute; - left: 0; - } + div:before, + div:after { + content: attr(title); + position: absolute; + left: 0; + } - div:before { - animation: glitchTop 1s linear infinite; - clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%); - -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%); - } + div:before { + animation: glitchTop 1s linear infinite; + clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%); + -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%); + } - @keyframes glitchTop { - 2%, - 64% { - transform: translate(2px, -2px); - } - 4%, - 60% { - transform: translate(-2px, 2px); - } - 62% { - transform: translate(13px, -1px) skew(-13deg); - } - } + @keyframes glitchTop { + 2%, + 64% { + transform: translate(2px, -2px); + } + 4%, + 60% { + transform: translate(-2px, 2px); + } + 62% { + transform: translate(13px, -1px) skew(-13deg); + } + } - div:after { - animation: glitchBotom 1.5s linear infinite; - clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%); - -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%); - } + div:after { + animation: glitchBotom 1.5s linear infinite; + clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%); + -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%); + } - @keyframes glitchBotom { - 2%, - 64% { - transform: translate(-2px, 0); - } - 4%, - 60% { - transform: translate(-2px, 0); - } - 62% { - transform: translate(-22px, 5px) skew(21deg); - } - } - .backtohome { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; - font-size: 0.6em; - font-weight: bold; - color: #fff; - cursor: pointer; - transition: all 0.3s ease; - &:hover { - color: #111111; - background: #fff; - } - } + @keyframes glitchBotom { + 2%, + 64% { + transform: translate(-2px, 0); + } + 4%, + 60% { + transform: translate(-2px, 0); + } + 62% { + transform: translate(-22px, 5px) skew(21deg); + } + } + .backtohome { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + font-size: 0.6em; + font-weight: bold; + color: #fff; + cursor: pointer; + transition: all 0.3s ease; + &:hover { + color: #111111; + background: #fff; + } + } `; diff --git a/components/500Page.jsx b/components/500Page.jsx index d3fee7c..bf476b2 100644 --- a/components/500Page.jsx +++ b/components/500Page.jsx @@ -1,22 +1,22 @@ import { Page500Style } from "./500Page.style"; function Page500(error = null) { - return ( - -
- + return ( + +
+ -

- 500
- Internal server error -

-

{JSON.stringify(error)}

-
-

I might be currently trying to fix the problem.

-

Maybe try again in a few minutes ...

-
-
- ); +

+ 500
+ Internal server error +

+

{JSON.stringify(error)}

+
+

I might be currently trying to fix the problem.

+

Maybe try again in a few minutes ...

+
+
+ ); } export default Page500; diff --git a/components/500Page.style.jsx b/components/500Page.style.jsx index dbd9c22..6a91721 100644 --- a/components/500Page.style.jsx +++ b/components/500Page.style.jsx @@ -1,48 +1,48 @@ import styled from "styled-components"; export const Page500Style = styled.div` - @import url("https://fonts.googleapis.com/css?family=Fira+Code&display=swap"); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 100vh; - background-color: #111; - * { - margin: 0; - padding: 0; - font-family: "Fira Code", monospace; - } - .container { - text-align: center; - margin: auto; - padding: 4em; - img { - width: 256px; - height: 225px; - } + @import url("https://fonts.googleapis.com/css?family=Fira+Code&display=swap"); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #111; + * { + margin: 0; + padding: 0; + font-family: "Fira Code", monospace; + } + .container { + text-align: center; + margin: auto; + padding: 4em; + img { + width: 256px; + height: 225px; + } - h1 { - margin-top: 1rem; - font-size: 35px; - text-align: center; + h1 { + margin-top: 1rem; + font-size: 35px; + text-align: center; - span { - font-size: 60px; - } - } - p { - margin-top: 1rem; - } + span { + font-size: 60px; + } + } + p { + margin-top: 1rem; + } - p.info { - margin-top: 4em; - font-size: 12px; + p.info { + margin-top: 4em; + font-size: 12px; - a { - text-decoration: none; - color: rgb(84, 84, 206); - } - } - } + a { + text-decoration: none; + color: rgb(84, 84, 206); + } + } + } `; diff --git a/components/about.jsx b/components/about.jsx index 46db61e..bbbad27 100644 --- a/components/about.jsx +++ b/components/about.jsx @@ -2,32 +2,34 @@ import { LanguagesKnownCategory, description1, description2 } from "config"; import { AboutStyle } from "./about.style"; function about() { - return ( - -
-
-

{description1}

-
-
- {LanguagesKnownCategory.map((lang) => { - return ( -
- #{Object.keys(lang)[0].toString()} -
- ); - })} -
-
-

{description2}

- -
-
-
- ); + return ( + +
+
+

{description1}

+
+
+ {LanguagesKnownCategory.map((lang) => { + return ( +
+ #{Object.keys(lang)[0].toString()} +
+ ); + })} +
+
+

{description2}

+ +
+
+
+ ); } export default about; diff --git a/components/about.style.jsx b/components/about.style.jsx index bc0394e..61a96f6 100644 --- a/components/about.style.jsx +++ b/components/about.style.jsx @@ -1,80 +1,80 @@ import styled from "styled-components"; export const AboutStyle = styled.div` - background-color: var(--color1); - overflow-y: scroll !important; - margin: 0; - top: 50%; - left: 50%; - height: 100vh; - padding-top: 12em; - /* padding-bottom: 8em; */ - align-items: center; - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; - /* position: relative; */ - .default { - align-items: center; - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; - padding-top: 8em; - padding-bottom: 8em; + background-color: var(--color1); + overflow-y: scroll !important; + margin: 0; + top: 50%; + left: 50%; + height: 100vh; + padding-top: 12em; + /* padding-bottom: 8em; */ + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + /* position: relative; */ + .default { + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + padding-top: 8em; + padding-bottom: 8em; - /* position: absolute; */ - /* top: 0; */ + /* position: absolute; */ + /* top: 0; */ - /* overflow-y: auto; */ - } - .content { - margin-top: 1em; - margin-bottom: 1em; - margin-left: 1.3em; - margin-right: 1.3em; - font-weight: bold; - font-size: 1.3em; - color: var(--color3); - } - .content-2 { - margin-top: 1em; - margin-bottom: 1em; - margin-left: 1.3em; - margin-right: 1.3em; - font-weight: bold; - font-size: 1.3em; - color: var(--color4); - img { - width: 90%; - padding: 1em; - } - } - .lang-map { - display: flex; - flex-wrap: wrap; - justify-content: space-around; - margin-left: 1.7em; - margin-right: 1.7em; - align-items: center; - } - .lang-map-element { - padding: 5px; - border-radius: 20px; - margin: 2px; - /* background-color: #${Math.random().toString(16).substring(2, 6)}; */ - /* background: rgb(34, 193, 195); + /* overflow-y: auto; */ + } + .content { + margin-top: 1em; + margin-bottom: 1em; + margin-left: 1.3em; + margin-right: 1.3em; + font-weight: bold; + font-size: 1.3em; + color: var(--color3); + } + .content-2 { + margin-top: 1em; + margin-bottom: 1em; + margin-left: 1.3em; + margin-right: 1.3em; + font-weight: bold; + font-size: 1.3em; + color: var(--color4); + img { + width: 90%; + padding: 1em; + } + } + .lang-map { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + margin-left: 1.7em; + margin-right: 1.7em; + align-items: center; + } + .lang-map-element { + padding: 5px; + border-radius: 20px; + margin: 2px; + /* background-color: #${Math.random().toString(16).substring(2, 6)}; */ + /* background: rgb(34, 193, 195); background: linear-gradient( 0deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100% ); */ - font-weight: bold; - box-shadow: 10px 9px 0px -3px #fffefe; - font-size: 1.1em; - color: #f5f5f5; - flex: 0 1 20%; - max-width: 127px; - } + font-weight: bold; + box-shadow: 10px 9px 0px -3px #fffefe; + font-size: 1.1em; + color: #f5f5f5; + flex: 0 1 20%; + max-width: 127px; + } `; diff --git a/components/art.js b/components/art.js index b79da50..49b85b2 100644 --- a/components/art.js +++ b/components/art.js @@ -5,26 +5,26 @@ import SkillCard from "./artCard"; import ArtModel from "./artModal"; function Art() { - return ( - <> - - {projects.map((project, index) => { - return ( - <> - - - ); - })} - {arts.map((project, index) => { - return ( - <> - - - ); - })} - - - ); + return ( + <> + + {projects.map((project, index) => { + return ( + <> + + + ); + })} + {arts.map((project, index) => { + return ( + <> + + + ); + })} + + + ); } export default Art; diff --git a/components/art.style.jsx b/components/art.style.jsx index 624a400..b933721 100644 --- a/components/art.style.jsx +++ b/components/art.style.jsx @@ -1,16 +1,16 @@ import styled from "styled-components"; export const ArtStyle = styled.div` - padding: 100px 20px; - height: 100vh; - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - overflow-y: auto; - background-image: url("/images/background4.jpg"); - background-size: cover; - background-position: center; - background-repeat: no-repeat; - background-attachment: fixed; + padding: 100px 20px; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + overflow-y: auto; + background-image: url("/images/background4.jpg"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-attachment: fixed; `; diff --git a/components/artCard.js b/components/artCard.js index 490841c..697f08a 100644 --- a/components/artCard.js +++ b/components/artCard.js @@ -3,39 +3,39 @@ import ArtCardStyle from "./artCard.style"; import ArtModel from "./artModal"; function SkillCard({ name, description, image, type, url, onClick }) { - const [open, setOpen] = useState(false); - const handleClose = () => { - setOpen(false); - }; - const handleClickOpen = () => { - setOpen(true); - }; - return ( -
- {image && ( -
- -
-
- -
+ const [open, setOpen] = useState(false); + const handleClose = () => { + setOpen(false); + }; + const handleClickOpen = () => { + setOpen(true); + }; + return ( +
+ {image && ( +
+ +
+
+ +
-
- - {name} - -
-
{description}
-
#{type}
-
-
- - preview - -
- )} -
- ); +
+ + {name} + +
+
{description}
+
#{type}
+
+
+ + preview + +
+ )} +
+ ); } export default SkillCard; diff --git a/components/artCard.style.jsx b/components/artCard.style.jsx index 58635a7..632de5d 100644 --- a/components/artCard.style.jsx +++ b/components/artCard.style.jsx @@ -1,34 +1,34 @@ import styled from "styled-components"; export default styled.div` - padding: 2%; - width: 230px; - height: 320px; - box-sizing: border-box; - background-color: #5f046b; - border-radius: 5px; - box-shadow: 10px 9px 0px -3px #fffefe; - margin: 5px; - * { - margin-top: inherit; - } - .type { - color: #92dcf3; - /* padding: 4px; */ - } - .card-logo { - display: flex; - /* width: 100%; */ - justify-content: center; - align-items: center; - background-color: #fff; - border-radius: 10px; + padding: 2%; + width: 230px; + height: 320px; + box-sizing: border-box; + background-color: #5f046b; + border-radius: 5px; + box-shadow: 10px 9px 0px -3px #fffefe; + margin: 5px; + * { + margin-top: inherit; + } + .type { + color: #92dcf3; + /* padding: 4px; */ + } + .card-logo { + display: flex; + /* width: 100%; */ + justify-content: center; + align-items: center; + background-color: #fff; + border-radius: 10px; - img { - width: 100%; - object-fit: cover; - /* object-position: 0px -10px; */ - } - /* margin: 5px 5px 0px 0px; */ - } + img { + width: 100%; + object-fit: cover; + /* object-position: 0px -10px; */ + } + /* margin: 5px 5px 0px 0px; */ + } `; diff --git a/components/artModal.js b/components/artModal.js index a937821..2059bf7 100644 --- a/components/artModal.js +++ b/components/artModal.js @@ -3,19 +3,19 @@ import Dialog from "@mui/material/Dialog"; import { useTheme } from "@mui/material/styles"; function ArtModel({ children, open, onClose }) { - const theme = useTheme(); - const fullScreen = useMediaQuery(theme.breakpoints.down("md")); + const theme = useTheme(); + const fullScreen = useMediaQuery(theme.breakpoints.down("md")); - return ( - - {children} - - ); + return ( + + {children} + + ); } export default ArtModel; diff --git a/components/buymeacoffee.jsx b/components/buymeacoffee.jsx index 5d85280..66e3f17 100644 --- a/components/buymeacoffee.jsx +++ b/components/buymeacoffee.jsx @@ -2,39 +2,42 @@ import React, { useEffect } from "react"; import { BMCStyle } from "./buymeacoffee.style"; export default function Buymeacoffee() { - // const - useEffect(() => { - const script = document.createElement("script"); - const div = document.getElementById("supportByBMC"); - script.setAttribute( - "src", - "https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" - ); - script.setAttribute("data-name", "BMC-Widget"); - script.setAttribute("data-cfasync", "false"); - script.setAttribute("data-id", "bravo68web"); - script.setAttribute("data-description", "Support me on Buy me a coffee!"); - script.setAttribute( - "data-message", - "Buying a single coffee for me is 1000 times worth than a Thankyou " - ); - script.setAttribute("data-color", "#7422f8"); - script.setAttribute("data-position", "Right"); - script.setAttribute("data-x_margin", "18"); - script.setAttribute("data-y_margin", "18"); + // const + useEffect(() => { + const script = document.createElement("script"); + const div = document.getElementById("supportByBMC"); + script.setAttribute( + "src", + "https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" + ); + script.setAttribute("data-name", "BMC-Widget"); + script.setAttribute("data-cfasync", "false"); + script.setAttribute("data-id", "bravo68web"); + script.setAttribute( + "data-description", + "Support me on Buy me a coffee!" + ); + script.setAttribute( + "data-message", + "Buying a single coffee for me is 1000 times worth than a Thankyou " + ); + script.setAttribute("data-color", "#7422f8"); + script.setAttribute("data-position", "Right"); + script.setAttribute("data-x_margin", "18"); + script.setAttribute("data-y_margin", "18"); - script.onload = function () { - let evt = document.createEvent("Event"); - evt.initEvent("DOMContentLoaded", false, false); - window.dispatchEvent(evt); - }; + script.onload = function () { + let evt = document.createEvent("Event"); + evt.initEvent("DOMContentLoaded", false, false); + window.dispatchEvent(evt); + }; - div.appendChild(script); - }, []); + div.appendChild(script); + }, []); - return ( - -
-
- ); + return ( + +
+
+ ); } diff --git a/components/buymeacoffee.style.jsx b/components/buymeacoffee.style.jsx index 9f7eb60..1d57f45 100644 --- a/components/buymeacoffee.style.jsx +++ b/components/buymeacoffee.style.jsx @@ -1,7 +1,7 @@ import styled from "styled-components"; export const BMCStyle = styled.div` - .supportFromHome { - bottom: 15px; - } + .supportFromHome { + bottom: 15px; + } `; diff --git a/components/contact.js b/components/contact.js index cd1228c..28e5b78 100644 --- a/components/contact.js +++ b/components/contact.js @@ -3,138 +3,143 @@ import { ContactStyle } from "./contact.style"; import axios from "handlers/axios"; function Contact() { - const [input, setInput] = useState({ - senderName: "", - email: "", - message: "", - topic: "", - }); - const [isSubmitted, setIsSubmitted] = useState(false); - function changeInput(evt) { - const { name, value } = evt.target; - setInput({ - ...input, - [name]: value, - }); - } - function submitForm(evt) { - evt.preventDefault(); - axios.post("/contactme/postQuery", input); - setIsSubmitted(true); - } - return ( - -
-
-
-
-

- Contact Me -

-

- If you have any questions, feel free to contact me. I am always - open to discussing new projects and opportunities. -

-
-

-

- Email: -

- me@bravo68web.me -

-
-

-

- Phone: -

- +91 6291559872 -

-
-

-

- Discord: -

- - Bravo68-DF_Techs#6429 - -

-
-

-

- Extra: -

- Calendly -

-
-
-
-
-
-
- -
- -
-
- -
- -
-
- -
- -
-
- -
-