Vinayak Singh | Portfolio

├── .gitattributes ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── Images │ ├── VinayakSingh.webp │ └── favicon.webp ├── index.html └── sitemap.xml ├── sitemap.xml ├── src ├── @types │ └── image.d.ts ├── App.tsx ├── assets │ ├── Hello.gif │ ├── VinayakSingh.jpg │ ├── VinayakSingh.webp │ ├── Vinayak_Kumar_Singh_Resume.pdf │ ├── Vinayak_Singh_Resume.pdf │ ├── bootstrap-icon.svg │ ├── css-icon.svg │ ├── download.webp │ ├── email-icon.svg │ ├── external-link-icon.svg │ ├── external-link.svg │ ├── github.svg │ ├── html-icon.svg │ ├── illustration.svg │ ├── instagram.svg │ ├── java.svg │ ├── js-icon.svg │ ├── linkedin.svg │ ├── mysql-icon.svg │ ├── node-icon.svg │ ├── phone-icon.svg │ ├── python.svg │ ├── react-icon.svg │ ├── sass-icon.svg │ ├── shopify.svg │ ├── telegram.svg │ ├── typescript-icon.svg │ ├── vscode-icon.svg │ ├── vue-icon.svg │ ├── whatsapp.svg │ └── wordpress.svg ├── components │ ├── About │ │ ├── About.tsx │ │ └── styles.ts │ ├── Contact │ │ ├── Contact.tsx │ │ └── styles.ts │ ├── Footer │ │ ├── Footer.tsx │ │ └── styles.ts │ ├── Form │ │ ├── Form.tsx │ │ └── styles.ts │ ├── Header │ │ ├── Header.tsx │ │ └── styles.ts │ ├── Hero │ │ ├── Hero.tsx │ │ └── styles.ts │ ├── Main │ │ ├── Main.tsx │ │ └── styles.ts │ └── Project │ │ ├── Project.tsx │ │ └── styles.ts ├── index.tsx └── styles │ └── global.ts ├── tsconfig.json └── yarn.lock /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .vercel 26 | yarn.lock 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Portfolio of Vinayak Singh 2 | 3 |

4 | 5 | This project was created with CRA (Create React App) 6 | 7 | This is my portfolio website to introduce myself, here I put my skills, projects, and contact details. 8 | 9 | ## Technologies used: 10 | - React 11 | - Typescript 12 | - Styled Components 13 | 14 | ## To run this project: 15 | - yarn install 16 | - yarn run start -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@formspree/react": "^2.2.4", 7 | "@testing-library/jest-dom": "^5.14.1", 8 | "@testing-library/react": "^12.0.0", 9 | "@testing-library/user-event": "^13.2.1", 10 | "@types/jest": "^27.0.1", 11 | "@types/node": "^16.7.13", 12 | "@types/react": "^17.0.20", 13 | "@types/react-dom": "^17.0.9", 14 | "@vercel/analytics": "^1.4.1", 15 | "react": "^17.0.2", 16 | "react-animate-on-scroll": "^2.1.5", 17 | "react-dom": "^17.0.2", 18 | "react-google-recaptcha": "^2.1.0", 19 | "react-router-dom": "^6.2.1", 20 | "react-router-hash-link": "^2.4.3", 21 | "react-scripts": "^5.0.1", 22 | "react-toastify": "^8.1.0", 23 | "react-tsparticles": "^1.37.5", 24 | "styled-components": "^5.3.3", 25 | "typescript": "^4.4.2", 26 | "validator": "^13.7.0", 27 | "web-vitals": "^2.1.0" 28 | }, 29 | "scripts": { 30 | "start": "react-scripts start", 31 | "build": "react-scripts build", 32 | "test": "react-scripts test", 33 | "eject": "react-scripts eject" 34 | }, 35 | "eslintConfig": { 36 | "extends": [ 37 | "react-app", 38 | "react-app/jest" 39 | ] 40 | }, 41 | "browserslist": { 42 | "production": [ 43 | ">0.2%", 44 | "not dead", 45 | "not op_mini all" 46 | ], 47 | "development": [ 48 | "last 1 chrome version", 49 | "last 1 firefox version", 50 | "last 1 safari version" 51 | ] 52 | }, 53 | "devDependencies": { 54 | "@types/react-animate-on-scroll": "^2.1.5", 55 | "@types/react-google-recaptcha": "^2.1.2", 56 | "@types/react-router-hash-link": "^2.4.4", 57 | "@types/styled-components": "^5.1.18", 58 | "@types/validator": "^13.7.1" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /public/Images/VinayakSingh.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeVinayak/Portfolio-v2/4543048dbd0179950879182b4cbfe6c228a775d7/public/Images/VinayakSingh.webp -------------------------------------------------------------------------------- /public/Images/favicon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeVinayak/Portfolio-v2/4543048dbd0179950879182b4cbfe6c228a775d7/public/Images/favicon.webp -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Vinayak Singh | Portfolio 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |

35 | 36 | -------------------------------------------------------------------------------- /public/sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | http://www.vinayaksingh.com/ 5 | 2023-01-01 6 | weekly 7 | 1.0 8 | 9 | -------------------------------------------------------------------------------- /sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | http://www.vinayaksingh.com/ 5 | 2023-01-01 6 | weekly 7 | 1.0 8 | 9 | -------------------------------------------------------------------------------- /src/@types/image.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.svg'; 2 | declare module '*.pdf'; 3 | declare module '*.png'; 4 | declare module '*.jpg'; 5 | declare module '*.gif'; 6 | declare module '*.webp'; -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // import { useEffect } from 'react' 3 | import { Footer } from './components/Footer/Footer' 4 | import { Header } from './components/Header/Header' 5 | import { Main } from './components/Main/Main' 6 | import { GlobalStyle } from './styles/global' 7 | import { Analytics } from "@vercel/analytics/react" 8 | 9 | import 'react-toastify/dist/ReactToastify.css' 10 | function App() { 11 | return ( 12 | <> 13 | 14 |

15 |

16 | 17 | 18 | 19 | ) 20 | } 21 | 22 | export default App 23 | -------------------------------------------------------------------------------- /src/assets/Hello.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeVinayak/Portfolio-v2/4543048dbd0179950879182b4cbfe6c228a775d7/src/assets/Hello.gif -------------------------------------------------------------------------------- /src/assets/VinayakSingh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeVinayak/Portfolio-v2/4543048dbd0179950879182b4cbfe6c228a775d7/src/assets/VinayakSingh.jpg -------------------------------------------------------------------------------- /src/assets/VinayakSingh.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeVinayak/Portfolio-v2/4543048dbd0179950879182b4cbfe6c228a775d7/src/assets/VinayakSingh.webp -------------------------------------------------------------------------------- /src/assets/Vinayak_Kumar_Singh_Resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeVinayak/Portfolio-v2/4543048dbd0179950879182b4cbfe6c228a775d7/src/assets/Vinayak_Kumar_Singh_Resume.pdf -------------------------------------------------------------------------------- /src/assets/Vinayak_Singh_Resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeVinayak/Portfolio-v2/4543048dbd0179950879182b4cbfe6c228a775d7/src/assets/Vinayak_Singh_Resume.pdf -------------------------------------------------------------------------------- /src/assets/bootstrap-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | -------------------------------------------------------------------------------- /src/assets/css-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 40 | -------------------------------------------------------------------------------- /src/assets/download.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeVinayak/Portfolio-v2/4543048dbd0179950879182b4cbfe6c228a775d7/src/assets/download.webp -------------------------------------------------------------------------------- /src/assets/email-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 14 | -------------------------------------------------------------------------------- /src/assets/external-link-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/external-link.svg: -------------------------------------------------------------------------------- 1 | 2 | 7 | -------------------------------------------------------------------------------- /src/assets/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/html-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 41 | -------------------------------------------------------------------------------- /src/assets/illustration.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/java.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/js-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/linkedin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/mysql-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | -------------------------------------------------------------------------------- /src/assets/node-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 7 | -------------------------------------------------------------------------------- /src/assets/phone-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/python.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/react-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/sass-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 7 | -------------------------------------------------------------------------------- /src/assets/shopify.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | -------------------------------------------------------------------------------- /src/assets/telegram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/typescript-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 9 | -------------------------------------------------------------------------------- /src/assets/vscode-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 7 | -------------------------------------------------------------------------------- /src/assets/vue-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 9 | -------------------------------------------------------------------------------- /src/assets/whatsapp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/wordpress.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/About/About.tsx: -------------------------------------------------------------------------------- 1 | import { Container } from "./styles"; 2 | import VinayakSingh from "../../assets/VinayakSingh.webp"; 3 | import python from "../../assets/python.svg" 4 | import java from "../../assets/java.svg" 5 | import wordpress from "../../assets/wordpress.svg"; 6 | import shopify from "../../assets/shopify.svg"; 7 | import htmlIcon from "../../assets/html-icon.svg"; 8 | import cssIcon from "../../assets/css-icon.svg"; 9 | import jsIcon from "../../assets/js-icon.svg"; 10 | // import nodeIcon from "../../assets/node-icon.svg"; 11 | import reactIcon from "../../assets/react-icon.svg"; 12 | import typescriptIcon from "../../assets/typescript-icon.svg"; 13 | import vueIcon from "../../assets/vue-icon.svg"; 14 | import boostrapIcon from "../../assets/bootstrap-icon.svg"; 15 | import ScrollAnimation from "react-animate-on-scroll"; 16 | 17 | export function About() { 18 | return ( 19 | 20 |

