├── .env ├── .gitignore ├── .vscode ├── extensions.json └── settings.json ├── LICENSE ├── README.md ├── ReadMeImages ├── ReadMeBanner.png └── designedByWebCifar.png ├── package-lock.json ├── package.json ├── public ├── _redirects ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.js ├── assets ├── data │ ├── projects.js │ └── testimonials.js ├── fonts │ ├── Montserrat-Bold.ttf │ ├── Montserrat-SemiBold.ttf │ └── RobotoMono-Regular.ttf └── images │ ├── about-page-img.png │ ├── about-sec-img.png │ ├── cavinimg.jpg │ ├── cointracker.jpg │ ├── greenctg.jpg │ ├── hero.png │ ├── map.png │ ├── projectImg.png │ ├── scroll-down-arrow.svg │ ├── social-media-arrow.svg │ └── utracker.jpg ├── components ├── AboutInfoItem.js ├── AboutSection.js ├── Button.js ├── ContactBanner.js ├── ContactForm.js ├── ContactInfoItem.js ├── ContactSection.js ├── Footer.js ├── FooterCol.js ├── HeroSection.js ├── Map.js ├── NavMenu.js ├── PText.js ├── ProjectItem.js ├── ProjectsSection.js ├── ScrollToTop.js ├── SectionTitle.js ├── ServicesSection.js ├── ServicesSectionItem.js ├── SmoothScrollbar.js └── TestimonialsSection.js ├── index.js ├── pages ├── About.js ├── Contact.js ├── Home.js └── Projects.js └── styles ├── GlobalStyle.js └── Typography.js /.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | haters/ 2 | 3 | *.sketch 4 | *.fig 5 | course-layout.md 6 | 7 | # production 8 | /build 9 | 10 | # Logs 11 | logs 12 | *.log 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | 17 | # Runtime data 18 | pids 19 | *.pid 20 | *.seed 21 | *.pid.lock 22 | 23 | # Directory for instrumented libs generated by jscoverage/JSCover 24 | lib-cov 25 | 26 | # Coverage directory used by tools like istanbul 27 | coverage 28 | 29 | # nyc test coverage 30 | .nyc_output 31 | 32 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 33 | .grunt 34 | 35 | # Bower dependency directory (https://bower.io/) 36 | bower_components 37 | 38 | # node-waf configuration 39 | .lock-wscript 40 | 41 | # Compiled binary addons (http://nodejs.org/api/addons.html) 42 | build/Release 43 | 44 | # Dependency directories 45 | node_modules/ 46 | jspm_packages/ 47 | 48 | # Typescript v1 declaration files 49 | typings/ 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional REPL history 58 | .node_repl_history 59 | 60 | # Output of 'npm pack' 61 | *.tgz 62 | 63 | # dotenv environment variable files 64 | # .env* 65 | 66 | # gatsby files 67 | .cache/ 68 | # public 69 | 70 | # Mac files 71 | .DS_Store 72 | 73 | # Yarn 74 | yarn-error.log 75 | .pnp/ 76 | .pnp.js 77 | # Yarn Integrity file 78 | .yarn-integrity 79 | 80 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "dbaeumer.vscode-eslint", 4 | "esbenp.prettier-vscode", 5 | "formulahendry.auto-rename-tag", 6 | "jpoissonnier.vscode-styled-components" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // These are all my auto-save configs 3 | "editor.formatOnSave": true, 4 | // turn it off for JS and JSX, we will do this via eslint 5 | "editor.defaultFormatter": "esbenp.prettier-vscode", 6 | "[javascript]": { 7 | "editor.formatOnSave": false, 8 | "editor.defaultFormatter": null 9 | }, 10 | "[javascriptreact]": { 11 | "editor.formatOnSave": false, 12 | "editor.defaultFormatter": null 13 | }, 14 | // tell the ESLint plugin to run on save 15 | "editor.codeActionsOnSave": { 16 | "source.fixAll": true 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Shaif Arfan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](./ReadMeImages/ReadMeBanner.png) 2 | # Ayan's Portfolio website [React Project] 3 | 4 | **Watch On YouTube ![YouTube Video Views](https://img.shields.io/youtube/views/esC2k9z7w2U?style=social) : [Watch Now][youtubelink]** 5 | 6 | **Live Preview: [Open Link][preview]** 7 | 8 | 9 | --- 10 | 11 | ### Made with ❤️ by [Shaif Arfan](https://www.instagram.com/shaifarfan08/) 12 | 13 | Like my works and want to support me? 14 | 15 | Buy Me A Coffee 16 | 17 | --- 18 | 19 | ## Project Details 20 | 21 | A portfolio for a web designer. We used React js to make this portfolio. A clean design with full responsiveness. You will find this portfolio very professional. Also, we added smooth scroll in the portfolio which will make the scroll experience really elegant. 22 | 23 | This is a beginner-friendly react js project. There will be a full free step-by-step tutorial on [YouTube][youtubelink]. This project is made for education purposes by the Team [web cifar][webcifarwebsite]. We are going to learn so many things through this project especially how to work with React Js. React Js is one of the hottest techs for web dev. Through this project, we will have a good understanding of react js. Besides React js we are going to use many other techs. Also, there will be a full project tutorial playlist on [YouTube][youtubelink] so that you can get the step-by-step guide to make this portfolio. 24 | 25 | ## Project Requirement 26 | 27 | 1. HTML, CSS 28 | 1. JavaScript 29 | 1. React Basic (optional) 30 | 31 | ## What we are going to Use/learn 32 | 33 | - React 34 | - React Hooks 35 | - Styled Components 36 | - Swiper js 37 | - React Transition Group 38 | - Smooth Scrollbar 39 | - React Icons 40 | - React Router Dom 41 | - More... 42 | 43 | ## Starter Files 44 | 45 | For the starter files, we created a `branch` in this repository named `starter_files`. You need to change the branch in the top corner of the repo then you will get the starter files and now you can clone the repo or `download` it. 46 | 47 | ## Getting Started 48 | 49 | The recommended way to get started with the project is Follow the [YouTube tutorial][youtubelink]. You will find all the step-by-step guides for free. Or you Can start the project on your own by following the guide below. 50 | 51 | After getting the starter files, you need to go the file directory and run 52 | 53 | ```shell 54 | npm install 55 | ``` 56 | 57 | and after that start the live server. 58 | 59 | ```shell 60 | npm start 61 | ``` 62 | 63 | ## want to use the website ? 64 | 65 | This website is made for educational purposes. Also, this will be free to use. Though a proper credit will be appreciated. 66 | 67 | ## Other projects 68 | 69 | 📚 [All Web Cifar Project Tutorials](https://github.com/ShaifArfan/wc-project-tutorials) 70 | 71 | # If you like the tutorial, please share this with others. 72 | 73 | [preview]: https://ayans-portfolio.netlify.app/ 74 | [youtubelink]: https://www.youtube.com/playlist?list=PLRv_Gd5w9e7mO-lGxKkNSWiAlsiZHnQYY 75 | [webcifarwebsite]: https://webcifar.com 76 | -------------------------------------------------------------------------------- /ReadMeImages/ReadMeBanner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/AYANs-portfolio/be95e8472a189e588ead4bbba8ba79959640d5c2/ReadMeImages/ReadMeBanner.png -------------------------------------------------------------------------------- /ReadMeImages/designedByWebCifar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/AYANs-portfolio/be95e8472a189e588ead4bbba8ba79959640d5c2/ReadMeImages/designedByWebCifar.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-portfolio", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.10", 7 | "@testing-library/react": "^11.2.5", 8 | "@testing-library/user-event": "^12.8.3", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-icons": "^4.2.0", 12 | "react-router-dom": "^5.2.0", 13 | "react-scripts": "4.0.3", 14 | "react-transition-group": "^4.4.1", 15 | "styled-components": "^5.2.2", 16 | "swiper": "^6.5.4", 17 | "uuid": "^8.3.2", 18 | "web-vitals": "^1.1.1" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "wesbos" 29 | ], 30 | "rules": { 31 | "react/prop-types": 0 32 | } 33 | }, 34 | "browserslist": { 35 | "production": [ 36 | ">0.2%", 37 | "not dead", 38 | "not op_mini all" 39 | ], 40 | "development": [ 41 | "last 1 chrome version", 42 | "last 1 firefox version", 43 | "last 1 safari version" 44 | ] 45 | }, 46 | "devDependencies": { 47 | "babel-eslint": "^10.1.0", 48 | "eslint": "^7.8.1", 49 | "eslint-config-airbnb": "^18.2.0", 50 | "eslint-config-prettier": "^6.11.0", 51 | "eslint-config-wesbos": "^1.0.1", 52 | "eslint-plugin-html": "^6.1.0", 53 | "eslint-plugin-import": "^2.22.0", 54 | "eslint-plugin-jsx-a11y": "^6.3.1", 55 | "eslint-plugin-prettier": "^3.1.4", 56 | "eslint-plugin-react": "^7.20.6", 57 | "eslint-plugin-react-hooks": "^4.1.2", 58 | "prettier": "^2.1.1" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/AYANs-portfolio/be95e8472a189e588ead4bbba8ba79959640d5c2/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/AYANs-portfolio/be95e8472a189e588ead4bbba8ba79959640d5c2/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/AYANs-portfolio/be95e8472a189e588ead4bbba8ba79959640d5c2/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; 3 | import Footer from './components/Footer'; 4 | import NavMenu from './components/NavMenu'; 5 | import ScrollToTop from './components/ScrollToTop'; 6 | import About from './pages/About'; 7 | import Contact from './pages/Contact'; 8 | import Home from './pages/Home'; 9 | import Projects from './pages/Projects'; 10 | 11 | export default function App() { 12 | return ( 13 | <> 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |