├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── public ├── _redirects ├── favicon.ico ├── favicon.png ├── favicon512.png ├── index.html ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.js ├── assets │ ├── fonts │ │ └── Bestermind │ │ │ └── BestermindRegular.ttf │ ├── pdf │ │ └── resume.pdf │ ├── png │ │ └── placeholder.png │ └── svg │ │ ├── about │ │ ├── blueTheme-boy.svg │ │ ├── blueTheme-girl.svg │ │ ├── bwTheme-boy.svg │ │ ├── bwTheme-girl.svg │ │ ├── greenTheme-boy.svg │ │ ├── greenTheme-girl.svg │ │ ├── orangeTheme-boy.svg │ │ ├── orangeTheme-girl.svg │ │ ├── pinkTheme-boy.svg │ │ ├── pinkTheme-girl.svg │ │ ├── purpleTheme-boy.svg │ │ ├── purpleTheme-girl.svg │ │ ├── redTheme-boy.svg │ │ ├── redTheme-girl.svg │ │ ├── yellowTheme-boy.svg │ │ └── yellowTheme-girl.svg │ │ ├── contacts │ │ ├── contactsBlack.svg │ │ ├── contactsBlue.svg │ │ ├── contactsGreen.svg │ │ ├── contactsOrange.svg │ │ ├── contactsPink.svg │ │ ├── contactsPurple.svg │ │ ├── contactsRed.svg │ │ └── contactsYellow.svg │ │ ├── education │ │ ├── eduBlack.svg │ │ ├── eduBlue.svg │ │ ├── eduGreen.svg │ │ ├── eduImgBlack.svg │ │ ├── eduImgWhite.svg │ │ ├── eduOrange.svg │ │ ├── eduPink.svg │ │ ├── eduPurple.svg │ │ ├── eduRed.svg │ │ └── eduYellow.svg │ │ ├── experience │ │ ├── expBlack.svg │ │ ├── expBlue.svg │ │ ├── expGreen.svg │ │ ├── expImgBlack.svg │ │ ├── expImgWhite.svg │ │ ├── expOrange.svg │ │ ├── expPink.svg │ │ ├── expPurple.svg │ │ ├── expRed.svg │ │ └── expYellow.svg │ │ ├── projects │ │ ├── eight.svg │ │ ├── eleven.svg │ │ ├── five.svg │ │ ├── four.svg │ │ ├── nine.svg │ │ ├── one.svg │ │ ├── sample.svg │ │ ├── seven.svg │ │ ├── six.svg │ │ ├── ten.svg │ │ ├── thirteen.svg │ │ ├── three.svg │ │ ├── twelve.svg │ │ └── two.svg │ │ ├── skills │ │ ├── adobe-xd.svg │ │ ├── adobeaudition.svg │ │ ├── after-effects.svg │ │ ├── angular.svg │ │ ├── aws.svg │ │ ├── azure.svg │ │ ├── blender.svg │ │ ├── bootstrap.svg │ │ ├── bulma.svg │ │ ├── c.svg │ │ ├── canva.svg │ │ ├── capacitorjs.svg │ │ ├── coffeescript.svg │ │ ├── cplusplus.svg │ │ ├── csharp.svg │ │ ├── css.svg │ │ ├── dart.svg │ │ ├── deno.svg │ │ ├── django.svg │ │ ├── docker.svg │ │ ├── fastify.svg │ │ ├── figma.svg │ │ ├── firebase.svg │ │ ├── flutter.svg │ │ ├── gcp.svg │ │ ├── gimp.svg │ │ ├── git.svg │ │ ├── go.svg │ │ ├── graphql.svg │ │ ├── haxe.svg │ │ ├── html.svg │ │ ├── illustrator.svg │ │ ├── ionic.svg │ │ ├── java.svg │ │ ├── javascript.svg │ │ ├── julia.svg │ │ ├── kotlin.svg │ │ ├── lightroom.svg │ │ ├── markdown.svg │ │ ├── materialui.svg │ │ ├── matlab.svg │ │ ├── memsql.svg │ │ ├── microsoftoffice.svg │ │ ├── mongoDB.svg │ │ ├── mysql.svg │ │ ├── nextJS.svg │ │ ├── nginx.svg │ │ ├── numpy.svg │ │ ├── nuxtJS.svg │ │ ├── opencv.svg │ │ ├── photoshop.svg │ │ ├── php.svg │ │ ├── picsart.svg │ │ ├── postgresql.svg │ │ ├── premierepro.svg │ │ ├── python.svg │ │ ├── pytorch.svg │ │ ├── react.svg │ │ ├── ruby.svg │ │ ├── selenium.svg │ │ ├── sketch.svg │ │ ├── sqlite.svg │ │ ├── strapi.svg │ │ ├── svelte.svg │ │ ├── swift.svg │ │ ├── tailwind.svg │ │ ├── tensorflow.svg │ │ ├── typescript.svg │ │ ├── unity.svg │ │ ├── vitejs.svg │ │ ├── vue.svg │ │ ├── vuetifyjs.svg │ │ ├── webix.svg │ │ ├── wolframalpha.svg │ │ └── wordpress.svg │ │ ├── social │ │ ├── github.svg │ │ ├── linkedin.svg │ │ └── twitter.svg │ │ └── testimonials │ │ ├── boy1.svg │ │ ├── boy2.svg │ │ ├── boy3.svg │ │ ├── girl1.svg │ │ ├── girl2.svg │ │ └── girl3.svg ├── components │ ├── About │ │ ├── About.css │ │ └── About.js │ ├── Achievement │ │ ├── Achievement.css │ │ ├── Achievement.js │ │ └── AchievementCard.js │ ├── BackToTop │ │ ├── BackToTop.css │ │ └── BackToTop.js │ ├── Blog │ │ ├── Blog.css │ │ ├── Blog.js │ │ └── SingleBlog │ │ │ ├── SingleBlog.css │ │ │ └── SingleBlog.js │ ├── Contacts │ │ ├── Contacts.css │ │ └── Contacts.js │ ├── Education │ │ ├── Education.css │ │ ├── Education.js │ │ └── EducationCard.js │ ├── Experience │ │ ├── Experience.css │ │ ├── Experience.js │ │ └── ExperienceCard.js │ ├── Footer │ │ ├── Footer.css │ │ └── Footer.js │ ├── Landing │ │ ├── Landing.css │ │ └── Landing.js │ ├── Navbar │ │ ├── Navbar.css │ │ └── Navbar.js │ ├── Projects │ │ ├── Projects.css │ │ ├── Projects.js │ │ └── SingleProject │ │ │ ├── SingleProject.css │ │ │ └── SingleProject.js │ ├── Services │ │ ├── Services.css │ │ ├── Services.js │ │ └── SingleService │ │ │ ├── SingleService.css │ │ │ └── SingleService.js │ ├── Skills │ │ ├── Skills.css │ │ └── Skills.js │ ├── Testimonials │ │ ├── Testimonials.css │ │ └── Testimonials.js │ └── index.js ├── contexts │ └── ThemeContext.js ├── data │ ├── aboutData.js │ ├── achievementData.js │ ├── blogData.js │ ├── contactsData.js │ ├── educationData.js │ ├── experienceData.js │ ├── headerData.js │ ├── projectsData.js │ ├── servicesData.js │ ├── skillsData.js │ ├── socialsData.js │ ├── testimonialsData.js │ └── themeData.js ├── index.css ├── index.js ├── pages │ ├── Blog │ │ ├── BlogPage.css │ │ └── BlogPage.js │ ├── Main │ │ └── Main.js │ ├── Project │ │ ├── ProjectPage.css │ │ └── ProjectPage.js │ └── index.js ├── reportWebVitals.js ├── theme │ ├── images.js │ └── theme.js └── utils │ ├── ScrollToTop.js │ └── skillsImage.js └── yarn.lock /.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 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | 2 | # Please note we have a code of conduct, please follow it in all your interactions with the project. 3 | 4 | 5 | ## Code of Conduct 6 | 7 | ### Our Pledge 8 | 9 | In the interest of fostering an open and welcoming environment, we as 10 | contributors and maintainers pledge to making participation in our project and 11 | our community a harassment-free experience for everyone, regardless of age, body 12 | size, disability, ethnicity, gender identity and expression, level of experience, 13 | nationality, personal appearance, race, religion, or sexual identity and 14 | orientation. 15 | 16 | ### Our Standards 17 | 18 | Examples of behavior that contributes to creating a positive environment 19 | include: 20 | 21 | * Using welcoming and inclusive language 22 | * Being respectful of differing viewpoints and experiences 23 | * Gracefully accepting constructive criticism 24 | * Focusing on what is best for the community 25 | * Showing empathy towards other community members 26 | 27 | Examples of unacceptable behavior by participants include: 28 | 29 | * The use of sexualized language or imagery and unwelcome sexual attention or 30 | advances 31 | * Trolling, insulting/derogatory comments, and personal or political attacks 32 | * Public or private harassment 33 | * Publishing others' private information, such as a physical or electronic 34 | address, without explicit permission 35 | * Other conduct which could reasonably be considered inappropriate in a 36 | professional setting 37 | 38 | 39 | ### Attribution 40 | 41 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 42 | available at [http://contributor-covenant.org/version/1/4][version] 43 | 44 | [homepage]: http://contributor-covenant.org 45 | [version]: http://contributor-covenant.org/version/1/4/ 46 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contributing Guidelines 2 | 3 | Thank you for your interest in contributing. Here's everything you'll need to make your first contribution. 4 | 5 | ### What can I help with? 6 | 7 | We welcome contributions of all sorts. Even the most minor changes are warmly welcomed. You may choose to work on an existing issue or propose your own. 8 | 9 | Some examples of contributions are: 10 | 11 | 1. Documentation: From spell corrections to documenting the necessary information, all comes in this section. 12 | 13 | 2. Bugs: Any bug fixes are counted in this section. If you see a new bug, feel free to create a new issue mentioning the problem faced. 14 | 15 | 3. Feature Requests: If you would like to see some new features around the website, you can always create a new issue mentioning the requested feature. 16 | 17 | **Important:** Every PR must correspond to an issue. If there isn't an issue related to the PR, open a new issue in the Issues section. 18 | 19 | ### Grabbing an issue 20 | 21 | To work on an existing issue, comment on it and say you're working on that issue. Any maintainer will assign you to the issue. This is to avoid conflicts with others also working on the issue. 22 | 23 | You can always seek help and are recommended to discuss the course of action and design decisions to tackle the issue on the issue page before making the Pull Request. 24 | 25 | ### How to Contribute? 26 | 27 | 1. Fork this repository. 28 | 29 | 2. Check out to a new branch for the patch. 30 | 31 | ```bash 32 | git checkout -b 33 | ``` 34 | 35 | 3. Write your code. 36 | 37 | 38 | 39 | 4. Before committing changes, you should verify if the issue is fixed 40 | 41 | 5. Commit your changes. Try to follow the [best practices](https://gist.github.com/robertpainsi/b632364184e70900af4ab688decf6f53) while committing changes. 42 | 43 | ```bash 44 | git commit -s 45 | # Then write the commit message and save changes 46 | ``` 47 | 48 | 6. Push the changes to your fork. 49 | 50 | ```bash 51 | git push -u origin 52 | ``` 53 | 54 | 7. Create a pull request. Be sure to read and follow our pull request guidelines! 55 | 56 | 8. Wait for code review and address any issues raised. 57 | 58 | 9. Voila! You made a contribution. Keep it up. 59 | 60 | ### Keeping your fork up-to-date 61 | 62 | 1. Add this repository as an upstream. 63 | 64 | ```bash 65 | git remote add upstream https://github.com/hhhrrrttt222111/developer-portfolio.git 66 | ``` 67 | 68 | 2. Pull the latest changes from the main branch. 69 | 70 | ```bash 71 | git pull upstream master 72 | ``` 73 | 74 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "developer-portfolio", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@material-ui/core": "^4.12.2", 7 | "@material-ui/icons": "^4.11.2", 8 | "@testing-library/jest-dom": "^5.11.4", 9 | "@testing-library/react": "^11.1.0", 10 | "@testing-library/user-event": "^12.1.10", 11 | "axios": "^0.21.1", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-fast-marquee": "^1.2.1", 15 | "react-helmet": "^6.1.0", 16 | "react-icons": "^4.2.0", 17 | "react-reveal": "^1.2.2", 18 | "react-router-dom": "^5.2.0", 19 | "react-router-hash-link": "^2.4.3", 20 | "react-scripts": "^4.0.3", 21 | "react-slick": "^0.28.1", 22 | "slick-carousel": "^1.8.1", 23 | "validator": "^13.6.0", 24 | "web-vitals": "^1.0.1" 25 | }, 26 | "scripts": { 27 | "start": "react-scripts start", 28 | "build": "react-scripts build", 29 | "test": "react-scripts test", 30 | "eject": "react-scripts eject" 31 | }, 32 | "eslintConfig": { 33 | "extends": [ 34 | "react-app", 35 | "react-app/jest" 36 | ] 37 | }, 38 | "browserslist": { 39 | "production": [ 40 | ">0.2%", 41 | "not dead", 42 | "not op_mini all" 43 | ], 44 | "development": [ 45 | "last 1 chrome version", 46 | "last 1 firefox version", 47 | "last 1 safari version" 48 | ] 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sreerag-rajan/developer-portfolio/edf50b5e1ef1a29f1ba5aa5f58f7886fa00855e1/public/favicon.ico -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sreerag-rajan/developer-portfolio/edf50b5e1ef1a29f1ba5aa5f58f7886fa00855e1/public/favicon.png -------------------------------------------------------------------------------- /public/favicon512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sreerag-rajan/developer-portfolio/edf50b5e1ef1a29f1ba5aa5f58f7886fa00855e1/public/favicon512.png -------------------------------------------------------------------------------- /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 | 25 | 26 | 27 | 28 | 29 | 30 | Portfolio 31 | 32 | 33 | 34 |
35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Developer Portfolio", 3 | "name": "Developer Portfolio template by hhhrrrttt222111", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "favicon.png", 12 | "type": "image/png", 13 | "sizes": "64x64" 14 | }, 15 | { 16 | "src": "favicon512.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.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primaryFont: 'Poppins', sans-serif; 3 | /* --primaryFont: 'Montserrat', sans-serif; */ 4 | /* --primaryFont: 'Raleway', sans-serif; */ 5 | } 6 | 7 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'; 3 | 4 | import { ThemeContext } from './contexts/ThemeContext'; 5 | import { Main, BlogPage, ProjectPage } from './pages' 6 | import { BackToTop } from './components' 7 | import ScrollToTop from './utils/ScrollToTop' 8 | 9 | import './App.css' 10 | 11 | function App() { 12 | 13 | const { theme } = useContext(ThemeContext); 14 | 15 | console.log("%cDEVELOPER PORTFOLIO", `color:${theme.primary}; font-size:50px`); 16 | console.log("%chttps://github.com/hhhrrrttt222111/developer-portfolio", `color:${theme.tertiary}; font-size:20px`); 17 | // console.log = console.warn = console.error = () => {}; 18 | 19 | return ( 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 | ); 34 | } 35 | 36 | export default App; 37 | -------------------------------------------------------------------------------- /src/assets/fonts/Bestermind/BestermindRegular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sreerag-rajan/developer-portfolio/edf50b5e1ef1a29f1ba5aa5f58f7886fa00855e1/src/assets/fonts/Bestermind/BestermindRegular.ttf -------------------------------------------------------------------------------- /src/assets/pdf/resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sreerag-rajan/developer-portfolio/edf50b5e1ef1a29f1ba5aa5f58f7886fa00855e1/src/assets/pdf/resume.pdf -------------------------------------------------------------------------------- /src/assets/png/placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sreerag-rajan/developer-portfolio/edf50b5e1ef1a29f1ba5aa5f58f7886fa00855e1/src/assets/png/placeholder.png -------------------------------------------------------------------------------- /src/assets/svg/education/eduImgBlack.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/education/eduImgWhite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/experience/expImgBlack.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/experience/expImgWhite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/skills/adobe-xd.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/svg/skills/adobeaudition.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/svg/skills/after-effects.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/svg/skills/angular.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/svg/skills/azure.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/assets/svg/skills/blender.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/assets/svg/skills/bootstrap.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/svg/skills/bulma.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/skills/c.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/assets/svg/skills/canva.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/svg/skills/capacitorjs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/assets/svg/skills/coffeescript.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/skills/cplusplus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/assets/svg/skills/csharp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/assets/svg/skills/css.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/assets/svg/skills/dart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/assets/svg/skills/django.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/svg/skills/docker.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/assets/svg/skills/fastify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/skills/figma.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/assets/svg/skills/firebase.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /src/assets/svg/skills/flutter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/assets/svg/skills/gcp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/assets/svg/skills/git.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/svg/skills/go.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/skills/graphql.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/skills/haxe.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/assets/svg/skills/html.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/svg/skills/illustrator.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/svg/skills/ionic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/skills/java.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/svg/skills/javascript.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/svg/skills/kotlin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/assets/svg/skills/lightroom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/assets/svg/skills/markdown.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/skills/materialui.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/svg/skills/matlab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /src/assets/svg/skills/microsoftoffice.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /src/assets/svg/skills/mongoDB.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/svg/skills/nextJS.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/skills/nginx.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/svg/skills/numpy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/svg/skills/nuxtJS.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/svg/skills/opencv.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/assets/svg/skills/photoshop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/svg/skills/php.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/skills/picsart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/assets/svg/skills/premierepro.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/assets/svg/skills/python.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/svg/skills/pytorch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/skills/selenium.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/skills/sketch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/assets/svg/skills/sqlite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/assets/svg/skills/strapi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/svg/skills/svelte.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/svg/skills/swift.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/assets/svg/skills/tailwind.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/svg/skills/tensorflow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/svg/skills/typescript.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/svg/skills/unity.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/assets/svg/skills/vitejs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/assets/svg/skills/vue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/svg/skills/vuetifyjs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/svg/skills/wolframalpha.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/assets/svg/skills/wordpress.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/svg/social/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/social/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/social/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/About/About.css: -------------------------------------------------------------------------------- 1 | .about { 2 | min-height: 100vh; 3 | position: relative; 4 | } 5 | 6 | .about .line-styling{ 7 | position: absolute; 8 | top: 50px; 9 | left: 50%; 10 | transform: translateX(-50%); 11 | height: 50px; 12 | width: 85%; 13 | 14 | display: flex; 15 | align-items: center; 16 | justify-content: space-between; 17 | } 18 | 19 | .about .line-styling .style-circle{ 20 | width: 10px; 21 | height: 10px; 22 | border-radius: 50%; 23 | } 24 | .about .line-styling .style-line{ 25 | width: 95%; 26 | height: 5px; 27 | border-radius: 10px; 28 | } 29 | 30 | .about-body { 31 | display: flex; 32 | flex-direction: row; 33 | align-items: center; 34 | justify-content: space-around; 35 | padding-top: 8rem; 36 | height: fit-content; 37 | } 38 | 39 | .about-description { 40 | display: flex; 41 | flex-direction: column; 42 | align-items: flex-start; 43 | justify-content: space-evenly; 44 | flex: 0.5; 45 | width: 100%; 46 | height: fit-content; 47 | } 48 | 49 | .about-description >h2 { 50 | margin-bottom: 40px; 51 | font-size: 3.5rem; 52 | font-family: var(--primaryFont); 53 | } 54 | 55 | .about-description > p { 56 | font-size: 1.25rem; 57 | color: #e0d9d9; 58 | font-family: var(--primaryFont); 59 | } 60 | 61 | .about-img { 62 | margin-top: 40px; 63 | pointer-events: none; 64 | } 65 | 66 | .about-img > img { 67 | width: 380px; 68 | flex: 0.5; 69 | } 70 | 71 | @media (min-width: 992px) and (max-width: 1380px) { 72 | 73 | .about-description > h2 { 74 | font-size: 3.3rem; 75 | margin-bottom: 30px; 76 | } 77 | .about-description > p { 78 | font-size: 1.15rem; 79 | } 80 | 81 | .about-img>img { 82 | width: 300px; 83 | } 84 | } 85 | 86 | @media screen and (max-width: 992px){ 87 | 88 | .about .line-styling{ 89 | top: 20px; 90 | } 91 | 92 | .about-body { 93 | padding-top: 2rem; 94 | display: flex; 95 | flex-direction: column-reverse; 96 | align-items: center; 97 | justify-content: space-evenly; 98 | } 99 | 100 | .about-description{ 101 | flex: 0.6; 102 | box-sizing: border-box; 103 | /* padding: 5% 10%; */ 104 | padding: 20px; 105 | 106 | } 107 | 108 | .about-description > h2 { 109 | font-size: 3rem; 110 | margin-bottom: 20px; 111 | } 112 | 113 | .about-description > p { 114 | font-size: 1.1rem; 115 | } 116 | 117 | .about-img > img { 118 | width: 250px; 119 | flex: 0.4; 120 | } 121 | 122 | } 123 | 124 | @media screen and (max-width: 800px){ 125 | .about .line-styling .style-circle{ 126 | width: 8px; 127 | height: 8px; 128 | border-radius: 50%; 129 | } 130 | .about-description > h2{ 131 | align-self: center; 132 | } 133 | 134 | } 135 | 136 | @media screen and (max-width: 600px){ 137 | 138 | .about .line-styling .style-circle{ 139 | width: 5px; 140 | height: 5px; 141 | border-radius: 50%; 142 | } 143 | .about .line-styling .style-line{ 144 | width: 93%; 145 | height: 3px; 146 | border-radius: 10px; 147 | } 148 | 149 | .about-description > h2 { 150 | font-size: 2.5rem; 151 | } 152 | 153 | .about-description > p{ 154 | font-size: 0.95rem; 155 | } 156 | 157 | .about-img > img { 158 | width: 200px; 159 | } 160 | } 161 | -------------------------------------------------------------------------------- /src/components/About/About.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | 3 | import './About.css'; 4 | import { ThemeContext } from '../../contexts/ThemeContext'; 5 | import { aboutData } from '../../data/aboutData' 6 | 7 | 8 | 9 | function About() { 10 | 11 | const { theme } = useContext(ThemeContext); 12 | return ( 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |

{aboutData.title}

22 |

{aboutData.description1}

{aboutData.description2}

23 |
24 |
25 | 29 |
30 |
31 |
32 | 33 | ) 34 | } 35 | 36 | export default About 37 | -------------------------------------------------------------------------------- /src/components/Achievement/Achievement.js: -------------------------------------------------------------------------------- 1 | import React, { useContext} from 'react'; 2 | 3 | import './Achievement.css'; 4 | import { ThemeContext } from '../../contexts/ThemeContext'; 5 | import { achievementData } from '../../data/achievementData' 6 | import AchievementCard from './AchievementCard'; 7 | 8 | function Achievement() { 9 | 10 | const { theme } = useContext(ThemeContext); 11 | return ( 12 | <> 13 | {achievementData.achievements.length > 0 && ( 14 |
15 |
16 |

Achievements

17 |

{achievementData.bio}

18 |
19 |
20 | {achievementData.achievements.map(achieve => ( 21 | 29 | ))} 30 |
31 |
32 | )} 33 | 34 | ) 35 | } 36 | 37 | export default Achievement 38 | -------------------------------------------------------------------------------- /src/components/Achievement/AchievementCard.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import Fade from 'react-reveal/Fade'; 4 | 5 | import { ThemeContext } from '../../contexts/ThemeContext'; 6 | 7 | import { AiOutlineFolder } from "react-icons/ai"; 8 | 9 | import './Achievement.css' 10 | 11 | function AchievementCard({id, title, details, date, field, image}) { 12 | 13 | const { theme } = useContext(ThemeContext); 14 | 15 | const useStyles = makeStyles((t) => ({ 16 | achievementCard : { 17 | backgroundColor:theme.primary30, 18 | "&:hover": { 19 | backgroundColor:theme.primary50, 20 | }, 21 | }, 22 | })); 23 | 24 | const classes = useStyles(); 25 | return ( 26 | 27 |
28 |
29 |
30 |

{title}

31 |

{details}

32 |
33 |
34 |
{date}
35 |
36 | 37 |
{field}
38 |
39 |
40 |
41 |
42 | 43 |
44 |
45 | 46 | 47 | ) 48 | } 49 | 50 | export default AchievementCard 51 | -------------------------------------------------------------------------------- /src/components/BackToTop/BackToTop.css: -------------------------------------------------------------------------------- 1 | .backToTop { 2 | position: fixed; 3 | right: 10px; 4 | bottom: 60px; 5 | height: 30px; 6 | font-size: 3rem; 7 | z-index: 999; 8 | } 9 | 10 | .backToTop button { 11 | outline: none; 12 | border: none; 13 | cursor: pointer; 14 | background: none; 15 | padding: 20px; 16 | } 17 | 18 | @media screen and (max-width: 800px) { 19 | .backToTop { 20 | right: -10px; 21 | bottom: 50px; 22 | font-size: 2.75rem; 23 | } 24 | } -------------------------------------------------------------------------------- /src/components/BackToTop/BackToTop.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext } from 'react'; 2 | import { IoIosArrowDropupCircle } from 'react-icons/io'; 3 | import { makeStyles } from '@material-ui/core/styles'; 4 | 5 | import { ThemeContext } from '../../contexts/ThemeContext'; 6 | import './BackToTop.css'; 7 | 8 | function BackToTop() { 9 | const [visible, setVisible] = useState(false); 10 | 11 | const { theme } = useContext(ThemeContext); 12 | 13 | const toggleVisible = () => { 14 | const scrolled = document.documentElement.scrollTop; 15 | if (scrolled > 300) { 16 | setVisible(true); 17 | } else if (scrolled <= 300) { 18 | setVisible(false); 19 | } 20 | }; 21 | 22 | const scrollToTop = () => { 23 | window.scrollTo({ 24 | top: 0, 25 | behavior: 'smooth', 26 | }); 27 | }; 28 | 29 | window.addEventListener('scroll', toggleVisible); 30 | 31 | const useStyles = makeStyles(() => ({ 32 | icon: { 33 | fontSize: '3rem', 34 | color: theme.tertiary, 35 | }, 36 | })); 37 | 38 | const classes = useStyles(); 39 | 40 | return ( 41 |
45 | 48 |
49 | ); 50 | } 51 | 52 | export default BackToTop; 53 | -------------------------------------------------------------------------------- /src/components/Blog/Blog.css: -------------------------------------------------------------------------------- 1 | .blog { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | justify-content: flex-start; 6 | min-height: 100vh; 7 | padding: 2rem; 8 | overflow-x: hidden; 9 | } 10 | 11 | 12 | .blog--header { 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | width: 100%; 17 | margin: 1rem; 18 | } 19 | 20 | 21 | .blog--header h1 { 22 | margin-bottom: 40px; 23 | font-size: 3.5rem; 24 | font-family: var(--primaryFont); 25 | } 26 | 27 | .blog--body { 28 | width: 100%; 29 | display: flex; 30 | flex-direction: column; 31 | align-items: center; 32 | justify-content: center; 33 | } 34 | 35 | .blog--bodyContainer { 36 | display: flex; 37 | align-items: center; 38 | justify-content: center; 39 | width: 100%; 40 | gap: 4.5rem; 41 | } 42 | 43 | .blog--viewAll { 44 | width: 100%; 45 | margin-top: 1rem; 46 | padding: 2rem; 47 | display: flex; 48 | align-items: center; 49 | justify-content: flex-end; 50 | } 51 | 52 | .blog--viewAll a button { 53 | outline: none; 54 | border: none; 55 | width: 150px; 56 | height: 48px; 57 | display: flex; 58 | align-items: center; 59 | justify-content: space-between; 60 | text-transform: inherit; 61 | border-radius: 45px; 62 | font-size: 1.05rem; 63 | font-family: var(--primaryFont); 64 | font-weight: 500; 65 | padding-left: 1.5rem; 66 | cursor: pointer; 67 | } 68 | 69 | 70 | @media (min-width: 992px) and (max-width: 1380px) { 71 | 72 | } 73 | 74 | 75 | @media screen and (max-width: 992px) { 76 | .blog--bodyContainer { 77 | display: flex; 78 | flex-direction: column; 79 | align-items: center; 80 | justify-content: center; 81 | width: 100%; 82 | } 83 | } 84 | 85 | @media screen and (max-width: 800px) { 86 | .blog--header h1 { 87 | font-size: 3rem; 88 | margin-bottom: 30px; 89 | } 90 | } 91 | 92 | @media screen and (max-width: 600px) { 93 | .blog--header h1 { 94 | font-size: 2.5rem; 95 | margin-bottom: 20px; 96 | } 97 | .blog--viewAll { 98 | position: relative; 99 | margin-top: 2.5rem; 100 | } 101 | .blog--viewAll a { 102 | position: absolute; 103 | left: 50%; 104 | transform: translateX(-50%); 105 | } 106 | } 107 | 108 | @media screen and (max-width: 400px) { 109 | 110 | } 111 | 112 | @media only screen and (min-device-width: 320px) and (max-device-width: 113 | 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) { 114 | 115 | } 116 | 117 | 118 | @media only screen and (device-width: 768px) { 119 | 120 | } -------------------------------------------------------------------------------- /src/components/Blog/Blog.js: -------------------------------------------------------------------------------- 1 | import React,{ useContext} from 'react'; 2 | import { Link } from 'react-router-dom' 3 | import { makeStyles } from '@material-ui/core/styles'; 4 | import { HiArrowRight } from "react-icons/hi"; 5 | 6 | import './Blog.css'; 7 | import { ThemeContext } from '../../contexts/ThemeContext'; 8 | import { blogData } from '../../data/blogData' 9 | import SingleBlog from './SingleBlog/SingleBlog'; 10 | 11 | 12 | function Blog() { 13 | 14 | const { theme } = useContext(ThemeContext); 15 | 16 | const useStyles = makeStyles(() => ({ 17 | viewAllBtn : { 18 | color: theme.tertiary, 19 | backgroundColor: theme.primary, 20 | "&:hover": { 21 | color: theme.secondary, 22 | backgroundColor: theme.primary, 23 | } 24 | }, 25 | viewArr : { 26 | color: theme.tertiary, 27 | backgroundColor: theme.secondary70, 28 | width: '40px', 29 | height: '40px', 30 | padding: '0.5rem', 31 | fontSize: '1.05rem', 32 | borderRadius: '50%', 33 | cursor: 'pointer', 34 | "&:hover": { 35 | color: theme.tertiary, 36 | backgroundColor: theme.secondary, 37 | } 38 | }, 39 | })); 40 | 41 | const classes = useStyles(); 42 | 43 | return ( 44 | <> 45 | {blogData.length > 0 && ( 46 |
47 |
48 |

Blog

49 |
50 |
51 |
52 | {blogData.slice(0, 3).reverse().map(blog => ( 53 | 63 | ))} 64 |
65 | 66 | {blogData.length > 3 && ( 67 |
68 | 69 | 73 | 74 |
75 | )} 76 |
77 |
78 | )} 79 | 80 | 81 | ) 82 | } 83 | 84 | export default Blog 85 | -------------------------------------------------------------------------------- /src/components/Blog/SingleBlog/SingleBlog.css: -------------------------------------------------------------------------------- 1 | .singleBlog { 2 | height: 420px; 3 | width: 320px; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: baseline; 8 | border-radius: 5px; 9 | } 10 | 11 | .singleBlog--image { 12 | height: 50%; 13 | width: 100%; 14 | overflow: hidden; 15 | border-top-left-radius: 5px; 16 | border-top-right-radius: 5px; 17 | } 18 | 19 | .singleBlog--image > img { 20 | object-fit: cover; 21 | height: 100%; 22 | width: 100%; 23 | border-top-left-radius: 5px; 24 | border-top-right-radius: 5px; 25 | transition: transform 1s, filter 2s ease-in-out; 26 | filter: blur(1px); 27 | transform: scale(1); 28 | } 29 | 30 | .singleBlog:hover > .singleBlog--image > img { 31 | filter: grayscale(0); 32 | transform: scale(1.1); 33 | } 34 | 35 | .singleBlog--body { 36 | padding: 1rem; 37 | } 38 | 39 | .singleBlog--body p { 40 | font-family: var(--primaryFont); 41 | font-weight: 600; 42 | font-size: 13px; 43 | margin-bottom: 0.65rem; 44 | } 45 | 46 | .singleBlog--body h3 { 47 | font-family: var(--primaryFont); 48 | margin-bottom: 0.55rem; 49 | font-size: 19px; 50 | line-height: 115%; 51 | } 52 | 53 | .singleBlog--body h6 { 54 | font-family: 'Noto Sans TC', sans-serif; 55 | font-size: 15px; 56 | line-height: 139%; 57 | font-weight: 500; 58 | opacity: 0.9; 59 | } 60 | 61 | 62 | 63 | @media (min-width: 992px) and (max-width: 1380px) { 64 | .singleBlog { 65 | height: 430px; 66 | } 67 | } 68 | 69 | 70 | @media screen and (max-width: 992px) { 71 | .singleBlog { 72 | height: 450px; 73 | background-color: rgb(171, 240, 240); 74 | margin: 2rem 0; 75 | display: flex; 76 | flex-direction: column; 77 | align-items: center; 78 | justify-content: baseline; 79 | } 80 | } 81 | 82 | @media screen and (max-width: 800px) { 83 | .singleBlog { 84 | height: 450px; 85 | margin: 1rem auto; 86 | } 87 | } 88 | 89 | @media screen and (max-width: 700px) { 90 | .singleBlog { 91 | height: 450px; 92 | margin: 1rem auto; 93 | } 94 | } 95 | 96 | @media screen and (max-width: 600px) { 97 | .singleBlog { 98 | height: 450px; 99 | width: 300px; 100 | margin: 1rem 0; 101 | } 102 | .singleBlog--image > img { 103 | filter: blur(0); 104 | } 105 | } 106 | 107 | @media screen and (max-width: 320px) { 108 | .singleBlog { 109 | transform: scale(0.9); 110 | } 111 | 112 | } 113 | 114 | @media only screen and (min-device-width: 320px) and (max-device-width: 115 | 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) { 116 | } 117 | 118 | 119 | @media only screen and (device-width: 768px) { 120 | 121 | } -------------------------------------------------------------------------------- /src/components/Blog/SingleBlog/SingleBlog.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Fade from 'react-reveal/Fade'; 3 | 4 | import placeholder from '../../../assets/png/placeholder.png' 5 | import './SingleBlog.css' 6 | 7 | function SingleBlog({ theme, title, desc, date, image, url, id }) { 8 | return ( 9 | 10 | 11 |
12 | {title} 13 |
14 |
15 |

{date}

16 |

{title}

17 |
{desc}
18 |
19 | 20 | 21 | ) 22 | } 23 | 24 | export default SingleBlog 25 | -------------------------------------------------------------------------------- /src/components/Education/Education.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | 3 | import { ThemeContext } from '../../contexts/ThemeContext'; 4 | 5 | import './Education.css' 6 | import EducationCard from './EducationCard'; 7 | 8 | import { educationData } from '../../data/educationData' 9 | 10 | function Education() { 11 | 12 | const { theme } = useContext(ThemeContext); 13 | return ( 14 |
15 | 16 |
17 |
18 |

Education

19 | {educationData.map(edu => ( 20 | 28 | ))} 29 |
30 |
31 | 32 |
33 |
34 |
35 | ) 36 | } 37 | 38 | export default Education 39 | -------------------------------------------------------------------------------- /src/components/Education/EducationCard.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import Fade from 'react-reveal/Fade'; 4 | 5 | import { ThemeContext } from '../../contexts/ThemeContext'; 6 | 7 | import eduImgWhite from '../../assets/svg/education/eduImgWhite.svg' 8 | import eduImgBlack from '../../assets/svg/education/eduImgBlack.svg' 9 | import './Education.css' 10 | 11 | function EducationCard({ id, institution, course, startYear, endYear }) { 12 | 13 | const { theme } = useContext(ThemeContext); 14 | 15 | const useStyles = makeStyles((t) => ({ 16 | educationCard : { 17 | backgroundColor:theme.primary30, 18 | "&:hover": { 19 | backgroundColor:theme.primary50, 20 | }, 21 | }, 22 | })); 23 | 24 | const classes = useStyles(); 25 | 26 | return ( 27 | 28 |
29 |
30 | 31 |
32 |
33 |
{startYear}-{endYear}
34 |

{course}

35 |
{institution}
36 |
37 |
38 | 39 | ) 40 | } 41 | 42 | export default EducationCard 43 | -------------------------------------------------------------------------------- /src/components/Experience/Experience.js: -------------------------------------------------------------------------------- 1 | import React,{useContext} from 'react'; 2 | 3 | import { ThemeContext } from '../../contexts/ThemeContext'; 4 | 5 | import './Experience.css'; 6 | 7 | import { experienceData } from '../../data/experienceData' 8 | import ExperienceCard from './ExperienceCard'; 9 | 10 | function Experience() { 11 | 12 | const { theme } = useContext(ThemeContext); 13 | return ( 14 |
15 |
16 |
17 | 18 |
19 |
20 |

Experience

21 | {experienceData.map(exp =>( 22 | 29 | ))} 30 |
31 |
32 |
33 | ) 34 | } 35 | 36 | export default Experience 37 | -------------------------------------------------------------------------------- /src/components/Experience/ExperienceCard.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import Fade from 'react-reveal/Fade'; 4 | 5 | import { ThemeContext } from '../../contexts/ThemeContext'; 6 | 7 | import expImgWhite from '../../assets/svg/experience/expImgWhite.svg' 8 | import expImgBlack from '../../assets/svg/experience/expImgBlack.svg' 9 | 10 | import './Experience.css' 11 | 12 | function ExperienceCard({id, company, jobtitle, startYear, endYear}) { 13 | 14 | const { theme } = useContext(ThemeContext); 15 | 16 | const useStyles = makeStyles((t) => ({ 17 | experienceCard : { 18 | backgroundColor:theme.primary30, 19 | "&:hover": { 20 | backgroundColor:theme.primary50, 21 | }, 22 | }, 23 | })); 24 | 25 | const classes = useStyles(); 26 | 27 | 28 | return ( 29 | 30 |
31 |
32 | 33 |
34 |
35 |
{startYear}-{endYear}
36 |

{jobtitle}

37 |
{company}
38 |
39 |
40 | 41 | ) 42 | } 43 | 44 | export default ExperienceCard 45 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | font-family: 'var(--primaryFont)', sans-serif; 3 | height: 60px; 4 | width: 100%; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | } 9 | 10 | .footer p { 11 | font-weight: 500; 12 | font-family: var(--primaryFont); 13 | font-size: 18px; 14 | } 15 | 16 | .footer p span { 17 | font-size: 24px; 18 | } -------------------------------------------------------------------------------- /src/components/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react' 2 | import './Footer.css' 3 | import { ThemeContext } from '../../contexts/ThemeContext' 4 | import { headerData } from '../../data/headerData' 5 | 6 | function Footer() { 7 | 8 | const shortname = (name) => { 9 | if(name.length > 10) { 10 | return name.split(" ")[0] 11 | } else { 12 | return name 13 | } 14 | } 15 | 16 | const { theme } = useContext(ThemeContext) 17 | 18 | return ( 19 |
20 |