21 | 22 |

About me

23 | 24 | 25 |

26 | Hi there! I'm Vinayak, an enthusiastic Software Engineer skilled in web development, machine learning, and scalable software solutions 27 |

28 | 29 | 30 |

31 | I build responsive web applications, fine-tune ML models, and implement robust backend services. 32 |

33 | 34 | 35 |

36 | I also work with CMS platforms like WordPress and Shopify to streamline content management. 37 |

38 | 39 | 40 |

41 |

Education:

42 |

Master of Computer Applications (MCA)

43 |

Vellore Institute of Technology, Chennai | July 2023 - Present

44 |

8.09 CGPA

45 |

46 | 47 | 48 |

49 |

Experience:

Software Developer

50 |

KIWIS AND BROWNIES IT SOLUTIONS | October 2024 - Present

51 |

Bangalore, India

52 |

53 | 54 | 55 | 56 |

Here are my main skills:

57 | 58 |

59 |

60 | 61 | python

62 | 63 |

64 |

65 | 66 | java

67 | 68 |

69 |

70 | 71 | JavaScript

72 | 73 |

74 |

75 | 76 | React

77 | 78 |

79 |

80 | 81 | Typescript

82 | 83 |

84 |

85 | 86 | Vue

87 | 88 |

89 |

90 | 91 | Wordpress

92 | 93 |

94 |

95 | 96 | shopify

97 | 98 |

99 |

100 | 101 | Html

102 | 103 |

104 |

105 | 106 | Css

107 | 108 |

109 |

110 | 111 | bootstrap

112 | 113 |

114 |

115 |

116 |

117 | 118 | Vinayak Singh

119 | 120 |

121 | 122 | ) 123 | } 124 | -------------------------------------------------------------------------------- /src/components/About/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Container = styled.section` 4 | margin-top: 12rem; 5 | display: grid; 6 | grid-template-columns: 1fr 1fr; 7 | gap: 2rem; 8 | 9 | .hard-skills{ 10 | margin-top: 1.6rem; 11 | display: flex; 12 | align-items: center; 13 | flex-wrap: wrap; 14 | gap: 1.8rem; 15 | } 16 | .hability{ 17 | display: flex; 18 | flex-direction: column; 19 | align-items: center; 20 | 21 | img{ 22 | width: 3.4rem; 23 | } 24 | } 25 | 26 | h2{ 27 | display: inline-block; 28 | margin-bottom: 2rem; 29 | // border-bottom: 0.2rem solid var(--blue); 30 | font-size :3rem; 31 | margin-top: 0rem; 32 | color: var(--green); 33 | } 34 | 35 | h3{ 36 | margin-top: 2rem; 37 | color: var(--green); 38 | } 39 | 40 | p{ 41 | font-size: 1.8rem; 42 | letter-spacing: 0.1rem; 43 | font-weight: 500; 44 | } 45 | 46 | 47 | 48 | .about-image{ 49 | text-align: center; 50 | img{ 51 | margin-top: 2rem; 52 | width: 75%; 53 | filter: grayscale(0); 54 | transition: filter 0.5s; 55 | &:hover{ 56 | filter: grayscale(0); 57 | } 58 | } 59 | } 60 | 61 | @media only screen and (max-width: 480px) { 62 | .about-image { 63 | max-width: 100%; 64 | margin-top: 4rem; 65 | img{ 66 | margin-top: 2rem; 67 | width: 100%; 68 | filter: grayscale(0); 69 | transition: filter 0.5s; 70 | &:hover{ 71 | filter: grayscale(0); 72 | } 73 | } 74 | } 75 | 76 | @media (max-width: 960px){ 77 | display: block; 78 | text-align: center; 79 | 80 | .hard-skills{ 81 | justify-content: center; 82 | } 83 | .about-image{ 84 | display: flex; 85 | max-width: 100%; 86 | img{ 87 | margin-top: 2rem; 88 | width: 100%; 89 | filter: grayscale(0); 90 | transition: filter 0.5s; 91 | &:hover{ 92 | filter: grayscale(0); 93 | } 94 | } 95 | 96 | 97 | } 98 | 99 | ` -------------------------------------------------------------------------------- /src/components/Contact/Contact.tsx: -------------------------------------------------------------------------------- 1 | import { Container } from "./styles"; 2 | import emailIcon from "../../assets/email-icon.svg"; 3 | import phoneIcon from "../../assets/phone-icon.svg" 4 | import { Form } from "../Form/Form"; 5 | 6 | 7 | export function Contact(){ 8 | 9 | return( 10 | 11 |

12 |

Contact

13 |

Ready to get started on your project?

14 |

Contact me now for a Free consultation.

15 |

16 |

17 |

18 |

19 | vinayak@vinayaksingh.com 20 |

21 |

22 |

23 | (+91) 9630576848 24 |

25 |

26 | 27 | 28 | ) 29 | } -------------------------------------------------------------------------------- /src/components/Contact/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | 4 | export const Container = styled.section` 5 | margin-top: 10rem; 6 | 7 | header{ 8 | text-align: center; 9 | h2{ 10 | text-align: center; 11 | font-size: 4rem; 12 | } 13 | p{ 14 | color: var(--green); 15 | font-weight: 500; 16 | } 17 | } 18 | 19 | .contacts{ 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | gap: 2rem; 24 | place-items: center; 25 | margin-top: 1.5rem; 26 | div{ 27 | display: flex; 28 | align-items: center; 29 | justify-content: center; 30 | width: 50%; 31 | max-width: 30rem; 32 | gap: 2rem; 33 | background-color: var(--green); 34 | border-radius: 1.4rem; 35 | padding: 1.6rem 2.8rem; 36 | transition: background-color 0.25s; 37 | img{ 38 | width: 4rem; 39 | } 40 | a{ 41 | color: var(--black); 42 | font-weight: 500; 43 | } 44 | &:hover{ 45 | background-color: var(--pink); 46 | a{ 47 | color: #FFF; 48 | } 49 | } 50 | } 51 | } 52 | 53 | 54 | @media(max-width: 960px){ 55 | .contacts{ 56 | flex-direction: column; 57 | div{ 58 | width: 100%; 59 | 60 | } 61 | } 62 | } 63 | 64 | ` 65 | /* old one - 2/1/2023 - 66 | @media(max-width: 960px){ 67 | .contacts{ 68 | flex-direction: column; 69 | div{ 70 | width: 100%; 71 | flex-direction: column; 72 | } 73 | } 74 | 75 | */ 76 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.tsx: -------------------------------------------------------------------------------- 1 | import { Container } from './styles' 2 | import reactIcon from '../../assets/react-icon.svg' 3 | import linkedin from '../../assets/linkedin.svg' 4 | import githubIcon from '../../assets/github.svg' 5 | import whatsapp from '../../assets/whatsapp.svg' 6 | import telegram from '../../assets/telegram.svg' 7 | import instagramIcon from '../../assets/instagram.svg' 8 | 9 | export function Footer() { 10 | return ( 11 | 12 | 13 | www.vinayak 14 | singh.in 15 | 16 |

17 |

18 | This Website was made with React 19 | {/* ❤️ */} 20 |

21 |

22 |

23 | 28 |

29 | 30 | 35 | GitHub

36 | 37 | 42 |

43 | 44 | 49 |

50 | 51 | 56 | Instagram

57 | 58 |

59 | 60 | ) 61 | } 62 | -------------------------------------------------------------------------------- /src/components/Footer/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | 4 | export const Container = styled.footer` 5 | background-color: #2b2b2b; 6 | padding: 3rem 15rem; 7 | margin-top: 10rem; 8 | display: flex; 9 | align-items: center; 10 | justify-content: space-between; 11 | 12 | 13 | .logo{ 14 | font-size: 2.8rem; 15 | } 16 | 17 | p{ 18 | letter-spacing: 0.2rem; 19 | display: flex; 20 | align-items: center; 21 | gap: 0.5rem; 22 | img{ 23 | width: 2.6rem; 24 | animation: spinning 5s infinite linear; 25 | } 26 | } 27 | .social-media{ 28 | display: flex; 29 | align-items: center; 30 | justify-content: space-between; 31 | gap: 1rem; 32 | 33 | img,span{ 34 | font-size: 3rem; 35 | width: 3rem; 36 | } 37 | } 38 | 39 | 40 | @keyframes spinning { 41 | 0%{ 42 | transform: rotate(0); 43 | } 44 | 100%{ 45 | transform: rotate(360deg); 46 | } 47 | } 48 | 49 | @media(max-width: 800px){ 50 | padding: 4rem 10rem; 51 | flex-direction: column; 52 | gap: 2rem; 53 | text-align: center; 54 | } 55 | @media(max-width: 600px){ 56 | padding: 4rem 1rem; 57 | p{ 58 | font-size: 1.2rem; 59 | } 60 | } 61 | ` -------------------------------------------------------------------------------- /src/components/Form/Form.tsx: -------------------------------------------------------------------------------- 1 | import { Container, ContainerSucces } from './styles' 2 | import { useForm, ValidationError } from '@formspree/react' 3 | import { toast, ToastContainer } from 'react-toastify' 4 | import ReCAPTCHA from 'react-google-recaptcha' 5 | import { useEffect, useState } from 'react' 6 | import validator from 'validator' 7 | 8 | export function Form() { 9 | const [state, handleSubmit] = useForm('xknkpqry') 10 | const [validEmail, setValidEmail] = useState(false) 11 | const [isHuman, setIsHuman] = useState(false) 12 | const [message, setMessage] = useState('') 13 | function verifyEmail(email: string) { 14 | if (validator.isEmail(email)) { 15 | setValidEmail(true) 16 | } else { 17 | setValidEmail(false) 18 | } 19 | } 20 | useEffect(() => { 21 | if (state.succeeded) { 22 | toast.success('Email successfully sent!', { 23 | position: toast.POSITION.BOTTOM_LEFT, 24 | pauseOnFocusLoss: false, 25 | closeOnClick: true, 26 | hideProgressBar: false, 27 | toastId: 'succeeded', 28 | }) 29 | } 30 | }) 31 | if (state.succeeded) { 32 | return ( 33 | 34 |

Thanks for getting in touch!

35 | 42 | 43 | 44 | ) 45 | } 46 | return ( 47 | 48 |

Get in touch using the form

49 |

50 | { 56 | verifyEmail(e.target.value) 57 | }} 58 | required 59 | /> 60 | 61 |

{
67 |             setMessage(e.target.value)
68 |           }}
69 |         />
70 |         <ValidationError
71 |           prefix="Message"
72 |           field="message"
73 |           errors={state.errors}
74 |         />
75 |         <ReCAPTCHA
76 |           sitekey="6Lfj9NYfAAAAAP8wPLtzrsSZeACIcGgwuEIRvbSg"
77 |           onChange={(e) => {
78 |             setIsHuman(true)
79 |           }}
80 |         ></ReCAPTCHA>
81 |         <button
82 |           type="submit"
83 |           disabled={state.submitting || !validEmail || !message || !isHuman}
84 |         >
85 |           Submit
86 |         </button>
87 |       </form>
88 |       <ToastContainer />
89 |     </Container>
90 |   )
91 | }
92 |

