├── 404.html ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── assets ├── css │ ├── 404.css │ ├── cursor.css │ ├── education.css │ ├── experience.css │ ├── home.css │ ├── hover-min.css │ ├── preloader.css │ ├── project.css │ ├── references.css │ ├── research.css │ ├── skills.css │ ├── style.css │ └── travel_temp.css ├── custom_illustrations │ ├── 1.svg │ ├── 2.svg │ ├── Project Section (1).png │ └── Project Section.png ├── docs │ └── john_doe.pdf ├── fonts │ └── Agustina.woff ├── icons │ └── arrow-right │ │ └── arrow-right-circle.svg ├── images │ ├── Hand.gif │ ├── education-page │ │ ├── coursera2.svg │ │ ├── data-science.svg │ │ ├── edTimeline1.png │ │ ├── edTimeline2.png │ │ ├── edTimeline3.png │ │ ├── education.png │ │ ├── edx.svg │ │ ├── header-female.svg │ │ ├── header-male.svg │ │ ├── problem-solving.svg │ │ ├── robotics.svg │ │ ├── timeline-1.svg │ │ ├── timeline-2.svg │ │ ├── udacity.svg │ │ ├── udemy.svg │ │ └── udemy2.svg │ ├── experience-page │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── IIT_Bombay.jpg │ │ ├── ISI.png │ │ ├── UCL.jpg │ │ ├── atlas.png │ │ ├── citro.png │ │ ├── elevate.png │ │ ├── experience.svg │ │ ├── flipkart.jpg │ │ ├── gsoc.png │ │ ├── hack3.png │ │ ├── hackasolution.png │ │ ├── hakin.png │ │ ├── jithack.png │ │ ├── lema-labs.jpg │ │ ├── lema-labs.png │ │ ├── mission.png │ │ ├── neo.png │ │ ├── nhacks.png │ │ ├── pitchteen.png │ │ ├── recess.png │ │ ├── securitybox.jpeg │ │ ├── ulhacks.png │ │ ├── uniglobe.png │ │ ├── uplift.png │ │ └── wafflehacks.png │ ├── favicon.png │ ├── hmk.png │ ├── home │ │ └── resume.png │ ├── project-page │ │ ├── autovaidya.jpg │ │ ├── battery.png │ │ ├── book.png │ │ ├── chess.jpg │ │ ├── deepholi.jpg │ │ ├── doc2pen.jpg │ │ ├── exercise.jpg │ │ ├── flappybird.png │ │ ├── header-female.svg │ │ ├── header-male.svg │ │ ├── minesweeper.jpg │ │ ├── movie-recommendation.jpeg │ │ ├── music.jpg │ │ ├── poker.jpg │ │ ├── project-card.svg │ │ ├── quiz.jpg │ │ ├── recipe.jpg │ │ └── tic-tac-toe.png │ ├── references-page │ │ ├── referencesvg.svg (1).svg │ │ ├── referencesvg.svg.svg │ │ ├── reviewphoto1.png │ │ ├── reviewphoto2.png │ │ ├── reviewphoto3.png │ │ ├── reviewphoto4.png │ │ ├── reviewphoto5.png │ │ └── team.png │ ├── research-page │ │ ├── crossLingual.png │ │ ├── deepNetwork.png │ │ ├── dialogueState.png │ │ ├── imageDecomposition.png │ │ ├── inteferenceNetwork.png │ │ ├── neuralNetworks.jpg │ │ ├── research.svg │ │ ├── research1.svg │ │ ├── semanticSegmentation.png │ │ └── wordRepresentation.png │ └── skills-page │ │ ├── c.png │ │ ├── cpp.png │ │ ├── css.png │ │ ├── git.png │ │ ├── html.png │ │ ├── javascript.png │ │ └── python.png └── js │ ├── 404.js │ ├── app.js │ ├── cursor.js │ ├── dynamicTitle.js │ ├── education.js │ ├── experience.js │ ├── particle.js │ ├── particles.js │ ├── particles.min.js │ ├── project.js │ ├── references.js │ ├── research.js │ └── skills.js ├── education.html ├── experience.html ├── index.html ├── projects.html ├── reference.html ├── research.html ├── robots.txt └── skills.html /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at smaranjitghose@protonmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution Guidelines [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/smaranjitghose/awesome-portfolio-websites/issues): 2 | 3 | 4 |

5 | 6 | We want to make contributing to this project as easy and as transparent as possible, whether it's:
7 | 8 | - Reporting a bug :bug: 9 | 10 | - Submitting a fix :mag_right: 11 | 12 | - Proposing new features :bulb: 13 | 14 | If you wish to contribute to this project, please raise an issue and wait for the project maintainers to approve it or give feedback before making a change. 15 | 16 | This documentation contains a set of guidelines to help you during the contribution process. We are happy to welcome all the contributions from anyone willing to improve/add new scripts to this project. 17 | 18 | ## Code of Conduct 19 | 20 | Make sure to read it here: [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) 21 | 22 | 23 | ## Preliminaries 24 | 25 | - Download and install the latest stable version of [Git](https://git-scm.com/downloads) 📥 for version control 26 | - Create a [Github](https://github.com/join) Account 📇 27 | - Download and install latest stable version of [VS Code](https://code.visualstudio.com/download) 28 | 29 | ## A. Setting up the Project 30 | 31 | **1.** Fork [this](https://github.com/smaranjitghose/awesome-portfolio-websites) repository. 32 | 33 |

34 | 35 | 36 | **2.** Clone your forked copy of the project. 37 | 38 | ``` 39 | git clone --depth 1 https://github.com//awesome-portfolio-websites.git 40 | ``` 41 |

