├── LEARN.md ├── public ├── _redirects ├── card.png ├── favicon.ico ├── logo192.png ├── logo512.png ├── robots.txt ├── thumbnail.png ├── manifest.json ├── sitemap.xml ├── index.html └── logo.gltf ├── src ├── setupTests.js ├── App.test.js ├── reportWebVitals.js ├── index.css ├── pages │ ├── validations.js │ ├── projects.js │ ├── err404.js │ ├── contact.js │ └── home.js ├── components │ ├── CustomSpinner.js │ ├── logo.js │ ├── card.js │ └── navbar.js ├── App.css ├── index.js └── App.js ├── .gitignore ├── README.md ├── package.json ├── .github └── workflows │ └── codeql-analysis.yml ├── CODE_OF_CONDUCT.md └── LICENSE /LEARN.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdizKeskin/Portfolio-old/HEAD/public/card.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdizKeskin/Portfolio-old/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdizKeskin/Portfolio-old/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdizKeskin/Portfolio-old/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | 4 | Sitemap: https://edizkeskin.com/sitemap.xml -------------------------------------------------------------------------------- /public/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdizKeskin/Portfolio-old/HEAD/public/thumbnail.png -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | code { 9 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 10 | } 11 | 12 | *:focus { 13 | box-shadow: none !important; 14 | } -------------------------------------------------------------------------------- /src/pages/validations.js: -------------------------------------------------------------------------------- 1 | import * as yup from "yup"; 2 | 3 | const validations = yup.object().shape({ 4 | email: yup 5 | .string() 6 | .email("Please enter a valid email.") 7 | .required("Required field."), 8 | name: yup 9 | .string() 10 | .min(3, "name must be at least 5 characters.") 11 | .required("Required field."), 12 | message: yup 13 | .string() 14 | .min(5, "Message must be at least 5 characters.") 15 | .required("Required field."), 16 | }); 17 | 18 | export default validations; 19 | -------------------------------------------------------------------------------- /src/components/CustomSpinner.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Flex, Spinner } from "@chakra-ui/react"; 3 | 4 | function CustomSpinner() { 5 | return ( 6 | 7 | 15 | 16 | ); 17 | } 18 | 19 | export default CustomSpinner; 20 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/components/logo.js: -------------------------------------------------------------------------------- 1 | /* 2 | Auto-generated by: https://github.com/pmndrs/gltfjsx 3 | */ 4 | 5 | import React, { useRef } from 'react' 6 | import { useGLTF } from '@react-three/drei' 7 | 8 | export default function Model({ ...props }) { 9 | const group = useRef() 10 | const { nodes, materials } = useGLTF('/logo.gltf') 11 | return ( 12 | 13 | 14 | 15 | ) 16 | } 17 | 18 | useGLTF.preload('/logo.gltf') 19 | -------------------------------------------------------------------------------- /public/sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | https://edizkeskin.com/ 5 | 2021-12-26 6 | monthly 7 | 0.0 8 | 9 | 10 | https://edizkeskin.com/contact 11 | 2021-12-26 12 | monthly 13 | 0.0 14 | 15 | 16 | https://edizkeskin.com/Projects 17 | 2021-12-26 18 | monthly 19 | 0.0 20 | 21 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | scroll-behavior: smooth; 3 | } 4 | 5 | *:before, 6 | *:after { 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | transition: 10s all; 10 | } 11 | 12 | *::-webkit-scrollbar { 13 | width: 0.45rem; 14 | background-color: #282c34; 15 | } 16 | 17 | *::-webkit-scrollbar-thumb { 18 | background-color: #171923; 19 | border-radius: 3px; 20 | } 21 | 22 | *::-webkit-scrollbar-track { 23 | background: transparent; 24 | } 25 | 26 | *:focus { 27 | box-shadow: none !important; 28 | } 29 | 30 | canvas { 31 | width: 100% !important; 32 | height: 100% !important; 33 | } 34 | 35 | canvas:hover { 36 | cursor: grab; 37 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ‼️ [New version is here](https://github.com/EdizKeskin/Portfolio) 4 | 5 | 6 | ## Stack 7 | 8 | - [Chakra UI](https://chakra-ui.com/) - A simple, modular and accessible component library for React 9 | - [Framer Motion](https://www.framer.com/motion/) and [Aos](https://michalsnik.github.io/aos/) - For animation 10 | - [Formik](https://formik.org/) and [Yup](https://www.npmjs.com/package/yup) - For form validation 11 | 12 | --- 13 | 14 | ## Project structure 15 | 16 | ``` 17 | $PROJECT_ROOT 18 | │ # Page files 19 | ├── pages 20 | │ # React component files 21 | ├── components 22 | │ # Static files for images 23 | └── public 24 | ``` 25 | --- 26 | 27 | ## License 28 | 29 | GPL-3.0 License. 30 | 31 | You can create your own homepage for free without notifying me by forking this project under the following conditions: 32 | 33 | - Add a link to [my homepage](https://edizkeskin.com.tr/) 34 | 35 |
36 | 37 | Copyright 2022 Ediz Keskin 38 | -------------------------------------------------------------------------------- /src/components/card.js: -------------------------------------------------------------------------------- 1 | import { 2 | Box, 3 | Image, 4 | Heading, 5 | Stack, 6 | Button, 7 | Link, 8 | } from "@chakra-ui/react"; 9 | 10 | function Card({ item }) { 11 | return ( 12 | 13 | 23 | 24 | 25 | 26 | 27 | 28 | {item.title} 29 | 30 | 31 | 34 | 35 | 36 | 37 | 38 | ); 39 | } 40 | export default Card; 41 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | import { ChakraProvider } from "@chakra-ui/react"; 7 | import { BrowserRouter } from "react-router-dom"; 8 | import { QueryClient, QueryClientProvider } from "react-query"; 9 | 10 | const client = new QueryClient({ 11 | defaultOptions: { 12 | queries: { 13 | refetchOnMount: false, 14 | refetchOnWindowFocus: false, 15 | }, 16 | }, 17 | }); 18 | 19 | ReactDOM.render( 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | , 29 | document.getElementById("root") 30 | ); 31 | 32 | // If you want to start measuring performance in your app, pass a function 33 | // to log results (for example: reportWebVitals(console.log)) 34 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 35 | reportWebVitals(); 36 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | Ediz Keskin 25 | 26 | 27 | 28 | 29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /src/pages/projects.js: -------------------------------------------------------------------------------- 1 | import { Box, Grid } from "@chakra-ui/react"; 2 | import { useMemo } from "react"; 3 | import Card from "../components/card"; 4 | import CustomSpinner from "../components/CustomSpinner"; 5 | import axios from "axios"; 6 | import { useQuery } from "react-query"; 7 | 8 | function Projects() { 9 | const endpoint = process.env.REACT_APP_GRAPHQL_ENDPOINT; 10 | const MEMBER_QUERY = useMemo(() => { 11 | return ` 12 | { 13 | projects { 14 | link 15 | title 16 | image 17 | } 18 | } 19 | `; 20 | }, []); 21 | 22 | const { data, isLoading, error } = useQuery("launches", () => { 23 | return axios({ 24 | url: endpoint, 25 | method: "POST", 26 | data: { 27 | query: MEMBER_QUERY, 28 | }, 29 | }).then((response) => response.data.data); 30 | }); 31 | 32 | if (isLoading) return ; 33 | if (error) return
{error.message}
; 34 | const projects = data.projects; 35 | 36 | return ( 37 | 38 | 49 | {projects.map((item, i) => ( 50 | 51 | ))} 52 | 53 | 54 | ); 55 | } 56 | 57 | export default Projects; 58 | -------------------------------------------------------------------------------- /src/pages/err404.js: -------------------------------------------------------------------------------- 1 | import { Box, Button, Flex, Image } from "@chakra-ui/react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | function Err404() { 5 | return ( 6 | 7 | 8 | 14 | {"avatar"} 24 | 25 | 26 | 44 | 45 | 46 | 47 | ); 48 | } 49 | export default Err404; 50 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "personal", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@chakra-ui/react": "^1.8.6", 7 | "@emotion/react": "^11.8.2", 8 | "@emotion/styled": "^11.8.1", 9 | "@react-three/drei": "^8.19.0", 10 | "@react-three/fiber": "^7.0.26", 11 | "@testing-library/jest-dom": "^5.16.2", 12 | "@testing-library/react": "^12.1.4", 13 | "@testing-library/user-event": "^13.5.0", 14 | "aos": "^2.3.4", 15 | "axios": "^0.26.1", 16 | "emailjs-com": "^3.2.0", 17 | "formik": "^2.2.9", 18 | "framer-motion": "^6.2.8", 19 | "react": "^17.0.2", 20 | "react-animated-progress-bar": "^1.0.4", 21 | "react-dom": "^17.0.2", 22 | "react-icons": "^4.3.1", 23 | "react-query": "^3.34.16", 24 | "react-router-dom": "^6.2.2", 25 | "react-scripts": "5.0.0", 26 | "react-tsparticles": "^1.42.1", 27 | "sweetalert2": "^11.4.4", 28 | "three": "^0.139.2", 29 | "typewriter-effect": "^2.18.2", 30 | "web-vitals": "^2.1.4", 31 | "yup": "^0.32.11" 32 | }, 33 | "scripts": { 34 | "start": "react-scripts start", 35 | "build": "react-scripts build", 36 | "test": "react-scripts test", 37 | "eject": "react-scripts eject" 38 | }, 39 | "eslintConfig": { 40 | "extends": [ 41 | "react-app", 42 | "react-app/jest" 43 | ] 44 | }, 45 | "browserslist": { 46 | "production": [ 47 | ">0.2%", 48 | "not dead", 49 | "not op_mini all" 50 | ], 51 | "development": [ 52 | "last 1 chrome version", 53 | "last 1 firefox version", 54 | "last 1 safari version" 55 | ] 56 | } 57 | } -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ main ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ main ] 20 | schedule: 21 | - cron: '40 19 * * 0' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | permissions: 28 | actions: read 29 | contents: read 30 | security-events: write 31 | 32 | strategy: 33 | fail-fast: false 34 | matrix: 35 | language: [ 'javascript' ] 36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] 37 | # Learn more about CodeQL language support at https://git.io/codeql-language-support 38 | 39 | steps: 40 | - name: Checkout repository 41 | uses: actions/checkout@v2 42 | 43 | # Initializes the CodeQL tools for scanning. 44 | - name: Initialize CodeQL 45 | uses: github/codeql-action/init@v1 46 | with: 47 | languages: ${{ matrix.language }} 48 | # If you wish to specify custom queries, you can do so here or in a config file. 49 | # By default, queries listed here will override any specified in a config file. 50 | # Prefix the list here with "+" to use these queries and those in the config file. 51 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 52 | 53 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 54 | # If this step fails, then you should remove it and run the build manually (see below) 55 | - name: Autobuild 56 | uses: github/codeql-action/autobuild@v1 57 | 58 | # ℹ️ Command-line programs to run using the OS shell. 59 | # 📚 https://git.io/JvXDl 60 | 61 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 62 | # and modify them (or add more) to build your code if your project 63 | # uses a compiled language 64 | 65 | #- run: | 66 | # make bootstrap 67 | # make release 68 | 69 | - name: Perform CodeQL Analysis 70 | uses: github/codeql-action/analyze@v1 71 | -------------------------------------------------------------------------------- /src/components/navbar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | Box, 4 | Flex, 5 | Text, 6 | IconButton, 7 | Stack, 8 | Collapse, 9 | useDisclosure, 10 | Heading, 11 | } from "@chakra-ui/react"; 12 | 13 | import { GiHamburgerMenu } from "react-icons/gi"; 14 | import { IoClose } from "react-icons/io5"; 15 | import { Link } from "react-router-dom"; 16 | 17 | const links = [ 18 | { 19 | name: "Home", 20 | path: "/", 21 | }, 22 | { 23 | name: "Contact", 24 | path: "/contact", 25 | }, 26 | { 27 | name: "Projects", 28 | path: "/Projects", 29 | }, 30 | ]; 31 | 32 | const DesktopNav = () => { 33 | return ( 34 | <> 35 | 36 | {links.map((link) => ( 37 | 38 | {link.name} 39 | 40 | ))} 41 | 42 | 43 | ); 44 | }; 45 | 46 | const MobileNav = () => { 47 | return ( 48 | 49 | 57 | {links.map((link) => ( 58 | 59 | 60 | {link.name} 61 | 62 | 63 | ))} 64 | 65 | 66 | ); 67 | }; 68 | 69 | function Navbar() { 70 | const { isOpen, onToggle } = useDisclosure(); 71 | 72 | return ( 73 | 74 | 78 | 84 | 89 | ) : ( 90 | 91 | ) 92 | } 93 | variant={"ghost"} 94 | aria-label={"Toggle Navigation"} 95 | _hover={{ 96 | bg: "gray.900", 97 | }} 98 | /> 99 | 100 | 108 | 109 | Sharpness 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | ); 121 | } 122 | 123 | export default Navbar; 124 | -------------------------------------------------------------------------------- /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 | . 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 | -------------------------------------------------------------------------------- /src/pages/contact.js: -------------------------------------------------------------------------------- 1 | import { 2 | Box, 3 | Button, 4 | Flex, 5 | FormControl, 6 | FormLabel, 7 | Heading, 8 | IconButton, 9 | Input, 10 | InputGroup, 11 | InputLeftElement, 12 | Link, 13 | Stack, 14 | Textarea, 15 | Tooltip, 16 | useClipboard, 17 | VStack, 18 | } from "@chakra-ui/react"; 19 | import React from "react"; 20 | import { BsGithub, BsInstagram, BsPerson, BsTwitter } from "react-icons/bs"; 21 | import { MdEmail, MdOutlineEmail } from "react-icons/md"; 22 | import { useFormik } from "formik"; 23 | import emailjs from "emailjs-com"; 24 | import Swal from "sweetalert2"; 25 | import validationSchema from "./validations"; 26 | 27 | function Contact() { 28 | const { hasCopied, onCopy } = useClipboard("edizkeskin@gmail.com"); 29 | 30 | const formik = useFormik({ 31 | initialValues: { 32 | name: "", 33 | email: "", 34 | message: "", 35 | }, 36 | validationSchema, 37 | onSubmit: (values, { resetForm }) => { 38 | try { 39 | emailjs.send( 40 | "gmail", 41 | "content", 42 | values, 43 | process.env.REACT_APP_EMAIL_ID 44 | ); 45 | console.log("SUCCESS!"); 46 | resetForm(); 47 | Swal.fire({ 48 | position: "center", 49 | icon: "success", 50 | title: "Message sent.", 51 | showConfirmButton: false, 52 | 53 | timer: 2000, 54 | }); 55 | } catch (error) { 56 | Swal.fire({ 57 | position: "center", 58 | icon: "error", 59 | title: "Message could not be delivered.", 60 | showConfirmButton: false, 61 | timer: 2000, 62 | }); 63 | } 64 | }, 65 | }); 66 | 67 | return ( 68 | 69 | 70 | 71 | 72 | 78 | 82 | 89 | 94 | } 100 | _hover={{ 101 | bg: "blue.500", 102 | color: "gray.700", 103 | }} 104 | onClick={onCopy} 105 | isRound 106 | /> 107 | 108 | 115 | 116 | } 122 | _hover={{ 123 | bg: "blue.500", 124 | color: "gray.700", 125 | }} 126 | isRound 127 | /> 128 | 129 | 130 | 137 | 141 | } 146 | _hover={{ 147 | bg: "blue.500", 148 | color: "gray.700", 149 | }} 150 | isRound 151 | /> 152 | 153 | 154 | 161 | 165 | } 170 | _hover={{ 171 | bg: "blue.500", 172 | color: "gray.700", 173 | }} 174 | isRound 175 | /> 176 | 177 | 178 | 179 | 188 |
189 | 190 | 191 | Name 192 | 193 | } /> 194 | 203 | 204 | 205 | 206 | 207 | Email 208 | 209 | 210 | } /> 211 | 222 | 223 | 224 | 225 | Message 226 |