--------------------------------------------------------------------------------
/src/components/Form/styles.ts:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | 
 4 | export const Container = styled.div`
 5 |   margin-top: 3rem;
 6 |   display: grid;
 7 |   place-items: center;
 8 |   h2{
 9 |     text-align: center;
10 |     margin-bottom: 2rem;
11 |   }
12 |   form{
13 |     display: flex;
14 |     flex-direction: column;
15 |     text-align: center;
16 |     align-items: center;
17 |     gap: 1rem;
18 |     width: 100%;
19 |     input, textarea{
20 |       width: 60rem;
21 |       padding: 1rem 2rem;
22 |       border-radius: 1.6rem;
23 |       outline: none;
24 |       border: none;
25 |       background:none;
26 |       border: 1px solid #FFF;
27 |       color: white;
28 |       font-weight: 600;
29 |       &::placeholder{
30 |         color: #FFF;
31 |       }
32 |     }
33 | 
34 |     textarea{
35 |       height: 20rem;
36 |       overflow-y: auto;
37 |       resize: none;
38 |     }
39 | 
40 |     button{
41 |       padding: 1rem 6rem;
42 |       text-transform: uppercase;
43 |     }
44 |   
45 |   }
46 | 
47 |   @media (max-width: 740px){
48 |     form{
49 |       width: 100%;
50 |       
51 |       input,textarea{
52 |         width: 100%;
53 |       }
54 |     }
55 |   }
56 | `
57 | 
58 | 
59 | export const ContainerSucces = styled.div`
60 |   margin-top: 10rem;
61 |   text-align: center;
62 | 
63 |   button{
64 |     border-radius: 0.6rem;
65 |     padding: 1rem;
66 |     margin-top: 0.8rem;
67 |     text-transform: uppercase;
68 |     text-align: center;
69 |     color: #fbfbfb;
70 |   }
71 | `

--------------------------------------------------------------------------------
/src/components/Header/Header.tsx:
--------------------------------------------------------------------------------
 1 | import { Container } from './styles'
 2 | import { BrowserRouter as Router } from 'react-router-dom'
 3 | import { NavHashLink, HashLink } from 'react-router-hash-link'
 4 | import { useState } from 'react'
 5 | import Resume from '../../assets/Vinayak_Singh_Resume.pdf'
 6 | export function Header() {
 7 |   const [isActive, setActive] = useState(false)
 8 |   function toggleTheme() {
 9 |     let html = document.getElementsByTagName('html')[0]
10 |     html.classList.toggle('light')
11 |   }
12 |   function closeMenu() {
13 |     setActive(false)
14 |   }
15 |   return (
16 |     <Container className="header-fixed">
17 |       <Router>
18 |         <HashLink smooth to="#home" className="logo">
19 |           <span>{"<Vinayak "}</span>
20 |           <span>{" Singh/>"}</span>
21 |         </HashLink>
22 |         <input
23 |           onChange={toggleTheme}
24 |           className="container_toggle"
25 |           type="checkbox"
26 |           id="switch"
27 |           name="mode"
28 |         />
29 |         <label htmlFor="switch">Toggle</label>
30 |         <nav className={isActive ? 'active' : ''}>
31 |           <NavHashLink smooth to="#home" onClick={closeMenu}>
32 |             Home
33 |           </NavHashLink>
34 |           <NavHashLink smooth to="#about" onClick={closeMenu}>
35 |             About me
36 |           </NavHashLink>
37 |           <NavHashLink smooth to="#project" onClick={closeMenu}>
38 |             Project
39 |           </NavHashLink>
40 |           <NavHashLink smooth to="#contact" onClick={closeMenu}>
41 |             Contact
42 |           </NavHashLink>
43 |           <a href={Resume} download className="button">
44 |             Resume
45 |           </a>
46 |         </nav>
47 |         <div
48 |           aria-expanded={isActive ? 'true' : 'false'}
49 |           aria-haspopup="true"
50 |           aria-label={isActive ? 'Fechar menu' : 'Abrir menu'}
51 |           className={isActive ? 'menu active' : 'menu'}
52 |           onClick={() => {
53 |             setActive(!isActive)
54 |           }}
55 |         ></div>
56 |       </Router>
57 |     </Container>
58 |   )
59 | }
60 |

--------------------------------------------------------------------------------
/src/components/Header/styles.ts:
--------------------------------------------------------------------------------
  1 | import styled from "styled-components";
  2 | 
  3 | 
  4 | export const Container = styled.header`
  5 |   display: flex;
  6 |   justify-content: space-between;
  7 |   align-items: center;
  8 |   padding: 1.8rem 10rem;
  9 |   
 10 |   background-color: #21212150;
 11 |   
 12 |   backdrop-filter: blur(6px);
 13 | 
 14 |   position: fixed;
 15 |   top: 0;
 16 |   left: 0;
 17 |   width: 100vw;
 18 |   z-index: 1000;
 19 | 
 20 |   nav{
 21 |     display: flex;
 22 |     align-items: center;
 23 |     gap: 1.8rem;
 24 |     a{
 25 |       color: #FFFF;
 26 |       padding: 0.6rem;
 27 |       font-family: 'Red Hat Display', sans-serif;
 28 |       font-weight: 500;
 29 |       text-transform: uppercase;
 30 |       transition: filter 0.25s;
 31 | 
 32 |       &.button{
 33 |         padding: 0.6rem 2rem;
 34 |       }
 35 | 
 36 |       &:hover{
 37 |         filter: brightness(0.6);
 38 |       }
 39 |     }
 40 | 
 41 |   }
 42 | 
 43 |   .menu-container{
 44 |     cursor: pointer;
 45 |     padding: 0.6rem 0;
 46 |   }
 47 | 
 48 |   .menu{
 49 |     width: 2rem;
 50 |     height: 0.2rem;
 51 |     background: #FFFF;
 52 |     position: relative;
 53 |     cursor: pointer;
 54 |     display: none;
 55 | 
 56 |     &:before{
 57 |       bottom: 0.5rem;
 58 |     }
 59 |     &:after{
 60 |       top: 0.5rem;
 61 |     }
 62 | 
 63 | 
 64 |     &.active:before{
 65 |       bottom: 0;
 66 |       transform: rotate(45deg);
 67 |     }
 68 | 
 69 |     &.active:after{
 70 |       top: 0;
 71 |       transform: rotate(135deg);
 72 |     }
 73 | 
 74 |     &.active{
 75 |       background-color: rgba(0, 0, 0, 0);
 76 |     }
 77 | 
 78 |   }
 79 | 
 80 |   .menu:before, .menu:after {
 81 |     content: "";
 82 |     display: block;
 83 |     position: absolute;
 84 |     width: 100%;
 85 |     height: 0.2rem;
 86 |     background: #FFFF;
 87 |     cursor: pointer;
 88 |     transition: .6s;
 89 |   }
 90 | 
 91 | 
 92 |   input[type=checkbox] {
 93 |     height: 0;
 94 |     width: 0;
 95 |     visibility: hidden;
 96 |     outline: none;
 97 |   }
 98 | 
 99 |   label {
100 |     cursor: pointer;
101 |     text-indent: -9999px;
102 |     width: 55px;
103 |     height: 30px;
104 |     background: var(--green);
105 |     display: block;
106 |     justify-content: center;
107 |     align-items: center;
108 |     -webkit-border-radius: 100px;
109 |     -moz-border-radius: 100px;
110 |     border-radius: 100px;
111 |     position: relative;
112 |     margin-left: auto;
113 |     right: 10px;
114 |   }
115 | 
116 |   @media only screen and (max-width: 800px) {
117 |     label {
118 |     position: relative;
119 |    }
120 |   }
121 | 
122 |   label:after {
123 |     content: '';
124 |     background: #FFF;
125 |     width: 20px;
126 |     height: 20px;
127 |     -webkit-border-radius: 50%;
128 |     -moz-border-radius: 50%;
129 |     border-radius: 50%;
130 |     position: absolute;
131 |     top: 5px;
132 |     left: 4px;
133 |    transition: cubic-bezier(0.68, -0.55, 0.27, 01.55) 320ms;
134 |   }
135 | 
136 |   input:checked + label {
137 |     background: var(--pink);
138 |   }
139 | 
140 |   input:checked + label:after {
141 |     left: calc(100% - 5px);
142 |     -webkit-transform: translateX(-100%);
143 |     -moz-transform: translateX(-100%);
144 |     -ms-transform: translateX(-100%);
145 |     -o-transform: translateX(-100%);
146 |     transform: translateX(-100%);
147 |   }
148 | 
149 |   @media (max-width: 960px){
150 |     padding: 1.8rem 3rem;
151 | 
152 |     .menu{
153 |       display: block;
154 |     }
155 | 
156 |     nav {
157 |       -ms-overflow-style: none;
158 |       scrollbar-width: none;
159 |       overflow: hidden;
160 |       opacity: 0;
161 |       visibility: hidden;
162 |       flex-direction: column;
163 |       justify-content: center;
164 |       align-items: center;
165 |       position: fixed;
166 |       width: 100vw;
167 |       height: 100vh;
168 |       background: var(--blue);
169 |       top: 0;
170 |       left: 0;
171 |       transition: opacity 0.25s;
172 |       background-color: var(--green);
173 | 
174 |       a.button{
175 |         background-color: var(--pink);
176 |       }
177 | 
178 |       &.active{
179 |         opacity: 1;
180 |         visibility: visible;
181 |       }
182 |     }
183 |   }
184 |   
185 | `

--------------------------------------------------------------------------------
/src/components/Hero/Hero.tsx:
--------------------------------------------------------------------------------
 1 | import { BrowserRouter } from "react-router-dom"
 2 | import { Container } from "./styles"
 3 | import ScrollAnimation from "react-animate-on-scroll"
 4 | import Illustration from "../../assets/illustration.svg"
 5 | import { NavHashLink } from "react-router-hash-link"
 6 | import linkedin from '../../assets/linkedin.svg'
 7 | import githubIcon from '../../assets/github.svg'
 8 | import whatsapp from '../../assets/whatsapp.svg'
 9 | import Hello from '../../assets/Hello.gif'
10 | import telegram from '../../assets/telegram.svg'
11 | export function Hero() {
12 |   return (
13 |     <Container id="home">
14 |       <div className="hero-text">
15 |         <ScrollAnimation animateIn="fadeInUp">
16 |           <p>Hello <img src={Hello} alt="Hello" width="20px"/>, I'm</p>
17 |         </ScrollAnimation>
18 |         <ScrollAnimation animateIn="fadeInUp" delay={0.2 * 1000}>
19 |           <h1>Vinayak Singh</h1>
20 |         </ScrollAnimation>
21 |         <ScrollAnimation animateIn="fadeInUp" delay={0.4 * 1000}>
22 |           <h3>Software Engineer</h3>
23 |         </ScrollAnimation>
24 |         <ScrollAnimation animateIn="fadeInUp" delay={0.6 * 1000}>
25 |           <p className="small-resume">1 Year Experience</p>
26 |         </ScrollAnimation>
27 |         <ScrollAnimation animateIn="fadeInUp" delay={0.8 * 1000}>
28 |           <BrowserRouter>
29 |             <NavHashLink smooth to="#contact" className="button">Contact</NavHashLink>
30 |           </BrowserRouter>
31 |         </ScrollAnimation>
32 |         <ScrollAnimation animateIn="fadeInUp" delay={1 * 1000}>
33 |       <div className="social-media"><a
34 |         href="https://www.linkedin.com/in/codevinayak"
35 |         target="_blank"
36 |         rel="noreferrer"
37 |       >
38 |         <img src={linkedin} alt="Linkedin" />
39 |       </a>
40 |         <a
41 |           href="https://github.com/CodeVinayak/"
42 |           target="_blank"
43 |           rel="noreferrer"
44 |         >
45 |           <img src={githubIcon} alt="GitHub" />
46 |         </a>
47 |         <a
48 |           href="https://api.whatsapp.com/send/?phone=%2B919630576848&text=Hello+Vinayak+I+found+your+contact+through+portfolio+site.%0A%0A"
49 |           target="_blank"
50 |           rel="noreferrer"
51 |         >
52 |           <img src={whatsapp} alt="Whatsapp" />
53 |         </a>
54 |         <a
55 |           href="https://t.me/CodeVinayak"
56 |           target="_blank"
57 |           rel="noreferrer"
58 |         >
59 |           <img src={telegram} alt="telegram" />
60 |         </a></div>
61 |         </ScrollAnimation>
62 |       </div>
63 |       <div className="hero-image">
64 |         <ScrollAnimation animateIn="fadeInRight" delay={1 * 1000}>
65 |           <img src={Illustration} alt="Ilustração" />
66 |         </ScrollAnimation>
67 |       </div>
68 |     </Container>
69 |   )
70 | }