21 | Made with 22 | 23 | ❤ 24 | 25 | by {shortname(headerData.name)} 26 |

27 |
28 | ) 29 | } 30 | 31 | export default Footer 32 | 33 | -------------------------------------------------------------------------------- /src/components/Navbar/Navbar.css: -------------------------------------------------------------------------------- 1 | .navbar { 2 | height: 6.5rem; 3 | position: absolute; 4 | background-color: transparent; 5 | z-index: 99; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | width: 100%; 10 | } 11 | 12 | .navbar--container { 13 | display: flex; 14 | align-items: center; 15 | justify-content: space-between; 16 | width: 100%; 17 | padding: 0 3rem; 18 | margin-top: 1rem; 19 | /* position: fixed; */ 20 | /* top: 10px; */ 21 | 22 | } 23 | 24 | 25 | .navbar--container > h1 { 26 | font-family: 'BestermindRegular'; 27 | color: var(--primary-2); 28 | font-size: 2.5rem; 29 | user-select: none; 30 | } 31 | 32 | .navLink--container { 33 | margin-top: 5rem; 34 | } 35 | 36 | .drawer > .MuiBackdrop-root { 37 | background: rgba(33, 33, 33, 0.15) !important; 38 | backdrop-filter: blur(20px) !important; 39 | } 40 | 41 | 42 | 43 | @media (max-width:1100px) { 44 | .navbar--container{ 45 | padding: 0 2rem; 46 | } 47 | .navbar--container > h1{ 48 | font-size: 2.2rem; 49 | } 50 | .nav-menu{ 51 | font-size: 2.2rem; 52 | margin-top: -1.5rem; 53 | } 54 | } 55 | 56 | @media (max-width:800px) { 57 | .navLink--container { 58 | margin-top: 3rem; 59 | } 60 | } 61 | 62 | 63 | @media (max-width:600px) { 64 | .nav-menu{ 65 | color: var(--primary-2); 66 | } 67 | .navbar--container > h1{ 68 | font-size: 2rem; 69 | } 70 | .nav-menu:hover{ 71 | color: var(--primary-2); 72 | } 73 | .MuiDrawer-paper{ 74 | border-radius: 0 !important; 75 | } 76 | } 77 | 78 | 79 | @media only screen and (min-device-width: 320px) and (max-device-width: 80 | 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) { 81 | .navbar { 82 | height: 5rem; 83 | } 84 | .navbar--container { 85 | padding: 0 1rem; 86 | margin-top: 0rem; 87 | } 88 | .navbar--container > h1 { 89 | font-size: 1.5rem; 90 | } 91 | } -------------------------------------------------------------------------------- /src/components/Projects/Projects.css: -------------------------------------------------------------------------------- 1 | .projects { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | justify-content: flex-start; 6 | min-height: 100vh; 7 | overflow-x: hidden; 8 | padding: 2rem; 9 | } 10 | 11 | 12 | .projects--header { 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | width: 100%; 17 | margin: 1rem; 18 | } 19 | 20 | 21 | .projects--header h1 { 22 | margin-bottom: 40px; 23 | font-size: 3.5rem; 24 | font-family: var(--primaryFont); 25 | } 26 | 27 | .projects--body { 28 | width: 100%; 29 | display: flex; 30 | flex-direction: column; 31 | align-items: center; 32 | justify-content: center; 33 | } 34 | 35 | .projects--bodyContainer { 36 | display: grid; 37 | grid-template-columns: repeat(2,1fr); 38 | align-items: center; 39 | justify-content: center; 40 | grid-gap: 2.5rem; 41 | width: 90%; 42 | margin: auto; 43 | } 44 | 45 | .projects--viewAll { 46 | width: 100%; 47 | padding: 2rem; 48 | display: flex; 49 | align-items: center; 50 | justify-content: flex-end; 51 | margin-top: 2rem; 52 | } 53 | 54 | .projects--viewAll a button { 55 | outline: none; 56 | border: none; 57 | width: 150px; 58 | height: 48px; 59 | display: flex; 60 | align-items: center; 61 | justify-content: space-between; 62 | text-transform: inherit; 63 | border-radius: 45px; 64 | font-size: 1.05rem; 65 | font-family: var(--primaryFont); 66 | font-weight: 500; 67 | padding-left: 1.5rem; 68 | cursor: pointer; 69 | } 70 | 71 | 72 | 73 | @media (min-width: 992px) and (max-width: 1380px) { 74 | 75 | } 76 | 77 | 78 | @media screen and (max-width: 1200px) { 79 | .projects--bodyContainer { 80 | display: flex; 81 | flex-direction: column; 82 | align-items: center; 83 | justify-content: center; 84 | width: 100%; 85 | } 86 | } 87 | 88 | @media screen and (max-width: 800px) { 89 | .projects--header h1 { 90 | font-size: 3rem; 91 | margin-bottom: 30px; 92 | } 93 | } 94 | 95 | @media screen and (max-width: 600px) { 96 | .projects--header h1 { 97 | font-size: 2.5rem; 98 | margin-bottom: 20px; 99 | } 100 | .projects--viewAll { 101 | position: relative; 102 | margin-top: 4rem; 103 | } 104 | .projects--viewAll a { 105 | position: absolute; 106 | left: 50%; 107 | transform: translateX(-50%); 108 | } 109 | } 110 | 111 | @media screen and (max-width: 400px) { 112 | 113 | } 114 | 115 | @media only screen and (min-device-width: 320px) and (max-device-width: 116 | 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) { 117 | 118 | } 119 | 120 | 121 | @media only screen and (device-width: 768px) { 122 | 123 | } -------------------------------------------------------------------------------- /src/components/Projects/Projects.js: -------------------------------------------------------------------------------- 1 | import React,{ useContext} from 'react'; 2 | import { Link } from 'react-router-dom' 3 | import { makeStyles } from '@material-ui/core/styles'; 4 | 5 | import { ThemeContext } from '../../contexts/ThemeContext'; 6 | import { projectsData } from '../../data/projectsData' 7 | import { HiArrowRight } from "react-icons/hi"; 8 | 9 | import './Projects.css' 10 | import SingleProject from './SingleProject/SingleProject'; 11 | 12 | function Projects() { 13 | 14 | const { theme } = useContext(ThemeContext); 15 | 16 | 17 | const useStyles = makeStyles(() => ({ 18 | viewAllBtn : { 19 | color: theme.tertiary, 20 | backgroundColor: theme.primary, 21 | transition: 'color 0.2s', 22 | "&:hover": { 23 | color: theme.secondary, 24 | backgroundColor: theme.primary, 25 | } 26 | }, 27 | viewArr : { 28 | color: theme.tertiary, 29 | backgroundColor: theme.secondary70, 30 | width: '40px', 31 | height: '40px', 32 | padding: '0.5rem', 33 | fontSize: '1.05rem', 34 | borderRadius: '50%', 35 | cursor: 'pointer', 36 | transition: 'background-color 0.2s', 37 | "&:hover": { 38 | color: theme.tertiary, 39 | backgroundColor: theme.secondary, 40 | } 41 | }, 42 | })); 43 | 44 | const classes = useStyles(); 45 | 46 | return ( 47 | <> 48 | {projectsData.length > 0 && ( 49 |
50 |
51 |

Projects

52 |
53 |
54 |
55 | {projectsData.slice(0, 4).map(project => ( 56 | 67 | ))} 68 |
69 | 70 | {projectsData.length > 3 && ( 71 |
72 | 73 | 77 | 78 |
79 | )} 80 |
81 |
82 | )} 83 | 84 | 85 | ) 86 | } 87 | 88 | export default Projects 89 | -------------------------------------------------------------------------------- /src/components/Projects/SingleProject/SingleProject.css: -------------------------------------------------------------------------------- 1 | .singleProject { 2 | box-shadow: 4px 4px 8px rgba(36, 3, 3, 0.2); 3 | width: 550px; 4 | /* width: 95%; */ 5 | margin: auto; 6 | height: 460px; 7 | border-radius: 10px; 8 | display: flex; 9 | flex-direction: column; 10 | align-items: center; 11 | justify-content: center; 12 | padding: 1.4rem 1rem; 13 | position: relative; 14 | cursor: pointer; 15 | overflow: hidden; 16 | } 17 | 18 | .projectContent { 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: space-between; 23 | width: 100%; 24 | height: 100%; 25 | } 26 | 27 | .projectContent > h2 { 28 | font-family: var(--primaryFont); 29 | font-style: normal; 30 | font-weight: 600; 31 | font-size: 1.525rem; 32 | line-height: 110%; 33 | text-align: center; 34 | } 35 | 36 | .projectContent > img { 37 | width: 100%; 38 | height: 60%; 39 | transition: opacity 0.7s 0.3s; 40 | } 41 | 42 | .singleProject:hover img{ 43 | opacity: 0; 44 | } 45 | 46 | .project--showcaseBtn { 47 | display: flex; 48 | align-items: center; 49 | justify-content: space-between; 50 | width: 100%; 51 | } 52 | 53 | .project--showcaseBtn > a { 54 | cursor: pointer; 55 | text-decoration: none; 56 | transition: transform 0.5s 0.3s; 57 | } 58 | 59 | .singleProject:hover .project--showcaseBtn a:nth-child(2) { 60 | transform: translateX(-140px) scale(1.1) !important; 61 | } 62 | 63 | 64 | .singleProject .project--desc{ 65 | position: absolute; 66 | width: 95%; 67 | height: 200px; 68 | left: 0; 69 | top: 0; 70 | transform: translate(-110%,40%); 71 | padding: 15px; 72 | border-radius: 0 20px 20px 0; 73 | transition: transform 0.9s; 74 | line-height: 110%; 75 | display: flex; 76 | align-items: center; 77 | justify-content: center; 78 | font-family: var(--primaryFont); 79 | } 80 | 81 | .singleProject:hover .project--desc{ 82 | transform: translate(-2%,40%); 83 | } 84 | 85 | .singleProject .project--lang{ 86 | position: absolute; 87 | bottom: 20px; 88 | right: 0; 89 | width: 140px; 90 | font-size: 0.8rem; 91 | display: flex; 92 | justify-content: center; 93 | gap: 0.5rem; 94 | flex-direction: column; 95 | border-radius: 10px 0 0 10px; 96 | transform: translateX(100%); 97 | transition: transform 0.5s 0.3s; 98 | padding: 0.825rem; 99 | } 100 | 101 | .singleProject:hover .project--lang{ 102 | transform: translateX(0); 103 | } 104 | 105 | .project--lang > span { 106 | font-family: var(--primaryFont); 107 | font-weight: 500; 108 | word-break: break-word; 109 | line-height: 100%; 110 | } 111 | 112 | @media screen and (max-width: 600px) { 113 | .singleProject{ 114 | width: 300px; 115 | } 116 | } -------------------------------------------------------------------------------- /src/components/Services/Services.css: -------------------------------------------------------------------------------- 1 | .services { 2 | min-height: 100vh; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | justify-content: flex-start; 7 | padding: 3.7rem; 8 | } 9 | 10 | .services-header { 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | width: 100%; 15 | } 16 | 17 | .services-header > h1 { 18 | margin-bottom: 20px; 19 | font-size: 3.5rem; 20 | font-family: var(--primaryFont); 21 | } 22 | 23 | .services-body { 24 | display: flex; 25 | flex-direction: column; 26 | align-items: center; 27 | justify-content: flex-start; 28 | margin-bottom: 2rem; 29 | } 30 | 31 | .services-body > p { 32 | font-family: var(--primaryFont); 33 | font-weight: 400; 34 | font-size: 1.5rem; 35 | width: 60%; 36 | text-align: center; 37 | margin-bottom: 6rem; 38 | } 39 | 40 | .services-bodycontainer { 41 | display: flex; 42 | align-items: center; 43 | justify-content: center; 44 | gap: 4.5rem; 45 | width: 100%; 46 | flex-wrap: wrap; 47 | } 48 | 49 | 50 | @media (min-width: 992px) and (max-width: 1380px) { 51 | .services { 52 | padding: 2.7rem; 53 | } 54 | .services-body > p { 55 | width: 70%; 56 | } 57 | } 58 | 59 | 60 | @media screen and (max-width: 992px) { 61 | .services { 62 | padding: 1.7rem; 63 | } 64 | 65 | .services-body > p { 66 | font-size: 1.25rem; 67 | width: 85%; 68 | text-align: center; 69 | margin-bottom: 4rem; 70 | } 71 | 72 | .services-bodycontainer { 73 | gap: 2.5rem; 74 | } 75 | } 76 | 77 | @media screen and (max-width: 800px) { 78 | .services { 79 | padding: 1rem; 80 | } 81 | .services-header h1 { 82 | font-size: 3rem; 83 | margin-bottom: 30px; 84 | } 85 | .services-body > p { 86 | font-size: 1.05rem; 87 | width: 95%; 88 | text-align: center; 89 | margin-bottom: 3rem; 90 | } 91 | 92 | .services-bodycontainer { 93 | gap: 2rem; 94 | } 95 | } 96 | 97 | @media screen and (max-width: 600px) { 98 | .services { 99 | padding: 0.5rem; 100 | } 101 | .services-header h1 { 102 | font-size: 2.5rem; 103 | margin-bottom: 20px; 104 | } 105 | .services-body p{ 106 | width: 80%; 107 | } 108 | .services-bodycontainer { 109 | gap: 1rem; 110 | } 111 | } 112 | 113 | @media screen and (max-width: 400px) { 114 | 115 | } 116 | 117 | @media only screen and (min-device-width: 320px) and (max-device-width: 118 | 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) { 119 | 120 | } 121 | 122 | 123 | @media only screen and (device-width: 768px) { 124 | 125 | } -------------------------------------------------------------------------------- /src/components/Services/Services.js: -------------------------------------------------------------------------------- 1 | import React,{useContext} from 'react'; 2 | 3 | import { ThemeContext } from '../../contexts/ThemeContext'; 4 | 5 | import { servicesData } from '../../data/servicesData'; 6 | 7 | import './Services.css' 8 | import SingleService from './SingleService/SingleService'; 9 | 10 | function Services() { 11 | 12 | const { theme } = useContext(ThemeContext); 13 | return ( 14 | <> 15 | {servicesData.length > 0 && ( 16 |
17 |
18 |

Services

19 |
20 |
21 |

22 | These are some of the services I offer. Reach out to me if I can help you with any! 23 |

24 |
25 | {servicesData.map(services => ( 26 | 31 | ))} 32 |
33 |
34 |
35 | )} 36 | 37 | ) 38 | } 39 | 40 | export default Services 41 | -------------------------------------------------------------------------------- /src/components/Services/SingleService/SingleService.css: -------------------------------------------------------------------------------- 1 | .single-service { 2 | box-shadow: 4px 4px 8px rgba(36, 3, 3, 0.2); 3 | width: 180px; 4 | height: 180px; 5 | border-radius: 20px; 6 | display: flex; 7 | flex-direction: column; 8 | align-items: center; 9 | justify-content: center; 10 | padding: 1.4rem 1.4rem; 11 | /* overflow: hidden; */ 12 | transition: transform 300ms ease-in-out; 13 | } 14 | 15 | .single-service:hover { 16 | transform: scale(1.15) ; 17 | } 18 | 19 | .service-content { 20 | position: relative; 21 | height: 150px; 22 | display: flex; 23 | align-items: center; 24 | justify-content: center; 25 | padding: 1rem; 26 | } 27 | 28 | .service-icon { 29 | position: absolute; 30 | top: 15%; 31 | /* transform: translateY(-50%); */ 32 | } 33 | 34 | .service-icon > svg { 35 | font-size: 2.8rem; 36 | /* color: #000000; */ 37 | } 38 | 39 | .single-service:hover svg{ 40 | animation: magic 0.7s ease-in-out both; 41 | } 42 | 43 | @keyframes magic { 44 | 0%, 100%{ 45 | transform: translate(0,0); 46 | } 47 | 25%{ 48 | transform: translate(0,-20px); 49 | } 50 | 50%{ 51 | transform: translate(0,0px); 52 | } 53 | 75%{ 54 | transform: translate(0,-10px); 55 | } 56 | 57 | /* slide-up-fade 58 | 59 | 0%, 100%{ 60 | transform: translate(0,0); 61 | opacity: 1; 62 | } 63 | 33%{ 64 | transform: translate(0,-50px); 65 | opacity: 0; 66 | } 67 | 67%{ 68 | transform: translate(0,50px); 69 | opacity: 0; 70 | } */ 71 | 72 | } 73 | 74 | .service-content > h4 { 75 | position: absolute; 76 | top: 60%; 77 | height: 60px; 78 | 79 | display: flex; 80 | align-items: center; 81 | justify-content: center; 82 | 83 | font-family: var(--primaryFont); 84 | font-style: normal; 85 | font-weight: 600; 86 | font-size: 16px; 87 | text-align: center; 88 | line-height: 110%; 89 | color: #000000; 90 | } 91 | 92 | @media screen and (max-width: 800px) { 93 | .single-service { 94 | width: 160px; 95 | height: 160px; 96 | padding: 1.2rem 1.2rem; 97 | } 98 | .service-icon > svg { 99 | font-size: 2.5rem; 100 | } 101 | 102 | .service-content > h4 { 103 | font-size: 15px; 104 | } 105 | } 106 | 107 | @media screen and (max-width: 600px) { 108 | .single-service { 109 | width: 150px; 110 | height: 150px; 111 | padding: 1.2rem 1.2rem; 112 | } 113 | .service-icon > svg { 114 | font-size: 2.2rem; 115 | } 116 | 117 | .service-content > h4 { 118 | font-size: 13px; 119 | top: 50%; 120 | } 121 | } -------------------------------------------------------------------------------- /src/components/Services/SingleService/SingleService.js: -------------------------------------------------------------------------------- 1 | import React,{useContext} from 'react'; 2 | import Fade from 'react-reveal/Fade'; 3 | 4 | import { ThemeContext } from '../../../contexts/ThemeContext'; 5 | 6 | import './SingleService.css' 7 | 8 | 9 | function SingleService({id, title, icon}) { 10 | 11 | const { theme } = useContext(ThemeContext); 12 | return ( 13 | 14 |
15 |
16 | {icon} 17 |

{title}

18 |
19 |
20 | 21 | ) 22 | } 23 | 24 | export default SingleService 25 | -------------------------------------------------------------------------------- /src/components/Skills/Skills.css: -------------------------------------------------------------------------------- 1 | .skills { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | justify-content: flex-start; 6 | min-height: 60vh; 7 | padding: 2.5rem 2rem 2rem 2rem; 8 | } 9 | 10 | .skillsHeader { 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | } 15 | 16 | .skillsHeader h2 { 17 | font-family: var(--primaryFont); 18 | font-style: normal; 19 | font-weight: bold; 20 | font-size: 3.5rem; 21 | text-align: center; 22 | } 23 | 24 | .skillsContainer { 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | width: 100%; 29 | margin-top: 3.5rem; 30 | padding: 0 2rem; 31 | } 32 | 33 | .skill--scroll { 34 | width: 100%; 35 | margin: 0 2rem; 36 | } 37 | 38 | 39 | .skill--box { 40 | background: #FAFAFA; 41 | box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.12); 42 | border-radius: 10px; 43 | width: 160px; 44 | height: 160px; 45 | margin: 1.5rem; 46 | display: flex; 47 | flex-direction: column; 48 | align-items: center; 49 | justify-content: center; 50 | padding: 2rem 1rem; 51 | transition: 300ms ease-in-out; 52 | } 53 | 54 | .skill--box:hover { 55 | transform: scale(1.15); 56 | } 57 | 58 | 59 | .skill--box > img { 60 | height: 50px; 61 | pointer-events: none; 62 | } 63 | 64 | 65 | .skill--box h3 { 66 | font-family: Big Shoulders Text; 67 | font-style: normal; 68 | font-weight: 500; 69 | font-size: 22px; 70 | text-align: center; 71 | margin-top: 1rem; 72 | } 73 | 74 | 75 | .marquee { 76 | padding: 3rem 0; 77 | } 78 | 79 | 80 | @media (min-width: 992px) and (max-width: 1380px) { 81 | .skills { 82 | padding: 2rem 1rem 1rem 1rem; 83 | } 84 | .skillsContainer { 85 | padding: 1.5rem; 86 | margin-top: 1.5rem; 87 | } 88 | } 89 | 90 | 91 | @media screen and (max-width: 992px) { 92 | .skills { 93 | padding: 1rem; 94 | min-height: 100%; 95 | } 96 | .skillsContainer { 97 | padding: 1rem; 98 | margin: 1rem 0; 99 | } 100 | .skillsHeader h2 { 101 | font-size: 3.2rem; 102 | } 103 | .skill--box { 104 | width: 150px; 105 | height: 150px; 106 | margin: 1.2rem; 107 | padding: 2rem 1rem; 108 | } 109 | 110 | .skill--box > img { 111 | height: 45px; 112 | } 113 | 114 | 115 | .skill--box h3 { 116 | font-size: 20px; 117 | margin-top: 1rem; 118 | } 119 | 120 | } 121 | 122 | @media screen and (max-width: 800px) { 123 | .skills { 124 | padding: 0.5rem; 125 | } 126 | .skillsContainer { 127 | padding: 0.5rem; 128 | } 129 | .skillsHeader h2 { 130 | font-size: 3rem; 131 | } 132 | 133 | .skill--scroll { 134 | width: 100%; 135 | margin: 0; 136 | } 137 | } 138 | 139 | @media screen and (max-width: 600px) { 140 | .skill--box { 141 | width: 135px; 142 | height: 135px; 143 | margin: 1.2rem; 144 | padding: 2rem 1rem; 145 | } 146 | 147 | .skill--box > img { 148 | height: 40px; 149 | } 150 | 151 | .skillsHeader h2 { 152 | font-size: 2.5rem; 153 | } 154 | 155 | .skill--box h3 { 156 | font-size: 18px; 157 | margin-top: 1rem; 158 | } 159 | } 160 | 161 | @media screen and (max-width: 400px) { 162 | 163 | } 164 | 165 | @media only screen and (min-device-width: 320px) and (max-device-width: 166 | 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) { 167 | 168 | } 169 | 170 | 171 | @media only screen and (device-width: 768px) { 172 | 173 | } -------------------------------------------------------------------------------- /src/components/Skills/Skills.js: -------------------------------------------------------------------------------- 1 | import React,{ useContext } from 'react'; 2 | import Marquee from "react-fast-marquee"; 3 | 4 | import './Skills.css' 5 | 6 | import { ThemeContext } from '../../contexts/ThemeContext'; 7 | import { skillsData } from '../../data/skillsData' 8 | import { skillsImage } from '../../utils/skillsImage' 9 | 10 | function Skills() { 11 | 12 | const { theme } = useContext(ThemeContext); 13 | 14 | const skillBoxStyle = { 15 | backgroundColor: theme.secondary, 16 | boxShadow: `0px 0px 30px ${theme.primary30}` 17 | } 18 | 19 | return ( 20 |
21 |
22 |

Skills

23 |
24 |
25 |
26 | 35 | {skillsData.map((skill, id) => ( 36 |
37 | {skill} 38 |

39 | {skill} 40 |

41 |
42 | ))} 43 | 44 |
45 |
46 |
47 | ) 48 | } 49 | 50 | export default Skills 51 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as Navbar } from './Navbar/Navbar' 2 | export { default as Footer } from './Footer/Footer' 3 | export { default as Landing } from './Landing/Landing' 4 | export { default as About } from './About/About' 5 | export { default as Skills } from './Skills/Skills' 6 | export { default as Testimonials } from './Testimonials/Testimonials' 7 | export { default as Blog } from './Blog/Blog' 8 | export { default as SingleBlog } from './Blog/SingleBlog/SingleBlog' 9 | export { default as Education } from './Education/Education' 10 | export { default as Experience } from'./Experience/Experience' 11 | export { default as Contacts } from'./Contacts/Contacts' 12 | export { default as Projects } from'./Projects/Projects' 13 | export { default as Services } from'./Services/Services' 14 | export { default as SingleProject } from './Projects/SingleProject/SingleProject' 15 | export { default as SingleService } from './Services/SingleService/SingleService' 16 | export { default as Achievement } from './Achievement/Achievement' 17 | 18 | export { default as BackToTop } from'./BackToTop/BackToTop' -------------------------------------------------------------------------------- /src/contexts/ThemeContext.js: -------------------------------------------------------------------------------- 1 | import React, { createContext, useState } from 'react' 2 | 3 | import { themeData } from '../data/themeData' 4 | 5 | export const ThemeContext = createContext() 6 | 7 | function ThemeContextProvider(props) { 8 | // eslint-disable-next-line 9 | const [theme, setTheme] = useState(themeData.theme) 10 | const [drawerOpen, setDrawerOpen] = useState(false) 11 | 12 | const setHandleDrawer = () => { 13 | setDrawerOpen(!drawerOpen) 14 | } 15 | 16 | 17 | 18 | const value = { theme, drawerOpen, setHandleDrawer } 19 | return ( 20 | 21 | {props.children} 22 | 23 | ) 24 | } 25 | 26 | 27 | export default ThemeContextProvider -------------------------------------------------------------------------------- /src/data/aboutData.js: -------------------------------------------------------------------------------- 1 | export const aboutData = { 2 | title: "Who I am", 3 | description1: "Hello! My name is Sreerag Rajan. I'm an aspiring web developer based in India.", 4 | description2: "I am a student at Masai School, currently learning Fullstack Web-Development. A project that I worked on towards the end of my Master’s in History set me on this path of a web developer. The project involved looking at movies on historical themes that could be considered as an educational tool. The website was not the focus of the project, but working on it was such a thrilling experience that a career in this felt like a right fit. Other than this I am a bibliophile, who not just loves reading books but also buying and maintaining a personal library.", 5 | image: 2 6 | } -------------------------------------------------------------------------------- /src/data/achievementData.js: -------------------------------------------------------------------------------- 1 | export const achievementData = { 2 | bio : "The illiterate of the 21st century will not be those who cannot read and write, but those who cannot learn, unlearn, and relearn. - Alvin Toffler", 3 | achievements : [ 4 | { 5 | id : 1, 6 | title : '2021 Complete Python Bootcamp From Zero to Hero in Python', 7 | details : 'A python course from Udemy', 8 | date : 'Jan 28, 2021', 9 | field : 'Coding', 10 | image : 'https://udemy-certificate.s3.amazonaws.com/image/UC-0cd075aa-f55b-4d9f-aec0-119020a4e792.jpg?v=1611846350000' 11 | }, 12 | { 13 | id : 2, 14 | title : 'The Ultimate MySQL Bootcamp: Go from SQL Beginner to Expert', 15 | details : 'A MySQL course from Udemy', 16 | date : 'May 25, 2021', 17 | field : 'Database', 18 | image : 'https://udemy-certificate.s3.amazonaws.com/image/UC-91ae3ea2-39ee-4a57-bf23-d397aff0d9a7.jpg?v=1621951317000' 19 | }, 20 | { 21 | id : 3, 22 | title : 'Machine Learning A-Z: Hands-On Python & R in Data Science', 23 | details : 'Data Science Course from Udemy', 24 | date : 'Apr 13, 2021', 25 | field : 'Machine Learning', 26 | image : 'https://udemy-certificate.s3.amazonaws.com/image/UC-d9a7ba99-8635-47e6-96fc-7dd26a3dcbf1.jpg?v=1618297236000' 27 | }, 28 | { 29 | id : 3, 30 | title : 'R Programming A-Z: R For Data Science With Real Exercises!', 31 | details : 'R Programming Language Course from Udemy', 32 | date : 'Feb 28, 2021', 33 | field : 'Data Science', 34 | image : 'https://udemy-certificate.s3.amazonaws.com/image/UC-8f5ff8e8-b6a4-4efd-a3fc-7fb63b29e77f.jpg?v=1614489452000' 35 | } 36 | 37 | ] 38 | } 39 | 40 | 41 | // Do not remove any fields. 42 | // Leave it blank instead as shown below. 43 | 44 | /* 45 | 46 | export const achievementData = { 47 | bio : "", 48 | achievements : [] 49 | } 50 | 51 | */ -------------------------------------------------------------------------------- /src/data/blogData.js: -------------------------------------------------------------------------------- 1 | export const blogData = [ 2 | { 3 | id: 1, 4 | title: 'Cloning Sportsjam.in', 5 | description: 'My expeirence working on my first big project within the Masai Curriculum', 6 | date: 'Dec 19, 2021', 7 | image: 'https://miro.medium.com/max/875/1*R__cdn8L1gYGK1Tdqqyubg.png', 8 | url: 'https://medium.com/@sreerag.rajan5/cloning-sportsjam-in-cd1c80c1b06b' 9 | }, 10 | { 11 | id: 2, 12 | title: 'CLONING RELIANCE DIGITAL', 13 | description: 'Experience of the second project.', 14 | date: 'Jan 23, 2022', 15 | image: 'https://miro.medium.com/max/875/1*nY9cUfzwtDaM6lGyvj4STg.png', 16 | url: 'https://medium.com/@sreerag.rajan5/cloning-reliance-digital-439cd56d46a3' 17 | }, 18 | { 19 | id: 3, 20 | title: 'Reliance Digital Clone (Part II)', 21 | description: 'The experience of the third project, with a focus on leadership skills', 22 | date: 'Feb 27, 2022', 23 | image: 'https://miro.medium.com/max/875/1*qRNfRbuHCDC1ct0chLZoWA.png', 24 | url: 'https://medium.com/@sreerag.rajan5/reliance-digital-clone-part-ii-57797eaf1ddf' 25 | }, 26 | 27 | ] 28 | 29 | 30 | 31 | 32 | // Do not remove any fields. 33 | // Leave it blank instead as shown below. 34 | 35 | 36 | /* 37 | { 38 | id: 1, 39 | title: 'Car Pooling System', 40 | description: '', 41 | date: 'Oct 1, 2020', 42 | image: '', 43 | url: 'https://preview.colorlib.com/theme/rezume/' 44 | }, 45 | */ -------------------------------------------------------------------------------- /src/data/contactsData.js: -------------------------------------------------------------------------------- 1 | export const contactsData = { 2 | email: 'sreerag.rajan5@gmail.com', 3 | phone: '+91 9663437669', 4 | address: '412 Ground Floor, Indraprastha Colony, Sector 30-33, Faridabad, Haryana, 121003', 5 | 6 | sheetAPI: '' 7 | } -------------------------------------------------------------------------------- /src/data/educationData.js: -------------------------------------------------------------------------------- 1 | export const educationData = [ 2 | { 3 | id: 1, 4 | institution: 'Ramjas College, Delhi University', 5 | course: 'B.A. Honours History', 6 | startYear: '2015', 7 | endYear: '2018' 8 | }, 9 | { 10 | id: 2, 11 | institution: 'Delhi University', 12 | course: 'M.A. History', 13 | startYear: '2019', 14 | endYear: '2021' 15 | }, 16 | { 17 | id: 3, 18 | institution: 'Masai School of Coding', 19 | course: 'Fullstack Web-Development', 20 | startYear: '2021', 21 | endYear: 'Present' 22 | }, 23 | ] -------------------------------------------------------------------------------- /src/data/experienceData.js: -------------------------------------------------------------------------------- 1 | export const experienceData = [ 2 | { 3 | id: 1, 4 | company: 'Globex Corporation', 5 | jobtitle: 'Frontend Developer', 6 | startYear: '2018', 7 | endYear: '2019' 8 | }, 9 | 10 | ] -------------------------------------------------------------------------------- /src/data/headerData.js: -------------------------------------------------------------------------------- 1 | import resume from '../assets/pdf/resume.pdf' 2 | 3 | export const headerData = { 4 | name: 'Sreerag Rajan', 5 | title: "Web Developer", 6 | desciption:"Life may be a meandering path but don't worry about it, rather enjoy it. It is about the journey, not the destination so explore all that comes your way, learn and grow from it, for this journey only happens once.", 7 | image: 'https://avatars.githubusercontent.com/u/85482640?v=4', 8 | resumePdf: resume 9 | } 10 | -------------------------------------------------------------------------------- /src/data/servicesData.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import { BiShoppingBag, BiPencil } from "react-icons/bi"; 3 | import { BsCodeSlash, BsClipboardData } from "react-icons/bs"; 4 | import { AiOutlineMail, AiFillAudio } from "react-icons/ai"; 5 | import { FaInternetExplorer, FaChalkboardTeacher, FaCameraRetro, FaPinterest, FaVideo, FaTabletAlt, FaRegNewspaper } from "react-icons/fa"; 6 | 7 | 8 | 9 | export const servicesData = [ 10 | // { 11 | // id: 1, 12 | // title: 'Marketing', 13 | // icon: 14 | // }, 15 | { 16 | id: 2, 17 | title: 'Content Writing', 18 | icon: 19 | }, 20 | { 21 | id: 3, 22 | title: 'Email Marketing', 23 | icon: 24 | }, 25 | // { 26 | // id: 4, 27 | // title: 'Internet Research', 28 | // icon: 29 | // }, 30 | // { 31 | // id: 5, 32 | // title: 'Tutoring', 33 | // icon: 34 | // }, 35 | 36 | { 37 | id: 6, 38 | title: 'Web Design', 39 | icon: 40 | }, 41 | { 42 | id: 7, 43 | title: 'Photography', 44 | icon: 45 | }, 46 | // { 47 | // id: 8, 48 | // title: 'Pinterest Virtual Assistant', 49 | // icon: 50 | // }, 51 | { 52 | id: 9, 53 | title: 'Video Editing', 54 | icon: 55 | }, 56 | // { 57 | // id: 10, 58 | // title: 'Data Entry', 59 | // icon: 60 | // }, 61 | { 62 | id: 11, 63 | title: 'Ebook Writing', 64 | icon: 65 | }, 66 | // { 67 | // id: 12, 68 | // title: 'Audio Transcription', 69 | // icon: 70 | // }, 71 | { 72 | id: 13, 73 | title: 'Blog Posting', 74 | icon: 75 | }, 76 | 77 | ] 78 | 79 | // Uncomment your required service. 80 | // Couldn't find the required services? Raise an issue on github at https://github.com/hhhrrrttt222111/developer-portfolio/issues/new 81 | // You can also add on your own 😉. -------------------------------------------------------------------------------- /src/data/skillsData.js: -------------------------------------------------------------------------------- 1 | export const skillsData = [ 2 | 'HTML', 3 | 'Javascript', 4 | 'CSS', 5 | 'React', 6 | 'Django', 7 | 'MongoDB', 8 | 'MySQL', 9 | 'Python' 10 | ] 11 | 12 | // Choose your skills from below. Make sure it's in the same format and spelled correctly. 13 | // Couldn't find the required skills? Raise an issue on github at https://github.com/hhhrrrttt222111/developer-portfolio/issues/new 14 | 15 | 16 | // AVAILABLE SKILLS 17 | 18 | /* 19 | HTML 20 | CSS 21 | JS 22 | React 23 | Next JS 24 | Nuxt JS 25 | Node JS 26 | Vue 27 | Angular 28 | Docker 29 | Photoshop 30 | Illustrator 31 | Svelte 32 | GCP 33 | Azure 34 | Fastify 35 | Haxe 36 | Ionic 37 | Markdown 38 | Microsoft Office 39 | Picsart 40 | Sketch 41 | Unity 42 | WolframAlpha 43 | Adobe XD 44 | After Effects 45 | Bootstrap 46 | Bulma 47 | CapacitorJs 48 | Coffeescript 49 | MemSQL 50 | C 51 | C++ 52 | C# 53 | Python 54 | Java 55 | Julia 56 | Matlab 57 | Swift 58 | Ruby 59 | Kotlin 60 | Go 61 | PHP 62 | Flutter 63 | Dart 64 | Typescript 65 | Swift 66 | Git 67 | Figma 68 | Canva 69 | Ubuntu 70 | Bootstrap 71 | MongoDB 72 | Tailwind 73 | ViteJS 74 | VuetifyJS 75 | MySQL 76 | PostgreSQL 77 | AWS 78 | Firebase 79 | Blender 80 | Premiere Pro 81 | Adobe Audition 82 | Deno 83 | Django 84 | Gimp 85 | Graphql 86 | Lightroom 87 | MaterialUI 88 | Nginx 89 | Numpy 90 | OpenCV 91 | Pytorch 92 | Selenium 93 | Strapi 94 | Tensorflow 95 | Webex 96 | Wordpress 97 | */ 98 | -------------------------------------------------------------------------------- /src/data/socialsData.js: -------------------------------------------------------------------------------- 1 | export const socialsData = { 2 | github: 'https://github.com/sreerag-rajan', 3 | facebook: '', 4 | linkedIn: 'https://www.linkedin.com/in/sreerag-rajan-55383a222', 5 | instagram: '', 6 | codepen: '', 7 | twitter: '', 8 | reddit: '', 9 | blogger: '', 10 | medium: 'https://medium.com/@sreerag.rajan5', 11 | stackOverflow: '', 12 | gitlab: '', 13 | youtube: '' 14 | } -------------------------------------------------------------------------------- /src/data/testimonialsData.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import girl1 from '../assets/svg/testimonials/girl1.svg' 3 | import girl2 from '../assets/svg/testimonials/girl2.svg' 4 | import girl3 from '../assets/svg/testimonials/girl3.svg' 5 | import boy1 from '../assets/svg/testimonials/boy1.svg' 6 | import boy2 from '../assets/svg/testimonials/boy2.svg' 7 | import boy3 from '../assets/svg/testimonials/boy3.svg' 8 | 9 | 10 | 11 | export const testimonialsData = [ 12 | { 13 | id: 1, 14 | name: 'Chandler Bing', 15 | title: 'Transponster', 16 | text: "Building my own portfolio could've never been easier than this. The only areas I'm good at are Math, Jokes and Dance.", 17 | image: boy2 18 | }, 19 | { 20 | id: 2, 21 | name: 'Monica Geller', 22 | title: 'Head Chef', 23 | text: "This is the only thing that I didn't have to spend time to sort out. It's tidy all by itself.", 24 | image: girl2 25 | }, 26 | { 27 | id: 3, 28 | name: 'Phoebe Buffay', 29 | title: 'Massuese', 30 | text: "Heard of the song 'Smelly Cat!!' ? This website made it viral. Plus portfolio is the only thing that Ursula doesn't have :)", 31 | image: girl1 32 | }, 33 | { 34 | id: 4, 35 | name: 'Joey Tribbiani', 36 | title: 'Actor', 37 | text: "Making my portfolio with this helped me get my role as 'Dr. Drake Ramoray' in 'Days Of Our Lives'. You guys are the best !", 38 | image: boy1 39 | }, 40 | { 41 | id: 5, 42 | name: 'Rachel Green', 43 | title: 'Sales Executive', 44 | text: 'Ralph Lauren was one of the best things that ever happened to me. My portfolio made that dream happen. I owe you guys.', 45 | image: girl3 46 | }, 47 | { 48 | id: 6, 49 | name: 'Ross Geller', 50 | title: 'Paleontologist', 51 | text: "Be it 'Rocks' or 'Bones', you need a website to display it. This is it. Great work guys !", 52 | image: boy3 53 | } 54 | ] 55 | 56 | -------------------------------------------------------------------------------- /src/data/themeData.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import { 3 | greenThemeLight, greenThemeDark, bwThemeLight, bwThemeDark, blueThemeLight, blueThemeDark, redThemeLight, redThemeDark, orangeThemeLight, orangeThemeDark, purpleThemeLight, purpleThemeDark, pinkThemeLight, pinkThemeDark, yellowThemeLight, yellowThemeDark 4 | } from '../theme/theme' 5 | 6 | 7 | export const themeData = { 8 | theme: blueThemeLight 9 | } 10 | 11 | 12 | // Choose theme from above -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Text:wght@100;300;400;500;600;700&display=swap'); 3 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet'); 4 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700&display=swap'); 5 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,200;1,300;1,400&display=swap'); 6 | @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200&display=swap'); 7 | @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&display=swap'); 8 | 9 | @font-face { 10 | font-family: 'BestermindRegular'; 11 | src: url('./assets/fonts/Bestermind/BestermindRegular.ttf'); 12 | src: url('./assets/fonts/Bestermind/BestermindRegular.ttf') format('embedded-opentype'), 13 | url('./assets/fonts/Bestermind/BestermindRegular.ttf') format('truetype'), 14 | } 15 | 16 | * { 17 | margin: 0; 18 | box-sizing: border-box; 19 | } 20 | 21 | a { 22 | text-decoration: none; 23 | } 24 | 25 | 26 | /* scrollBar */ 27 | 28 | ::-webkit-scrollbar { 29 | width: 10px; 30 | height: 10px; 31 | } 32 | ::-webkit-scrollbar-track { 33 | background: #555; 34 | } 35 | ::-webkit-scrollbar-thumb { 36 | background: #555; 37 | border-radius: 10px; 38 | transition: 0.3s; 39 | } 40 | 41 | img{ 42 | -webkit-touch-callout: none; 43 | -webkit-user-select: none; 44 | -khtml-user-select: none; 45 | -moz-user-select: none; 46 | -ms-user-select: none; 47 | user-select: none; 48 | 49 | } 50 | 51 | 52 | @media screen and (max-width: 400px) { 53 | body { 54 | overflow-x: hidden; 55 | } 56 | } 57 | 58 | @media only screen and (min-device-width: 320px) and (max-device-width: 59 | 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) { 60 | body { 61 | overflow-x: hidden; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /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 ThemeContextProvider from './contexts/ThemeContext' 7 | 8 | 9 | import "slick-carousel/slick/slick.css"; 10 | import "slick-carousel/slick/slick-theme.css"; 11 | 12 | ReactDOM.render( 13 | 14 | 15 | , 16 | document.getElementById('root') 17 | ); 18 | 19 | 20 | reportWebVitals(); 21 | -------------------------------------------------------------------------------- /src/pages/Blog/BlogPage.css: -------------------------------------------------------------------------------- 1 | .blogPage { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | justify-content: flex-start; 6 | min-height: 100vh; 7 | } 8 | 9 | 10 | .blogPage--header { 11 | height: 35vh; 12 | width: 100%; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | position: relative; 17 | } 18 | 19 | .blogPage--header h1 { 20 | font-size: 4rem; 21 | font-family: var(--primaryFont); 22 | } 23 | 24 | .blogPage--container { 25 | padding: 3rem 2rem; 26 | width: 100%; 27 | display: flex; 28 | flex-direction: column; 29 | align-items: center; 30 | justify-content: flex-start; 31 | } 32 | 33 | 34 | .blog--search { 35 | width: 100%; 36 | display: flex; 37 | align-items: center; 38 | justify-content: center; 39 | } 40 | 41 | .blog--input { 42 | width: 30%; 43 | height: 2.75rem; 44 | outline: none; 45 | border: none; 46 | border-radius: 20px; 47 | padding: 0.25rem 1rem; 48 | } 49 | 50 | .blog--input::placeholder { 51 | color: white; 52 | } 53 | 54 | .blogs--container { 55 | margin-top: 5rem; 56 | width: 100%; 57 | } 58 | 59 | 60 | .blog-grid { 61 | display: flex; 62 | gap: 4rem; 63 | } 64 | 65 | 66 | 67 | @media (min-width: 992px) and (max-width: 1380px) { 68 | 69 | } 70 | 71 | 72 | @media screen and (max-width: 992px) { 73 | .blogPage--header { 74 | height: 25vh; 75 | width: 100%; 76 | display: flex; 77 | align-items: center; 78 | justify-content: center; 79 | } 80 | 81 | .blog-grid { 82 | gap: 3rem; 83 | } 84 | .blog--input { 85 | width: 100%; 86 | } 87 | } 88 | 89 | @media screen and (max-width: 800px) { 90 | 91 | } 92 | 93 | @media screen and (max-width: 702px) { 94 | .blog-grid { 95 | gap: 1.5rem; 96 | } 97 | } 98 | 99 | @media screen and (max-width: 550px) { 100 | .blogPage--header h1 { 101 | font-size: 3rem; 102 | } 103 | } 104 | @media screen and (max-width: 400px) { 105 | .blogPage--header { 106 | height: 20vh; 107 | } 108 | .blogPage--header h1 { 109 | font-size: 2.5rem; 110 | } 111 | } 112 | 113 | @media only screen and (min-device-width: 320px) and (max-device-width: 114 | 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) { 115 | 116 | } 117 | 118 | 119 | @media only screen and (device-width: 768px) { 120 | 121 | } -------------------------------------------------------------------------------- /src/pages/Main/Main.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Helmet } from 'react-helmet' 3 | 4 | import { Navbar, Footer, Landing, About, Skills, Testimonials, Blog, Education, Experience, Contacts, Projects, Services, Achievement } from '../../components' 5 | import { headerData } from '../../data/headerData' 6 | 7 | function Main() { 8 | return ( 9 |
10 | 11 | {headerData.name} - Porfolio 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | {/* */} 22 | 23 | {/*
25 | ) 26 | } 27 | 28 | export default Main 29 | -------------------------------------------------------------------------------- /src/pages/Project/ProjectPage.css: -------------------------------------------------------------------------------- 1 | .projectPage { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | justify-content: flex-start; 6 | min-height: 100vh; 7 | } 8 | 9 | .projectPage-header { 10 | height: 35vh; 11 | width: 100%; 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | position: relative; 16 | } 17 | 18 | .projectPage-header > h1 { 19 | font-size: 4rem; 20 | font-family: var(--primaryFont); 21 | } 22 | 23 | .projectPage-container { 24 | padding: 3rem 2rem; 25 | width: 100%; 26 | display: flex; 27 | flex-direction: column; 28 | align-items: center; 29 | justify-content: flex-start; 30 | } 31 | 32 | .projectPage-search { 33 | width: 100%; 34 | display: flex; 35 | align-items: center; 36 | justify-content: center; 37 | } 38 | 39 | .project-container { 40 | margin-top: 5rem; 41 | width: 100%; 42 | } 43 | 44 | .project-grid { 45 | display: flex; 46 | gap: 4rem; 47 | } 48 | 49 | @media (min-width: 992px) and (max-width: 1380px) { 50 | 51 | } 52 | 53 | @media screen and (max-width: 992px) { 54 | .projectPage-header { 55 | height: 25vh; 56 | width: 100%; 57 | display: flex; 58 | align-items: center; 59 | justify-content: center; 60 | } 61 | 62 | .project-grid { 63 | gap: 3rem; 64 | } 65 | } 66 | 67 | @media screen and (max-width: 702px) { 68 | .project-grid { 69 | gap: 1.5rem; 70 | } 71 | } 72 | 73 | @media screen and (max-width: 550px) { 74 | .projectPage-header h1 { 75 | font-size: 3rem; 76 | } 77 | } 78 | @media screen and (max-width: 400px) { 79 | .projectPage-header { 80 | height: 20vh; 81 | } 82 | .projectPage-header h1 { 83 | font-size: 2.5rem; 84 | } 85 | } -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | export { default as Main } from './Main/Main' 2 | export { default as BlogPage } from './Blog/BlogPage' 3 | export { default as ProjectPage } from './Project/ProjectPage' -------------------------------------------------------------------------------- /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/theme/images.js: -------------------------------------------------------------------------------- 1 | import blueThemegirl from '../assets/svg/about/blueTheme-girl.svg' 2 | import blueThemeboy from '../assets/svg/about/blueTheme-boy.svg' 3 | import bwThemeboy from '../assets/svg/about/bwTheme-boy.svg' 4 | import bwThemegirl from '../assets/svg/about/bwTheme-girl.svg' 5 | import greenThemeboy from '../assets/svg/about/greenTheme-boy.svg' 6 | import greenThemegirl from '../assets/svg/about/greenTheme-girl.svg' 7 | import orangeThemeboy from '../assets/svg/about/orangeTheme-boy.svg' 8 | import orangeThemegirl from '../assets/svg/about/orangeTheme-girl.svg' 9 | import pinkThemeboy from '../assets/svg/about/pinkTheme-boy.svg' 10 | import pinkThemegirl from '../assets/svg/about/pinkTheme-girl.svg' 11 | import purpleThemeboy from '../assets/svg/about/purpleTheme-boy.svg' 12 | import purpleThemegirl from '../assets/svg/about/purpleTheme-girl.svg' 13 | import redThemeboy from '../assets/svg/about/redTheme-boy.svg' 14 | import redThemegirl from '../assets/svg/about/redTheme-girl.svg' 15 | import yellowThemeboy from '../assets/svg/about/yellowTheme-boy.svg' 16 | import yellowThemegirl from '../assets/svg/about/yellowTheme-girl.svg' 17 | 18 | import eduBlue from '../assets/svg/education/eduBlue.svg' 19 | import eduGreen from '../assets/svg/education/eduGreen.svg' 20 | import eduBlack from '../assets/svg/education/eduBlack.svg' 21 | import eduOrange from '../assets/svg/education/eduOrange.svg' 22 | import eduPink from '../assets/svg/education/eduPink.svg' 23 | import eduPurple from '../assets/svg/education/eduPurple.svg' 24 | import eduRed from '../assets/svg/education/eduRed.svg' 25 | import eduYellow from '../assets/svg/education/eduYellow.svg' 26 | 27 | import expBlue from '../assets/svg/experience/expBlue.svg' 28 | import expGreen from '../assets/svg/experience/expGreen.svg' 29 | import expBlack from '../assets/svg/experience/expBlack.svg' 30 | import expOrange from '../assets/svg/experience/expOrange.svg' 31 | import expPink from '../assets/svg/experience/expPink.svg' 32 | import expPurple from '../assets/svg/experience/expPurple.svg' 33 | import expRed from '../assets/svg/experience/expRed.svg' 34 | import expYellow from '../assets/svg/experience/expYellow.svg' 35 | 36 | import contactsBlue from '../assets/svg/contacts/contactsBlue.svg' 37 | import contactsGreen from '../assets/svg/contacts/contactsGreen.svg' 38 | import contactsBlack from '../assets/svg/contacts/contactsBlack.svg' 39 | import contactsOrange from '../assets/svg/contacts/contactsOrange.svg' 40 | import contactsPink from '../assets/svg/contacts/contactsPink.svg' 41 | import contactsPurple from '../assets/svg/contacts/contactsPurple.svg' 42 | import contactsRed from '../assets/svg/contacts/contactsRed.svg' 43 | import contactsYellow from '../assets/svg/contacts/contactsYellow.svg' 44 | 45 | 46 | export { 47 | blueThemegirl, blueThemeboy, bwThemeboy, bwThemegirl, greenThemeboy, greenThemegirl, orangeThemeboy, 48 | orangeThemegirl, pinkThemeboy, pinkThemegirl, purpleThemeboy, purpleThemegirl, redThemeboy, redThemegirl, 49 | yellowThemeboy,yellowThemegirl,eduBlue,eduBlack,eduGreen,eduOrange,eduPink,eduPurple,eduRed,eduYellow, 50 | expBlue,expBlack,expGreen,expOrange,expPink,expPurple,expRed,expYellow,contactsBlue,contactsBlack, 51 | contactsGreen,contactsOrange,contactsPink,contactsPurple,contactsRed,contactsYellow 52 | } -------------------------------------------------------------------------------- /src/utils/ScrollToTop.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | import { withRouter } from 'react-router-dom'; 3 | 4 | function ScrollToTop({ history }) { 5 | useEffect(() => { 6 | const unlisten = history.listen(() => { 7 | window.scrollTo(0, 0); 8 | }); 9 | return () => { 10 | unlisten(); 11 | } 12 | }); 13 | 14 | return (null); 15 | } 16 | 17 | export default withRouter(ScrollToTop); --------------------------------------------------------------------------------