42 | 43 | **3.** Navigate to the project directory :file_folder: . 44 | 45 | ``` 46 | cd awesome-portfolio-websites 47 | ``` 48 | 49 | **4.** Add a reference to the original repository. 50 | 51 | ``` 52 | git remote add upstream https://github.com/smaranjitghose/awesome-portfolio-websites.git 53 | ``` 54 | 55 | **5.** Check the remotes for this repository. 56 | 57 | ``` 58 | git remote -v 59 | ``` 60 | 61 | **6.** Always take a pull from the upstream repository to your master branch to keep it at par with the main project(updated repository). 62 | 63 | ``` 64 | git pull upstream master 65 | ``` 66 | 67 | - Comment on any existing [issue(s)](https://github.com/smaranjitghose/awesome-portfolio-websites/issues) raised by **project maintainers**. Otherwise raise a [new issue](https://github.com/smaranjitghose/awesome-portfolio-websites/issues/new). 68 | 69 | > ### Guidelines for raising a new issue: 70 | > 71 | > - Each issue should have an appropriate and short title like "Bug in Experience Page" 72 | > 73 | > - Whenever a participant raises an issue, by default it would be assigned to that participant due to obvious reasons. 74 | > 75 | > - Be specific about your intended changes/suggestions 76 | > 77 | > - Refrain from using phrases like "Hi, I am ..", "Please assign me this issue", "Thank You..", etc. We are only interested in technical parts 78 | > 79 | > - Attach a screenshot/clip if applicable 80 | > 81 | > - Please be patient enough. The project maintainers/mentors would review it as per their schedule. Refrain from putting up comments like "Please check this" ,"Please review this PR" etc. 82 | > 83 | >- An issue would be assigned to a participant for a minimum of 1 day and a maximum of 3 days. If the tenure of a particular participant is not over please do not spam the issue thread by writing, " I am interested" etc. You are welcome to do so if the participant has not met the requirements with around 12 hours remaining for their deadline. 84 | > 85 | > - Feel free to suggest your opinions on the already raised issues. 86 | > 87 | > - All participants are welcomed to suggest new features/bug fixes/improvements and raise new issues for those. However, the assignment would be done once approved by either of the project maintainers or the mentors. 88 | > 89 | > - Do not blindly comment on issues raised by other participant(s). Unless a minimum of 48 hours has passed since their assignment, the issue would not be re-assigned(excluding certain cases). The issue raised by a participant will always to be assigned to him/her by default. Do not spam "Interested", "Please assign me" in others issues. 90 | > 91 | > - Always keep a note of the deadline. 92 | 93 | ## B. Contributing to the Project 94 | 95 | - Once the project maintainer(s)/mentor(s) have reviewed the issue/assigned you the issue. Start working on the changes. 96 | 97 | **1.** Create a new branch (DO NOT name it MAIN or MASTER or anything random). 98 | 99 | ``` 100 | git checkout -b 101 | ``` 102 | 103 | **2.** Perfom your desired changes to the code base. 104 | - Make sure that you do not change any code unrelated to the task that you have been assigned 105 | 106 | - Ensure that your changes apply to all screensizes 107 | 108 | - Comment any new code addition(s) 109 | 110 | - Do not mess up the directory structure 111 | 112 | - Preview your changes and test them properly before proceding ahead 113 | 114 |

115 | 116 | - Make a small clip or take screenshots before and after making changes. 117 | 118 | 119 | **3.** Track your changes:heavy_check_mark: 120 | 121 | ``` 122 | git add . 123 | ``` 124 | 125 | **4.** Commit your changes . 126 | 127 | ``` 128 | git commit -m "Relevant message" (usually title of the pull request) 129 | ``` 130 | - **Make sure to condense your changes into a single commit**. 131 | 132 | **5.** Push the committed changes in your feature branch to your remote repo. 133 | 134 | ``` 135 | git push -u origin 136 | ``` 137 | 138 | **6.** To create a pull request, click on `compare and pull requests`. Please ensure you compare your feature branch to the desired branch of the repo you are suppose to make a PR to. 139 | 140 | 141 | 142 | **7.** Then add an appropriate title and description to your pull request that explains your changes and efforts done. 143 | 144 | 145 | **8.** Click on `Create Pull Request`. 146 | 147 | 148 | 149 | > ### Guidelines for raising a pull request: 150 | > 151 | > - Each pull request should have an appropriate and short title like "Fixed Bug in Experience Page" 152 | > 153 | > - In case of multiple commits, please perform a rebase and make a squash commit before giving the pull request. 154 | > 155 | > - Pull Requests without a description would often not be reviewed. Make sure you describe your intended changes in the description section of the pull request. (Use bullet points and phrases) 156 | > 157 | > - Make sure to refer the respective issue in the respective PR using phrases like `Resolves #issue_number` or `Closes #issue_number`. Here's an example to raise a PR: 158 | ``` 159 | Fixes #640 160 | 161 | # Work Done: 162 | 163 | - Fixed Responsiveness bug in the MOOC Section of the Education Page 164 | - Made the Favicon more optimized 165 | - ... 166 | - ... 167 | - ... 168 | 169 | # Relevant Screenshots/Gifs 170 | ``` 171 | 172 | > - Refrain from using phrases like "Hi, I am ..", "Please merge me this PR", "Thank You..", etc. We are only interested in technical parts. 173 | > 174 | > - Attach a screenshot/clip of the change(s). 175 | > 176 | > - Please be patient enough. The project maintainers/mentors would review it as per their schedule. Please do not start putting comments like "Please check this" etc. 177 | > 178 | > - Not every PR would be merged directly. In majority of the scenarios, we would be offering some additional suggestions which are to be incorporated in the same PR with a squash commit. 179 | > 180 | > - Look out for possible merge conflicts. Please add comments required, this makes your code readable. 181 | > 182 | >- Make sensible variable names. For example, card1 is quite ambiguous but education_card implies what that variable is declared for. 183 | > 184 | > - Although we support feedback from everyone in all phases of development, it is highly advised not to put any negative comments in other participant's pull requests. 185 | > 186 | > - Always keep a note of the deadline. 187 | 188 | 189 | **9.** Voila :exclamation: You have made a PR to the awesome-developer-portfolio project :boom: . Sit back patiently and relax while the project maintainers review your PR. Please understand at times the time can vary from a few hours to a few days. 190 | 191 |

192 | 193 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Smaranjit Ghose, Anush Bhatia 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Updating ... -------------------------------------------------------------------------------- /assets/css/404.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400&display=swap"); 2 | 3 | body { 4 | background: linear-gradient(to right, #02aab0, #00cdac); 5 | } 6 | .container { 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | width: 100%; 11 | } 12 | svg { 13 | width: 50rem; 14 | height: auto; 15 | } 16 | #handboy { 17 | animation: swing ease-in-out 1.3s infinite alternate; 18 | transform-origin: 98% 98%; 19 | transform-box: fill-box; 20 | } 21 | #girllight { 22 | animation: swing ease-in-out 1.3s infinite alternate; 23 | transform-origin: 0% 97%; 24 | transform-box: fill-box; 25 | } 26 | #hairgirl { 27 | animation: swinghair ease-in-out 1.3s infinite alternate; 28 | transform-origin: 60% 0%; 29 | transform-box: fill-box; 30 | } 31 | #zero { 32 | transform-origin: bottom; 33 | transform-box: fill-box; 34 | } 35 | @keyframes swing { 36 | 0% { 37 | transform: rotate(10deg); 38 | } 39 | 100% { 40 | transform: rotate(-10deg); 41 | } 42 | } 43 | @keyframes swinghair { 44 | 0% { 45 | transform: rotate(6deg); 46 | } 47 | 100% { 48 | transform: rotate(-6deg); 49 | } 50 | } 51 | 52 | /* go back btn */ 53 | .backbtn { 54 | display: flex; 55 | justify-content: center; 56 | align-items: center; 57 | } 58 | .btn { 59 | font-family: "Nunito", sans-serif; 60 | line-height: 0; 61 | padding: 0.8rem 1rem; 62 | border-radius: 8em; 63 | transition: 0.5s; 64 | margin-top: 2rem; 65 | color: #fff; 66 | background: #272727; 67 | box-shadow: 0px 5px 10px rgba(109, 39, 238, 0.6); 68 | } 69 | .btn span { 70 | font-family: "Nunito", sans-serif; 71 | font-weight: 700; 72 | font-size: 1.3rem; 73 | letter-spacing: 0.1rem; 74 | } 75 | .btn i { 76 | margin-left: 0.3rem; 77 | font-size: 1.2rem; 78 | transition: 0.3s; 79 | } 80 | .btn:hover { 81 | color: rgb(255, 230, 0); 82 | } 83 | .btn:hover i { 84 | transform: translateX(-4px); 85 | } 86 | 87 | /* responsiveness */ 88 | @media (max-width: 550px) { 89 | svg { 90 | width: 24rem; 91 | margin-top: 10rem; 92 | margin-bottom: 4rem; 93 | } 94 | .btn { 95 | padding: 0.8rem 0.8rem; 96 | border-radius: 6em; 97 | margin-top: 1.5rem; 98 | } 99 | .btn i { 100 | margin-left: 0.2rem; 101 | font-size: 1rem; 102 | } 103 | .btn span { 104 | font-size: 1rem; 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /assets/css/cursor.css: -------------------------------------------------------------------------------- 1 | html, 2 | html *, 3 | body, 4 | body * { 5 | cursor: none; 6 | } 7 | 8 | .cursor-dot, 9 | .cursor-dot-outline { 10 | pointer-events: none; 11 | z-index: 2; 12 | position: absolute; 13 | top: 50%; 14 | left: 50%; 15 | border-radius: 50%; 16 | opacity: 0; 17 | transform: translate(-50%, -50%); 18 | transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; 19 | } 20 | 21 | .cursor-dot { 22 | width: 10px; 23 | height: 10px; 24 | background-color: #b83030f1; 25 | } 26 | 27 | .cursor-dot-outline { 28 | width: 20px; 29 | height: 20px; 30 | background-color: rgba(211, 115, 115, 0.959); 31 | } 32 | -------------------------------------------------------------------------------- /assets/css/home.css: -------------------------------------------------------------------------------- 1 | /*Declaration of CSS variables for light/dark theme*/ 2 | 3 | html[data-theme="light"] { 4 | --col-icon: black; 5 | --col-bd-radius:rgb(2, 2, 2); 6 | --col-box-shadow:#000000 2px 2px 4px, 7 | #4D4D4D -2px -2px 4px; 8 | --col-box-shadow-hover:inset #8a7373 2px 2px 4px, 9 | inset #4D4D4D -2px -2px 4px; 10 | --col-bd-icon:transparent; 11 | --bg-icon: #fff; 12 | --bg1-color: #fff; 13 | --col-icon-dribbble: #ea4c89; 14 | --col-icon-linkedin: #0e76a8; 15 | --col-icon-facebook: #41aff3; 16 | --col-icon-instagram: rgb(201, 94, 174); 17 | --col-icon-mail:rgb(209, 82, 82); 18 | --col-icon-google-scholar:#3cba54; 19 | --col-icon-codeforces:rgb(19, 145, 184); 20 | --col-icon-leetcode:rgb(255, 181, 62); 21 | --shadow-col: rgba(0, 0, 0, 0.3); 22 | 23 | } 24 | 25 | html[data-theme="dark"] { 26 | --col-icon:white; 27 | --col-bd-radius:black; 28 | --col-bd-icon:transparent; 29 | --col-box-shadow: 5px 5px 10px rgba(22, 21, 21, 0.7) , -5px -5px 10px rgba(255,255,255,0.1); 30 | --col-box-shadow-hover:inset rgba(255, 255, 255, 1) 2px 2px 4px, 31 | inset rgba(255, 255, 255, 0.5) -2px -2px 4px; 32 | --col-icon-dribbble: #ea4c89; 33 | --col-icon-linkedin: #0e76a8; 34 | --col-icon-facebook: #41aff3; 35 | --col-icon-instagram: rgb(201, 94, 174); 36 | --col-icon-mail:rgb(209, 82, 82); 37 | --col-icon-google-scholar:#3cba54; 38 | --col-icon-codeforces:rgb(19, 145, 184); 39 | --col-icon-leetcode:rgb(255, 181, 62); 40 | --col-white: #fff; 41 | } 42 | /* Particle effect*/ 43 | body{ 44 | font-family: "Poppins"; 45 | } 46 | #home, 47 | particles-js { 48 | position: relative; 49 | height: 100vh; 50 | width: 100%; 51 | } 52 | 53 | .section { 54 | background-color: rgb(63, 25, 170); 55 | justify-content: center; 56 | align-items: center; 57 | } 58 | 59 | .text .header { 60 | font-weight: bold; 61 | } 62 | 63 | .text { 64 | font-size: 25px; 65 | top: 40%; 66 | left: 50%; 67 | transform: translate(-50%, -50%); 68 | position: absolute; 69 | } 70 | 71 | .animated-text span { 72 | display: none; 73 | line-height: 1; 74 | } 75 | 76 | .animated-text span.active { 77 | display: inline; 78 | } 79 | 80 | .animated-text:after { 81 | content: "."; 82 | display: inline; 83 | width: 6px; 84 | text-indent: 0; 85 | background: var(--col-icon); 86 | animation: blink 0.3s infinite alternate; 87 | } 88 | .datawords{ 89 | white-space: nowrap; 90 | overflow: hidden; 91 | text-overflow: ellipsis; 92 | white-space: nowrap; 93 | } 94 | 95 | @keyframes blink { 96 | from { 97 | opacity: 0; 98 | } 99 | 100 | to { 101 | opacity: 1; 102 | } 103 | } 104 | 105 | /*Social icons*/ 106 | 107 | :root { 108 | --link-size: 64px; 109 | --trans-props: all 0.2s ease; 110 | --link-size-footer-b: 40px; 111 | --link-size-footer-s: 30px; 112 | } 113 | 114 | a.socialicon { 115 | box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2); 116 | } 117 | 118 | .social-icons { 119 | display: flex; 120 | font-size: 20px; 121 | align-items: center; 122 | justify-content: center; 123 | flex-flow: row wrap; 124 | } 125 | .socialicon{ 126 | display: flex; 127 | position: relative; 128 | overflow: hidden; 129 | width: var(--link-size); 130 | height: var(--link-size); 131 | background-color: #fff; 132 | margin: 8px; 133 | border-radius: 50%; 134 | box-shadow: 2px 5px 5px var(--shadow-col); 135 | text-decoration: none; 136 | transition: var(--trans-props); 137 | } 138 | .socialicon i { 139 | margin: auto; 140 | font-size: 24px; 141 | z-index: 1; 142 | transition: var(--trans-props); 143 | } 144 | 145 | /* Social icon in dark mode */ 146 | html[light-mode="dark"] .socialicon{ 147 | background-color: #141516; 148 | } 149 | 150 | .facebook i { 151 | margin: auto; 152 | z-index: 1; 153 | transition: var(--trans-props); 154 | } 155 | 156 | .socialicon.facebook{ 157 | color:var(--col-icon-facebook); 158 | } 159 | 160 | .socialicon:after { 161 | content: ""; 162 | width: var(--link-size); 163 | height: var(--link-size); 164 | position: absolute; 165 | transform: translate(0, var(--link-size)); 166 | border-radius: 50%; 167 | transition: var(--trans-props); 168 | 169 | } 170 | 171 | .socialicon.facebook:after { 172 | background-color: #2c2f3100; 173 | box-shadow: var(--facebook); 174 | } 175 | 176 | 177 | /* 178 | --------------------------- 179 | LINKEDIN MICROANIMATION 180 | --------------------------- 181 | */ 182 | 183 | .linkedin-icon{ 184 | margin-left: 15px; 185 | } 186 | .linkedin:hover .linkedin-icon>rect{ 187 | animation: rect-up 0.3s linear infinite; 188 | } 189 | 190 | 191 | @keyframes rect-up { 192 | 50% { 193 | y:10px; 194 | height:11px; 195 | } 196 | 0%{ 197 | y:13px; 198 | height:8px; 199 | } 200 | 201 | } 202 | 203 | .linkedin:hover .linkedin-icon> circle{ 204 | animation: bounce 0.4s linear infinite; 205 | } 206 | 207 | @keyframes bounce { 208 | 75% { 209 | cy: 8px; 210 | } 211 | 50%{ 212 | cy: 4px 213 | } 214 | 0%{ 215 | cy:4px 216 | } 217 | 218 | } 219 | 220 | /* 221 | --------------------------- 222 | INSTAGRAM MICROANIMATION 223 | --------------------------- 224 | */ 225 | 226 | .instagram-icon { 227 | width: 90px !important; 228 | 229 | } 230 | .st0 { 231 | fill:none; 232 | stroke:#EF4649; 233 | stroke-width:7; 234 | stroke-linecap:round; 235 | stroke-miterlimit:10; 236 | } 237 | 238 | .instagram:hover #littleCircle { 239 | stroke-dasharray:150; 240 | } 241 | 242 | .instagram #shutter{ 243 | display:none; 244 | } 245 | .instagram:hover #shutter{ 246 | display: block; 247 | animation: shutter 1s linear infinite; 248 | } 249 | .instagram:hover #lens{ 250 | fill:#EF4649; 251 | animation: lens 1.5s linear infinite; 252 | 253 | } 254 | 255 | @keyframes shutter { 256 | 0%, 50% { 257 | stroke-dashoffset: 150; 258 | 259 | } 260 | 75% { 261 | fill:#EF4649; 262 | stroke-dashoffset: 0; 263 | stroke-width:11; 264 | } 265 | } 266 | 267 | @keyframes lens { 268 | 0%, 75% { 269 | opacity: 0; 270 | } 271 | 100% { 272 | opacity: 1; 273 | } 274 | } 275 | 276 | 277 | /* 278 | -------------------------- 279 | GITHUB MICROANIMATION 280 | -------------------------- 281 | */ 282 | html[light-mode="dark"] .github-icon{ 283 | fill: #ffff; 284 | } 285 | 286 | .github-icon { 287 | width: 40px; 288 | margin-left: 12px; 289 | margin-top: 5px; 290 | fill: #000000; 291 | } 292 | 293 | .github:hover #arm { 294 | transform-origin: bottom right; 295 | animation: moveArm 1s infinite alternate; 296 | } 297 | 298 | @keyframes moveArm { 299 | 0% { transform: rotate(10deg); } 300 | 100% { transform: rotate(-10deg); } 301 | } 302 | /* 303 | ---------------------------- 304 | SOCIAL MEDIA ANIMATIONS 305 | ---------------------------- 306 | */ 307 | 308 | .socialicon:hover { 309 | transform: translateY(-4px); 310 | box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.16); 311 | } 312 | .socialicon:hover:after { 313 | transform: translate(0) scale(1.2); 314 | } 315 | .socialicon:hover i { 316 | color: #fff; 317 | } 318 | a:hover { 319 | color: transparent; 320 | } 321 | 322 | 323 | @media only screen and (max-width: 450px) { 324 | .text { 325 | margin-top: 5rem; 326 | } 327 | } 328 | 329 | @media only screen and (max-width:2381px){ 330 | .text{ 331 | margin-top:2rem; 332 | } 333 | } 334 | 335 | @media only screen and (max-width:1340px){ 336 | .text{ 337 | margin-top:4rem; 338 | } 339 | } 340 | 341 | @media only screen and (max-width:780px){ 342 | .text{ 343 | margin-top:3rem; 344 | } 345 | } 346 | 347 | @media only screen and (max-width:700px){ 348 | .text{ 349 | margin-top:6rem; 350 | } 351 | } 352 | @media only screen and (max-width:350px){ 353 | .text{ 354 | margin-top:6rem; 355 | } 356 | } 357 | 358 | @media only screen and (max-width:270px){ 359 | .text{ 360 | margin-top:12rem; 361 | } 362 | } 363 | /* responsiveness */ 364 | @media (min-width:410px) and (max-width:411px){ 365 | .text{ 366 | margin-top: 1rem; 367 | } 368 | } 369 | @media only screen and (min-height:731px){ 370 | .text{ 371 | margin-top: 2rem; 372 | } 373 | } 374 | @media (min-height:822px) and (max-height:823px){ 375 | .text{ 376 | margin-top: 10rem; 377 | } 378 | } 379 | @media only screen and (min-height:768px){ 380 | .text{ 381 | margin-top: 0rem; 382 | } 383 | } 384 | @media (max-width:280px)and (max-height:655px){ 385 | .text{ 386 | margin-top: 6rem; 387 | } 388 | 389 | 390 | } 391 | 392 | @media (min-width:1020px)and (max-width:1024px){ 393 | .text{ 394 | margin-top: 4rem; 395 | font-size: xx-large; 396 | } 397 | } 398 | 399 | @media (max-width:320px)and (max-height:440px){ 400 | .text{ 401 | margin-top: 4rem; 402 | } 403 | 404 | img{ 405 | height:100px; 406 | width:150px; 407 | margin-bottom: 0px; 408 | margin-top: 0px; 409 | } 410 | .text{ 411 | font-size:20px; 412 | } 413 | .socialicon{ 414 | width:56px; 415 | height:56px; 416 | } 417 | 418 | } 419 | 420 | @media (max-width:380px)and (max-height:440px){ 421 | .text{ 422 | margin-top: 4rem; 423 | } 424 | img{ 425 | height:100px; 426 | width:150px; 427 | margin-bottom: 0px; 428 | margin-top: 0px; 429 | } 430 | .text{ 431 | font-size:20px; 432 | } 433 | .socialicon{ 434 | width:56px; 435 | height:56px; 436 | } 437 | .tag{ 438 | width:78px; 439 | } 440 | 441 | } 442 | @media (max-width:430px)and (max-height:440px){ 443 | .text{ 444 | font-size:20px; 445 | margin-top: 4rem; 446 | } 447 | img{ 448 | height:100px; 449 | width:150px; 450 | margin-bottom: 0px; 451 | margin-top: 0px; 452 | } 453 | .socialicon{ 454 | width:56px; 455 | height:56px; 456 | } 457 | 458 | } 459 | @media (min-width:520px)and (max-width:521px){ 460 | .text{ 461 | margin-top: 2rem; 462 | } 463 | } 464 | 465 | @media (min-height:810px)and (max-height:812px){ 466 | .text{ 467 | margin-top: 1rem; 468 | } 469 | } 470 | 471 | @media (min-height:822px)and (max-height:823px){ 472 | .text{ 473 | margin-top: 1rem; 474 | } 475 | } 476 | -------------------------------------------------------------------------------- /assets/css/preloader.css: -------------------------------------------------------------------------------- 1 | /* preloader */ 2 | .no-scroll-preload { 3 | overflow: hidden; 4 | height: auto; 5 | } 6 | 7 | :root { 8 | --atom-size: 400px; 9 | --atom-color-hex: #0d00ff; 10 | --atom-color-rgb: 217,217,217; 11 | --nucleus-size: calc(var(--atom-size) / 5); 12 | --electron-color-hex: #36C5F0; 13 | --electron-size : calc(var(--atom-size) / 25); 14 | --electron-orbit-size : calc(var(--atom-size) / 2.5); 15 | --electron-speed : 1.2s; 16 | --electron-speed-alpha : 1s; 17 | --electron-speed-omega : .8s; 18 | } 19 | 20 | .loader-container { 21 | position: fixed; 22 | top: 0; 23 | left: 0; 24 | background-color: #202124; 25 | height: 100%; 26 | width: 100%; 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | z-index: 999999; 31 | color: white; 32 | } 33 | 34 | /* Atom */ 35 | .atom { 36 | position: relative; 37 | justify-content: center; 38 | align-items: center; 39 | width: var(--atom-size); 40 | height: var(--atom-size); 41 | animation: 8s atom infinite cubic-bezier(1, .25, 0, .75); 42 | } 43 | @keyframes atom{ 44 | 0% { 45 | transform: rotate(0deg) scale(1); 46 | } 47 | 12.5% { 48 | transform: rotate(-45deg) scale(.9); 49 | } 50 | 25% { 51 | transform: rotate(-90deg) scale(1); 52 | } 53 | 37.5% { 54 | transform: rotate(-135deg) scale(.9); 55 | } 56 | 50% { 57 | transform: rotate(-180deg) scale(1); 58 | } 59 | 62.5% { 60 | transform: rotate(-225deg) scale(.9); 61 | } 62 | 75% { 63 | transform: rotate(-270deg) scale(1); 64 | } 65 | 87.5% { 66 | transform: rotate(-315deg) scale(.9); 67 | } 68 | 100% { 69 | transform: rotate(-360deg) scale(1); 70 | } 71 | } 72 | 73 | /* Nucleus */ 74 | .atom::before { 75 | content: ''; 76 | display: block; 77 | position: absolute; 78 | top: 50%; 79 | left: 50%; 80 | width: var(--nucleus-size); 81 | height: var(--nucleus-size); 82 | margin-top: calc(var(--nucleus-size) / -2); 83 | margin-left: calc(var(--nucleus-size) / -2); 84 | background: var(--electron-color-hex); /* var(--atom-color-hex); */ 85 | border-radius: 100%; 86 | box-shadow: 0 0 3px 0 var(--atom-color-hex); 87 | animation: 3s nucleus infinite cubic-bezier(.65, 0, .35, 1); 88 | } 89 | @keyframes nucleus { 90 | 0% { transform: scale(1); } 91 | 25% { transform: scale(.9); } 92 | 50% { transform: scale(1); } 93 | 75% { transform: scale(.85); } 94 | 100% { transform: scale(1); } 95 | } 96 | 97 | /* Electron Orbit */ 98 | .atom > [class^="electron"] { 99 | border-top: solid rgba(var(--atom-color-rgb), .5) 1px; 100 | border-right: solid rgba(var(--atom-color-rgb), .35) 2px; 101 | border-bottom: solid rgba(var(--atom-color-rgb), .2) 4px; 102 | border-left: solid rgba(var(--atom-color-rgb), 0) 2px; 103 | border-radius: 100%; 104 | width: 100%; 105 | height: var(--electron-orbit-size); 106 | position: absolute; 107 | top: 50%; 108 | margin-top: calc(var(--electron-orbit-size) / -2); 109 | animation: var(--electron-speed) electron-orbit infinite linear; 110 | } 111 | .atom > .electron-alpha { 112 | transform: rotate(60deg); 113 | animation: var(--electron-speed-alpha) electron-orbit infinite linear; 114 | } 115 | .atom > .electron-omega { 116 | transform: rotate(-60deg); 117 | animation: var(--electron-speed-omega) electron-orbit infinite linear; 118 | } 119 | @keyframes electron-orbit { 120 | 0% { 121 | border-top: solid rgba(var(--atom-color-rgb), 1) 5px; 122 | border-right: solid rgba(var(--atom-color-rgb), 1) 7px; 123 | border-bottom: solid rgba(var(--atom-color-rgb), .2) 10px; 124 | border-left: solid rgba(var(--atom-color-rgb), 0) 10px; 125 | } 126 | 25% { 127 | border-top: solid rgba(var(--atom-color-rgb), .35) 5px; 128 | border-right: solid rgba(var(--atom-color-rgb), .2) 7px; 129 | border-bottom: solid rgba(var(--atom-color-rgb), 0) 10px; 130 | border-left: solid rgba(var(--atom-color-rgb), .5) 10px; 131 | } 132 | 50% { 133 | border-top: solid rgba(var(--atom-color-rgb), .2) 5px; 134 | border-right: solid rgba(var(--atom-color-rgb), 0) 7px; 135 | border-bottom: solid rgba(var(--atom-color-rgb), .5) 10px; 136 | border-left: solid rgba(var(--atom-color-rgb), .35) 10px; 137 | } 138 | 75% { 139 | border-top: solid rgba(var(--atom-color-rgb), 0) 5px; 140 | border-right: solid rgba(var(--atom-color-rgb), .5) 7px; 141 | border-bottom: solid rgba(var(--atom-color-rgb), .35) 10px; 142 | border-left: solid rgba(var(--atom-color-rgb), .2) 10px; 143 | } 144 | 100% { 145 | border-top: solid rgba(var(--atom-color-rgb), 1) 5px; 146 | border-right: solid rgba(var(--atom-color-rgb), 1) 7px; 147 | border-bottom: solid rgba(var(--atom-color-rgb), 1) 10px; 148 | border-left: solid rgba(var(--atom-color-rgb), 1) 10px; 149 | } 150 | } 151 | 152 | /* Electron Unit */ 153 | .atom [class^="electron"]::after { 154 | content: ''; 155 | display: block; 156 | width: var(--electron-size); 157 | height: var(--electron-size); 158 | border-radius: 50%; 159 | margin-top: calc(var(--electron-size) / -2); 160 | position: absolute; 161 | top: 50%; 162 | left: calc(var(--electron-size) / -1); 163 | transform: scale(1); 164 | animation: calc(var(--electron-speed) * 2) electron infinite ease-in-out; 165 | } 166 | 167 | .atom .electron::after { background: #ECB22E;} 168 | .atom .electron-alpha::after { 169 | animation: calc(var(--electron-speed-alpha) * 2) electron infinite ease-in-out; 170 | background: #E01E5A; 171 | } 172 | .atom .electron-omega::after { 173 | animation: calc(var(--electron-speed-omega) * 2) electron infinite ease-in-out; 174 | background: #2EB67D; 175 | } 176 | @keyframes electron { 177 | 0% { 178 | left: calc(var(--electron-size) / -1); 179 | transform: scale(1); 180 | } 181 | 12.5% { 182 | top: 100%; 183 | transform: scale(1.5); 184 | } 185 | 25% { 186 | left: 100%; 187 | transform: scale(1); 188 | } 189 | 37.5% { 190 | top: 0%; 191 | transform: scale(.25); 192 | } 193 | 50% { 194 | left: calc(var(--electron-size) / -1); 195 | transform: scale(1); 196 | } 197 | 62.5% { 198 | top: 100%; 199 | transform: scale(1.5); 200 | } 201 | 75% { 202 | left: 100%; 203 | transform: scale(1); 204 | } 205 | 87.5% { 206 | top: 0%; 207 | transform: scale(.25); 208 | } 209 | 100% { 210 | left: calc(var(--electron-size) / -1); 211 | transform: scale(1); 212 | } 213 | } 214 | 215 | @keyframes fadeInAnimation { 216 | 0% { 217 | opacity: 0; 218 | } 219 | 100% { 220 | opacity: 1; 221 | } 222 | } 223 | 224 | .disappear { 225 | animation: vanish 1s forwards; 226 | } 227 | 228 | @keyframes vanish { 229 | 100% { 230 | opacity: 1; 231 | visibility: hidden; 232 | } 233 | } 234 | -------------------------------------------------------------------------------- /assets/css/skills.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800"); 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"); 3 | 4 | html[light-mode="light"] { 5 | --bg1-color: rgba(0, 0, 0, 0); 6 | --text-color: #6c757d; 7 | --shadow-col1: #babdc2; 8 | --shadow-col2: #ffffff; 9 | --meta-col: #444; 10 | --head-col: black; 11 | } 12 | 13 | html[light-mode="dark"] { 14 | --bg1-color: #272727; 15 | --text-color: #fff; 16 | --bg-txt-img: linear-gradient(315deg, #d5adc8 0%, #ff8489 74%); 17 | --txt-fill: transparent; 18 | --shadow-col1: #191919; 19 | --shadow-col2: #1d1d1d; 20 | --meta-col: rgb(155, 149, 149); 21 | --head-col: #fff; 22 | } 23 | 24 | html { 25 | overflow-x: hidden; 26 | } 27 | 28 | 29 | /* .main{ 30 | width: 100%; 31 | padding-left: 4rem; 32 | padding-right: 4rem; 33 | margin: 0 auto; 34 | } */ 35 | 36 | /* KProtect Cards */ 37 | .skills-box{ 38 | /* position: absolute; */ 39 | /* left: 0; */ 40 | display: flex; 41 | flex-direction: row; 42 | flex-wrap: wrap; 43 | overflow: hidden; 44 | justify-content: center; 45 | } 46 | .tech_card{ 47 | display: flex; 48 | flex-direction: column; 49 | justify-content: center; 50 | align-items: center; 51 | border: none; 52 | border-radius: 13px; 53 | background-color: rgb(65, 62, 65); 54 | width: 45.7vw; 55 | margin:3.5em 30px; 56 | padding: 20px; 57 | box-shadow: 0px 0px 15px 2px black; 58 | } 59 | html[light-mode="light"] .tech_card{ 60 | background-color: white; 61 | color: #303030; 62 | box-shadow: 0px 0px 10px #303030; 63 | } 64 | .tech_card img{ 65 | width: 120px; 66 | height: 120px; 67 | /* border: 1px solid black; */ 68 | /* box-shadow: 8px 8px 7px black; */ 69 | border-radius: 8px; 70 | margin-bottom: 8px; 71 | padding: 20px; 72 | 73 | } 74 | .tech_card h4{ 75 | font-weight: bold; 76 | font-family: cursive; 77 | } 78 | .main-heading{ 79 | font-weight: 700; 80 | 81 | } 82 | .main-heading .my_skillss{ 83 | color: #4e00bb; 84 | text-shadow: 0px 0px 15px #4e00bb; 85 | } 86 | html[light-mode="light"] .main-heading .my_skillss{ 87 | text-shadow: none !important; 88 | } 89 | .skill-head{ 90 | font-size: 2rem; 91 | font-weight: 700; 92 | } 93 | .skill-head .my_skill{ 94 | color: #4e00bb; 95 | text-shadow: 0px 0px 15px #4e00bb; 96 | } 97 | html[light-mode="light"] .skill-head .my_skill{ 98 | text-shadow: none !important; 99 | } 100 | .tech_card .card_img img{ 101 | animation: scale_anime 2s infinite ease-in-out; 102 | } 103 | html[light-mode="light"] .tech_card img{ 104 | animation: scale_anime_dark 2s infinite ease-in-out; 105 | 106 | } 107 | @keyframes scale_anime_dark { 108 | 0%{ 109 | transform: scale(1); 110 | } 111 | 50%{ 112 | transform: scale(1.15); 113 | }100%{ 114 | transform: scale(1); 115 | } 116 | } 117 | @keyframes scale_anime { 118 | 0%{ 119 | transform: scale(1); 120 | } 121 | 50%{ 122 | transform: scale(1.15); 123 | }100%{ 124 | transform: scale(1); 125 | } 126 | } 127 | #svg_css_text { 128 | animation: translate_forward 2s infinite ease-in-out; 129 | } 130 | 131 | #svg_html_text { 132 | animation: translate_backward 2s infinite ease-in-out; 133 | } 134 | 135 | @keyframes translate_forward { 136 | 0% { 137 | transform: translateX(12px); 138 | } 139 | 140 | 50% { 141 | transform: translateX(0px); 142 | } 143 | 144 | 100% { 145 | transform: translateX(12px); 146 | } 147 | } 148 | 149 | @keyframes translate_backward { 150 | 0% { 151 | transform: translateX(0px); 152 | } 153 | 154 | 50% { 155 | transform: translateX(12px); 156 | } 157 | 158 | 100% { 159 | transform: translateX(0px); 160 | } 161 | } 162 | 163 | .skillss_icons { 164 | align-items: center; 165 | justify-content: center; 166 | } 167 | 168 | .skillss_icons .skills_icon { 169 | padding: 5px 10px; 170 | 171 | } 172 | 173 | .skillss_icons .skills_icon i { 174 | font-size: 2.5rem; 175 | opacity: .7; 176 | } 177 | html[light-mode="light"] .skillss_icons .skills_icon i { 178 | font-size: 2.5rem; 179 | opacity: 1; 180 | } 181 | div.skills_icon>i:hover { 182 | opacity: 1; 183 | transition: opacity .2s linear; 184 | transform: scale(1.3); 185 | } 186 | 187 | div.html_icon.skills_icon>i.fa-html5 { 188 | /* color: #FF5733 !important; */ 189 | display: inline-block; 190 | background: linear-gradient(-90deg, #F06529 50%, #E34C26 50%); 191 | -webkit-background-clip: text; 192 | -webkit-text-fill-color: transparent; 193 | -moz-background-clip: text; 194 | -moz-text-fill-color: transparent; 195 | } 196 | 197 | div.skills_icon>i.fa-css3-alt { 198 | /* color: #2965f1 !important; */ 199 | display: inline-block; 200 | background: linear-gradient(-90deg, #264de4 50%, #2965f1 50%); 201 | -webkit-background-clip: text; 202 | -webkit-text-fill-color: transparent; 203 | -moz-background-clip: text; 204 | -moz-text-fill-color: transparent; 205 | } 206 | 207 | div.skills_icon>i.fa-bootstrap { 208 | color: #ad428d !important; 209 | } 210 | 211 | div.skills_icon>i.fa-js-square { 212 | color: #F0DB4F; 213 | } 214 | 215 | div.skills_icon>i.fa-python { 216 | display: inline-block; 217 | background: linear-gradient(-120deg, #ffde57, #4584b6, #646464); 218 | -webkit-background-clip: text; 219 | -webkit-text-fill-color: transparent; 220 | -moz-background-clip: text; 221 | -moz-text-fill-color: transparent; 222 | } 223 | 224 | div.skills_icon>i.fa-react { 225 | color: #61DBFB; 226 | } 227 | 228 | div.skills_icon>i.fa-git-alt { 229 | color: #F1502F; 230 | } 231 | 232 | div.skills_icon>i.fa-node { 233 | color: #3C873A; 234 | } 235 | 236 | div.skills_icon>i.fa-cuttlefish { 237 | color: #044F88; 238 | } 239 | #box1{ 240 | animation: slide-down 8s infinite linear; 241 | } 242 | #box3{ 243 | animation: slide-up 8s 4s infinite linear; 244 | } 245 | @keyframes slide-down { 246 | 0%{ 247 | transform: translate(0px,0px); 248 | } 249 | 50%{ 250 | transform: translate(212px, 61px) 251 | } 252 | 100%{ 253 | transform: translate(0px,0px); 254 | } 255 | 256 | } 257 | @keyframes slide-up { 258 | 0%{ 259 | transform: translate(-212px, -60px); 260 | } 261 | 50%{ 262 | transform: translate(0px,0px); 263 | } 264 | 100%{ 265 | transform: translate(-212px, -60px); 266 | } 267 | 268 | } 269 | 270 | .project_item{ 271 | margin-top: 4px; 272 | } 273 | .project_item a{ 274 | color: #bb86c9; 275 | text-decoration: none; 276 | } 277 | html[light-mode="light"] .project_item a{ 278 | color: #4e00bb ; 279 | text-decoration: none; 280 | } 281 | @media (max-width:1180px){ 282 | .tech_card{ 283 | width: 45vw; 284 | } 285 | .skills-box{ 286 | justify-content: center !important; 287 | } 288 | } 289 | @media (max-width:1000px){ 290 | .tech_card{ 291 | width: 90vw; 292 | } 293 | } 294 | @media (max-width:450px){ 295 | .skill-head{ 296 | margin-top: 10px; 297 | font-size: 22px; 298 | } 299 | .main-heading{ 300 | font-size: 25px; 301 | } 302 | .skillss_icons .skills_icon i { 303 | font-size: 1.8rem; 304 | } 305 | .pre-heading{ 306 | font-size: 13px; 307 | } 308 | } 309 | @media (max-width:350px){ 310 | .skills-box{ 311 | justify-content: center; 312 | } 313 | .tech_card{ 314 | width: 95vw; 315 | } 316 | } -------------------------------------------------------------------------------- /assets/css/travel_temp.css: -------------------------------------------------------------------------------- 1 | /* Travel Vlog Summary section starts */ 2 | *, *:before, *:after { 3 | box-sizing: border-box; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | body { 8 | background: whitesmoke; /* #1f1f1f */ 9 | font-family: 'Open Sans', Helvetica, Arial, sans-serif; 10 | } 11 | .cont { 12 | position: relative; 13 | overflow: hidden; 14 | height: 70vh; /* 100vh */ 15 | padding: 80px 60px; 16 | } 17 | .cont__inner { 18 | position: relative; 19 | height: 100%; 20 | } 21 | .cont__inner:hover .el__bg:after { 22 | opacity: 1; 23 | } 24 | .el { 25 | position: absolute; 26 | left: 0; 27 | top: 0; 28 | width: 19.2%; 29 | height: 90%; 30 | background: #252525; 31 | transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s; 32 | will-change: transform, width, opacity; 33 | } 34 | .el:not(.s--active) { 35 | cursor: pointer; 36 | } 37 | .el__overflow { 38 | overflow: hidden; 39 | position: relative; 40 | height: 100%; 41 | } 42 | .el__inner { 43 | overflow: hidden; 44 | position: relative; 45 | height: 100%; 46 | transition: transform 1s; 47 | } 48 | .cont.s--inactive .el__inner { 49 | transform: translate3d(0, 100%, 0); 50 | } 51 | .el__bg { 52 | position: relative; 53 | width: calc(100vw - 140px); 54 | height: 100%; 55 | transition: transform 0.6s 0.7s; 56 | will-change: transform; 57 | } 58 | .el__bg:before { 59 | content: ""; 60 | position: absolute; 61 | left: 0; 62 | top: -5%; 63 | width: 100%; 64 | height: 110%; 65 | background-size: 100% 100%; 66 | background-position: center center; 67 | transition: transform 1s; 68 | transform: translate3d(0, 0, 0) scale(1); 69 | } 70 | .cont.s--inactive .el__bg:before { 71 | transform: translate3d(0, -100%, 0) scale(1.2); 72 | } 73 | .el.s--active .el__bg:before { 74 | transition: transform 0.8s; 75 | } 76 | .el__bg:after { 77 | content: ""; 78 | z-index: 1; 79 | position: absolute; 80 | left: 0; 81 | top: 0; 82 | width: 100%; 83 | height: 100%; 84 | background: rgba(0, 0, 0, 0.3); 85 | opacity: 0; 86 | transition: opacity 0.5s; 87 | } 88 | .cont.s--el-active .el__bg:after { 89 | transition: opacity 0.5s 1.4s; 90 | opacity: 1 !important; 91 | } 92 | .el__preview-cont { 93 | z-index: 2; 94 | display: flex; 95 | justify-content: center; 96 | align-items: center; 97 | position: absolute; 98 | left: 0; 99 | top: 0; 100 | width: 100%; 101 | height: 100%; 102 | transition: all 0.3s 1.2s; 103 | } 104 | .cont.s--inactive .el__preview-cont { 105 | opacity: 0; 106 | transform: translateY(10px); 107 | } 108 | .cont.s--el-active .el__preview-cont { 109 | opacity: 0; 110 | transform: translateY(30px); 111 | transition: all 0.5s; 112 | } 113 | .el__heading { 114 | color: #fff; 115 | text-transform: uppercase; 116 | font-size: 18px; 117 | } 118 | .el__content { 119 | z-index: -1; 120 | position: absolute; 121 | left: 0; 122 | top: 0; 123 | width: 100%; 124 | height: 100%; 125 | padding: 30px; 126 | opacity: 0; 127 | pointer-events: none; 128 | transition: all 0.1s; 129 | } 130 | .el.s--active .el__content { 131 | z-index: 2; 132 | opacity: 1; 133 | pointer-events: auto; 134 | transition: all 0.5s 1.4s; 135 | } 136 | .el__text { 137 | text-transform: uppercase; 138 | font-size: 40px; 139 | color: #fff; 140 | } 141 | .el__close-btn { 142 | z-index: -1; 143 | position: absolute; 144 | right: 10px; 145 | top: 10px; 146 | width: 60px; 147 | height: 60px; 148 | opacity: 0; 149 | pointer-events: none; 150 | transition: all 0s 0.45s; 151 | cursor: pointer; 152 | } 153 | .el.s--active .el__close-btn { 154 | z-index: 5; 155 | opacity: 1; 156 | pointer-events: auto; 157 | transition: all 0s 1.4s; 158 | } 159 | .el__close-btn:before, .el__close-btn:after { 160 | content: ""; 161 | position: absolute; 162 | left: 0; 163 | top: 50%; 164 | width: 100%; 165 | height: 8px; 166 | margin-top: -4px; 167 | background: #fff; 168 | opacity: 0; 169 | transition: opacity 0s; 170 | } 171 | .el.s--active .el__close-btn:before, .el.s--active .el__close-btn:after { 172 | opacity: 1; 173 | } 174 | .el__close-btn:before { 175 | transform: rotate(45deg) translateX(100%); 176 | } 177 | .el.s--active .el__close-btn:before { 178 | transition: all 0.3s 1.4s cubic-bezier(0.72, 0.09, 0.32, 1.57); 179 | transform: rotate(45deg) translateX(0); 180 | } 181 | .el__close-btn:after { 182 | transform: rotate(-45deg) translateX(100%); 183 | } 184 | .el.s--active .el__close-btn:after { 185 | transition: all 0.3s 1.55s cubic-bezier(0.72, 0.09, 0.32, 1.57); 186 | transform: rotate(-45deg) translateX(0); 187 | } 188 | .el__index { 189 | overflow: hidden; 190 | position: absolute; 191 | left: 0; 192 | bottom: -80px; 193 | width: 100%; 194 | height: 100%; 195 | min-height: 250px; 196 | text-align: center; 197 | font-size: 20vw; 198 | line-height: 0.85; 199 | font-weight: bold; 200 | transition: transform 0.5s, opacity 0.3s 1.4s; 201 | transform: translate3d(0, 1vw, 0); 202 | } 203 | .el:hover .el__index { 204 | transform: translate3d(0, 0, 0); 205 | } 206 | .cont.s--el-active .el__index { 207 | transition: transform 0.5s, opacity 0.3s; 208 | opacity: 0; 209 | } 210 | .el__index-back, .el__index-front { 211 | position: absolute; 212 | left: 0; 213 | bottom: 0; 214 | width: 100%; 215 | } 216 | .el__index-back { 217 | color: #2f3840; 218 | opacity: 0; 219 | transition: opacity 0.25s 0.25s; 220 | } 221 | .el:hover .el__index-back { 222 | transition: opacity 0.25s; 223 | opacity: 1; 224 | } 225 | .el__index-overlay { 226 | overflow: hidden; 227 | position: relative; 228 | transform: translate3d(0, 100%, 0); 229 | transition: transform 0.5s 0.1s; 230 | color: transparent; 231 | } 232 | .el__index-overlay:before { 233 | content: attr(data-index); 234 | position: absolute; 235 | left: 0; 236 | bottom: 0; 237 | width: 100%; 238 | height: 100%; 239 | color: rgb(207, 207, 207); /* #fff */ 240 | transform: translate3d(0, -100%, 0); 241 | transition: transform 0.5s 0.1s; 242 | } 243 | .el:hover .el__index-overlay { 244 | transform: translate3d(0, 0, 0); 245 | } 246 | .el:hover .el__index-overlay:before { 247 | transform: translate3d(0, 0, 0); 248 | } 249 | 250 | .el:nth-child(1) { 251 | transform: translate3d(0%, 0, 0); 252 | transform-origin: 50% 50%; 253 | } 254 | .cont.s--el-active .el:nth-child(1):not(.s--active) { 255 | transform: scale(0.5) translate3d(0%, 0, 0); 256 | opacity: 0; 257 | transition: transform 0.95s, opacity 0.95s; 258 | } 259 | .el:nth-child(1) .el__inner { 260 | transition-delay: 0s; 261 | } 262 | .el:nth-child(1) .el__bg { 263 | transform: translate3d(0%, 0, 0); 264 | } 265 | .el:nth-child(1) .el__bg:before { 266 | transition-delay: 0s; 267 | /* background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-3.jpg"); */ 268 | } 269 | .el:nth-child(2) { 270 | transform: translate3d(105.2083333333%, 0, 0); 271 | transform-origin: 155.2083333333% 50%; 272 | } 273 | .cont.s--el-active .el:nth-child(2):not(.s--active) { 274 | transform: scale(0.5) translate3d(105.2083333333%, 0, 0); 275 | opacity: 0; 276 | transition: transform 0.95s, opacity 0.95s; 277 | } 278 | .el:nth-child(2) .el__inner { 279 | transition-delay: 0.1s; 280 | } 281 | .el:nth-child(2) .el__bg { 282 | transform: translate3d(-19.2%, 0, 0); 283 | } 284 | .el:nth-child(2) .el__bg:before { 285 | transition-delay: 0.1s; 286 | } 287 | .el:nth-child(3) { 288 | transform: translate3d(210.4166666667%, 0, 0); 289 | transform-origin: 260.4166666667% 50%; 290 | } 291 | .cont.s--el-active .el:nth-child(3):not(.s--active) { 292 | transform: scale(0.5) translate3d(210.4166666667%, 0, 0); 293 | opacity: 0; 294 | transition: transform 0.95s, opacity 0.95s; 295 | } 296 | .el:nth-child(3) .el__inner { 297 | transition-delay: 0.2s; 298 | } 299 | .el:nth-child(3) .el__bg { 300 | transform: translate3d(-38.4%, 0, 0); 301 | } 302 | .el:nth-child(3) .el__bg:before { 303 | transition-delay: 0.2s; 304 | } 305 | .el:nth-child(4) { 306 | transform: translate3d(315.625%, 0, 0); 307 | transform-origin: 365.625% 50%; 308 | } 309 | .cont.s--el-active .el:nth-child(4):not(.s--active) { 310 | transform: scale(0.5) translate3d(315.625%, 0, 0); 311 | opacity: 0; 312 | transition: transform 0.95s, opacity 0.95s; 313 | } 314 | .el:nth-child(4) .el__inner { 315 | transition-delay: 0.3s; 316 | } 317 | .el:nth-child(4) .el__bg { 318 | transform: translate3d(-57.6%, 0, 0); 319 | } 320 | .el:nth-child(4) .el__bg:before { 321 | transition-delay: 0.3s; 322 | } 323 | .el:nth-child(5) { 324 | transform: translate3d(420.8333333333%, 0, 0); 325 | transform-origin: 470.8333333333% 50%; 326 | } 327 | .cont.s--el-active .el:nth-child(5):not(.s--active) { 328 | transform: scale(0.5) translate3d(420.8333333333%, 0, 0); 329 | opacity: 0; 330 | transition: transform 0.95s, opacity 0.95s; 331 | } 332 | .el:nth-child(5) .el__inner { 333 | transition-delay: 0.4s; 334 | } 335 | .el:nth-child(5) .el__bg { 336 | transform: translate3d(-76.8%, 0, 0); 337 | } 338 | .el:nth-child(5) .el__bg:before { 339 | transition-delay: 0.4s; 340 | } 341 | 342 | .el:hover .el__bg:after { 343 | opacity: 0; 344 | } 345 | .el.s--active { 346 | z-index: 1; 347 | width: 100%; 348 | transform: translate3d(0, 0, 0); 349 | transition: transform 0.6s, width 0.7s 0.7s, z-index 0s; 350 | } 351 | .el.s--active .el__bg { 352 | transform: translate3d(0, 0, 0); 353 | transition: transform 0.6s; 354 | } 355 | .el.s--active .el__bg:before { 356 | transition-delay: 0.6s; 357 | transform: scale(1.1); 358 | } 359 | .icon-link { 360 | position: absolute; 361 | left: 5px; 362 | bottom: 5px; 363 | width: 32px; 364 | } 365 | .icon-link img { 366 | width: 100%; 367 | vertical-align: top; 368 | } 369 | .container_summary { 370 | margin-top: 120px; 371 | margin-bottom: 100px; 372 | } 373 | .container_summary h2 { 374 | text-align: center; 375 | } 376 | .div_quote { 377 | text-align: center; 378 | margin-bottom: 200px; 379 | color: rgb(121, 59, 221); 380 | font-weight: bold; 381 | letter-spacing: 5px; 382 | } 383 | /* Travel Vlog Summary section ends */ 384 | 385 | /*hero section starts*/ 386 | .hero { 387 | background-color: white; 388 | display: flex; 389 | height: 100vh; 390 | } 391 | .hero .item1 { 392 | width:50%; 393 | background: url('../images/travel/hero.svg'); 394 | background-repeat: no-repeat; 395 | background-position: 60% 35%; 396 | background-size: 350px; 397 | } 398 | .hero .item2 { 399 | background-color: white; 400 | width: 50%; 401 | display: flex; 402 | flex-direction: column; 403 | align-items: center; 404 | justify-content: center; 405 | font-weight: bold; 406 | color: #343a40; 407 | } 408 | .hero .item2 span { 409 | color: rgb(121, 59, 221); 410 | } 411 | .hero .item2 h1 { 412 | font-weight: bold; 413 | font-size: 28px; 414 | } 415 | .hero .item2 p { 416 | letter-spacing: 1px; 417 | color: #585c61; 418 | text-align: center; 419 | } 420 | 421 | @media only screen and (max-width: 950px) { 422 | .hero .item1 { 423 | background-size: 300px; 424 | background-position: 10% 35%; 425 | } 426 | .hero .item2 p { 427 | letter-spacing: 1px; 428 | } 429 | } 430 | @media only screen and (max-width: 700px) { 431 | 432 | .container_summary { 433 | margin-top: 5px; 434 | margin-bottom: 5px; 435 | } 436 | .div_quote { 437 | margin-bottom: 70px; 438 | letter-spacing: 2px; 439 | } 440 | 441 | .hero { 442 | flex-direction: column; 443 | justify-content:space-evenly; 444 | height: 80vh; 445 | } 446 | .hero .item1 { 447 | background-position: 60% 0%; 448 | background-size: 300px; 449 | height: 40%; 450 | width: 100%; 451 | } 452 | .hero .item2 { 453 | width: 100%; 454 | } 455 | 456 | .el__text { 457 | font-size: 25px; 458 | } 459 | } 460 | /*hero section ends*/ 461 | -------------------------------------------------------------------------------- /assets/custom_illustrations/Project Section (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/custom_illustrations/Project Section (1).png -------------------------------------------------------------------------------- /assets/custom_illustrations/Project Section.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/custom_illustrations/Project Section.png -------------------------------------------------------------------------------- /assets/docs/john_doe.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/docs/john_doe.pdf -------------------------------------------------------------------------------- /assets/fonts/Agustina.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/fonts/Agustina.woff -------------------------------------------------------------------------------- /assets/icons/arrow-right/arrow-right-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/Hand.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/Hand.gif -------------------------------------------------------------------------------- /assets/images/education-page/coursera2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/education-page/data-science.svg: -------------------------------------------------------------------------------- 1 | creative experiment -------------------------------------------------------------------------------- /assets/images/education-page/edTimeline1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/education-page/edTimeline1.png -------------------------------------------------------------------------------- /assets/images/education-page/edTimeline2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/education-page/edTimeline2.png -------------------------------------------------------------------------------- /assets/images/education-page/edTimeline3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/education-page/edTimeline3.png -------------------------------------------------------------------------------- /assets/images/education-page/education.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/education-page/education.png -------------------------------------------------------------------------------- /assets/images/education-page/edx.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/education-page/header-female.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/education-page/problem-solving.svg: -------------------------------------------------------------------------------- 1 | problem solving -------------------------------------------------------------------------------- /assets/images/education-page/timeline-2.svg: -------------------------------------------------------------------------------- 1 | predictive analytics -------------------------------------------------------------------------------- /assets/images/education-page/udacity.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/education-page/udemy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/education-page/udemy2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/experience-page/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/1.jpg -------------------------------------------------------------------------------- /assets/images/experience-page/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/2.jpg -------------------------------------------------------------------------------- /assets/images/experience-page/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/3.jpg -------------------------------------------------------------------------------- /assets/images/experience-page/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/4.jpg -------------------------------------------------------------------------------- /assets/images/experience-page/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/5.jpg -------------------------------------------------------------------------------- /assets/images/experience-page/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/6.jpg -------------------------------------------------------------------------------- /assets/images/experience-page/IIT_Bombay.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/IIT_Bombay.jpg -------------------------------------------------------------------------------- /assets/images/experience-page/ISI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/ISI.png -------------------------------------------------------------------------------- /assets/images/experience-page/UCL.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/UCL.jpg -------------------------------------------------------------------------------- /assets/images/experience-page/atlas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/atlas.png -------------------------------------------------------------------------------- /assets/images/experience-page/citro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/citro.png -------------------------------------------------------------------------------- /assets/images/experience-page/elevate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/elevate.png -------------------------------------------------------------------------------- /assets/images/experience-page/experience.svg: -------------------------------------------------------------------------------- 1 | experience design -------------------------------------------------------------------------------- /assets/images/experience-page/flipkart.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/flipkart.jpg -------------------------------------------------------------------------------- /assets/images/experience-page/gsoc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/gsoc.png -------------------------------------------------------------------------------- /assets/images/experience-page/hack3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/hack3.png -------------------------------------------------------------------------------- /assets/images/experience-page/hackasolution.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/hackasolution.png -------------------------------------------------------------------------------- /assets/images/experience-page/hakin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/hakin.png -------------------------------------------------------------------------------- /assets/images/experience-page/jithack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/jithack.png -------------------------------------------------------------------------------- /assets/images/experience-page/lema-labs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/lema-labs.jpg -------------------------------------------------------------------------------- /assets/images/experience-page/lema-labs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/lema-labs.png -------------------------------------------------------------------------------- /assets/images/experience-page/mission.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/mission.png -------------------------------------------------------------------------------- /assets/images/experience-page/neo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/neo.png -------------------------------------------------------------------------------- /assets/images/experience-page/nhacks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/nhacks.png -------------------------------------------------------------------------------- /assets/images/experience-page/pitchteen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/pitchteen.png -------------------------------------------------------------------------------- /assets/images/experience-page/recess.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/recess.png -------------------------------------------------------------------------------- /assets/images/experience-page/securitybox.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/securitybox.jpeg -------------------------------------------------------------------------------- /assets/images/experience-page/ulhacks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/ulhacks.png -------------------------------------------------------------------------------- /assets/images/experience-page/uniglobe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/uniglobe.png -------------------------------------------------------------------------------- /assets/images/experience-page/uplift.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/uplift.png -------------------------------------------------------------------------------- /assets/images/experience-page/wafflehacks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/experience-page/wafflehacks.png -------------------------------------------------------------------------------- /assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/favicon.png -------------------------------------------------------------------------------- /assets/images/hmk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/hmk.png -------------------------------------------------------------------------------- /assets/images/home/resume.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/home/resume.png -------------------------------------------------------------------------------- /assets/images/project-page/autovaidya.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/project-page/autovaidya.jpg -------------------------------------------------------------------------------- /assets/images/project-page/battery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/project-page/battery.png -------------------------------------------------------------------------------- /assets/images/project-page/book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/project-page/book.png -------------------------------------------------------------------------------- /assets/images/project-page/chess.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/project-page/chess.jpg -------------------------------------------------------------------------------- /assets/images/project-page/deepholi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/project-page/deepholi.jpg -------------------------------------------------------------------------------- /assets/images/project-page/doc2pen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/project-page/doc2pen.jpg -------------------------------------------------------------------------------- /assets/images/project-page/exercise.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/project-page/exercise.jpg -------------------------------------------------------------------------------- /assets/images/project-page/flappybird.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/project-page/flappybird.png -------------------------------------------------------------------------------- /assets/images/project-page/header-female.svg: -------------------------------------------------------------------------------- 1 | Organizing projects -------------------------------------------------------------------------------- /assets/images/project-page/header-male.svg: -------------------------------------------------------------------------------- 1 | Designer -------------------------------------------------------------------------------- /assets/images/project-page/minesweeper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/project-page/minesweeper.jpg -------------------------------------------------------------------------------- /assets/images/project-page/movie-recommendation.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/project-page/movie-recommendation.jpeg -------------------------------------------------------------------------------- /assets/images/project-page/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/project-page/music.jpg -------------------------------------------------------------------------------- /assets/images/project-page/poker.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/project-page/poker.jpg -------------------------------------------------------------------------------- /assets/images/project-page/quiz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/project-page/quiz.jpg -------------------------------------------------------------------------------- /assets/images/project-page/recipe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/project-page/recipe.jpg -------------------------------------------------------------------------------- /assets/images/project-page/tic-tac-toe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/project-page/tic-tac-toe.png -------------------------------------------------------------------------------- /assets/images/references-page/reviewphoto1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/references-page/reviewphoto1.png -------------------------------------------------------------------------------- /assets/images/references-page/reviewphoto2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/references-page/reviewphoto2.png -------------------------------------------------------------------------------- /assets/images/references-page/reviewphoto3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/references-page/reviewphoto3.png -------------------------------------------------------------------------------- /assets/images/references-page/reviewphoto4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/references-page/reviewphoto4.png -------------------------------------------------------------------------------- /assets/images/references-page/reviewphoto5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/references-page/reviewphoto5.png -------------------------------------------------------------------------------- /assets/images/references-page/team.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/references-page/team.png -------------------------------------------------------------------------------- /assets/images/research-page/crossLingual.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/research-page/crossLingual.png -------------------------------------------------------------------------------- /assets/images/research-page/deepNetwork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/research-page/deepNetwork.png -------------------------------------------------------------------------------- /assets/images/research-page/dialogueState.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/research-page/dialogueState.png -------------------------------------------------------------------------------- /assets/images/research-page/imageDecomposition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/research-page/imageDecomposition.png -------------------------------------------------------------------------------- /assets/images/research-page/inteferenceNetwork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/research-page/inteferenceNetwork.png -------------------------------------------------------------------------------- /assets/images/research-page/neuralNetworks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/research-page/neuralNetworks.jpg -------------------------------------------------------------------------------- /assets/images/research-page/research.svg: -------------------------------------------------------------------------------- 1 | researching -------------------------------------------------------------------------------- /assets/images/research-page/semanticSegmentation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/research-page/semanticSegmentation.png -------------------------------------------------------------------------------- /assets/images/research-page/wordRepresentation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/research-page/wordRepresentation.png -------------------------------------------------------------------------------- /assets/images/skills-page/c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/skills-page/c.png -------------------------------------------------------------------------------- /assets/images/skills-page/cpp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/skills-page/cpp.png -------------------------------------------------------------------------------- /assets/images/skills-page/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/skills-page/css.png -------------------------------------------------------------------------------- /assets/images/skills-page/git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/skills-page/git.png -------------------------------------------------------------------------------- /assets/images/skills-page/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/skills-page/html.png -------------------------------------------------------------------------------- /assets/images/skills-page/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/skills-page/javascript.png -------------------------------------------------------------------------------- /assets/images/skills-page/python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangmanhkhiem/Portfolio/9de062ffab47aadc2199782b65a01a6247bc34e5/assets/images/skills-page/python.png -------------------------------------------------------------------------------- /assets/js/404.js: -------------------------------------------------------------------------------- 1 | anime({ 2 | targets: ".row svg", 3 | translateY: 10, 4 | autoplay: true, 5 | loop: true, 6 | easing: "easeInOutSine", 7 | direction: "alternate", 8 | }); 9 | anime({ 10 | targets: "#zero", 11 | translateX: 10, 12 | autoplay: true, 13 | loop: true, 14 | easing: "easeInOutSine", 15 | direction: "alternate", 16 | scale: [{ value: 1 }, { value: 1.4 }, { value: 1, delay: 250 }], 17 | rotateY: { value: "+=180", delay: 200 }, 18 | }); -------------------------------------------------------------------------------- /assets/js/app.js: -------------------------------------------------------------------------------- 1 | 2 | "use strict"; 3 | // Sweet Alert CDN through JS 4 | let script = document.createElement("script"); 5 | script.type = 'text/javascript'; 6 | script.src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"; 7 | document.body.appendChild(script); 8 | 9 | // Header 10 | 11 | let header = $(` 12 | `); 35 | 36 | 37 | //"Scroll to top" button 38 | let upArrow = $(` 39 | 40 | 41 | }) 42 | `); 43 | 44 | $(document).ready(function () { 45 | // updating the color of the swiper bullets (initial update of color) 46 | updateColorOfSwiperBullets(localStorage.getItem("lightMode")); 47 | 48 | //function for the "Scroll To Top" button to detect the footer 49 | $(window).scroll(function () { 50 | //The button will be hidden until we scroll more than the window's height 51 | if ($(window).scrollTop() < $(window).height()) { 52 | $("#btnScrollToTop").css("visibility", "hidden"); 53 | } else { 54 | $("#btnScrollToTop").css("visibility", "visible"); 55 | //The button will change it's color when it hits the footer 56 | if ( 57 | $(window).scrollTop() + $(window).height() > 58 | $(document).height() - 838 59 | ) { 60 | // 838 should be changed if footer's height is changed so that the button changes it's color exactly when it hits the footer (preferably 14 less than the computer height of the footer) 61 | $("#btnScrollToTop").css("background-color", "#6a00bb"); 62 | } else { 63 | $("#btnScrollToTop").css("background-color", "#6a00bb"); 64 | } 65 | } 66 | }); 67 | }); 68 | 69 | //function to scroll to top 70 | const scrollToTop = () => { 71 | window.scrollTo({ 72 | top: 0, 73 | left: 0, 74 | behavior: "smooth", 75 | }); 76 | }; 77 | 78 | // Window Loads 79 | $(function () { 80 | let bodyElement = $(`body`); 81 | bodyElement.prepend(header); 82 | bodyElement.append(footer); 83 | bodyElement.append(upArrow); 84 | $("#btnScrollToTop").css("visibility", "hidden"); 85 | 86 | //toggler hamburger functions 87 | const menuBtn = document.querySelector(".navbar-toggler"); 88 | let menuOpen = false; 89 | menuBtn.addEventListener("click", () => { 90 | if (!menuOpen) { 91 | menuBtn.classList.add("open"); 92 | menuOpen = true; 93 | } else { 94 | menuBtn.classList.remove("open"); 95 | menuOpen = false; 96 | } 97 | }); 98 | }); 99 | 100 | // function for toggling hamburger is-active class 101 | 102 | $(function () { 103 | $("#js-hamburger").on("click", function () { 104 | $(this).toggleClass("is-active"); 105 | }); 106 | }); 107 | 108 | // Navbar current page highlight 109 | 110 | let loader = document.querySelector(".loader-container"); 111 | 112 | window.addEventListener("load", vanish); 113 | 114 | function vanish() { 115 | loader.classList.add("disappear"); 116 | } 117 | $(function () { 118 | $("a.nav-link").each(function () { 119 | if ($(this).prop("href") == window.location.href) { 120 | $(this).addClass("current-link"); 121 | } 122 | }); 123 | }); 124 | 125 | //function to remove underline on hover 126 | 127 | $(document).ready(function () { 128 | $("a.nav-link").hover( 129 | function () { 130 | $(this).removeClass("current-link"); 131 | }, 132 | function () { 133 | if ($(this).prop("href") == window.location.href) { 134 | $(this).addClass("current-link"); 135 | } 136 | } 137 | ); 138 | }); 139 | 140 | localStorage.setItem("lightMode", "dark"); 141 | 142 | 143 | // function to update swiper bullets 144 | function updateColorOfSwiperBullets(lightMode) { 145 | document.querySelectorAll(".swiper-pagination-bullet").forEach((bullet) => { 146 | if (lightMode == "light") { 147 | bullet.style.backgroundColor = "blue"; 148 | } else { 149 | bullet.style.backgroundColor = "white"; 150 | } 151 | }); 152 | } 153 | 154 | window.addEventListener("storage", function () { 155 | app.setAttribute("light-mode", "dark"); 156 | }); 157 | 158 | //send button animation 159 | 160 | 161 | $(function submitAnimation() { 162 | const name = document.querySelector("#name") 163 | const emailAdress = document.querySelector("#email") 164 | const text = document.querySelector("#textArea") 165 | const emailPattern = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/; 166 | 167 | $("#lnch").on("click", function () { 168 | 169 | // Check if the name field is empty or contains a number 170 | if (name.value == "" || (/\d/.test(name.value))) { 171 | swal("Error !","Please enter a valid name !","error"); 172 | return; 173 | } 174 | // Check if the email field is empty or email is not valid ex: test@@email.com 175 | else if (emailAdress.value == "" || !(emailPattern.test(emailAdress.value))) { 176 | swal("Error !","Please enter a valid email !","error"); 177 | return; 178 | } 179 | // Check if the message field is empty 180 | else if (text.value == "") { 181 | swal("Error !","Please enter a valid message !","error"); 182 | return; 183 | } 184 | else { 185 | 186 | setTimeout(function () { 187 | $("#lnch").addClass("launching").text("Sending"); 188 | $("#lnch_btn").addClass("launching"); 189 | }, 0); 190 | setTimeout(function () { 191 | $("#lnch").addClass("launched").text("SENT"); 192 | $("#lnch_btn").addClass("launched"); 193 | }, 1500); 194 | // Wait for 2.2 seconds so that the send button animation can be fully played before submitting the form 195 | setTimeout(() => { 196 | document.querySelector('form').submit(); 197 | }, 2200); 198 | } 199 | }); 200 | }); 201 | -------------------------------------------------------------------------------- /assets/js/cursor.js: -------------------------------------------------------------------------------- 1 | var cursor = { 2 | delay: 8, 3 | _x: 0, 4 | _y: 0, 5 | endX: window.innerWidth / 2, 6 | endY: window.innerHeight / 2, 7 | cursorVisible: true, 8 | cursorEnlarged: false, 9 | $dot: document.querySelector(".cursor-dot"), 10 | $outline: document.querySelector(".cursor-dot-outline"), 11 | lastScrolledLeft : 0, // For changing position of cursor with scrolling 12 | lastScrolledTop : 0, // For changing position of cursor with scrolling 13 | 14 | init: function () { 15 | // Set up element sizes 16 | this.dotSize = this.$dot.offsetWidth; 17 | this.outlineSize = this.$outline.offsetWidth; 18 | 19 | this.setupEventListeners(); 20 | this.animateDotOutline(); 21 | }, 22 | 23 | setupEventListeners: function () { 24 | var self = this; 25 | 26 | // Anchor hovering 27 | document.querySelectorAll("a").forEach(function (el) { 28 | el.addEventListener("mouseover", function () { 29 | self.cursorEnlarged = true; 30 | self.toggleCursorSize(); 31 | }); 32 | el.addEventListener("mouseout", function () { 33 | self.cursorEnlarged = false; 34 | self.toggleCursorSize(); 35 | }); 36 | }); 37 | 38 | // Click events 39 | document.addEventListener("mousedown", function () { 40 | self.cursorEnlarged = true; 41 | self.toggleCursorSize(); 42 | }); 43 | document.addEventListener("mouseup", function () { 44 | self.cursorEnlarged = false; 45 | self.toggleCursorSize(); 46 | }); 47 | 48 | document.addEventListener("mousemove", function (e) { 49 | // Show the cursor 50 | self.cursorVisible = true; 51 | self.toggleCursorVisibility(); 52 | 53 | // Position the dot 54 | self.endX = e.pageX; 55 | self.endY = e.pageY; 56 | self.$dot.style.top = self.endY + "px"; 57 | self.$dot.style.left = self.endX + "px"; 58 | }); 59 | 60 | // Hide/show cursor 61 | document.addEventListener("mouseenter", function (e) { 62 | self.cursorVisible = true; 63 | self.toggleCursorVisibility(); 64 | self.$dot.style.opacity = 1; 65 | self.$outline.style.opacity = 1; 66 | }); 67 | 68 | document.addEventListener("mouseleave", function (e) { 69 | self.cursorVisible = true; 70 | self.toggleCursorVisibility(); 71 | self.$dot.style.opacity = 0; 72 | self.$outline.style.opacity = 0; 73 | }); 74 | 75 | // Change position of cursor with scrolling 76 | document.addEventListener('scroll', function (e) { 77 | 78 | if (self.lastScrolledLeft != $(document).scrollLeft()) { 79 | self.endX -= self.lastScrolledLeft; 80 | self.lastScrolledLeft = $(document).scrollLeft(); 81 | self.endX += self.lastScrolledLeft; 82 | } 83 | if (self.lastScrolledTop != $(document).scrollTop()) { 84 | self.endY -= self.lastScrolledTop; 85 | self.lastScrolledTop = $(document).scrollTop(); 86 | self.endY += self.lastScrolledTop; 87 | } 88 | self.$dot.style.top = self.endY + "px"; 89 | self.$dot.style.left = self.endX + "px"; 90 | 91 | }); 92 | }, 93 | 94 | animateDotOutline: function () { 95 | var self = this; 96 | 97 | self._x += (self.endX - self._x) / self.delay; 98 | self._y += (self.endY - self._y) / self.delay; 99 | self.$outline.style.top = self._y + "px"; 100 | self.$outline.style.left = self._x + "px"; 101 | 102 | requestAnimationFrame(this.animateDotOutline.bind(self)); 103 | }, 104 | 105 | toggleCursorSize: function () { 106 | var self = this; 107 | 108 | if (self.cursorEnlarged) { 109 | self.$dot.style.transform = "translate(-50%, -50%) scale(0.75)"; 110 | self.$outline.style.transform = "translate(-50%, -50%) scale(1.5)"; 111 | } else { 112 | self.$dot.style.transform = "translate(-50%, -50%) scale(1)"; 113 | self.$outline.style.transform = "translate(-50%, -50%) scale(1)"; 114 | } 115 | }, 116 | 117 | toggleCursorVisibility: function () { 118 | var self = this; 119 | 120 | if (self.cursorVisible) { 121 | self.$dot.style.opacity = 1; 122 | self.$outline.style.opacity = 1; 123 | } else { 124 | self.$dot.style.opacity = 0; 125 | self.$outline.style.opacity = 0; 126 | } 127 | }, 128 | }; 129 | 130 | cursor.init(); 131 | -------------------------------------------------------------------------------- /assets/js/dynamicTitle.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | const favicon = document.getElementById('favicon') 3 | const pageTitle = document.title 4 | const attentionMessage = 'Hoang Manh Khiem | KProtect' 5 | 6 | document.addEventListener('visibilitychange', function (e) { 7 | const isPageActive = !document.hidden 8 | toggle(isPageActive) 9 | }) 10 | 11 | function toggle(isPageActive) { 12 | if (isPageActive) { 13 | document.title = pageTitle 14 | favicon.href = './assets/images/favicon.png' 15 | } else { 16 | document.title = attentionMessage 17 | favicon.href = './assets/images/favicon.png' 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /assets/js/education.js: -------------------------------------------------------------------------------- 1 | AOS.init(); 2 | 3 | // MOOCs Cards 4 | 5 | const moocs = document.querySelector(".moocs"); 6 | const moocscards = [ 7 | { 8 | title: "Data Science", 9 | cardImage: "assets/images/education-page/coursera2.svg", 10 | moocLink: "https://www.coursera.org/browse/data-science", 11 | }, 12 | { 13 | title: "Ethical Hacking", 14 | cardImage: "assets/images/education-page/udemy.svg", 15 | moocLink: "https://www.udemy.com/course/learn-ethical-hacking-from-scratch/", 16 | }, 17 | { 18 | title: "Machine Learning", 19 | cardImage: "assets/images/education-page/coursera2.svg", 20 | moocLink: "https://www.coursera.org/learn/machine-learning", 21 | }, 22 | { 23 | title: "Security+", 24 | cardImage: "assets/images/education-page/udemy.svg", 25 | moocLink: "https://www.udemy.com/course/securityplus/", 26 | }, 27 | { 28 | title: "Javascript", 29 | cardImage: "assets/images/education-page/udacity.svg", 30 | moocLink: "https://www.udacity.com/course/intro-to-javascript--ud803", 31 | }, 32 | { 33 | title: "Python", 34 | cardImage: "assets/images/education-page/udemy.svg", 35 | moocLink: "https://www.udemy.com/course/100-days-of-code/", 36 | }, 37 | { 38 | title: "Botnets", 39 | cardImage: "assets/images/education-page/udemy.svg", 40 | moocLink: "https://www.udemy.com/course/dos-ddos-drdos-botnets/", 41 | }, 42 | { 43 | title: "Data Structures & Algorithms", 44 | cardImage: "assets/images/education-page/udacity.svg", 45 | moocLink: "https://www.udacity.com/course/data-structures-and-algorithms-nanodegree--nd256", 46 | }, 47 | ]; 48 | 49 | let currentItem = 0; 50 | 51 | const img = document.getElementById("image"); 52 | 53 | const prevBtn = document.querySelector("#prevBtn"); 54 | const nextBtn = document.querySelector("#nextBtn"); 55 | 56 | window.addEventListener("DOMContentLoaded", function () { 57 | showExperience(); 58 | }); 59 | 60 | function showExperience() { 61 | setInterval(function () { 62 | if (currentItem === experience.length) { 63 | currentItem = 0; 64 | } 65 | const item = experience[currentItem]; 66 | img.src = item.img; 67 | currentItem++; 68 | }, 3000); 69 | } 70 | 71 | const showCards = () => { 72 | let output = ""; 73 | moocscards.forEach( 74 | ({ title, cardImage, moocLink }) => 75 | (output += ` 76 |
77 |
78 |
79 |
80 | 81 |
82 | 83 |
84 |
85 |
86 |
${title}
87 |
88 |
89 |
90 | `) 91 | ); 92 | moocs.innerHTML = output; 93 | }; 94 | document.addEventListener("DOMContentLoaded", showCards); 95 | 96 | const showCards1 = () => { 97 | let output = ""; 98 | badgesection.forEach( 99 | ({ title, image, description }) => 100 | (output += ` 101 |
102 | Card image cap 103 |
${title}
104 |
${description}
105 |
`) 106 | ); 107 | bagdes.innerHTML = output; 108 | }; 109 | document.addEventListener("DOMContentLoaded", showCards1); 110 | 111 | /* Timeline Section*/ 112 | 113 | $(function () { 114 | window.sr = ScrollReveal(); 115 | 116 | if ($(window).width() < 768) { 117 | if ($(".timeline-content").hasClass("js--fadeInLeft")) { 118 | $(".timeline-content") 119 | .removeClass("js--fadeInLeft") 120 | .addClass("js--fadeInRight"); 121 | } 122 | 123 | sr.reveal(".js--fadeInRight", { 124 | origin: "right", 125 | distance: "300px", 126 | easing: "ease-in-out", 127 | duration: 800, 128 | }); 129 | } else { 130 | sr.reveal(".js--fadeInLeft", { 131 | origin: "left", 132 | distance: "300px", 133 | easing: "ease-in-out", 134 | duration: 800, 135 | }); 136 | 137 | sr.reveal(".js--fadeInRight", { 138 | origin: "right", 139 | distance: "300px", 140 | easing: "ease-in-out", 141 | duration: 800, 142 | }); 143 | } 144 | 145 | sr.reveal(".js--fadeInLeft", { 146 | origin: "left", 147 | distance: "300px", 148 | easing: "ease-in-out", 149 | duration: 800, 150 | }); 151 | 152 | sr.reveal(".js--fadeInRight", { 153 | origin: "right", 154 | distance: "300px", 155 | easing: "ease-in-out", 156 | duration: 800, 157 | }); 158 | }); 159 | -------------------------------------------------------------------------------- /assets/js/experience.js: -------------------------------------------------------------------------------- 1 | AOS.init(); 2 | 3 | // Work experience cards 4 | 5 | const experiencecards = document.querySelector(".experience-cards"); 6 | const exp = [ 7 | { 8 | title: "Security System Specialist", 9 | cardImage: "assets/images/experience-page/securitybox.jpeg", 10 | place: "SecurityBox", 11 | time: "(May, 2022 - present)", 12 | desp: "
  • System penetration testing
  • Dynamic young security expert
  • participating in big projects such as: CVA security patching, Decoding malware, .. and succeeding and commending and rewarding
    • ", 13 | }, 14 | { 15 | title: "Student Developer", 16 | cardImage: "assets/images/experience-page/gsoc.png", 17 | place: "Google Summer Of Code", 18 | time: "(Mar - Aug, 2019)", 19 | desp: "
  • Worked with MOZILLA as a part of Google Summer Of Code.
  • Worked on Extension Activity Monitor which is a privileged extension for Firefox that uses the activityLog API (privileged API) to monitor the activities of the other installed extensions.
  • The activityLog API listens for logs from other installed extensions.
    • ", 20 | }, 21 | ]; 22 | 23 | const showCards2 = () => { 24 | let output = ""; 25 | exp.forEach( 26 | ({ title, cardImage, place, time, desp }) => 27 | (output += ` 28 |
    29 |
    30 | 31 |
    32 |
    33 |
    34 |

    ${title}

    35 |
    36 |

    37 | ${place}
    38 | ${time} 39 |

    40 |
      41 | ${desp} 42 |
    43 |
    44 |
    45 |
    46 |
    47 | `) 48 | ); 49 | experiencecards.innerHTML = output; 50 | }; 51 | document.addEventListener("DOMContentLoaded", showCards2); 52 | 53 | // Volunteership Cards 54 | 55 | const volunteership = document.querySelector(".volunteership"); 56 | const volunteershipcards = [ 57 | { 58 | title: "GirlScript Summer Of Code 2020", 59 | cardImage: "assets/images/experience-page/1.jpg", 60 | description: 61 | "Responsible for handling the projects GirlScript App and GirlScript Website Boilerplate.", 62 | }, 63 | { 64 | title: "StudentCode-in 2020", 65 | cardImage: "assets/images/experience-page/2.jpg", 66 | description: 67 | "Responsible for handling open source contributions for the project Awesome Developer Portfolio.", 68 | }, 69 | { 70 | title: "PClub Summer Of Code 2020", 71 | cardImage: "assets/images/experience-page/3.jpg", 72 | description: 73 | "Mentoring for the projects Deep Pixel, AutoVaidya, Just Resume and Doc2pen.", 74 | }, 75 | { 76 | title: "Hakin-Codes", 77 | cardImage: "assets/images/experience-page/4.jpg", 78 | description: 79 | "Mentoring for the open source projects Deeppixel, Awesome Developer Portfolios and Doc2Pen.", 80 | }, 81 | ]; 82 | 83 | const showCards = () => { 84 | let output = ""; 85 | volunteershipcards.forEach( 86 | ({ title, cardImage, description }) => 87 | (output += ` 88 |
    89 | 90 | 91 |
    92 |

    ${title}


    93 |

    ${description}

    94 | 95 |
    96 | `) 97 | ); 98 | volunteership.innerHTML = output; 99 | }; 100 | document.addEventListener("DOMContentLoaded", showCards); 101 | 102 | // Hackathon Section 103 | 104 | const hackathonsection = document.querySelector(".hackathon-section"); 105 | const mentor = [ 106 | { 107 | title: "The Uplift Project", 108 | subtitle: "Mentor", 109 | image: "assets/images/experience-page/uplift.png", 110 | desp: "I would be responsible for guiding 100s of participants across the globe in their first steps towards Applied Data Science and building end-to-end machine learning projects.", 111 | href: "https://uplift.girlscript.tech/", 112 | }, 113 | { 114 | title: "ULHacks", 115 | subtitle: "Judge", 116 | image: "assets/images/experience-page/ulhacks.png", 117 | desp: "ULHacks is a 36 hour long hackathon organized with an aim to enable students to create a project which empowers learning.", 118 | href: "https://ulhacks.com/", 119 | }, 120 | { 121 | title: "WaffleHacks", 122 | subtitle: "Judge", 123 | image: "assets/images/experience-page/wafflehacks.png", 124 | desp: "WaffleHacks 2021 is an upcoming 48-hour student-organized hackathon with an aim to bring technical solutions to local communities and small businesses.", 125 | href: "https://wafflehacks.org/", 126 | }, 127 | { 128 | title: "Elevate Tech", 129 | subtitle: "Judge", 130 | image: "assets/images/experience-page/elevate.png", 131 | desp: "Elevate Hacks is an upcoming all-female virtual hackathon coming from AUGUST 14th to 15th.", 132 | href: "https://elevatetech.codes/", 133 | }, 134 | { 135 | title: "PitchTeen", 136 | subtitle: "Judge", 137 | image: "assets/images/experience-page/pitchteen.png", 138 | desp: "PitchTeen 2.0 was a tech startup competition for female and non-binary communities in high school and college from all over the world with an aim to create a safe and encouraging place for women to help them explore tech and business fields.", 139 | href: "https://www.linkedin.com/company/pitchteen/about/", 140 | }, 141 | { 142 | title: "Hack-A-Solution", 143 | subtitle: "Judge", 144 | image: "assets/images/experience-page/hackasolution.png", 145 | desp: "Hack-a-Solution 2021 is a 24 hour long hackathon organized by Frisco students to raise awareness of world issues through technology.", 146 | href: "https://hackasolution.devpost.com/", 147 | }, 148 | { 149 | title: "UniGlobe Hacks", 150 | subtitle: "Judge", 151 | image: "assets/images/experience-page/uniglobe.png", 152 | desp: "UniGlobe Hacks 2.0 is an upcoming 4-day long hackathon run by high school students held during 28-31 July 2021.", 153 | href: "https://uniglobe-hacks.devpost.com/", 154 | }, 155 | { 156 | title: "AtlasHacks", 157 | subtitle: "Mentor", 158 | image: "assets/images/experience-page/atlas.png", 159 | desp: "AtlasHacks II is a 3-day virtual hackathon that aims to foster creativity within hackers all around the world.", 160 | href: "https://atlashacks2.devpost.com/", 161 | }, 162 | { 163 | title: "NeoHacks", 164 | subtitle: "Judge", 165 | image: "assets/images/experience-page/neo.png", 166 | desp: "NeoHacks is an upcoming 48-hour hackathon taking place July 23-25, 2021 where hundreds of students from around the world will come together virtually to learn new skills, meet new friends, and build awesome projects. We provide beginner-friendly workshops, mentorship, fun games, and more.", 167 | href: "https://neohacks.org/", 168 | }, 169 | { 170 | title: "Mission Inspired", 171 | subtitle: "Judge", 172 | image: "assets/images/experience-page/mission.png", 173 | desp: "InspireEd Hacks is a nationwide initiative organized by the student-for-student nonprofit, Mission InspirEd, challenging students ages 10-18 to synthesize their creativity and coding experience into a product beneficial to the educational community.", 174 | href: "https://www.missioninspired.org/hackathon", 175 | }, 176 | { 177 | title: "Hack3", 178 | subtitle: "Judge", 179 | image: "assets/images/experience-page/hack3.png", 180 | desp: "Hack3 2021 is an upcoming global online hackathon that aims to enable high school students to learn computer science, with a broader message of (everyone can code) targeting underrepresented demographics to improve diversity and inclusion of individuals in the computer technology space.", 181 | href: "https://hack3.co/", 182 | }, 183 | { 184 | title: "JITHack", 185 | subtitle: "Mentor", 186 | image: "assets/images/experience-page/jithack.png", 187 | desp: "JITHack is an upcoming virtual design and development hackathon organized by the students of Jyothy Institute of Technology, Bengaluru on June 26, 2021, where participants have 24 hours to build something incredible.", 188 | href: "https://jithack.netlify.app/", 189 | }, 190 | { 191 | title: "Recess Hacks", 192 | subtitle: "Mentor", 193 | image: "assets/images/experience-page/recess.png", 194 | desp: "Recess Hacks is an upcoming hackathon for high school students in the Greater Toronto Area that strives to encourage innovation among high school students and get involved in technology.", 195 | href: "https://recesshacks.com/", 196 | }, 197 | { 198 | title: "Citro Tech", 199 | subtitle: "Mentor", 200 | image: "assets/images/experience-page/citro.png", 201 | desp: "Citro Hacks 2021 is an upcoming all-inclusive online hackathon organized by Citro Tech, a student led organization dedicated to empowering minorities in the tech field", 202 | href: "https://citro.tech/", 203 | }, 204 | { 205 | title: "NHacks", 206 | subtitle: "Judge", 207 | image: "assets/images/experience-page/nhacks.png", 208 | desp: "NHacks VI was a hackathon that aimed to encourage students everywhere to develop skills in computer science by creating tangible products that they're proud of. It initially started as Michigan's largest high school hackathon.", 209 | href: "https://nhacks-vi.devpost.com/", 210 | }, 211 | ]; 212 | 213 | const showCards3 = () => { 214 | let output = ""; 215 | mentor.forEach( 216 | ({ title, image, subtitle, desp, href }) => 217 | (output += ` 218 |
    219 |
    220 | 221 |
    222 |
    223 |
    ${title}
    224 | ${subtitle} 225 |
    ${desp}
    226 | Read More 227 |
    228 |
    229 | `) 230 | ); 231 | hackathonsection.innerHTML = output; 232 | }; 233 | document.addEventListener("DOMContentLoaded", showCards3); 234 | -------------------------------------------------------------------------------- /assets/js/particle.js: -------------------------------------------------------------------------------- 1 | /* ---- particles.js config ---- */ 2 | 3 | particlesJS("particles-js", { 4 | particles: { 5 | number: { 6 | value: 140, 7 | density: { 8 | enable: true, 9 | value_area: 800, 10 | }, 11 | }, 12 | color: { 13 | value: "#ffffff", 14 | }, 15 | shape: { 16 | type: "none", 17 | stroke: { 18 | width: 1, 19 | color: "#fff", 20 | }, 21 | polygon: { 22 | nb_sides: 5, 23 | }, 24 | image: { 25 | src: "https://cdn.freebiesupply.com/logos/large/2x/slack-logo-icon.png", 26 | width: 100, 27 | height: 100, 28 | }, 29 | }, 30 | 31 | opacity: { 32 | value: 1, 33 | random: false, 34 | anim: { 35 | enable: false, 36 | speed: 1, 37 | opacity_min: 0.1, 38 | sync: false, 39 | }, 40 | }, 41 | size: { 42 | value: 8, 43 | random: true, 44 | anim: { 45 | enable: false, 46 | speed: 10, 47 | size_min: 10, 48 | sync: false, 49 | }, 50 | }, 51 | line_linked: { 52 | enable: true, 53 | distance: 150, 54 | color: "#808080", 55 | opacity: 0.4, 56 | width: 1, 57 | }, 58 | move: { 59 | enable: true, 60 | speed: 1, 61 | direction: "none", 62 | random: false, 63 | straight: false, 64 | out_mode: "out", 65 | bounce: false, 66 | attract: { 67 | enable: false, 68 | rotateX: 600, 69 | rotateY: 1200, 70 | }, 71 | }, 72 | }, 73 | interactivity: { 74 | detect_on: "window", 75 | events: { 76 | onhover: { 77 | enable: false, 78 | mode: "repulse", 79 | }, 80 | onclick: { 81 | enable: false, 82 | mode: "push", 83 | }, 84 | }, 85 | modes: { 86 | repulse: { 87 | distance: 70, 88 | duration: 0.4, 89 | }, 90 | push: { 91 | particles_nb: 4, 92 | }, 93 | }, 94 | }, 95 | retina_detect: true, 96 | }); 97 | const allElements = document.querySelectorAll(".animated-text"); 98 | 99 | // It checks if there is at least one element 100 | if (allElements.length > 0) { 101 | //It runs the script for each found element 102 | allElements.forEach((element) => { 103 | const txtElement = element, 104 | wordsList = txtElement.getAttribute("data-words"), 105 | words = wordsList.split(", "); // It makes an array of words from data attribute 106 | 107 | let wordsCount = 0; 108 | 109 | entry(); 110 | 111 | // Initial function 112 | function entry() { 113 | if (wordsCount < words.length) { 114 | // It runs the code for each word 115 | let word = words[wordsCount], 116 | txtArr = word.split(""), // It makes an array of letters in the word 117 | count = 0; 118 | 119 | txtElement.textContent = ""; // It removes the previous text from the element 120 | 121 | // For each letter in the array 122 | txtArr.forEach((letter) => { 123 | // It replaces the empty space for the "non-break-space" HTML... 124 | // ... This is needed to separate the words properly 125 | let _letter = letter === " " ? " " : letter; 126 | 127 | // It wraps every letter with a "span" and puts all they back to the element 128 | txtElement.innerHTML += `${_letter}`; 129 | }); 130 | 131 | let spans = txtElement.childNodes; 132 | 133 | // It sets the interval between each letter showing 134 | const letterInterval = setInterval(activeLetter, 70); 135 | 136 | function activeLetter() { 137 | spans[count].classList.add("active"); 138 | count++; 139 | 140 | if (count === spans.length) { 141 | clearInterval(letterInterval); 142 | 143 | // It waits 4 seconds to start erasing the word 144 | setTimeout(() => { 145 | eraseText(); 146 | }, 600); 147 | } 148 | } 149 | 150 | function eraseText() { 151 | // It sets the interval between each letter hiding 152 | let removeInterval = setInterval(removeLetter, 40); 153 | count--; 154 | 155 | function removeLetter() { 156 | spans[count].classList.remove("active"); 157 | count--; 158 | 159 | if (count === -1) { 160 | clearInterval(removeInterval); 161 | wordsCount++; 162 | 163 | // After removing the last letter, call the initial function again 164 | entry(); 165 | } 166 | } 167 | } 168 | } else { 169 | // If the code reaches the last word 170 | // It resets the words counter... 171 | wordsCount = 0; 172 | // ...and calls the initial function again. 173 | entry(); 174 | } 175 | } 176 | }); 177 | } 178 | -------------------------------------------------------------------------------- /assets/js/project.js: -------------------------------------------------------------------------------- 1 | AOS.init(); 2 | /* Project Cards */ 3 | 4 | const projectcards = document.querySelector(".projectcards"); 5 | 6 | // Array of object for projects 7 | const projects = [ 8 | { 9 | title: "Chess Engine", 10 | cardImage: "assets/images/project-page/chess.jpg", 11 | description: "A chess engine for a popular game dev engine.", 12 | tagimg: "https://image.flaticon.com/icons/png/512/643/643350.png", 13 | Previewlink: "", 14 | Githublink: "", 15 | }, 16 | { 17 | title: "Flappy Bird", 18 | cardImage: "assets/images/project-page/flappybird.png", 19 | description: "Flappy bird game built using React.js", 20 | tagimg: "https://cdn.iconscout.com/icon/free/png-512/react-1-282599.png", 21 | Previewlink: "", 22 | Githublink: "", 23 | }, 24 | { 25 | title: "Tic Tac Toe Game", 26 | cardImage: "assets/images/project-page/tic-tac-toe.png", 27 | description:"Tested a React Tic Tac Toe Game using Jest and React Testing Library.", 28 | tagimg: "https://cdn.iconscout.com/icon/free/png-512/react-1-282599.png", 29 | Previewlink: "", 30 | Githublink: "", 31 | }, 32 | { 33 | title: "War Game", 34 | cardImage: "assets/images/project-page/minesweeper.jpg", 35 | description: "Built using C", 36 | tagimg: 37 | "https://camo.githubusercontent.com/888e388801f947dec7c3d843942c277af25fe2b1aed1821542c4e711f210312a/68747470733a2f2f75706c6f61642e77696b696d656469612e6f72672f77696b6970656469612f636f6d6d6f6e732f7468756d622f632f63332f507974686f6e2d6c6f676f2d6e6f746578742e7376672f37363870782d507974686f6e2d6c6f676f2d6e6f746578742e7376672e706e67", 38 | Previewlink: "", 39 | Githublink: "", 40 | }, 41 | { 42 | title: "Battery Life Calculator", 43 | cardImage: "assets/images/project-page/battery.png", 44 | description: "Built battery life calculator using Python.", 45 | tagimg: "https://camo.githubusercontent.com/888e388801f947dec7c3d843942c277af25fe2b1aed1821542c4e711f210312a/68747470733a2f2f75706c6f61642e77696b696d656469612e6f72672f77696b6970656469612f636f6d6d6f6e732f7468756d622f632f63332f507974686f6e2d6c6f676f2d6e6f746578742e7376672f37363870782d507974686f6e2d6c6f676f2d6e6f746578742e7376672e706e67", 46 | Previewlink: "", 47 | Githublink: "", 48 | }, 49 | { 50 | title: "Number Analysis Programs", 51 | cardImage: "assets/images/project-page/music.jpg", 52 | description: "Built using Python.", 53 | tagimg: 54 | "https://camo.githubusercontent.com/888e388801f947dec7c3d843942c277af25fe2b1aed1821542c4e711f210312a/68747470733a2f2f75706c6f61642e77696b696d656469612e6f72672f77696b6970656469612f636f6d6d6f6e732f7468756d622f632f63332f507974686f6e2d6c6f676f2d6e6f746578742e7376672f37363870782d507974686f6e2d6c6f676f2d6e6f746578742e7376672e706e67", 55 | Previewlink: "", 56 | Githublink: "", 57 | }, 58 | ]; 59 | 60 | // function for rendering project cards data 61 | const showCards = () => { 62 | let output = ""; 63 | projects.forEach(({ title, cardImage, Previewlink, Githublink }) => { 64 | output += ` 65 |
    66 |
    67 |
    68 |
    69 |
    70 |
    71 |
    72 |

    ${title}

    73 |
    74 |

      75 |
      • 76 |
      • 77 |
    78 |
    79 |
    80 |
    81 |
    `; 82 | }); 83 | projectcards.innerHTML = output; 84 | }; 85 | document.addEventListener("DOMContentLoaded", showCards); 86 | 87 | function myFunction() { 88 | // Declare variables 89 | var input, button, i, skillcard, card, title; 90 | input = document.getElementById("myInput").value; 91 | input = input.toUpperCase(); 92 | skillcard = document.getElementsByClassName("skill-card"); 93 | card = document.getElementsByClassName("card"); 94 | title = document.getElementsByClassName("title"); 95 | 96 | // Loop through all list items, and hide those who don't match the search query 97 | for (i = 0; i < button.length; i++) { 98 | if ( 99 | button[i].innerHTML.toUpperCase().includes(input) || 100 | title[i].innerHTML.toUpperCase().includes(input) 101 | ) { 102 | skillcard[i].style.display = ""; 103 | card[i].style.display = ""; 104 | } else { 105 | skillcard[i].style.display = "none"; 106 | card[i].style.display = "none"; 107 | } 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /assets/js/references.js: -------------------------------------------------------------------------------- 1 | /*Reference Details Table*/ 2 | // Changes made 10/1/2021: 3 | // Added reviewphoto1 - reviewphoto5 in assets/references-page 4 | // Changed names and descriptions of references 5 | const referenceTable = document.querySelector(".pain"); 6 | 7 | const references = [ 8 | { 9 | sl1: 1, 10 | name1 : "Smaranjit Ghose", 11 | designation1 : "Product Manager, Microsoft", 12 | image1 : "https://avatars.githubusercontent.com/u/46641503?v=4", 13 | message1 : "John is a conscientious individual whom I mentored during JWOC'2021. His problem-solving skills and a keen interest in learning new skillsets are remarkable. His hardworking nature and team-building abilities make him different from others.", 14 | 15 | 16 | sl2:2, 17 | name2 : "Anush Bhatia", 18 | designation2 : "Senior Analyst, Capgemini", 19 | image2: "https://avatars.githubusercontent.com/u/40017559?v=4", 20 | message2 : "John has the best grasping skills I have seen in a new developer. I got to know him through GSSOC'2021 when I mentored him, and he made an exceptional growth during the competition. He made some incredible contributions and has good experience with Open Source.", 21 | 22 | 23 | }, 24 | 25 | { 26 | sl1:3, 27 | name1 : "Aditya Jyoti Paul", 28 | designation1 : "Technical Analyst, Amazon", 29 | image1 : "https://media-exp1.licdn.com/dms/image/C5603AQGEV-kzawPxjw/profile-displayphoto-shrink_800_800/0/1588602102622?e=1651708800&v=beta&t=8nxhFoR-WB4OKVltyYaVjmRpig_kQcvFsoa-eLjJPBQ", 30 | message1 : "John and I have worked on several projects. Apart from technical skills, he also has good soft skills. He has good experience with debugging and has excellent leadership qualities.", 31 | 32 | 33 | sl2:4, 34 | name2 : "Arnab Dutta Purkayastha", 35 | designation2 : "Data Scientist, Flipkart", 36 | image2 : "https://avatars.githubusercontent.com/u/59832779?v=4", 37 | message2 : "John and I worked together during a hackathon and the thing that surprised me the most about him was his knowledge of fundamentals. He offered sincere help to the team throughout the competition. He is an impressive problem solver who is able to address complex issues strategically and confidently.", 38 | }, 39 | ]; 40 | 41 | AOS.init(); 42 | const fillData = () => { 43 | let output = ""; 44 | 45 | references.forEach( 46 | ({ 47 | sl1, 48 | image1, 49 | name1, 50 | designation1, 51 | message1, 52 | absbox_for_linkedin1, 53 | sl2, 54 | image2, 55 | name2, 56 | designation2, 57 | message2, 58 | absbox_for_linkedin2, 59 | }) => 60 | (output += ` 61 | 62 | 63 |
    64 | 65 | 66 | 67 |
    68 | 69 | ${name1} 70 |
    ${designation1}
    71 |
    ${message1}
    72 |
    73 | 74 | 75 | 76 | 77 | 78 | 79 |
    80 | 81 | 82 | 83 |
    84 | 85 | ${name2} 86 |
    ${designation2}
    87 |
    ${message2}
    88 |
    89 | 90 | 91 | 92 | 93 | 94 | 95 | `) 96 | ); 97 | referenceTable.innerHTML = output; 98 | }; 99 | document.addEventListener("DOMContentLoaded", fillData); 100 | -------------------------------------------------------------------------------- /assets/js/research.js: -------------------------------------------------------------------------------- 1 | /*Research Details Table*/ 2 | 3 | const researchTable = document.querySelector(".main"); 4 | 5 | const research = [ 6 | { 7 | title: "A Batch Normalized Inference Network Keeps the KL Vanishing Away", 8 | authors: 9 | "Qile Zhu, Wei Bi, Xiaojiang Liu, Xiyao Ma, Xiaolin Li and Dapeng Wu", 10 | conferences: 11 | "The 58th Annual Meeting of the Association for Computational Linguistics", 12 | researchYr: 2020, 13 | citebox: "popup1", 14 | image: "assets/images/research-page/inteferenceNetwork.png", 15 | citation: { 16 | vancouver: 17 | "Qile Zhu, Wei Bi, Xiaojiang Liu, Xiyao Ma, Xiaolin Li and Dapeng Wu. A Batch Normalized Inference Network Keeps the KL Vanishing Away. The 58th Annual Meeting of the Association for Computational Linguistics 2020.", 18 | }, 19 | abstract: 20 | "This is currently left empty and this can be considered as a dummy data 1", 21 | absbox: "absPopup1", 22 | }, 23 | 24 | { 25 | title: "A Call for More Rigor in Unsupervised Cross-lingual Learning", 26 | authors: 27 | "Mikel Artetxe, Sebastian Ruder, Dani Yogatama, Gorka Labaka and Eneko Agirre", 28 | conferences: 29 | "The 58th Annual Meeting of the Association for Computational Linguistics", 30 | researchYr: 2020, 31 | citebox: "popup2", 32 | image: "assets/images/research-page/crossLingual.png", 33 | citation: { 34 | vancouver: 35 | "Mikel Artetxe, Sebastian Ruder, Dani Yogatama, Gorka Labaka and Eneko Agirre. A Call for More Rigor in Unsupervised Cross-lingual Learning. The 58th Annual Meeting of the Association for Computational Linguistics 2020.", 36 | }, 37 | abstract: 38 | "This is currently left empty and this can be considered as a dummy data 2", 39 | absbox: "absPopup2", 40 | }, 41 | 42 | { 43 | title: 44 | "A Comprehensive Analysis of Preprocessing for Word Representation Learning in Affective Tasks", 45 | authors: "Nastaran Babanejad, Ameeta Agrawal, Aijun An and Manos Papagelis", 46 | conferences: 47 | "The 58th Annual Meeting of the Association for Computational Linguistics", 48 | researchYr: 2020, 49 | citebox: "popup3", 50 | image: "assets/images/research-page/wordRepresentation.png", 51 | citation: { 52 | vancouver: 53 | "Nastaran Babanejad, Ameeta Agrawal, Aijun An and Manos Papagelis. A Comprehensive Analysis of Preprocessing for Word Representation Learning in Affective Tasks. The 58th Annual Meeting of the Association for Computational Linguistics 2020.", 54 | }, 55 | abstract: 56 | "This is currently left empty and this can be considered as a dummy data 3", 57 | absbox: "absPopup3", 58 | }, 59 | 60 | { 61 | title: 62 | "A Contextual Hierarchical Attention Network with Adaptive Objective for Dialogue State Tracking", 63 | authors: 64 | "Yong Shan, Zekang Li, Jinchao Zhang, Fandong Meng, Yang Feng, Cheng Niu and Jie Zhou", 65 | conferences: 66 | "The 58th Annual Meeting of the Association for Computational Linguistics", 67 | researchYr: 2020, 68 | citebox: "popup4", 69 | image: "assets/images/research-page/dialogueState.png", 70 | citation: { 71 | vancouver: 72 | "Yong Shan, Zekang Li, Jinchao Zhang, Fandong Meng, Yang Feng, Cheng Niu and Jie Zhou. A Contextual Hierarchical Attention Network with Adaptive Objective for Dialogue State Tracking. The 58th Annual Meeting of the Association for Computational Linguistics 2020.", 73 | }, 74 | abstract: 75 | "This is currently left empty and this can be considered as a dummy data 4", 76 | absbox: "absPopup4", 77 | }, 78 | 79 | { 80 | title: "Dual Super-Resolution Learning for Semantic Segmentation", 81 | authors: "Wang, Li and Li, Dong and Zhu, Yousong and Tian, Lu and Shan, Yi", 82 | conferences: 83 | "IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR)", 84 | researchYr: 2020, 85 | citebox: "popup5", 86 | image: "assets/images/research-page/semanticSegmentation.png", 87 | citation: { 88 | vancouver: 89 | "Wang, Li and Li, Dong and Zhu, Yousong and Tian, Lu and Shan, Yi. Dual Super-Resolution Learning for Semantic Segmentation. IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR) 2020.", 90 | }, 91 | abstract: 92 | "This is currently left empty and this can be considered as a dummy data 5", 93 | absbox: "absPopup5", 94 | }, 95 | 96 | { 97 | title: "Deep Unfolding Network for Image Super-Resolution", 98 | authors: "Zhang, Kai and Van Gool, Luc and Timofte, Radu", 99 | conferences: 100 | "IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR)", 101 | researchYr: 2020, 102 | citebox: "popup6", 103 | image: "assets/images/research-page/deepNetwork.png", 104 | citation: { 105 | vancouver: 106 | "Zhang, Kai and Van Gool, Luc and Timofte, Radu. Deep Unfolding Network for Image Super-Resolution. IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR) 2020.", 107 | }, 108 | abstract: 109 | "This is currently left empty and this can be considered as a dummy data 6", 110 | absbox: "absPopup6", 111 | }, 112 | 113 | { 114 | title: 115 | "Unsupervised Learning for Intrinsic Image Decomposition From a Single Image", 116 | authors: "Liu, Yunfei and Li, Yu and You, Shaodi and Lu, Feng", 117 | conferences: 118 | "IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR)", 119 | researchYr: 2020, 120 | citebox: "popup7", 121 | image: "assets/images/research-page/imageDecomposition.png", 122 | citation: { 123 | vancouver: 124 | "Liu, Yunfei and Li, Yu and You, Shaodi and Lu, Feng. Unsupervised Learning for Intrinsic Image Decomposition From a Single Image. IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR) 2020.", 125 | }, 126 | abstract: 127 | "This is currently left empty and this can be considered as a dummy data 7", 128 | absbox: "absPopup7", 129 | }, 130 | { 131 | title: 132 | "Forward and Backward Information Retention for Accurate Binary Neural Networks", 133 | authors: 134 | "Qin, Haotong and Gong, Ruihao and Liu, Xianglong and Shen, Mingzhu and Wei, Ziran and Yu, Fengwei and Song, Jingkuan", 135 | conferences: 136 | "IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR)", 137 | researchYr: 2020, 138 | citebox: "popup8", 139 | image: "assets/images/research-page/neuralNetworks.jpg", 140 | citation: { 141 | vancouver: 142 | "Qin, Haotong and Gong, Ruihao and Liu, Xianglong and Shen, Mingzhu and Wei, Ziran and Yu, Fengwei and Song, Jingkuan. Forward and Backward Information Retention for Accurate Binary Neural Networks. IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR) 2020.", 143 | }, 144 | abstract: 145 | "This is currently left empty and this can be considered as a dummy data 8", 146 | absbox: "absPopup8", 147 | }, 148 | ]; 149 | AOS.init(); 150 | const fillData = () => { 151 | let output = ""; 152 | research.forEach( 153 | ({ 154 | image, 155 | title, 156 | authors, 157 | conferences, 158 | researchYr, 159 | citebox, 160 | citation, 161 | absbox, 162 | abstract, 163 | }) => 164 | (output += ` 165 | 166 | 167 | 168 |
    169 | 170 | 171 | 172 |
    173 | ${title} 174 |
    ${authors}
    175 | 176 |
    ${conferences} 177 |
    ${researchYr}
    178 |
    179 | 180 | 181 |
    182 | 185 | 186 | 189 |
    190 |
    191 |
    192 | ${abstract} 193 |
    194 |
    195 |
    196 |
    197 | ${citation.vancouver} 198 |
    199 |
    200 | 201 | `) 202 | ); 203 | researchTable.innerHTML = output; 204 | }; 205 | document.addEventListener("DOMContentLoaded", fillData); 206 | -------------------------------------------------------------------------------- /assets/js/skills.js: -------------------------------------------------------------------------------- 1 | AOS.init(); 2 | 3 | // KProtects cards 4 | 5 | const skillsCards = document.querySelector(".skills-box"); 6 | const skills = [ 7 | { 8 | langImage: "assets/images/skills-page/html.png", 9 | langName: "HyperText Markup Language", 10 | langDesc: "
  • The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser
    • ", 11 | }, 12 | { 13 | langImage: "assets/images/skills-page/css.png", 14 | langName: "Cascading Style Sheets", 15 | langDesc: "
  • Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML
    • ", 16 | }, 17 | { 18 | langImage: "assets/images/skills-page/javascript.png", 19 | langName: "JavaScript", 20 | langDesc: "
  • JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS
    • ", 21 | }, 22 | { 23 | langImage: "assets/images/skills-page/python.png", 24 | langName: "Python", 25 | langDesc: "
  • Python is an interpreted high-level general-purpose programming language
    • ", 26 | }, 27 | { 28 | langImage: "assets/images/skills-page/cpp.png", 29 | langName: "C++", 30 | langDesc: "
  • C++ is a general-purpose programming language created by Bjarne Stroustrup as an extension of the C programming language, or C with Classes
    • ", 31 | }, 32 | { 33 | langImage: "assets/images/skills-page/git.png", 34 | langName: "Git", 35 | langDesc: "
  • Git is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development.
    • ", 36 | }, 37 | { 38 | langImage:"assets/images/skills-page/c.png", 39 | langName:"C", 40 | langDesc:"
  • C is a general-purpose, procedural computer programming language supporting structured programming, lexical variable scope, and recursion, with a static type system
    • " 41 | }, 42 | ]; 43 | 44 | const displayskillssCards = () => { 45 | const entireCardTemplate = 46 | skills.map((stack)=> { 47 | return ` 48 |
    49 |
    50 |
    51 | 52 |
    53 |
    54 |
    55 |
    56 |

    ${stack.langName}

    57 |
    58 |
    59 |
      60 | ${stack.langDesc} 61 |
    62 |
    63 |
    64 |
    65 | `}).join(''); 66 | skillsCards.innerHTML = entireCardTemplate; 67 | }; 68 | // displayskillssCards(skills) 69 | document.addEventListener("DOMContentLoaded", displayskillssCards); 70 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hoang Manh Khiem | Home 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 | 43 | 44 | 45 | 46 | 47 |
    48 |
    49 |
    50 |
    51 |
    52 |
    53 |
    54 | 55 | 56 | 57 | 58 |
    59 |
    60 |
    61 |
    62 |
    63 |
    64 | 65 |
    Thank you for visit my website

     I'm Hoang Manh Khiem 66 |

    67 |
    68 |
    69 | 70 |
    71 |
    72 | I am into 74 | 75 | 119 |
    120 |
    121 |
    122 | 123 |


    124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: Googlebot 2 | User-agent: AdsBot-Google 3 | Disallow: / 4 | User-agent: * 5 | Disallow: / --------------------------------------------------------------------------------