--------------------------------------------------------------------------------
/src/components/Hero/styles.ts:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | export const Container = styled.section`
 4 |   padding-top: 15%;
 5 |   display: flex;
 6 |   justify-content: space-between;
 7 |   gap: 8rem;
 8 |   background: rgba(0,0,0,0);
 9 |   .hero-text{
10 |     & > p{
11 |       font-size: 1.8rem;
12 |     }
13 |     h1{
14 |       font-size: 7rem;
15 |     }
16 | 
17 |     h3{
18 |       color:var(--green);
19 |       margin: 1rem 0;
20 |     }
21 | 
22 |     
23 |     p.small-resume {
24 |       margin-bottom: 5rem;
25 |     }
26 |   }
27 | // New added
28 |   .social-media{
29 |     display: inline-flex;
30 |     align-items: center;
31 |     justify-content: space-between;
32 |     gap: 1rem;
33 |     padding-top:5rem;
34 |     padding-left:1rem;
35 | 
36 |     img,span{
37 |       font-size: 3rem;
38 |       width: 3.5rem;
39 |     }
40 |   }
41 | 
42 | 
43 |   .button{
44 |     margin-top: 5rem;
45 |     padding: 1.4rem 6rem;
46 |   }
47 | 
48 |   .hero-image{
49 |     img{
50 |       max-width: 500px;
51 |     }
52 |   }
53 | 
54 | 
55 |   @media(max-width: 960px){
56 |     display: block;
57 |     margin-top: 15%;
58 |     .hero-text{
59 | 
60 |       h1{
61 |         font-size: 5rem;
62 |       }
63 |     }
64 |     
65 |     .hero-image{
66 |       display: none;
67 |     }
68 |   }
69 | 
70 |   @media(max-width: 600px){
71 |     margin-top: 35%;
72 |   }
73 |   @media(max-width: 480px){
74 |     margin-top: 45%;
75 |   }
76 | `

--------------------------------------------------------------------------------
/src/components/Main/Main.tsx:
--------------------------------------------------------------------------------
  1 | import Particles from "react-tsparticles"
  2 | import { Container } from "./styles";
  3 | import { Hero } from "../Hero/Hero";
  4 | import { About } from "../About/About";
  5 | import { Contact } from "../Contact/Contact";
  6 | import { Project } from "../Project/Project";
  7 | import python from "../../assets/python.svg"
  8 | import java from "../../assets/java.svg"
  9 | import wordpress from "../../assets/wordpress.svg";
 10 | import shopify from "../../assets/shopify.svg";
 11 | import htmlIcon from "../../assets/html-icon.svg";
 12 | import cssIcon from "../../assets/css-icon.svg";
 13 | import sassIcon from "../../assets/sass-icon.svg";
 14 | import jsIcon from "../../assets/js-icon.svg";
 15 | // import nodeIcon from "../../assets/node-icon.svg";
 16 | import reactIcon from "../../assets/react-icon.svg";
 17 | import typescriptIcon from "../../assets/typescript-icon.svg";
 18 | import vueIcon from "../../assets/vue-icon.svg";
 19 | import boostrapIcon from "../../assets/bootstrap-icon.svg";
 20 | 
 21 | export function Main() {
 22 |   return (
 23 |     <Container>
 24 |       <Particles
 25 |         id="tsparticles"
 26 |         options={{
 27 |           "fullScreen": {
 28 |             "enable": true,
 29 |             "zIndex": 1
 30 |           },
 31 |           "detectRetina": true,
 32 |           "fpsLimit": 60,
 33 |           "interactivity": {
 34 |             "events": {
 35 |               "onClick": {
 36 |                 "enable": true,
 37 |                 "mode": "push"
 38 |               },
 39 |               "onDiv": {
 40 |                 "elementId": "repulse-div",
 41 |                 "enable": false,
 42 |                 "mode": "repulse"
 43 |               },
 44 |               "onHover": {
 45 |                 "enable": true,
 46 |                 "mode": "bubble",
 47 |                 "parallax": {
 48 |                   "enable": false,
 49 |                   "force": 60,
 50 |                   "smooth": 10
 51 |                 }
 52 |               },
 53 |               "resize": true
 54 |             },
 55 |             "modes": {
 56 |               "bubble": {
 57 |                 "distance": 400,
 58 |                 "duration": 2,
 59 |                 "opacity": 0.8,
 60 |                 "size": 2,
 61 |               },
 62 |               "connect": {
 63 |                 "distance": 80,
 64 |                 "lineLinked": {
 65 |                   "opacity": 0.5
 66 |                 },
 67 |                 "radius": 60
 68 |               },
 69 |               "grab": {
 70 |                 "distance": 400,
 71 |                 "lineLinked": {
 72 |                   "opacity": 1
 73 |                 }
 74 |               },
 75 |               "push": {
 76 |                 "quantity": 2
 77 |               },
 78 |               "remove": {
 79 |                 "quantity": 2
 80 |               },
 81 |               "repulse": {
 82 |                 "distance": 200,
 83 |                 "duration": 0.4
 84 |               }
 85 |             }
 86 |           },
 87 |           "particles": {
 88 |             "color": {
 89 |               "value": "#ffffff"
 90 |             },
 91 |             "lineLinked": {
 92 |               "blink": false,
 93 |               "color": "#000",
 94 |               "consent": false,
 95 |               "distance": 150,
 96 |               "enable": false,
 97 |               "opacity": 0.4,
 98 |               "width": 1
 99 |             },
100 |             "move": {
101 |               "attract": {
102 |                 "enable": false,
103 |                 "rotate": {
104 |                   "x": 600,
105 |                   "y": 1200
106 |                 }
107 |               },
108 |               "bounce": false,
109 |               "direction": "none",
110 |               "enable": true,
111 |               "outMode": "out",
112 |               "random": false,
113 |               "speed": 2,
114 |               "straight": false
115 |             },
116 |             "number": {
117 |               "density": {
118 |                 "enable": true,
119 |                 "area": 800
120 |               },
121 |               "limit": 20,
122 |               "value": 15,
123 |             },
124 |             "opacity": {
125 |               "animation": {
126 |                 "enable": true,
127 |                 "minimumValue": 0.2,
128 |                 "speed": 1,
129 |                 "sync": false
130 |               },
131 |               "random": true,
132 |               "value": 1
133 |             },
134 |             "rotate": {
135 |               "animation": {
136 |                 "enable": true,
137 |                 "speed": 5,
138 |                 "sync": false
139 |               },
140 |               "direction": "random",
141 |               "random": true,
142 |               "value": 0
143 |             },
144 |             "shape": {
145 |               "character": {
146 |                 "fill": false,
147 |                 "font": "Verdana",
148 |                 "style": "",
149 |                 "value": "*",
150 |                 "weight": "400"
151 |               },
152 |               "image": [
153 |                 {
154 |                   "src": boostrapIcon,
155 |                   "width": 20,
156 |                   "height": 20
157 |                 },
158 |                 {
159 |                   "src": cssIcon,
160 |                   "width": 20,
161 |                   "height": 20
162 |                 },
163 |                 {
164 |                   "src": wordpress,
165 |                   "width": 20,
166 |                   "height": 20
167 |                 },
168 |                 {
169 |                   "src": shopify,
170 |                   "width": 20,
171 |                   "height": 20
172 |                 },
173 |                 {
174 |                   "src": htmlIcon,
175 |                   "width": 20,
176 |                   "height": 20
177 |                 },
178 |                 {
179 |                   "src": jsIcon,
180 |                   "width": 20,
181 |                   "height": 20
182 |                 },
183 |                 // {
184 |                 //   "src": mysqlIcon,
185 |                 //   "width": 20,
186 |                 //   "height": 20
187 |                 // },
188 |                 {
189 |                   "src": python,
190 |                   "width": 20,
191 |                   "height": 20
192 |                 },
193 |                 {
194 |                   "src": java,
195 |                   "width": 20,
196 |                   "height": 20
197 |                 },
198 |                 {
199 |                   "src": reactIcon,
200 |                   "width": 20,
201 |                   "height": 20
202 |                 },
203 |                 {
204 |                   "src": sassIcon,
205 |                   "width": 20,
206 |                   "height": 20
207 |                 },
208 |                 {
209 |                   "src": typescriptIcon,
210 |                   "width": 20,
211 |                   "height": 20
212 |                 },
213 |                 // {
214 |                 //   "src": vscodeIcon,
215 |                 //   "width": 20,
216 |                 //   "height": 20
217 |                 // },
218 |                 {
219 |                   "src": vueIcon,
220 |                   "width": 20,
221 |                   "height": 20
222 |                 },
223 | 
224 |               ],
225 |               "polygon": {
226 |                 "sides": 5
227 |               },
228 |               "stroke": {
229 |                 "color": "#000000",
230 |                 "width": 0
231 |               },
232 |               "type": "image"
233 |             },
234 |             "size": {
235 |               "animation": {
236 |                 "enable": false,
237 |                 "minimumValue": 0.1,
238 |                 "speed": 40,
239 |                 "sync": false
240 |               },
241 |               "random": false,
242 |               "value": 16
243 |             }
244 |           },
245 |           "polygon": {
246 |             "draw": {
247 |               "enable": false,
248 |               "lineColor": "#ffffff",
249 |               "lineWidth": 0.5
250 |             },
251 |             "move": {
252 |               "radius": 10
253 |             },
254 |             "scale": 1,
255 |             "url": ""
256 |           },
257 |           "background": {
258 |             "image": "",
259 |             "position": "50% 50%",
260 |             "repeat": "no-repeat",
261 |             "size": "cover"
262 |           }
263 |         }}
264 |       />
265 |       <Hero></Hero>
266 |       <About></About>
267 |       <Project></Project>
268 |       <Contact></Contact>
269 |     </Container>
270 |   );
271 | }

