├── .github
    ├── ISSUE_TEMPLATE
    │   ├── bug.yml
    │   ├── config.yml
    │   ├── doc.yml
    │   ├── features.yml
    │   └── other.yml
    ├── pull_request_template.md
    └── workflows
    │   ├── compliance.yml
    │   └── greetings.yml
├── .gitignore
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
└── src
    ├── App.jsx
    ├── Components
        ├── About.jsx
        ├── Home.jsx
        ├── Mail.jsx
        ├── Nav.jsx
        ├── Project.jsx
        ├── Projects.jsx
        ├── Skills.jsx
        └── Socials.jsx
    ├── index.jsx
    └── styles
        ├── About.css
        ├── App.css
        ├── Home.css
        ├── Mail.css
        ├── Nav.css
        ├── Project.css
        ├── Projects.css
        ├── Skills.css
        ├── Socials.css
        └── index.css


/.github/ISSUE_TEMPLATE/bug.yml:
--------------------------------------------------------------------------------
 1 | name: 🐛 Bug
 2 | description: Report an issue to help improve the project.
 3 | title: "[BUG] <what went wrong>"
 4 | labels:
 5 |   [
 6 |     "bug",
 7 |     "hacktoberfest",
 8 |   ]
 9 | body:
10 |   - type: textarea
11 |     id: description
12 |     attributes:
13 |       label: Description
14 |       description: A brief description of the question or issue, also include what you tried and what didn't work
15 |     validations:
16 |       required: true
17 |   - type: textarea
18 |     id: screenshots
19 |     attributes:
20 |       label: Screenshots
21 |       description: Please add screenshots if applicable
22 |     validations:
23 |       required: false
24 |   - type: textarea
25 |     id: extrainfo
26 |     attributes:
27 |       label: Additional information
28 |       description: Is there anything else we should know about this bug?
29 |     validations:
30 |       required: false
31 | 
32 |   - type: dropdown
33 |     id: browser
34 |     attributes:
35 |       label: "🥦 Browser"
36 |       description: "What browser are you using ?"
37 |       options:
38 |         - Google Chrome
39 |         - Brave
40 |         - Microsoft Edge
41 |         - Mozilla Firefox
42 |         - Safari
43 |         - Opera
44 |         - Other
45 |     validations:
46 |       required: true
47 | 
48 |   - type: checkboxes
49 |     id: no-duplicate-issues
50 |     attributes:
51 |       label: "👀 Have you checked if this issue has been raised before?"
52 |       options:
53 |         - label: "I checked and didn't find similar issue"
54 |           required: true
55 | 
56 |   - type: checkboxes
57 |     id: read-code-of-conduct
58 |     attributes:
59 |       label: "🏢 Have you read the Contributing Guidelines?"
60 |       options:
61 |         - label: "I have read and understood the rules in the [Contributing Guidelines](https://github.com/Dun-sin/template-portfolio/blob/main/CONTRIBUTING.md)"
62 |           required: true
63 | 
64 |   - type: dropdown
65 |     attributes:
66 |       label: Are you willing to work on this issue ?
67 |       description: This is absolutely not required, but we are happy to guide you in the contribution process.
68 |       options:
69 |         - "Yes I am willing to submit a PR!"
70 | 
71 |   - type: markdown
72 |     attributes:
73 |       value: |
74 |         Follow me on Twitter [here](https://twitter.com/DunsinWebDev)
75 |         Feel free to Join the discord server [here](https://discord.gg/kcFraw3nhz) and check out other cool repositories [here](https://github.com/Dunsin)
76 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/config.yml:
--------------------------------------------------------------------------------
1 | blank_issues_enabled: false
2 | contact_links:
3 |   - name: 🙋🏾🙋🏼Question
4 |     url: https://discord.gg/KUWjx4fygJ
5 |     about: Feel free to ask your question on our Discord channel.
6 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/doc.yml:
--------------------------------------------------------------------------------
 1 | name: 📄 Documentation issue
 2 | description: Found an issue in the documentation? You can use this one!
 3 | title: "[DOCS] <what do you have to add>"
 4 | labels:
 5 |   [
 6 |     "documentation",
 7 |     "hacktoberfest",
 8 |   ]
 9 | body:
10 |   - type: textarea
11 |     id: description
12 |     attributes:
13 |       label: Description
14 |       description: A brief description of the question or issue, also include what you tried and what didn't work
15 |     validations:
16 |       required: true
17 |   - type: textarea
18 |     id: screenshots
19 |     attributes:
20 |       label: Screenshots
21 |       description: Please add screenshots if applicable
22 |     validations:
23 |       required: false
24 |   - type: textarea
25 |     id: extrainfo
26 |     attributes:
27 |       label: Additional information
28 |       description: Is there anything else we should know about this issue?
29 |     validations:
30 |       required: false
31 | 
32 |   - type: checkboxes
33 |     id: no-duplicate-issues
34 |     attributes:
35 |       label: "👀 Have you checked if this issue has been raised before?"
36 |       options:
37 |         - label: "I checked and didn't find similar issue"
38 |           required: true
39 | 
40 |   - type: checkboxes
41 |     id: read-code-of-conduct
42 |     attributes:
43 |       label: "🏢 Have you read the Contributing Guidelines?"
44 |       options:
45 |         - label: "I have read and understood the rules in the [Contributing Guidelines](https://github.com/Dun-sin/template-portfolio/blob/main/CONTRIBUTING.md)"
46 |           required: true
47 | 
48 |   - type: dropdown
49 |     attributes:
50 |       label: Are you willing to work on this issue ?
51 |       description: This is absolutely not required, but we are happy to guide you in the contribution process.
52 |       options:
53 |         - "Yes I am willing to submit a PR!"
54 | 
55 |   - type: markdown
56 |     attributes:
57 |       value: |
58 |         Follow me on Twitter [here](https://twitter.com/DunsinWebDev)
59 |         Feel free to Join the discord server [here](https://discord.gg/kcFraw3nhz) and check out other cool repositories [here](https://github.com/Dunsin)
60 |         
61 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/features.yml:
--------------------------------------------------------------------------------
 1 | name: 💡 General Feature Request
 2 | description: Have a new idea/feature for this project? Would love to hear it!
 3 | title: "[FEATURE] <what do you have to add>"
 4 | labels:
 5 |   [
 6 |     "feature",
 7 |   ]
 8 | body:
 9 |   - type: textarea
10 |     id: description
11 |     attributes:
12 |       label: Description
13 |       description: A brief description of the enhancement you propose, also include what you tried and what worked.
14 |     validations:
15 |       required: true
16 |   - type: textarea
17 |     id: screenshots
18 |     attributes:
19 |       label: Screenshots
20 |       description: Please add screenshots if applicable
21 |     validations:
22 |       required: false
23 |   - type: textarea
24 |     id: extrainfo
25 |     attributes:
26 |       label: Additional information
27 |       description: Is there anything else we should know about this idea?
28 |     validations:
29 |       required: false
30 | 
31 |   - type: checkboxes
32 |     id: no-duplicate-issues
33 |     attributes:
34 |       label: "👀 Have you checked if this issue has been raised before?"
35 |       options:
36 |         - label: "I checked and didn't find similar issue"
37 |           required: true
38 | 
39 |   - type: checkboxes
40 |     id: read-code-of-conduct
41 |     attributes:
42 |       label: "🏢 Have you read the Contributing Guidelines?"
43 |       options:
44 |         - label: "I have read and understood the rules in the [Contributing Guidelines](https://github.com/Dun-sin/template-portfolio/blob/main/CONTRIBUTING.md)"
45 |           required: true
46 | 
47 |   - type: dropdown
48 |     attributes:
49 |       label: Are you willing to work on this issue ?
50 |       description: This is absolutely not required, but we are happy to guide you in the contribution process.
51 |       options:
52 |         - "Yes I am willing to submit a PR!"
53 | 
54 |   - type: markdown
55 |     attributes:
56 |       value: |
57 |         Follow me on Twitter [here](https://twitter.com/DunsinWebDev)
58 |         Feel free to Join the discord server [here](https://discord.gg/kcFraw3nhz) and check out other cool repositories [here](https://github.com/Dunsin)
59 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/other.yml:
--------------------------------------------------------------------------------
 1 | name: Other
 2 | description: Use this for any other issues. Please do NOT create blank issues
 3 | title: "[OTHER]"
 4 | body:
 5 |   - type: markdown
 6 |     attributes:
 7 |       value: "# Other issue"
 8 |   - type: textarea
 9 |     id: issuedescription
10 |     attributes:
11 |       label: What would you like to share?
12 |       description: Provide a clear and concise explanation of your issue.
13 |     validations:
14 |       required: true
15 |   - type: textarea
16 |     id: extrainfo
17 |     attributes:
18 |       label: Additional information
19 |       description: Is there anything else we should know about this issue?
20 |     validations:
21 |       required: false
22 | 
23 |   - type: checkboxes
24 |     id: no-duplicate-issues
25 |     attributes:
26 |       label: "👀 Have you checked if this issue has been raised before?"
27 |       options:
28 |         - label: "I checked and didn't find similar issue"
29 |           required: true
30 | 
31 |   - type: checkboxes
32 |     id: read-code-of-conduct
33 |     attributes:
34 |       label: "🏢 Have you read the Contributing Guidelines?"
35 |       options:
36 |         - label: "I have read and understood the rules in the [Contributing Guidelines](https://github.com/Dun-sin/template-portfolio/blob/main/CONTRIBUTING.md)"
37 |           required: true
38 | 
39 |   - type: dropdown
40 |     attributes:
41 |       label: Are you willing to work on this issue ?
42 |       description: This is absolutely not required, but we are happy to guide you in the contribution process.
43 |       options:
44 |         - "Yes I am willing to submit a PR!"
45 | 
46 |   - type: markdown
47 |     attributes:
48 |       value: |
49 |         Follow me on Twitter [here](https://twitter.com/DunsinWebDev)
50 |         Feel free to Join the discord server [here](https://discord.gg/kcFraw3nhz) and check out other cool repositories [here](https://github.com/Dunsin)
51 | 


--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
 1 | # Fixes Issue
 2 | 
 3 | **My PR closes #issue_number_here**
 4 | 
 5 | # 👨‍💻 Changes proposed(What did you do ?)
 6 | 
 7 | # ✔️ Check List (Check all the applicable boxes)
 8 | <!-- Mark all the applicable boxes. To mark the box as done follow the following conventions -->
 9 | 
10 | <!--
11 | [x] - Correct; marked as done
12 | [X] - Correct; marked as done
13 | 
14 | [ ] - Not correct; marked as **not** done
15 | -->
16 | 
17 | - [] My code follows the code style of this project.
18 | - [] This PR does not contain plagiarized content.
19 | - [] The title and description of the PR is clear and explains the approach.
20 | 
21 | ##  Note to reviewers
22 | 
23 | <!-- Add notes to reviewers if applicable -->
24 | 
25 | # 📷 Screenshots
26 | 
27 | <!-- Add all the screenshots which support your changes -->
28 | 


--------------------------------------------------------------------------------
/.github/workflows/compliance.yml:
--------------------------------------------------------------------------------
 1 | name: Compliance
 2 | 
 3 | on:
 4 |   pull_request_target:
 5 |     types:
 6 |       - opened
 7 |       - edited
 8 |       - synchronize
 9 |       - reopened
10 |   workflow_call:
11 | 
12 | permissions:
13 |   pull-requests: write
14 | 
15 | jobs:
16 |   pr-compliance-checks:
17 |     name: PR Compliance Checks
18 |     runs-on: ubuntu-latest
19 |     steps:
20 |       - uses: mtfoley/pr-compliance-action@v0.5.0
21 |         with:
22 |           body-auto-close: false
23 |           protected-branch-auto-close: false
24 |           watch-files: |
25 |             package.json
26 |             package-lock.json
27 |           body-comment: >
28 |             ## Issue Reference
29 |             In order to be considered for merging, the pull request description must refer to a
30 |             specific issue number. This is described in our
31 |             [Contributing Guide](https://github.com/Dun-sin/template-portfolio/blob/main/CONTRIBUTING.md).
32 |             This check is looking for a phrase similar to: "Fixes #XYZ" or "Resolves #XYZ" where XYZ is the issue
33 |             number that this PR is meant to address.
34 | 


--------------------------------------------------------------------------------
/.github/workflows/greetings.yml:
--------------------------------------------------------------------------------
 1 | on:
 2 |   fork:
 3 |   push:
 4 |     branches: [main]
 5 |   issues:
 6 |     types: [opened]
 7 |   issue_comment:
 8 |     types: [created]
 9 | 
10 | jobs:
11 |   welcome:
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - uses: actions/checkout@v1
15 |       - uses: EddieHubCommunity/gh-action-community/src/welcome@main
16 |         with:
17 |           github-token: ${{ secrets.GITHUB_TOKEN}}
18 |           issue-message: '<h1>It''s great having you contribute to this project by creating an issue</h1> Make sure you are assigned to this before you work on it and you read the <a href="https://github.com/Dun-sin/Template-Portfolio/blob/main/CONTRIBUTING.md">Contributing.md file</a>, Thank you! Welcome to the community :nerd_face:'
19 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
  1 | # Contributor Covenant Code of Conduct
  2 | 
  3 | ## Our Pledge
  4 | 
  5 | We as members, contributors, and leaders pledge to make participation in our
  6 | community a harassment-free experience for everyone, regardless of age, body
  7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
  8 | identity and expression, level of experience, education, socio-economic status,
  9 | nationality, personal appearance, race, religion, or sexual identity
 10 | and orientation.
 11 | 
 12 | We pledge to act and interact in ways that contribute to an open, welcoming,
 13 | diverse, inclusive, and healthy community.
 14 | 
 15 | ## Our Standards
 16 | 
 17 | Examples of behavior that contributes to a positive environment for our
 18 | community include:
 19 | 
 20 | * Demonstrating empathy and kindness toward other people
 21 | * Being respectful of differing opinions, viewpoints, and experiences
 22 | * Giving and gracefully accepting constructive feedback
 23 | * Accepting responsibility and apologizing to those affected by our mistakes,
 24 |   and learning from the experience
 25 | * Focusing on what is best not just for us as individuals, but for the
 26 |   overall community
 27 | 
 28 | Examples of unacceptable behavior include:
 29 | 
 30 | * The use of sexualized language or imagery, and sexual attention or
 31 |   advances of any kind
 32 | * Trolling, insulting or derogatory comments, and personal or political attacks
 33 | * Public or private harassment
 34 | * Publishing others' private information, such as a physical or email
 35 |   address, without their explicit permission
 36 | * Other conduct which could reasonably be considered inappropriate in a
 37 |   professional setting
 38 | 
 39 | ## Enforcement Responsibilities
 40 | 
 41 | Community leaders are responsible for clarifying and enforcing our standards of
 42 | acceptable behavior and will take appropriate and fair corrective action in
 43 | response to any behavior that they deem inappropriate, threatening, offensive,
 44 | or harmful.
 45 | 
 46 | Community leaders have the right and responsibility to remove, edit, or reject
 47 | comments, commits, code, wiki edits, issues, and other contributions that are
 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
 49 | decisions when appropriate.
 50 | 
 51 | ## Scope
 52 | 
 53 | This Code of Conduct applies within all community spaces, and also applies when
 54 | an individual is officially representing the community in public spaces.
 55 | Examples of representing our community include using an official e-mail address,
 56 | posting via an official social media account, or acting as an appointed
 57 | representative at an online or offline event.
 58 | 
 59 | ## Enforcement
 60 | 
 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
 62 | reported to the community leaders responsible for enforcement at
 63 | dunsincodes@gmail.com.
 64 | All complaints will be reviewed and investigated promptly and fairly.
 65 | 
 66 | All community leaders are obligated to respect the privacy and security of the
 67 | reporter of any incident.
 68 | 
 69 | ## Enforcement Guidelines
 70 | 
 71 | Community leaders will follow these Community Impact Guidelines in determining
 72 | the consequences for any action they deem in violation of this Code of Conduct:
 73 | 
 74 | ### 1. Correction
 75 | 
 76 | **Community Impact**: Use of inappropriate language or other behavior deemed
 77 | unprofessional or unwelcome in the community.
 78 | 
 79 | **Consequence**: A private, written warning from community leaders, providing
 80 | clarity around the nature of the violation and an explanation of why the
 81 | behavior was inappropriate. A public apology may be requested.
 82 | 
 83 | ### 2. Warning
 84 | 
 85 | **Community Impact**: A violation through a single incident or series
 86 | of actions.
 87 | 
 88 | **Consequence**: A warning with consequences for continued behavior. No
 89 | interaction with the people involved, including unsolicited interaction with
 90 | those enforcing the Code of Conduct, for a specified period of time. This
 91 | includes avoiding interactions in community spaces as well as external channels
 92 | like social media. Violating these terms may lead to a temporary or
 93 | permanent ban.
 94 | 
 95 | ### 3. Temporary Ban
 96 | 
 97 | **Community Impact**: A serious violation of community standards, including
 98 | sustained inappropriate behavior.
 99 | 
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 | 
106 | ### 4. Permanent Ban
107 | 
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior,  harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 | 
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 | 
115 | ## Attribution
116 | 
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 | 
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 | 
124 | [homepage]: https://www.contributor-covenant.org
125 | 
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
  1 | ## Rules
  2 | 
  3 | - Don't create a pull request on an issue that doesn't exist, create an issue first and if the changes you are proposing are said to be okay, you can go ahead and create a pull request
  4 | 
  5 | - Don't work on anything unless you are assigned, if you make a pull request without being assigned to that issue, it will be closed without being merged
  6 | 
  7 | - Don't work on more than one issue at a time, this is so that you don't make a huge pull request and others can have opportunities to work on another issue while you work on something else
  8 | 
  9 | - Do read the `readme.md` file
 10 | 
 11 | - Add the Issue you worked on in your Pull Request 
 12 | 
 13 | - Don't work on the main branch, create your own branch by following the instructions [here](https://github.com/Dun-sin/Template-Portfolio/blob/main/CONTRIBUTING.md#-how-to-make-a-pull-request)
 14 | 
 15 | - Don't commit the lock files eg package.json
 16 | 
 17 | - Fill out issue and pull request(PR) templates properly, if you don't know how, check out previous issues/PR to know how they are filled or this video👇🏾
 18 | 
 19 | #### 👌🏾 How to fill a pull request template
 20 | [pull request template.webm](https://user-images.githubusercontent.com/78784850/195570788-05a6fe61-a9a3-4abe-ae17-936ffd6ea171.webm)
 21 | 
 22 | > # Note: Breaking any of the rules above👆🏽 will get your PR rejected
 23 | 
 24 | ## 👩🏽‍💻 Prerequisite Skills to Contribute
 25 | 
 26 | ### Contribute in project
 27 | 
 28 | - [Node.js](https://nodejs.org/)
 29 | - [TypeScript](https://www.typescriptlang.org/)
 30 | 
 31 | ---
 32 | 
 33 | ## 💥 How to Contribute
 34 | 
 35 | - Take a look at the existing [Issues](https://github.com/Dun-sin/Template-Portfolio/issues) or [create a new issue](https://github.com/Dun-sin/Template-Portfolio/issues/new/choose)!
 36 | - [Fork the Repo](https://github.com/Dun-sin/Template-Portfolio/fork). Then, create a branch for any issue that you are working on. Finally, commit your work.
 37 | - Create a [Pull Request](https://github.com/Dun-sin/Template-Portfolio/compare) (PR), which will be promptly reviewed and given suggestions for improvements by the community.
 38 | - Add screenshots or screen captures to your Pull Request to help us understand the effects of the changes proposed in your PR.
 39 | 
 40 | ---
 41 | 
 42 | ## 🌟 HOW TO MAKE A PULL REQUEST:
 43 | 
 44 | 1. Start by making a Fork of the [Template-Portfolio](https://github.com/Dun-sin/Template-Portfolio) repository. Click on the <a href="https://github.com/Dun-sin/Template-Portfolio/fork"><img src="https://i.imgur.com/G4z1kEe.png" height="21" width="21"></a>Fork symbol at the top right corner.
 45 | 
 46 | 2. Clone your new fork of the repository in the terminal/CLI on your computer with the following command:
 47 | 
 48 | ```bash
 49 | git clone https://github.com/<your-github-username>/Template-Portfolio
 50 | ```
 51 | 
 52 | 3. Navigate to the newly created Template-Portfolio project directory:
 53 | 
 54 | ```bash
 55 | cd Template-Portfolio
 56 | ```
 57 | 
 58 | 4. Set upstream command:
 59 | 
 60 | ```bash
 61 | git remote add upstream https://github.com/Dun-sin/Template-Portfolio.git
 62 | ```
 63 | 
 64 | 5. Create a new branch:
 65 | 
 66 | ```bash
 67 | git checkout -b YourBranchName
 68 | ```
 69 | 
 70 | 6. Sync your fork or your local repository with the origin repository:
 71 | 
 72 | - In your forked repository, click on "Fetch upstream"
 73 | - Click "Fetch and merge"
 74 | 
 75 | ### Alternatively, Git CLI way to Sync forked repository with origin repository:
 76 | 
 77 | ```bash
 78 | git fetch upstream
 79 | ```
 80 | 
 81 | ```bash
 82 | git merge upstream/main
 83 | ```
 84 | 
 85 | ### [Github Docs](https://docs.github.com/en/github/collaborating-with-pull-requests/addressing-merge-conflicts/resolving-a-merge-conflict-on-github) for Syncing
 86 | 
 87 | 7. Make your changes to the source code.
 88 | 
 89 | 8. Stage your changes and commit:
 90 | 
 91 | ⚠️ Make sure not to commit package.json or package-lock.json file
 92 | 
 93 | ```bash
 94 | git cz
 95 | ```
 96 | 
 97 | 9. Push your local commits to the remote repository:
 98 | 
 99 | ```bash
100 | git push origin YourBranchName
101 | ```
102 | 
103 | 10. Create a [Pull Request](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request)!
104 | 
105 | 11. Congratulations! You've made your first contribution to [Template-Portfolio](https://github.com/Dun-sin/template-portfolio/graphs/contributors)!
106 | 
107 | 🏆 After this, the maintainers will review the PR and will merge it if it helps move the Template-Portfolio project forward. Otherwise, it will be given constructive feedback and suggestions for the changes needed to add the PR to the codebase.
108 | 
109 | ---
110 | 
111 | ## 💥 Issues
112 | 
113 | In order to discuss changes, you are welcome to [open an issue](https://github.com/Dun-sin/Template-Portfolio/issues/new/choose) about what you would like to contribute. Enhancements are always encouraged and appreciated.
114 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Dunsin
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # template-portfolio
  2 | This project gives you a template to use and edit for your portfolio instead of building form scratch
  3 | 
  4 | ## How to use
  5 | Click [`Use this template`](https://github.com/Dun-sin/template-portfolio/generate) and it will create a new repo not a fork with all the files of this project for you
  6 | 
  7 | ![image](https://user-images.githubusercontent.com/78784850/198232353-35fa6d2f-5816-4818-9381-a5bf394b146a.png)
  8 | 
  9 | 
 10 | ## 🧑🏾‍💻 Demo
 11 | 
 12 | Check out the website: [Template](https://portfolio-template-olddunsin.vercel.app/)
 13 | 
 14 | ## 👇🏽 Prerequisites to use and contribute
 15 | - [React.js](https://reactjs.org/) - to use
 16 | Before installation, please make sure you have already installed the following tools:
 17 | 
 18 | - [Git](https://git-scm.com/downloads) - to contribute
 19 | - [Node.js](https://nodejs.org/en/download/) - to contribute
 20 | 
 21 | 
 22 | ## 👌🏾 What you have to do to contribute
 23 | 
 24 | - [Read the rules](https://github.com/Dun-sin/template-portfolio/blob/main/CONTRIBUTING.md#rules)
 25 | - [Follow the installation Steps](#%EF%B8%8F-installation-steps)
 26 | - [Follow the contributing Steps](#-after-making-a-change)
 27 | 
 28 | ## 🛠️ Installation Steps
 29 | 
 30 | 1. [Fork](https://github.com/Dun-sin/template-portfolio/fork) the project. Click on the <a href="https://github.com/Dun-sin/template-portfolio/fork"><img src="https://i.imgur.com/G4z1kEe.png" height="15" width="15"></a> icon in the top right to get started
 31 | 2. Clone the project, you can use the following command:
 32 | 
 33 | ```bash
 34 | git clone https://github.com/<your-github-username>/template-portfolio
 35 | ```
 36 | 
 37 | 3. Navigate to the project directory
 38 | 
 39 | ```bash
 40 | cd template-portfolio
 41 | ```
 42 | 
 43 | 4. Install dependencies with npm install
 44 | 
 45 | ```bash
 46 | npm install
 47 | ```
 48 | 
 49 | 5. Run the project
 50 | 
 51 | ```bash
 52 | npm start
 53 | ```
 54 | 
 55 | ## 🥂 After making a change
 56 | 
 57 | 1. Create a new branch
 58 | 
 59 | ```bash
 60 | git checkout -b YourBranchName
 61 | ```
 62 | 
 63 | 2. Add it to staging area
 64 | 
 65 | > NOTE: don't commit the package.json
 66 | 
 67 | ```bash
 68 | git add <path to the file you worked on>
 69 | ```
 70 | 
 71 | 3. Commit your changes with
 72 | 
 73 | ```bash
 74 | git cz
 75 | ```
 76 | 
 77 | 4. Push your changes
 78 | 
 79 | ```bash
 80 | git push
 81 | ```
 82 | 
 83 | ## 👨‍👩‍👦 Community
 84 | 
 85 | Don't forget to join the discord community - [Join us](https://discord.com/invite/ufcysW9q23)
 86 | 
 87 | ## 👩🏽‍💻 Contributing
 88 | 
 89 | - Contributions make the open source community such an amazing place to learn, inspire, and create.
 90 | - Any contributions you make are greatly appreciated.
 91 | - Check out our [contribution guidelines](/CONTRIBUTING.md) for more information.
 92 | 
 93 | ## 🛡️ License
 94 | 
 95 | This template is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 96 | 
 97 | ## 💪🏽 Thanks to all Contributors
 98 | 
 99 | Thanks a lot for spending your time helping template grow. Thanks a lot! Keep rocking🍻
100 | 
101 | [![Contributors](https://contrib.rocks/image?repo=Dun-sin/template-portfolio)](https://github.com/Dun-sin/template-portfolio/graphs/contributors)
102 | 
103 | ## 🙏🏽 Support
104 | 
105 | This project needs a star️ from you. Don't forget to leave a star✨
106 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "portfolio-v2",
 3 | 	"version": "0.1.0",
 4 | 	"private": true,
 5 | 	"dependencies": {
 6 | 		"@emailjs/browser": "^3.11.0",
 7 | 		"@testing-library/jest-dom": "^5.16.5",
 8 | 		"@testing-library/react": "^13.3.0",
 9 | 		"@testing-library/user-event": "^13.5.0",
10 | 		"file-saver": "^2.0.5",
11 | 		"react": "^18.2.0",
12 | 		"react-awesome-reveal": "^4.0.0",
13 | 		"react-dom": "^18.2.0",
14 | 		"react-icons": "^4.4.0",
15 | 		"react-scripts": "5.0.1",
16 | 		"react-scroll": "^1.8.7",
17 | 		"react-typewriter-effect": "^1.1.0",
18 | 		"web-vitals": "^2.1.4"
19 | 	},
20 | 	"scripts": {
21 | 		"start": "react-scripts start",
22 | 		"build": "react-scripts build",
23 | 		"test": "react-scripts test",
24 | 		"eject": "react-scripts eject"
25 | 	},
26 | 	"eslintConfig": {
27 | 		"extends": [
28 | 			"react-app",
29 | 			"react-app/jest"
30 | 		]
31 | 	},
32 | 	"browserslist": {
33 | 		"production": [
34 | 			">0.2%",
35 | 			"not dead",
36 | 			"not op_mini all"
37 | 		],
38 | 		"development": [
39 | 			"last 1 chrome version",
40 | 			"last 1 firefox version",
41 | 			"last 1 safari version"
42 | 		]
43 | 	}
44 | }
45 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<link
 6 | 			href="https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100;0,200;0,300;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
 7 | 			rel="stylesheet"
 8 | 		/>
 9 | 		<link rel="icon" href="./favicon.ico" />
10 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
11 | 		
12 | 
13 | 		<!-- Meta tags for social media -->
14 | 		<meta name="title" content="Developer" />
15 | 		<meta
16 | 			name="description"
17 | 			content="Stack Web Developer who love to build websites with HTML, CSS, JavaScript, ReactJs, NodeJs, Mongodb and Mysql"
18 | 		/>
19 | 
20 | 		<!-- twitter Meta Tags -->
21 | 		<meta property="twitter:card" content="summary_large_image" />
22 | 		<meta property="twitter:url" content="portfolio-template-olddunsin.vercel.app/" />
23 | 		<meta
24 | 			property="twitter:title"
25 | 			content="Developer"
26 | 		/>
27 | 		<meta property="twitter:description" content="Check out my portfolio" />
28 | 
29 | 		<title>Developer</title>
30 | 	</head>
31 | 	<body>
32 | 		<noscript>You need to enable JavaScript to run this app.</noscript>
33 | 		<div id="root"></div>
34 | 		<!--
35 |       This HTML file is a template.
36 |       If you open it directly in the browser, you will see an empty page.
37 | 
38 |       You can add webfonts, meta tags, or analytics to this file.
39 |       The build step will place the bundled scripts into the <body> tag.
40 | 
41 |       To begin the development, run `npm start` or `yarn start`.
42 |       To create a production bundle, use `npm run build` or `yarn build`.
43 |     -->
44 | 	</body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Dun-sin/template-portfolio/a186f1d24ec6d7ee827c11c074e1b9bcfe07c24b/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Dun-sin/template-portfolio/a186f1d24ec6d7ee827c11c074e1b9bcfe07c24b/public/logo512.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import './styles/App.css';
 2 | 
 3 | import { useState } from 'react';
 4 | import { animateScroll } from 'react-scroll';
 5 | import { Fade } from 'react-awesome-reveal';
 6 | 
 7 | // components
 8 | import Home from './Components/Home';
 9 | import Nav from './Components/Nav';
10 | import Projects from './Components/Projects';
11 | import Socials from './Components/Socials';
12 | import About from './Components/About';
13 | import Skills from './Components/Skills';
14 | import Mail from './Components/Mail';
15 | 
16 | // icon
17 | import { CgArrowLongUp } from 'react-icons/cg';
18 | 
19 | function App() {
20 |   const [isDarkMode, setIsDarkMode] = useState(true);
21 | 
22 |   const toggleTheme = () => {
23 |     setIsDarkMode(prevMode => !prevMode);
24 |   }
25 | 
26 |   return (
27 |     <div className={`App ${!isDarkMode ?'light' : ''}`}>
28 |       <div>
29 |         <Nav isDarkMode={isDarkMode} handleToggle={toggleTheme} />
30 |         <Home />
31 |       </div>
32 |       <div className={`dark ${!isDarkMode ?'light' : ''}`}>
33 |         <Fade fraction={.2} triggerOnce>
34 |           <Projects />
35 |         </Fade>
36 |         <Fade fraction={.2} triggerOnce>
37 |           <Socials />
38 |         </Fade>
39 |         <Fade fraction={.2} triggerOnce>
40 |           <About />
41 |         </Fade>
42 |         <Fade fraction={.2} triggerOnce>
43 |           <Skills />
44 |         </Fade>
45 |       </div>
46 |       <div>
47 |         <Fade fraction={.2} triggerOnce>
48 |           <Mail />
49 |         </Fade>
50 |       </div>
51 |       <div className={`dark ${!isDarkMode ?'light' : ''}`}>
52 |         <Fade fraction={.2} triggerOnce>
53 |           <p>Thank you for scrolling💘</p>
54 |           <div className='arrow' onClick={() => animateScroll.scrollToTop()}>
55 |             <CgArrowLongUp />
56 |           </div>
57 |         </Fade>
58 |       </div>
59 |     </div>
60 |   );
61 | }
62 | 
63 | export default App;


--------------------------------------------------------------------------------
/src/Components/About.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import '../styles/About.css'
 4 | 
 5 | const About = () => {
 6 |   const calculate_age = () => {
 7 |     var today = new Date();
 8 |     var birthDate = new Date("1994-10-16");
 9 |     var age_now = today.getFullYear() - birthDate.getFullYear();
10 |     var m = today.getMonth() - birthDate.getMonth();
11 |     if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
12 |       age_now--;
13 |     }
14 |     return age_now;
15 |   }
16 |   return (
17 |     <div className='about' id="about">
18 |       <h2>Get To Know Me</h2>
19 |       <div className="words">
20 |         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam erat velit scelerisque. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Tortor condimentum lacinia quis vel. Netus et malesuada fames ac turpis egestas. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Vestibulum lectus mauris ultrices eros in cursus turpis. Habitant morbi tristique senectus et netus. Enim praesent elementum facilisis leo vel fringilla est. Morbi tempus iaculis urna id volutpat lacus laoreet. Non curabitur gravida arcu ac tortor dignissim convallis aenean et. Lorem ipsum dolor sit amet consectetur adipiscing elit duis tristique. Laoreet sit amet cursus sit amet dictum sit. Odio morbi quis commodo odio aenean sed. Tellus cras adipiscing enim eu turpis egestas pretium aenean pharetra. Arcu felis bibendum ut tristique et egestas. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est.
21 |         Interdum posuere lorem ipsum dolor sit amet consectetur. Purus semper eget duis at tellus at urna condimentum mattis. In nisl nisi scelerisque eu ultrices vitae. Cursus in hac habitasse platea dictumst. Volutpat diam ut venenatis tellus in metus vulputate eu. Blandit massa enim nec dui nunc mattis enim ut. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Porttitor lacus luctus accumsan tortor posuere ac ut. Vitae et leo duis ut diam quam. Lobortis mattis aliquam faucibus purus. Platea dictumst quisque sagittis purus sit amet volutpat consequat mauris. Leo integer malesuada nunc vel. Purus sit amet volutpat consequat mauris nunc. Hendrerit dolor magna eget est lorem ipsum. Sed risus pretium quam vulputate. Adipiscing at in tellus integer.
22 |         Interdum consectetur libero id faucibus nisl. At augue eget arcu dictum. Amet facilisis magna etiam tempor orci eu lobortis elementum nibh. Sit amet tellus cras adipiscing enim eu turpis. Eros in cursus turpis massa tincidunt dui ut. Adipiscing commodo elit at imperdiet dui accumsan. Risus sed vulputate odio ut enim blandit. Adipiscing elit pellentesque habitant morbi tristique senectus et netus. Hendrerit gravida rutrum quisque non. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi.
23 |       </div>
24 |     </div>
25 |   )
26 | }
27 | export default About;
28 | 


--------------------------------------------------------------------------------
/src/Components/Home.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useRef } from 'react'
 2 | 
 3 | import '../styles/Home.css'
 4 | 
 5 | import TypeWriterEffect from 'react-typewriter-effect';
 6 | import { animateScroll } from 'react-scroll';
 7 | import { saveAs } from "file-saver";
 8 | import { Link } from 'react-scroll';
 9 | 
10 | const Home = () => {
11 |   const [number, setNumber] = useState(0);
12 |   const arrayOfWords = ['Tap again', 'Helllo', 'You found this', 'I added this...', 'because it seemed cool', `so here's something`, 'did you know that...', `You can't breathe and talk.`, 'the earth is 71% water.', `It snows in the Sahara Desert
13 | `,]
14 |   const textContent = useRef();
15 |   const handleDownload = () => {
16 |     saveAs(
17 |       "google drive url",
18 |       "Resume.pdf"
19 |     )
20 |   }
21 | 
22 |   const handleChange = () => {
23 |     textContent.current.style.display = 'inline-block';
24 |     textContent.current.innerText = arrayOfWords[number]
25 |     if ((arrayOfWords.length - 1) !== number) {
26 |       setNumber(number + 1)
27 |     }
28 |     if ((arrayOfWords.length - 1) === number) {
29 |       // something will be here soon
30 |       setTimeout(() => {
31 |         textContent.current.style.display = 'none'
32 |         animateScroll.scrollTo(350)
33 |         setNumber(1)
34 |       }, 1000);
35 |     }
36 |   }
37 | 
38 | 
39 |   return (
40 |     <div className='home' id='home'>
41 |       <div className="home-text">
42 |         <h1>
43 |           <span className='gradientText'>
44 |             Hi, I'm Lorem!
45 |           </span>
46 |           <span>
47 |             <span onClick={handleChange}>
48 |               👋🏾
49 |             </span>
50 |             <span ref={textContent} style={{ display: 'none' }}>
51 |               Tap again
52 |             </span>
53 |           </span>
54 |         </h1>
55 |         <TypeWriterEffect
56 |           cursorColor="#1da1f2"
57 |           multiText={[
58 |             'Web Developer',
59 |             "Don't Forget to Scroll"
60 |           ]}
61 |           multiTextLoop={true}
62 |           multiTextDelay={1500}
63 |           typeSpeed={35}
64 |         />
65 |         <div className="btns">
66 |           <Link className='btn1' activeClass="active" to="mail" spy={true} smooth={true} offset={0} duration={500}>
67 |             Hire Me
68 |           </Link>
69 | 
70 |           <div onClick={handleDownload} className='btn2'>View Resume</div>
71 |         </div>
72 |       </div>
73 | 
74 |     </div >
75 |   )
76 | }
77 | 
78 | export default Home;
79 | 


--------------------------------------------------------------------------------
/src/Components/Mail.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useRef, useEffect } from 'react'
  2 | import '../styles/Mail.css'
  3 | 
  4 | import emailjs from '@emailjs/browser';
  5 | 
  6 | const Mail = () => {
  7 |   const radio = useRef();
  8 |   const [toSend, setToSend] = useState({
  9 |     subject: '',
 10 |     name: '',
 11 |     email: '',
 12 |     message: ''
 13 |   });
 14 |   const [isDisabled, setIsDisabled] = useState(false);
 15 |   const valid = {
 16 |     email: false,
 17 |     rest: false
 18 |   }
 19 |   const error = useRef()
 20 |   const formResMsg = useRef()
 21 | 
 22 |   const validation = (email, name, message, subject) => {
 23 |     const acceptedEmail = ['gmail.com', 'yahoo.com', 'yahoo.co.in', 'outlook.com', 'protonmail.com', 'aol.com', 'icloud.com', 'me.com', 'mac.com', 'gmx.com', 'hey.com']
 24 |     if (email.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
 25 |       acceptedEmail.includes(email.split('@')[1]) ?
 26 |         valid.email = true : valid.email = false
 27 |     } else {
 28 |       valid.email = false;
 29 |     }
 30 | 
 31 |     if (name !== '' && subject !== '' && message.length > 100) {
 32 |       valid.rest = true;
 33 |       console.log('here')
 34 |     } else {
 35 |       valid.rest = false;
 36 |     }
 37 |   }
 38 | 
 39 |   const reset = () => {
 40 |     setToSend({
 41 |       subject: '',
 42 |       name: '',
 43 |       email: '',
 44 |       message: ''
 45 |     })
 46 |   }
 47 | 
 48 |   const handleClick = () => {
 49 |     validation(toSend.email, toSend.name, toSend.message, toSend.subject);
 50 |     const condition = Object.values(valid).every((value) => value === true)
 51 |     if (!condition) {
 52 |       error.current.style.display = 'block'
 53 |     } else {
 54 |       // Using email.js to send emails https://www.emailjs.com/docs/sdk/installation/
 55 |       // use .env to store ids and keys from email.js
 56 |       // emailjs.send(serviceID, templateID, toSend, publicKey)
 57 |       //   .then((response) => {
 58 |       //     formResMsg.current.innerText = "Message sent..."
 59 |       //     reset();
 60 |       //   }, (err) => {
 61 |       //     formResMsg.current.innerText = "Failed... " + err.text
 62 |       // });
 63 |       // error.current.style.display = 'none'
 64 |     }
 65 |   }
 66 | 
 67 | 
 68 |   const handleChange = (e) => {
 69 |     setToSend({ ...toSend, [e.target.name]: e.target.value });
 70 |   };
 71 | 
 72 |   useEffect(() => {
 73 |     const arrayOfSub = ['work', 'chat', 'collaboration']
 74 |     if (toSend.subject === '') {
 75 |       setIsDisabled(false)
 76 |     } else {
 77 |       if (!(arrayOfSub.includes(toSend.subject))) {
 78 |         radio.current.checked = false;
 79 |         setIsDisabled(true)
 80 |       }
 81 |     }
 82 |   }, [toSend.subject])
 83 | 
 84 |   return (
 85 |     <div className='mail' id='mail'>
 86 |       <h2>Get In Touch</h2>
 87 |       <div>
 88 |         <div className='entry'>
 89 |           <div>
 90 |             <label htmlFor="name">Name</label>
 91 |             <input type="text" name="name" autoComplete='off' value={toSend.name} onChange={handleChange} />
 92 |           </div>
 93 |           <div>
 94 |             <label htmlFor="email">Email</label>
 95 |             <input type="email" name="email" autoComplete='off' value={toSend.email} onChange={handleChange} />
 96 |           </div>
 97 |           <div className='options'>
 98 |             <div>
 99 |               <input
100 |                 type="radio"
101 |                 name="subject"
102 |                 value='work'
103 |                 id="work"
104 |                 checked={toSend.subject === 'work'}
105 |                 onChange={handleChange}
106 |                 ref={radio}
107 |                 disabled={isDisabled}
108 |               />
109 |               <label htmlFor="work">Work</label>
110 |             </div>
111 |             <div>
112 |               <input
113 |                 type="radio"
114 |                 name="subject"
115 |                 value="collaboration"
116 |                 id="collaboration"
117 |                 checked={toSend.subject === 'collaboration'}
118 |                 onChange={handleChange}
119 |                 ref={radio}
120 |                 disabled={isDisabled}
121 |               />
122 |               <label htmlFor="collaboration">Collaboration</label>
123 |             </div>
124 |             <div>
125 |               <input
126 |                 type="radio"
127 |                 name="subject"
128 |                 value="chat"
129 |                 id='chat'
130 |                 checked={toSend.subject === 'chat'}
131 |                 onChange={handleChange}
132 |                 ref={radio}
133 |                 disabled={isDisabled}
134 |               />
135 |               <label htmlFor="chat">Coffee Chat</label>
136 |             </div>
137 |             <div>
138 |               <input type="text" name="subject" id='other' placeholder='Other' autoComplete='off' onChange={handleChange} />
139 |             </div>
140 |           </div>
141 |           <div>
142 |             <label htmlFor="message">Message</label>
143 |             <textarea name="message" cols="30" rows="10" value={toSend.message} onChange={handleChange}></textarea>
144 |           </div>
145 |           <p style={{ color: 'red !important', display: 'none' }} ref={error}>Something is missing</p>
146 |           <p style={{ color: 'red !important' }} ref={formResMsg}></p>
147 |           <div className='btn' onClick={handleClick}>Send Message</div>
148 |         </div>
149 |       </div>
150 |     </div>
151 |   )
152 | }
153 | 
154 | export default Mail
155 | 


--------------------------------------------------------------------------------
/src/Components/Nav.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | 
 3 | import { Link } from 'react-scroll';
 4 | import { GiHamburgerMenu } from 'react-icons/gi'
 5 | import { FaSun, FaMoon } from 'react-icons/fa'
 6 | 
 7 | import '../styles/Nav.css'
 8 | 
 9 | 
10 | const Nav = ({ isDarkMode, handleToggle }) => {
11 |   const [isOpen, setIsOpen] = useState(true)
12 | 
13 |   const handleClick = () => {
14 |     setIsOpen(!isOpen)
15 |   }
16 | 
17 |   const nav =
18 |     <ul style={{ pointerEvents: 'auto' }}>
19 |       <li><Link onClick={handleClick} activeClass="active" to="projects" spy={true} smooth={true} offset={-80} duration={500}>
20 |         Projects
21 |       </Link></li>
22 |       <li><Link onClick={handleClick} activeClass="active" to="about" spy={true} smooth={true} offset={-80} duration={500}>
23 |         About
24 |       </Link></li>
25 |       <li><Link onClick={handleClick} activeClass="active" to="mail" spy={true} smooth={true} offset={0} duration={500}>
26 |         Contact
27 |       </Link></li>
28 |     </ul>
29 | 
30 |   return (
31 |     <div className='nav'>
32 |       <div className={`header ${!isDarkMode ?'light' : ''}`}>
33 |         <h1>
34 |           <Link activeClass="active" to="home" spy={true} smooth={true} offset={-80} duration={500}>
35 |             Favour
36 |           </Link>
37 |         </h1>
38 |         
39 |         <div className="menu-and-theme">
40 |           <div onClick={handleClick} className="menu">
41 |             <GiHamburgerMenu />
42 |           </div>
43 |           <div className='large'>
44 |             {nav}
45 |           </div>
46 |           <div className={`theme-switch ${!isDarkMode ?'light' : ''}`} onClick={handleToggle} >
47 |             {isDarkMode ? <FaMoon /> : <FaSun />}
48 |           </div>
49 |         </div>
50 |       </div>
51 |       <div className='small' style={{
52 |         display: isOpen ? 'none' : 'flex'
53 |       }}>
54 |         {nav}
55 |       </div>
56 |     </div>
57 |   )
58 | }
59 | 
60 | export default Nav;
61 | 
62 | 


--------------------------------------------------------------------------------
/src/Components/Project.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import '../styles/Project.css'
 3 | 
 4 | const Project = ({ name, desc, techs, liveLink, githubLink, isOpenSource }) => {
 5 |   return (
 6 |     <div className="project">
 7 |       <h2>{name}</h2>
 8 |       <p>{desc}</p>
 9 |       <div className="tech-stack">
10 |         {techs.map(item => <div key={item}>{item}</div>)}
11 |       </div>
12 |       <div className="btns">
13 |         <a href={liveLink} target="_blank" rel="noreferrer">Live</a>
14 |         <a href={githubLink} target="_blank" rel="noreferrer">Github</a>
15 |       </div>
16 |       {isOpenSource && <div className="open">Open Source</div>}
17 |     </div>
18 |   )
19 | }
20 | 
21 | export default Project;
22 | 
23 | 


--------------------------------------------------------------------------------
/src/Components/Projects.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Project from "./Project.jsx";
 3 | import "../styles/Projects.css";
 4 | 
 5 | const Projects = () => {
 6 |   const projectsInfo = [
 7 |     {
 8 |       name: "Project 1",
 9 |       desc: "congue quisque egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat sed",
10 |       liveLink: "website url",
11 |       githubLink: "https://github.com/",
12 |       techs: ["HTML", "CSS", "TypeScript"],
13 |       isOpenSource: true,
14 |     },
15 |     {
16 |       name: "Project 2",
17 |       desc: "congue quisque egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat sed",
18 |       liveLink: "website url",
19 |       githubLink: "https://github.com/",
20 |       techs: ["React", "Node", "MongoDB", "Socket.io", "Redux"],
21 |       isOpenSource: true,
22 |     },
23 |   ];
24 |   return (
25 |     <div className="Projects" id="projects">
26 |       <h2>My Projects</h2>
27 |       <div>
28 |         {projectsInfo.map((project, index) => (
29 |           <Project key={index} {...project} />
30 |         ))}
31 |       </div>
32 |     </div>
33 |   );
34 | };
35 | 
36 | export default Projects;
37 | 


--------------------------------------------------------------------------------
/src/Components/Skills.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import '../styles/Skills.css'
 4 | 
 5 | import { SiJavascript, SiHtml5, SiCss3, SiReact, SiNodedotjs, SiFigma, SiMongodb, SiFirebase, SiTypescript, SiNextdotjs } from 'react-icons/si'
 6 | 
 7 | const Skills = () => {
 8 |   return (
 9 |     <div className='skills'>
10 |       <h2>My Skills</h2>
11 |       <div className="skill">
12 |         <div className="js">
13 |           <SiJavascript />
14 |           <p>JavaScript</p>
15 |         </div>
16 |         <div className="ts">
17 |           <SiTypescript />
18 |           <p>TypeScript</p>
19 |         </div>
20 |         <div >
21 |           <SiNextdotjs />
22 |           <p>Next JS</p>
23 |         </div>
24 |         <div className="html">
25 |           <SiHtml5 />
26 |           <p>HTML</p>
27 |         </div>
28 |         <div className="css">
29 |           <SiCss3 />
30 |           <p>CSS</p>
31 |         </div>
32 |         <div className="react">
33 |           <SiReact />
34 |           <p>React</p>
35 |         </div>
36 |         <div className="node">
37 |           <SiNodedotjs />
38 |           <p>Node JS</p>
39 |         </div>
40 |         <div className="fig">
41 |           <SiFigma />
42 |           <p>Figma</p>
43 |         </div>
44 |         <div className="mon">
45 |           <SiMongodb />
46 |           <p>MongoDB</p>
47 |         </div>
48 |         <div className="fire">
49 |           <SiFirebase />
50 |           <p>Firebase</p>
51 |         </div>
52 |       </div>
53 |     </div>
54 |   )
55 | }
56 | 
57 | export default Skills;


--------------------------------------------------------------------------------
/src/Components/Socials.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { AiFillInstagram, AiFillGithub, AiFillTwitterCircle, AiFillLinkedin } from 'react-icons/ai'
 4 | 
 5 | import '../styles/Socials.css';
 6 | 
 7 | const Socials = () => {
 8 |   return (
 9 |     <div className='socials'>
10 |       <h2>Find Me @ The Web</h2>
11 |       <div className="social">
12 |         <div className='insta'>
13 |           <AiFillInstagram />
14 |           <p>Instagram</p>
15 |           <a href="https://www.instagram.com/dunsincodes" target='_blank' rel='noreferrer'>Let's Connect</a>
16 |         </div>
17 |         <div className='git'>
18 |           <AiFillGithub />
19 |           <p>Github</p>
20 |           <a href="https://github.com/Dun-sin" target='_blank' rel='noreferrer'>Let's Connect</a>
21 |         </div>
22 |         <div className='twit'>
23 |           <AiFillTwitterCircle />
24 |           <p>Twitter</p>
25 |           <a href="https://twitter.com/DunsinWebDev" target='_blank' rel='noreferrer'>Let's Connect</a>
26 |         </div>
27 |         <div className='link'>
28 |           <AiFillLinkedin />
29 |           <p>Linkedin</p>
30 |           <a href="https://linkedin.com/in/favour-faiyetole" target='_blank' rel='noreferrer'>Let's Connect</a>
31 |         </div>
32 |       </div>
33 |     </div>
34 |   )
35 | }
36 | 
37 | export default Socials


--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App'
 4 | import './styles/index.css'
 5 | 
 6 | ReactDOM.createRoot(document.getElementById('root')).render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>
10 | )
11 | 


--------------------------------------------------------------------------------
/src/styles/About.css:
--------------------------------------------------------------------------------
 1 | .about {
 2 | 	padding-bottom: 50px;
 3 | }
 4 | 
 5 | .about .words p {
 6 | 	font-size: calc(1vw + 0.7rem);
 7 | 	font-weight: 350;
 8 | }
 9 | 
10 | .words {
11 | 	margin-top: -20px;
12 | }
13 | 


--------------------------------------------------------------------------------
/src/styles/App.css:
--------------------------------------------------------------------------------
 1 | .App > div {
 2 | 	padding-left: 10rem;
 3 | 	padding-right: 10rem;
 4 | }
 5 | 
 6 | .App.light {
 7 | 	color: #000;
 8 | 	background-color: #f5f5f5;
 9 | 	transition: all 0.5s;
10 | }
11 | 
12 | .App.light .light {
13 | 	color: #fff;
14 | 	background: linear-gradient(to bottom left, #1da1f2, #6253e8);
15 | 	box-shadow: none;
16 | 	transition: all 1s;
17 | }
18 | 
19 | .dark {
20 | 	box-shadow: 30px 20px 5px #232135;
21 | 	background-color: #181721;
22 | 	padding-top: 100px;
23 | 	padding-bottom: 100px;
24 | 	color: #fff;
25 | 	transition: all 0.5s;
26 | }
27 | 
28 | h2 {
29 | 	font-size: calc(1vw + 1rem);
30 | 	font-weight: 500;
31 | }
32 | 
33 | .dark:last-of-type {
34 | 	padding-top: 20px;
35 | 	padding-bottom: 20px;
36 | 	font-size: calc(1vw + 1.1rem);
37 | 	display: flex;
38 | 	align-items: center;
39 | 	flex-wrap: wrap;
40 | 	justify-content: space-between;
41 | }
42 | 
43 | .arrow {
44 | 	background-color: #232135;
45 | 	height: 60px;
46 | 	width: 60px;
47 | 	border-radius: 10px;
48 | 	display: grid;
49 | 	place-items: center;
50 | 	cursor: pointer;
51 | 	transition: all 0.5s;
52 | }
53 | 
54 | .arrow svg {
55 | 	color: #6253e8;
56 | }
57 | 
58 | .light .arrow{
59 | 	background-color: #f5f5f5;
60 | 	transition: all 0.5s;
61 | }
62 | 
63 | @media only screen and (max-width: 800px) {
64 | 	.App > div {
65 | 		padding-left: 2.5rem;
66 | 		padding-right: 2.5rem;
67 | 	}
68 | }
69 | 
70 | @media only screen and (max-width: 418px) {
71 | 	.dark:last-of-type {
72 | 		font-size: calc(1vw + 0.8rem);
73 | 	}
74 | }
75 | 


--------------------------------------------------------------------------------
/src/styles/Home.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 | 	--gradient: linear-gradient(to bottom right, #1da1f2, #6253e8);
  3 | }
  4 | 
  5 | .home {
  6 | 	display: flex;
  7 | 	align-items: center;
  8 | 	justify-content: space-between;
  9 | 	padding-top: 10rem;
 10 | 	padding-bottom: 40px;
 11 | 	position: relative;
 12 | }
 13 | 
 14 | .home-text h1 {
 15 | 	font-size: calc(1vw + 3rem);
 16 | 	height: auto;
 17 | }
 18 | 
 19 | .gradientText {
 20 | 	width: fit-content;
 21 | 	background: var(--gradient);
 22 | 	background-clip: text;
 23 | 	color: transparent;
 24 | }
 25 | 
 26 | .home-text h1 span:last-of-type span:first-of-type {
 27 | 	cursor: pointer;
 28 | }
 29 | 
 30 | .home-text h1 span:last-of-type span:last-of-type {
 31 | 	display: inline-block;
 32 | 	position: absolute;
 33 | 	left: 345px;
 34 | 	top: 180px;
 35 | 	background: transparent;
 36 | 	border: 1px solid #1da1f2;
 37 | 	font-size: calc(1vw + 0.85rem);
 38 | 	width: 200px;
 39 | 	text-align: center;
 40 | 	border-radius: 5px;
 41 | 	transform: rotate(-20deg);
 42 | 	overflow: hidden;
 43 | }
 44 | 
 45 | .react-typewriter-text-wrap {
 46 | 	margin-top: -3rem;
 47 | }
 48 | 
 49 | .home-text .react-typewriter-text {
 50 | 	overflow: hidden;
 51 | 	font-size: calc(1vw + 1.7rem);
 52 | 	font-weight: 300;
 53 | }
 54 | 
 55 | .btns {
 56 | 	margin-top: 0.5rem;
 57 | 	display: flex;
 58 | }
 59 | 
 60 | .btn1,
 61 | .btn2 {
 62 | 	border-radius: 10px;
 63 | 	cursor: pointer;
 64 | 	color: white;
 65 | 	font-weight: 300;
 66 | 	text-decoration: none;
 67 | 	display: grid;
 68 | 	place-items: center;
 69 | }
 70 | 
 71 | .btn1 {
 72 | 	min-height: 35px;
 73 | 	width: 120px;
 74 | 	background: var(--gradient);
 75 | 	margin-right: 10px;
 76 | }
 77 | 
 78 | .btn2 {
 79 | 	width: 150px;
 80 | 	border: double 2px transparent;
 81 | 	background-image: linear-gradient(#232135, #232135),
 82 | 		radial-gradient(circle at top left, #1da1f2, #6253e8);
 83 | 	background-origin: border-box;
 84 | 	background-clip: content-box, border-box;
 85 | }
 86 | 
 87 | @media only screen and (max-width: 1040px) and (min-width: 899px) {
 88 | 	.home {
 89 | 		padding-top: 8rem;
 90 | 	}
 91 | 
 92 | 	.home-text h1 span:last-of-type span:last-of-type {
 93 | 		left: 230px;
 94 | 		top: 140px;
 95 | 		width: 200px;
 96 | 	}
 97 | 
 98 | 	.react-typewriter-text-wrap {
 99 | 		margin-top: -1.5rem;
100 | 	}
101 | }
102 | 
103 | @media only screen and (max-width: 900px) and (min-width: 800px) {
104 | 	.home {
105 | 		padding-top: 8rem;
106 | 	}
107 | 
108 | 	.home-text h1 span:last-of-type span:last-of-type {
109 | 		left: 250px;
110 | 		top: 145px;
111 | 		width: 200px;
112 | 	}
113 | 
114 | 	.react-typewriter-text-wrap {
115 | 		margin-top: -1.5rem;
116 | 	}
117 | 
118 | 	.home-text .react-typewriter-text {
119 | 		line-height: 1.6rem;
120 | 	}
121 | }
122 | 
123 | @media only screen and (max-width: 800px) and (min-width: 600px) {
124 | 	.home {
125 | 		padding-top: 8rem;
126 | 	}
127 | 
128 | 	.home-text h1 span:last-of-type span:last-of-type {
129 | 		left: 280px;
130 | 		top: 145px;
131 | 		width: 200px;
132 | 	}
133 | }
134 | 
135 | @media only screen and (max-width: 600px) {
136 | 	.home {
137 | 		padding-top: 10rem;
138 | 	}
139 | 
140 | 	.home-text h1 span:last-of-type span:last-of-type {
141 | 		left: 200px;
142 | 		top: 155px;
143 | 		width: 200px;
144 | 	}
145 | 
146 | 	.home-text h1 {
147 | 		font-size: calc(1vw + 1.6rem);
148 | 	}
149 | 
150 | 	.home-text .react-typewriter-text {
151 | 		font-size: calc(1vw + 1rem);
152 | 	}
153 | 
154 | 	.react-typewriter-text-wrap {
155 | 		margin-top: -01.5rem;
156 | 	}
157 | 
158 | 	.btn1 {
159 | 		width: 90px;
160 | 	}
161 | 
162 | 	.btn2 {
163 | 		width: 120px;
164 | 	}
165 | }
166 | 
167 | @media only screen and (max-width: 500px) {
168 | 	.home-text h1 span:last-of-type span:last-of-type {
169 | 		top: 140px;
170 | 		left: 63px;
171 | 		width: 150px;
172 | 		transform: rotate(20deg);
173 | 	}
174 | }
175 | 


--------------------------------------------------------------------------------
/src/styles/Mail.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 | 	--input-width: 400px;
  3 | }
  4 | 
  5 | .mail {
  6 | 	padding-top: 80px;
  7 | 	padding-bottom: 80px;
  8 | }
  9 | 
 10 | .entry input,
 11 | .entry textarea {
 12 | 	background-color: #181721;
 13 | 	width: var(--input-width);
 14 | 	border: 1px solid #6253e8;
 15 | 	border-radius: 4px;
 16 | 	caret-color: #6253e8;
 17 | 	padding-left: 10px;
 18 | 	color: #f5f5f5;
 19 | }
 20 | 
 21 | .light .entry input,
 22 | .light .entry textarea{
 23 |   background-color: #f5f5f5;
 24 |   color: #000;
 25 |   transition: all 0.5s;
 26 | }
 27 | 
 28 | .entry input:active,
 29 | .entry textarea:active,
 30 | .entry input:focus,
 31 | .entry textarea:focus {
 32 | 	outline: none;
 33 | 	background-color: #181721;
 34 | }
 35 | 
 36 | .light .entry input:active,
 37 | .light .entry textarea:active,
 38 | .light .entry input:focus,
 39 | .light .entry textarea:focus {
 40 | 	outline: none;
 41 | 	background-color: #f5f5f5;
 42 | }
 43 | 
 44 | .entry input {
 45 | 	min-height: 40px;
 46 | }
 47 | 
 48 | .entry textarea {
 49 | 	padding-top: 10px;
 50 | 	resize: none;
 51 | }
 52 | 
 53 | .entry > div:not(.btn, .options) {
 54 | 	margin-top: 20px;
 55 | 	display: flex;
 56 | 	flex-direction: column;
 57 | }
 58 | 
 59 | .entry > div:not(.btn) label {
 60 | 	margin-bottom: 5px;
 61 | }
 62 | 
 63 | .options {
 64 | 	padding-top: 20px;
 65 | 	display: flex;
 66 | 	justify-content: space-between;
 67 | 	flex-wrap: wrap;
 68 | 	width: var(--input-width);
 69 | }
 70 | 
 71 | .options div {
 72 | 	display: flex;
 73 | 	align-items: center;
 74 | 	flex-wrap: wrap;
 75 | 	padding-top: 10px;
 76 | }
 77 | 
 78 | .options div label {
 79 | 	overflow: hidden;
 80 | }
 81 | 
 82 | [type='radio'] {
 83 | 	padding-top: 5px;
 84 | }
 85 | 
 86 | [type='radio']:checked,
 87 | [type='radio']:not(:checked) {
 88 | 	position: absolute;
 89 | 	left: -9999px;
 90 | }
 91 | [type='radio']:checked + label,
 92 | [type='radio']:not(:checked) + label {
 93 | 	position: relative;
 94 | 	padding-left: 28px;
 95 | 	cursor: pointer;
 96 | 	line-height: 20px;
 97 | 	display: inline-block;
 98 | 	color: #666;
 99 | }
100 | [type='radio']:checked + label:before,
101 | [type='radio']:not(:checked) + label:before {
102 | 	content: '';
103 | 	position: absolute;
104 | 	left: 0;
105 | 	top: 0;
106 | 	width: 18px;
107 | 	height: 18px;
108 | 	border: 1px solid #ddd;
109 | 	border-radius: 100%;
110 | 	background: transparent;
111 | }
112 | [type='radio']:checked + label:after,
113 | [type='radio']:not(:checked) + label:after {
114 | 	content: '';
115 | 	width: 12px;
116 | 	height: 12px;
117 | 	background: #6253e8;
118 | 	position: absolute;
119 | 	top: 4px;
120 | 	left: 4px;
121 | 	border-radius: 100%;
122 | 	-webkit-transition: all 0.2s ease;
123 | 	transition: all 0.2s ease;
124 | }
125 | [type='radio']:not(:checked) + label:after {
126 | 	opacity: 0;
127 | 	-webkit-transform: scale(0);
128 | 	transform: scale(0);
129 | }
130 | [type='radio']:checked + label:after {
131 | 	opacity: 1;
132 | 	-webkit-transform: scale(1);
133 | 	transform: scale(1);
134 | }
135 | 
136 | .btn {
137 | 	cursor: pointer;
138 | 	background-color: #6253e8;
139 | 	width: calc(calc(var(--input-width) / 2) + 20px);
140 | 	min-height: 35px;
141 | 	display: grid;
142 | 	place-items: center;
143 | 	border-radius: 5px;
144 | 	margin-top: 10px;
145 | }
146 | 
147 | .light .btn{
148 | 	color: #fff;
149 | }
150 | 
151 | @media only screen and (max-width: 600px) {
152 | 	:root {
153 | 		--input-width: 97%;
154 | 	}
155 | }
156 | 
157 | @media only screen and (max-width: 531px) {
158 | 	:root {
159 | 		--input-width: 95%;
160 | 	}
161 | }
162 | 
163 | @media only screen and (max-width: 350px) {
164 | 	:root {
165 | 		--input-width: 94%;
166 | 	}
167 | }
168 | 


--------------------------------------------------------------------------------
/src/styles/Nav.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 | 	--padding-width: 10rem;
  3 | }
  4 | 
  5 | .header {
  6 | 	position: fixed;
  7 | 	left: -0px;
  8 | 	top: 0;
  9 | 	padding-top: 1.3rem;
 10 | 	padding-left: var(--padding-width);
 11 | 	padding-right: var(--padding-width);
 12 | 	width: calc(100vw - calc(var(--padding-width) * 2));
 13 | 	z-index: 101;
 14 | 	display: flex;
 15 | 	align-items: center;
 16 | 	justify-content: space-between;
 17 | 	background-color: #232135;
 18 | }
 19 | 
 20 | .header.light {
 21 | 	background: var(--gradient);
 22 | 	color: #f5f5f5;
 23 | 	transition: all 1s;
 24 |   }
 25 | 
 26 | .nav h1 {
 27 | 	font-size: calc(1vw + 1.3rem);
 28 | 	cursor: pointer;
 29 | }
 30 | 
 31 | .nav ul {
 32 | 	display: flex;
 33 | }
 34 | 
 35 | .nav ul li {
 36 | 	list-style: none;
 37 | 	margin-left: 4rem;
 38 | 	border-bottom: solid #232135;
 39 | 	border-image-slice: 1;
 40 | 	border-width: 2px;
 41 | 	font-size: calc(1vw + 0.5rem);
 42 | }
 43 | 
 44 | .nav ul li:hover,
 45 | .nav ul li:active {
 46 | 	cursor: pointer;
 47 | 	border-image-source: linear-gradient(to right, #6253e8, #1da1f2);
 48 | }
 49 | 
 50 | .menu-and-theme{
 51 | 	display: flex;
 52 | 	align-items: center;
 53 | 	justify-content: space-between;
 54 | 	gap: 1.2rem;
 55 | }
 56 | 
 57 | .theme-switch{
 58 | 	margin-left: 3rem;
 59 | 	background: transparent !important;
 60 | 	transition: all 0.6s;
 61 | 	cursor: pointer;
 62 | }
 63 | 
 64 | .theme-switch > svg{
 65 | 	color: #fff;
 66 | 	width: 1.2rem;
 67 | 	height: 1.2rem;
 68 | 	transition: all 1s;
 69 | }
 70 | 
 71 | 
 72 | .menu {
 73 | 	display: none;
 74 | }
 75 | 
 76 | @media only screen and (max-width: 800px) {
 77 | 	:root {
 78 | 		--padding-width: 2.5rem;
 79 | 	}
 80 | 
 81 | 	.large {
 82 | 		display: none;
 83 | 	}
 84 | 
 85 | 	.menu {
 86 | 		display: block;
 87 | 		z-index: 100;
 88 | 		cursor: pointer;
 89 | 	}
 90 | 
 91 | 	.small {
 92 | 		display: flex;
 93 | 		position: fixed;
 94 | 		min-height: 100%;
 95 | 		justify-content: center !important;
 96 | 		align-items: center !important;
 97 | 		right: 0;
 98 | 		top: 0;
 99 | 		min-width: 100%;
100 | 		background-color: #232135;
101 | 		z-index: 16;
102 | 	}
103 | 
104 | 	.light .small{
105 | 		background-color: #1da1f2;
106 | 		color: #fff;
107 | 	}
108 | 
109 | 	.small > ul {
110 | 		flex-direction: column;
111 | 		padding: 0;
112 | 	}
113 | 
114 | 	.small ul li {
115 | 		margin-left: 0;
116 | 		width: fit-content;
117 | 		text-align: center;
118 | 		font-size: calc(1vw + 1.6rem);
119 | 	}
120 | 
121 | 	.theme-switch{
122 | 		margin-left: 0rem;
123 | 		background: transparent !important;
124 | 		transition: all 0.6s;
125 | 	}
126 | }
127 | 


--------------------------------------------------------------------------------
/src/styles/Project.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 | 	--project-width: 250px;
  3 | 	--border-radius: 10px;
  4 | 	--blob-left: 238px;
  5 | }
  6 | 
  7 | .project {
  8 | 	background: rgb(34, 33, 52);
  9 | 	min-width: var(--project-width);
 10 | 	max-width: var(--project-width);
 11 | 	border-radius: var(--border-radius);
 12 | 	padding: 1.5rem;
 13 | 	margin: 0 2rem 2rem 0;
 14 | 	position: relative;
 15 | }
 16 | 
 17 | .light .project {
 18 | 	background-color: #d8e6ff;
 19 | 	color: #000;
 20 | 	transition: all 0.5s;
 21 | }
 22 | 
 23 | .light .open {
 24 | 	background-color: #000;
 25 | 	color: #fff;
 26 | }
 27 | 
 28 | .project > p {
 29 | 	margin-top: -1.2rem;
 30 | }
 31 | 
 32 | .project .tech-stack {
 33 | 	display: flex;
 34 | 	flex-wrap: wrap;
 35 | }
 36 | 
 37 | .light .tech-stack {
 38 | 	color: #fff;
 39 | 	transition: all 0.5s;
 40 | }
 41 | 
 42 | .project .tech-stack div {
 43 | 	min-height: 20px;
 44 | 	min-width: 60px;
 45 | 	max-height: 20px;
 46 | 	max-width: 60px;
 47 | 	font-size: 0.6rem;
 48 | 	padding: 0.4rem;
 49 | 	margin: 0 0.5rem 0.25rem 0;
 50 | 	display: grid;
 51 | 	place-items: center;
 52 | 	background: rgb(25, 23, 32);
 53 | 	border-radius: var(--border-radius);
 54 | }
 55 | 
 56 | .project .btns {
 57 | 	display: flex;
 58 | 	justify-content: space-between;
 59 | 	flex-wrap: wrap;
 60 | }
 61 | 
 62 | .project .btns a {
 63 | 	min-height: calc(var(--project-width) / 8.3);
 64 | 	min-width: calc(var(--project-width) / 2.5);
 65 | 	max-height: calc(var(--project-width) / 8.3);
 66 | 	max-width: calc(var(--project-width) / 2.5);
 67 | 	background: rgb(245, 242, 245);
 68 | 	color: rgb(34, 33, 52);
 69 | 	text-decoration: none;
 70 | 	font-weight: 600;
 71 | 	border-radius: var(--border-radius);
 72 | 	display: grid;
 73 | 	place-items: center;
 74 | 	margin-bottom: 1rem;
 75 | }
 76 | 
 77 | .open {
 78 | 	background: rgb(245, 242, 245);
 79 | 	min-height: calc(var(--project-width) / 4.1);
 80 | 	min-width: calc(var(--project-width) / 4.1);
 81 | 	max-height: calc(var(--project-width) / 4.1);
 82 | 	max-width: calc(var(--project-width) / 4.1);
 83 | 	border-radius: 50% 10px 50% 50%;
 84 | 	position: absolute;
 85 | 	color: rgb(34, 33, 52);
 86 | 	display: grid;
 87 | 	place-items: center;
 88 | 	top: 0;
 89 | 	left: var(--blob-left);
 90 | 	font-size: calc(var(--project-width) / 26);
 91 | 	text-align: center;
 92 | }
 93 | 
 94 | @media screen and (max-width: 430px) {
 95 | 	:root {
 96 | 		--project-width: 200px;
 97 | 		--blob-left: 200px;
 98 | 	}
 99 | 
100 | 	.project {
101 | 		margin: 0 0 2rem 0;
102 | 	}
103 | }
104 | 


--------------------------------------------------------------------------------
/src/styles/Projects.css:
--------------------------------------------------------------------------------
 1 | .Projects {
 2 | 	display: flex;
 3 | 	flex-direction: column;
 4 | 	margin-top: -1.5rem;
 5 | 	margin-bottom: 3rem;
 6 | }
 7 | 
 8 | .Projects > div {
 9 | 	display: flex;
10 | 	flex-direction: row;
11 | 	flex-wrap: wrap;
12 | 	margin-bottom: 2rem;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/styles/Skills.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 | 	--skill-color: black;
 3 |   --skill-color-light: #6253e8;
 4 | 	--container-width: 600px;
 5 | 	--skill-size: calc(var(--container-width) / 5);
 6 | }
 7 | 
 8 | .skills {
 9 | 	width: var(--container-width);
10 | }
11 | 
12 | .skill {
13 | 	display: flex;
14 | 	flex-wrap: wrap;
15 | }
16 | 
17 | .skill div {
18 | 	margin-right: 20px;
19 | 	margin-bottom: 20px;
20 | 	min-height: var(--skill-size);
21 | 	width: var(--skill-size);
22 | 	background-color: #ffffffe6;
23 | 	display: grid;
24 | 	place-items: center;
25 | 	padding: 5px;
26 | 	border-radius: 20px;
27 | }
28 | 
29 | .skill p {
30 | 	color: var(--skill-color);
31 | 	font-weight: 600;
32 | 	margin-bottom: -2px;
33 | }
34 | 
35 | .skill div svg {
36 | 	min-height: calc(var(--skill-size) - 40px);
37 | 	width: calc(var(--skill-size) - 40px);
38 | 	color: var(--skill-color);
39 | 	transition: all 390ms ease-in-out;
40 | 	margin-bottom: -5px;
41 | }
42 | 
43 | .light .skill svg {
44 | 	color: var(--skill-color-light);
45 | 	transition: all 0.5s;
46 |   }
47 | 
48 | .js:hover {
49 | 	--skill-color: #fddd00;
50 | }
51 | .html:hover {
52 | 	--skill-color: #f1662a;
53 | }
54 | .css:hover,
55 | .ts:hover {
56 | 	--skill-color: #1572b6;
57 | }
58 | .react:hover {
59 | 	--skill-color: #00d8ff;
60 | }
61 | .node:hover {
62 | 	--skill-color: #539e43;
63 | }
64 | .fig:hover {
65 | 	--skill-color: #a259ff;
66 | }
67 | .mon:hover {
68 | 	--skill-color: #41a247;
69 | }
70 | .fire:hover {
71 | 	--skill-color: #eeab37;
72 | }
73 | 
74 | @media only screen and (max-width: 600px) {
75 | 	:root {
76 | 		--container-width: 500px;
77 | 	}
78 | }
79 | @media only screen and (max-width: 500px) {
80 | 	:root {
81 | 		--container-width: 380px;
82 | 	}
83 | }
84 | @media only screen and (max-width: 350px) {
85 | 	:root {
86 | 		--container-width: 300px;
87 | 	}
88 | }
89 | 


--------------------------------------------------------------------------------
/src/styles/Socials.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 | 	--social-main-color: white;
 3 | 	--social-size: 200px;
 4 | 	--icon-size: calc(var(--social-size) / 3.75);
 5 | }
 6 | 
 7 | .socials {
 8 | 	padding-bottom: 50px;
 9 | }
10 | 
11 | .social {
12 | 	display: flex;
13 | 	align-items: center;
14 | 	justify-content: space-between;
15 | 	flex-wrap: wrap;
16 | }
17 | 
18 | .social div {
19 | 	display: flex;
20 | 	flex-direction: column;
21 | 	justify-content: center;
22 | 	align-items: center;
23 | 	min-height: var(--social-size);
24 | 	width: calc(var(--social-size) - 50px);
25 | 	margin-top: 20px;
26 | 	background: #181721;
27 | 	border: solid;
28 | 	border-image-slice: 1;
29 | 	border-width: 1px;
30 | 	border-image-source: linear-gradient(
31 | 		60deg,
32 | 		#6253e8,
33 | 		var(--social-main-color)
34 | 	);
35 | }
36 | 
37 | .social div svg {
38 | 	min-height: var(--icon-size);
39 | 	width: var(--icon-size);
40 | 	color: var(--social-main-color);
41 | }
42 | 
43 | .social div p {
44 | 	font-size: 1rem;
45 | 	font-weight: 200;
46 | }
47 | 
48 | .social div a {
49 | 	background-color: var(--social-main-color);
50 | 	text-decoration: none;
51 | 	text-align: center;
52 | 	color: white;
53 | 	max-height: calc(var(--social-size) / 12.5);
54 | 	width: 75%;
55 | 	padding: 10px;
56 | 	border-radius: 10px;
57 | 	font-size: calc(var(--social-size) / 16);
58 | 	overflow: hidden;
59 | }
60 | 
61 | .insta {
62 | 	--social-main-color: rgb(193, 53, 132);
63 | }
64 | 
65 | .git {
66 | 	--social-main-color: rgb(255, 255, 255);
67 | }
68 | 
69 | .git a {
70 | 	color: black !important;
71 | }
72 | 
73 | .twit {
74 | 	--social-main-color: rgb(29, 161, 242);
75 | }
76 | 
77 | .link {
78 | 	--social-main-color: rgb(0, 119, 181);
79 | }
80 | 
81 | @media only screen and (max-width: 386px) {
82 | 	:root {
83 | 		--social-size: 180px;
84 | 	}
85 | }
86 | 


--------------------------------------------------------------------------------
/src/styles/index.css:
--------------------------------------------------------------------------------
 1 | /* width */
 2 | ::-webkit-scrollbar {
 3 | 	width: 3px;
 4 | 	height: 3px;
 5 | }
 6 | 
 7 | /* Track */
 8 | ::-webkit-scrollbar-track {
 9 | 	box-shadow: inset 0 0 5px #232135;
10 | }
11 | 
12 | /* Handle */
13 | ::-webkit-scrollbar-thumb {
14 | 	background: #6253e8;
15 | }
16 | 
17 | /* Handle on hover */
18 | ::-webkit-scrollbar-thumb:hover {
19 | 	background: #6253e8;
20 | }
21 | 
22 | *,
23 | html {
24 | 	overflow-x: hidden;
25 | 	user-select: none;
26 | }
27 | 
28 | body {
29 | 	margin: 0;
30 | 	padding-top: 40px;
31 | 	padding-right: 0;
32 | 	background-color: #232135;
33 | 	color: #f5f5f5;
34 | 	font-family: 'Exo', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
35 | 		'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
36 | 		sans-serif;
37 | 	-webkit-font-smoothing: antialiased;
38 | 	-moz-osx-font-smoothing: grayscale;
39 | 	scroll-behavior: smooth;
40 | 	scrollbar-color: #6253e8 #232135;
41 | 	scrollbar-width: thin;
42 | }
43 | 
44 | code {
45 | 	font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
46 | 		monospace;
47 | }
48 | 


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