--------------------------------------------------------------------------------
/src/components/Main/styles.ts:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | 
 4 | export const Container = styled.main`
 5 |   position: relative;
 6 |   z-index: 0;
 7 |   padding: 0 10rem;
 8 |   overflow-x: hidden;
 9 |   #tsparticles{
10 |     position: absolute;
11 |     left: 0;
12 |     top: 0;
13 |     width: 100%;
14 |     height: 100%;
15 |     z-index: -1;
16 |   }
17 | 
18 |   @media (max-width: 740px){
19 |     padding: 0 4rem;
20 |   }
21 | 
22 |   @media(max-width: 360px){
23 |     padding: 0 2rem;
24 |   }
25 | `

--------------------------------------------------------------------------------
/src/components/Project/Project.tsx:
--------------------------------------------------------------------------------
  1 | import { Container } from "./styles";
  2 | import githubIcon from "../../assets/github.svg"
  3 | // import DownloadApp from '../../assets/download.webp'
  4 | import externalLink from "../../assets/external-link.svg"
  5 | import ScrollAnimation from "react-animate-on-scroll";
  6 | 
  7 | 
  8 | export function Project() {
  9 |   return (
 10 |     <Container id="project">
 11 |       <h2>My Projects</h2>
 12 |       <div className="projects">
 13 | 
 14 |         <ScrollAnimation animateIn="flipInX">
 15 |           <div className="project">
 16 |             <header>
 17 |               <svg width="50" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none" stroke="#23ce6b" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
 18 |                 <title>Folder</title>
 19 |                 <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
 20 |               </svg>
 21 |               <div className="project-links">
 22 |                 <a href="https://github.com/CodeVinayak/MultilingualVQA" target="_blank" rel="noreferrer">
 23 |                   <img src={githubIcon} alt="GitHub" />
 24 |                 </a>
 25 |               </div>
 26 |             </header>
 27 |             <div className="body">
 28 |               <h3>Multilingual VQA Vision-Language Model</h3>
 29 |               <p>
 30 |                 Fine-tuned Qwen2.5-VL for visual question answering across 14 languages with optimized preprocessing.
 31 |               </p>
 32 |             </div>
 33 |             <footer>
 34 |               <ul className="tech-list">
 35 |                 <li>Python</li>
 36 |                 <li>Qwen2.5-VL</li>
 37 |                 <li>Unsloth</li>
 38 |               </ul>
 39 |             </footer>
 40 |           </div>
 41 |         </ScrollAnimation>
 42 | 
 43 |         <ScrollAnimation animateIn="flipInX">
 44 |           <div className="project">
 45 |             <header>
 46 |               <svg width="50" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none" stroke="#23ce6b" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"> <title>Folder</title> <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path> </svg>
 47 |               <div className="project-links">
 48 |                 <a href="https://github.com/CodeVinayak/Serverless-Voting-Application" target="_blank" rel="noreferrer">
 49 |                   <img src={githubIcon} alt="Visit site" /></a>
 50 |                 {/* <a href="https://vote.vinayaksingh.com" target="_blank" rel="noreferrer">
 51 |                   <img src={externalLink} alt="Visit site" />
 52 |                 </a>  */}
 53 |                 </div>
 54 |             </header>
 55 |             <div className="body">
 56 |               <h3>Serverless Voting Application for Programming Languages</h3>
 57 |               <p> Developed a serverless voting app using React, AWS Lambda, API Gateway, and DynamoDB, enabling users to view programming languages, cast votes, and access details through an interactive UI, leveraging serverless architecture for scalability and cost-efficiency. </p>
 58 |             </div>
 59 |             <footer> <ul className="tech-list"> <li>AWS Lambda</li> <li>API Gateway</li> <li>DynamoDB</li> </ul> </footer>
 60 |           </div>
 61 |         </ScrollAnimation>
 62 | 
 63 |         <ScrollAnimation animateIn="flipInX">
 64 |           <div className="project">
 65 |             <header>
 66 |               <svg width="50" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none" stroke="#23ce6b " strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"><title>Folder</title> <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path> </svg>
 67 |               <div className="project-links">
 68 |                 <a href="https://github.com/CodeVinayak/AI-Chatbot-Assistant" target="_blank" rel="noreferrer">
 69 |                   <img src={githubIcon} alt="Visit site" /> </a>
 70 |                 <a href="https://ai-chatbot-t8fn.onrender.com" target="_blank" rel="noreferrer">
 71 |                   <img src={externalLink} alt="Visit site" /></a>
 72 |               </div>
 73 |             </header>
 74 |             <div className="body">
 75 |               <h3>GeniusBot: AI-Powered Assistance with PDF Insight</h3>
 76 |               <p>
 77 |                 Developed an interactive chatbot application using Streamlit, OpenAI's GPT-3.5-turbo language model, and PyPDF2 for PDF text extraction, enabling users to ask context-based questions on uploaded PDFs and general queries.
 78 |               </p>
 79 |             </div>
 80 |             <footer>
 81 |               <ul className="tech-list">
 82 |                 <li>Streamlit</li>
 83 |                 <li>PyPDF2</li>
 84 |                 <li>LangChain</li>
 85 |               </ul>
 86 |             </footer>
 87 |           </div>
 88 |         </ScrollAnimation>
 89 | 
 90 | 
 91 |         <ScrollAnimation animateIn="flipInX">
 92 |           <div className="project">
 93 |             <header>
 94 |               <svg width="50" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none" stroke="#23ce6b " stroke-width="1" stroke-linecap="round" stroke-linejoin="round" ><title>Folder</title><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
 95 |               <div className="project-links">
 96 |                 <a href="https://github.com/CodeVinayak/MediBook-Medical-Appointment-Scheduler-with-Health-History" target="_blank" rel="noreferrer">
 97 |                   <img src={githubIcon} alt="Visit site" />
 98 |                 </a>
 99 |                 <a href="https://medibook.vinayaksingh.com" target="_blank" rel="noreferrer">
100 |                   <img src={externalLink} alt="Visit site" />
101 |                 </a>
102 |               </div>
103 |             </header>
104 |             <div className="body">
105 |               <h3>MediBook: Medical Appointment Scheduler with Health History</h3>
106 |               <p>Developed a secure medical appointment management platform with CRUD functionality, utilizing role-based access control, encryption techniques, and a robust MySQL database with normalized schema design and stored procedures for efficient scheduling, data privacy, and reliable retrieval of patient records.</p>
107 |             </div>
108 |             <footer>
109 |               <ul className="tech-list">
110 |                 <li>PHP</li>
111 |                 <li>HTML</li>
112 |                 <li>CSS</li>
113 |                 <li>MySQL</li>
114 |               </ul>
115 |             </footer>
116 |           </div>
117 |         </ScrollAnimation>
118 | 
119 |         <ScrollAnimation animateIn="flipInX">
120 |           <div className="project">
121 |             <header>
122 |               <svg width="50" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none" stroke="#23ce6b" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
123 |                 <title>Code</title>
124 |                 <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
125 |               </svg>
126 |               <div className="project-links">
127 |                 <a href="https://github.com/CodeVinayak/Real-Time-Hand-Gesture-Driven-3D-Object-Manipulation" target="_blank" rel="noreferrer">
128 |                   <img src={githubIcon} alt="Visit site" />
129 |                 </a>
130 |                 <a href="https://youtu.be/NOm-3MynPLE" target="_blank" rel="noreferrer">
131 |                   <img src={externalLink} alt="Visit site" />
132 |                 </a>
133 |               </div>
134 |             </header>
135 |             <div className="body">
136 |               <h3>Real-Time Hand Gesture-Driven 3D Object Manipulation</h3>
137 |               <p>Developed a real-time hand gesture recognition system for intuitive 3D object manipulation. Leveraged a multimodal approach integrating OpenCV for video processing, MediaPipe for hand detection/landmark extraction, and scikit-learn for machine learning model training. Achieved 95.2% accuracy in hand gesture classification with efficient real-time performance.</p>
138 |             </div>
139 |             <footer>
140 |               <ul className="tech-list">
141 |                 <li>OpenCV</li>
142 |                 <li>MediaPipe</li>
143 |                 <li>scikit-learn</li>
144 |               </ul>
145 |             </footer>
146 |           </div>
147 |         </ScrollAnimation>
148 | 
149 |         <ScrollAnimation animateIn="flipInX">
150 |           <div className="project">
151 |             <header>
152 |               <svg width="50" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none" stroke="#23ce6b" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
153 |                 <title>Folder</title>
154 |                 <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
155 |               </svg>
156 |               <div className="project-links">
157 |                 <a href="https://github.com/CodeVinayak/Jupyter-Notebook/tree/main/Credit%20Risk%20Analysis" target="\_blank" rel="noreferrer">
158 |                   <img src={githubIcon} alt="Visit site" />
159 |                 </a>
160 |                 {/* <a href="https://github.com/CodeVinayak/Jupyter-Notebook/blob/main/Credit%20Risk%20Analysis/Credit_Risk_Analysis.ipynb" target="\_blank" rel="noreferrer">
161 |                   <img src={externalLink} alt="Visit site" />
162 |                 </a> */}
163 |               </div>
164 |             </header>
165 |             <div className="body">
166 |               <h3>Credit Risk Analysis Project</h3>
167 |               <p>
168 |                 Developed a highly accurate credit risk classification model using XGBoost, achieving 100% precision, recall, and F1-scores for predicting loan defaults.Implemented rigorous data preprocessing, feature engineering, and hyperparameter tuning on imbalanced credit risk data, employing ensemble methods, cross-validation, and model interpretation techniques.
169 |               </p>
170 |             </div>
171 |             <footer>
172 |               <ul className="tech-list">
173 |                 <li>XGBoost</li>
174 |                 <li>Pandas</li>
175 |                 <li>Matplotlib</li>
176 |               </ul>
177 |             </footer>
178 |           </div>
179 |         </ScrollAnimation>
180 | 
181 |         
182 |         {/* <ScrollAnimation animateIn="flipInX">
183 |           <div className="project">
184 |             <header>
185 |               <svg width="50" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none" stroke="#23ce6b " stroke-width="1" stroke-linecap="round" stroke-linejoin="round" ><title>Folder</title><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
186 |               <div className="project-links">
187 |                 <a href="https://velocityai.vinayaksingh.com/" target="_blank" rel="noreferrer">
188 |                   <img src={externalLink} alt="Visit site" />
189 |                 </a>
190 |               </div>
191 |             </header>
192 |             <div className="body">
193 |               <h3>VeloCityAI</h3>
194 |               <p>
195 |                 VelocityAI is a website that allows users to get instant answers to any question and generate stunning AI pictures using OpenAI's GPT-3 and DALL-E model.With VelocityAI, users can type in text-based prompts and receive a corresponding response.
196 |               </p>
197 |             </div>
198 |             <footer>
199 |               <ul className="tech-list">
200 |                 <li>React</li>
201 |                 <li>Typescript</li>
202 |                 <li>Html</li>
203 |                 <li>css</li>
204 |               </ul>
205 |             </footer>
206 |           </div>
207 |         </ScrollAnimation> */}
208 | 
209 |         {/* <ScrollAnimation animateIn="flipInX">
210 |           <div className="project">
211 |             <header>
212 |               <svg width="50" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none" stroke="#23ce6b " stroke-width="1" stroke-linecap="round" stroke-linejoin="round" ><title>Folder</title><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
213 |               <div className="project-links">
214 |                 <a href="https://justmedicalbooks.com/" target="_blank" rel="noreferrer">
215 |                   <img src={externalLink} alt="Visit site" />
216 |                 </a>
217 |               </div>
218 |             </header>
219 |             <div className="body">
220 |               <h3>MedicalBooks - Book Selling Site</h3>
221 |               <p>
222 |                 This website sells medical books online and is popular with medical students. Medical students use it to buy books and acquire knowledge. The site has all kinds of medical books in one place.
223 |               </p>
224 |             </div>
225 |             <footer>
226 |               <ul className="tech-list">
227 |                 <li>Wordpress</li>
228 |                 <li>Woocommerce</li>
229 |               </ul>
230 |             </footer>
231 |           </div>
232 |         </ScrollAnimation> */}
233 | 
234 |         {/* <ScrollAnimation animateIn="flipInX">
235 |           <div className="project">
236 |             <header>
237 |               <svg width="50" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none" stroke="#23ce6b " stroke-width="1" stroke-linecap="round" stroke-linejoin="round" ><title>Folder</title><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
238 |               <div className="project-links">
239 |                 <a href="https://drrohitdamor.com" target="_blank" rel="noreferrer">
240 |                   <img src={externalLink} alt="Visit site" />
241 |                 </a>
242 |               </div>
243 |             </header>
244 |             <div className="body">
245 |               <h3>Dr.Rohit Damor - Online Appointment Booking Site</h3>
246 |               <p>
247 |                 This website allows people to easily book appointments with you online. It takes just a minute to schedule a meeting. This kind of site is helpful for booking appointments and not missing any potential clients. You should try this website to see how convenient and efficient it is.
248 |               </p>
249 |             </div>
250 |             <footer>
251 |               <ul className="tech-list">
252 |                 <li>Wordpress</li>
253 |               </ul>
254 |             </footer>
255 |           </div>
256 |         </ScrollAnimation> */}
257 | 
258 |         {/* <ScrollAnimation animateIn="flipInX">
259 |           <div className="project">
260 |             <header>
261 |               <svg width="50" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none" stroke="#23ce6b " stroke-width="1" stroke-linecap="round" stroke-linejoin="round" ><title>Folder</title><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
262 |               <div className="project-links">
263 |                 <a href="https://mitulindustries.com/" target="_blank" rel="noreferrer">
264 |                   <img src={externalLink} alt="Visit site" />
265 |                 </a>
266 |               </div>
267 |             </header>
268 |             <div className="body">
269 |               <h3>Mitul Industries - Manufacturing Industries Site</h3>
270 |               <p>
271 |               This manufacturing industry website shows off products and helps the business get more customers and information online. Making products is important but making money from them is the goal. This site can help the business make more profit.
272 |               </p>
273 |             </div>
274 |             <footer>
275 |               <ul className="tech-list">
276 |                 <li>Wordpress</li>
277 |               </ul>
278 |             </footer>
279 |           </div>
280 |         </ScrollAnimation> */}
281 | 
282 |         {/* 
283 |         <ScrollAnimation animateIn="flipInX">
284 |           <div className="project">
285 |             <header>
286 |               <svg width="50" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none" stroke="#23ce6b " stroke-width="1" stroke-linecap="round" stroke-linejoin="round" ><title>Folder</title><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
287 |               <div className="project-links">
288 |                 <a href="https://mayatmaj.com/" target="_blank" rel="noreferrer">
289 |                   <img src={externalLink} alt="Visit site" />
290 |                 </a>
291 |               </div>
292 |             </header>
293 |             <div className="body">
294 |               <h3>Mayatmaj - Film Production Site</h3>
295 |               <p>
296 |                 This agency website promotes post production, virtual production, and video marketing services. It shows previous client work and reviews to get more business. If you need help with production, this website can give you information and connect you with the right people.
297 |               </p>
298 |             </div>
299 |             <footer>
300 |               <ul className="tech-list">
301 |                 <li>Wordpress</li>
302 |               </ul>
303 |             </footer>
304 |           </div>
305 |         </ScrollAnimation> */}
306 | 
307 |         {/* <ScrollAnimation animateIn="flipInX">
308 |           <div className="project">
309 |             <header>
310 |               <svg width="50" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none" stroke="#23ce6b " stroke-width="1" stroke-linecap="round" stroke-linejoin="round" ><title>Folder</title><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
311 |               <div className="project-links">
312 |                 <a href="https://www.smartcornersproperties.com/" target="_blank" rel="noreferrer">
313 |                   <img src={externalLink} alt="Visit site" />
314 |                 </a>
315 |               </div>
316 |             </header>
317 |             <div className="body">
318 |               <h3>SmartCorners - Real Estate Properties Site</h3>
319 |               <p>
320 |               This real estate site displays land properties and helps buyers and sellers. Buyers can see lots of pictures, videos, and details about properties before visiting in person. It makes it easier for buyers to find what they want and helps sellers get more attention.
321 |               </p>
322 |             </div>
323 |             <footer>
324 |               <ul className="tech-list">
325 |                 <li>Wordpress</li>               
326 |               </ul>
327 |             </footer>
328 |           </div>
329 |         </ScrollAnimation> */}
330 | 
331 |         {/* <ScrollAnimation animateIn="flipInX">
332 |           <div className="project">
333 |             <header>
334 |               <svg width="50" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none" stroke="#23ce6b " stroke-width="1" stroke-linecap="round" stroke-linejoin="round" ><title>Folder</title><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
335 |               <div className="project-links">
336 |                 <a href="https://madewithluv.in/" target="_blank" rel="noreferrer">
337 |                   <img src={externalLink} alt="Visit site" />
338 |                 </a>
339 |               </div>
340 |             </header>
341 |             <div className="body">
342 |               <h3>MadeWithLuv - HomeDecor Site</h3>
343 |               <p>
344 |                 This website sells home decor products and helps people decorate their homes. It is easy to find what you need, whether it's furniture or decorations. The site is useful for people who want to make their homes look nice and need some help.
345 |               </p>
346 |             </div>
347 |             <footer>
348 |               <ul className="tech-list">
349 |                 <li>Wordpress</li>
350 |                 <li>Woocommerce</li>
351 |               </ul>
352 |             </footer>
353 |           </div>
354 |         </ScrollAnimation> */}
355 | 
356 |       </div>
357 |     </Container>
358 |   );
359 | }

--------------------------------------------------------------------------------
/src/components/Project/styles.ts:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | 
 4 | export const Container = styled.section`
 5 |   margin-top: 15rem;
 6 |   
 7 |   h2{
 8 |     text-align: center;
 9 |     font-size: 4rem;
10 |     margin-bottom: 3rem;
11 |   }
12 |   .projects{
13 |     display: grid;
14 |     grid-template-columns: repeat(3, 1fr);
15 |     grid-template-rows: auto;
16 |     gap: 2rem;
17 |     padding: 1rem;
18 |     overflow: hidden;
19 | 
20 |     .project{
21 |       padding: 2rem 1.8rem;
22 |       background-color: #2b2b2b;
23 |       border-radius: 1.2rem;
24 |       transition: 0.25s;
25 |       display: flex;
26 |       flex-direction: column;
27 |       height: 100%;
28 |       color: #FFF;
29 |       &:hover{
30 |         transform: translateY(-5px);
31 |         background-color: var(--pink);
32 |       }
33 | 
34 |       header{
35 |         display: flex;
36 |         align-items: center;
37 |         justify-content: space-between;
38 |         color: var(--blue);
39 |         margin-bottom: 3.6rem;
40 |         .project-links{
41 |           display: flex;
42 |           align-items: center;
43 |           gap: 1rem;
44 |         }
45 |         a > img {
46 |           width: 5.0rem;
47 |         }
48 |       }
49 |       
50 |       h3{
51 |         margin-bottom: 2rem;
52 |       }
53 | 
54 |       p{
55 |         letter-spacing: 0.12rem;
56 |         margin-bottom: 2rem;
57 |         a{
58 |           color: #FFFF;
59 |           border-bottom: 1px solid var(--green);
60 |           transition: color 0.25s;
61 |           &:hover{
62 |             color: var(--green);
63 |           }
64 |         }
65 |       }
66 | 
67 |       footer{
68 |         margin-top: auto;
69 |         .tech-list{
70 |           display: flex;
71 |           align-items: center;
72 |           gap: 2rem;
73 |           font-size: 1.4rem;
74 |           opacity: 0.6;
75 |         }
76 |       }
77 | 
78 |     }
79 |   }
80 | 
81 |   @media (max-width: 960px){
82 |     .projects{
83 |       grid-template-columns: 1fr 1fr;
84 |     }
85 |   }
86 | 
87 |   @media (max-width: 740px){
88 |     .projects{
89 |       grid-template-columns: 1fr;
90 |     }
91 |   }
92 | `

--------------------------------------------------------------------------------
/src/styles/global.ts:
--------------------------------------------------------------------------------
  1 | import { createGlobalStyle } from "styled-components";
  2 | 
  3 | export const GlobalStyle = createGlobalStyle`
  4 |   :root{
  5 |     --pink: #E31F71;
  6 |     --black: #212121;
  7 |     --green: #23ce6b;
  8 |     --blue: #016fb9;
  9 |     scroll-padding-top: 10rem;
 10 | 
 11 |     &.light{
 12 | 
 13 |       body{
 14 |         transition: 0.5s;
 15 |         background-color: #f5f5f5;
 16 |         color: var(--black);
 17 |       }
 18 | 
 19 |       .logo{
 20 |         color: var(--black);
 21 |       }
 22 | 
 23 |       header.header-fixed{
 24 |         transition: 0.5s;
 25 |         background-color: #f5f5f550;
 26 |         a{
 27 |           transition: 0.5s;
 28 |           color: black;
 29 |         }
 30 |         .menu,.menu:before, .menu:after{
 31 |           background-color: var(--black); 
 32 |         }
 33 |         .menu.active{
 34 |           background-color: rgba(555,555,555,0);
 35 |         }
 36 |       }
 37 | 
 38 |       footer.footer{
 39 |         transition: 0.5s;
 40 |         background-color: rgba(0,0,0,0.1);
 41 |         color: var(--black);
 42 |       }
 43 | 
 44 |       form{
 45 |         input,textarea{
 46 |           transition: 0.5s;
 47 |           border: solid 1px var(--black);
 48 |           color: var(--black);
 49 |           &::placeholder{
 50 |             transition: 0.5s;
 51 |             color: var(--black);
 52 |           }
 53 |         }
 54 |       }
 55 | 
 56 |     }
 57 |   }
 58 | 
 59 |   ul, li {
 60 |     text-decoration: none;
 61 |     list-style: none;
 62 |     margin: 0;
 63 |     padding:0;
 64 |   }
 65 | 
 66 |   *{
 67 |     margin: 0;
 68 |     padding: 0;
 69 |     box-sizing: border-box;
 70 |   }
 71 | 
 72 |   html{
 73 |     font-size: 62.5%;
 74 |   }
 75 | 
 76 |   body{
 77 |     font-size: 1.6rem;
 78 |     -webkit-font-smoothing: antialiased;
 79 |     background-color: var(--black);
 80 |     color: #FFFF;
 81 |   }
 82 | 
 83 |   body, input, textarea, button{
 84 |     font-family: 'Red Hat Display', sans-serif;
 85 |     font-weight: 400;
 86 |   }
 87 | 
 88 |   a{
 89 |     text-decoration: none;
 90 |   }
 91 | 
 92 |   button, .button{
 93 |     border: none;
 94 |     cursor: pointer;
 95 |     background-color: var(--green);
 96 |     color: #FFFF;
 97 |     border-radius: 2rem;
 98 |     font-weight: 500;
 99 |     transition: filter 0.25s;
100 |     &:hover{
101 |       filter: brightness(0.8);
102 |     }
103 |   }
104 | 
105 |   button:disabled, .button:disabled{
106 |     filter: brightness(0.8);
107 |     cursor: not-allowed;
108 |   }
109 | 
110 | 
111 |   .logo{
112 |     font-size: 3rem;
113 |     color: #FFFF;
114 |     // &::first-letter{
115 |     //   color: var(--green);
116 |     // }
117 |   }
118 | `

--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "noFallthroughCasesInSwitch": true,
16 |     "module": "esnext",
17 |     "moduleResolution": "node",
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "noEmit": true,
21 |     "jsx": "react-jsx",
22 |     "types": ["@types/babel__generator/index.d.ts"]
23 |   },
24 |   "include": [
25 |     "src"
26 |   ]
27 | }
28 |

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