├── Image ├── 20200630_162659.gif ├── 20200630_1626599.gif ├── Ajit.jpg ├── Boy-image.png ├── C++.jpg ├── Cert.jpg ├── Coding.svg ├── Data Science.jpg ├── Data_Analysis.svg ├── Home.gif ├── JavaScript.jpg ├── LovelyHome-9aBZ.ttf ├── Profile pic.jpg ├── Programming.svg ├── Project.svg ├── Skills.svg ├── brush script mt kursiv.ttf ├── c-logo-icon-28389.png ├── connection.svg ├── dark-mode-update.gif ├── dialogflow.png ├── engineer.ico ├── kindpng_5747046.png ├── numpy-ar21.svg └── website.svg ├── LICENSE ├── README.md ├── contact.css ├── contact.html ├── dark-mode.css ├── dark-mode.js ├── education.css ├── education.html ├── index.html ├── project.css ├── project.html ├── skill.css ├── skill.html ├── style.css ├── toggle.css └── toggle.html /Image/20200630_162659.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AjitVerma15/Interactive-Portfolio/cdb958f38176ac5550c1b0007ccbd55a124669a8/Image/20200630_162659.gif -------------------------------------------------------------------------------- /Image/20200630_1626599.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AjitVerma15/Interactive-Portfolio/cdb958f38176ac5550c1b0007ccbd55a124669a8/Image/20200630_1626599.gif -------------------------------------------------------------------------------- /Image/Ajit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AjitVerma15/Interactive-Portfolio/cdb958f38176ac5550c1b0007ccbd55a124669a8/Image/Ajit.jpg -------------------------------------------------------------------------------- /Image/Boy-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AjitVerma15/Interactive-Portfolio/cdb958f38176ac5550c1b0007ccbd55a124669a8/Image/Boy-image.png -------------------------------------------------------------------------------- /Image/C++.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AjitVerma15/Interactive-Portfolio/cdb958f38176ac5550c1b0007ccbd55a124669a8/Image/C++.jpg -------------------------------------------------------------------------------- /Image/Cert.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AjitVerma15/Interactive-Portfolio/cdb958f38176ac5550c1b0007ccbd55a124669a8/Image/Cert.jpg -------------------------------------------------------------------------------- /Image/Coding.svg: -------------------------------------------------------------------------------- 1 | coding -------------------------------------------------------------------------------- /Image/Data Science.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AjitVerma15/Interactive-Portfolio/cdb958f38176ac5550c1b0007ccbd55a124669a8/Image/Data Science.jpg -------------------------------------------------------------------------------- /Image/Data_Analysis.svg: -------------------------------------------------------------------------------- 1 | dashboard -------------------------------------------------------------------------------- /Image/Home.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AjitVerma15/Interactive-Portfolio/cdb958f38176ac5550c1b0007ccbd55a124669a8/Image/Home.gif -------------------------------------------------------------------------------- /Image/JavaScript.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AjitVerma15/Interactive-Portfolio/cdb958f38176ac5550c1b0007ccbd55a124669a8/Image/JavaScript.jpg -------------------------------------------------------------------------------- /Image/LovelyHome-9aBZ.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AjitVerma15/Interactive-Portfolio/cdb958f38176ac5550c1b0007ccbd55a124669a8/Image/LovelyHome-9aBZ.ttf -------------------------------------------------------------------------------- /Image/Profile pic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AjitVerma15/Interactive-Portfolio/cdb958f38176ac5550c1b0007ccbd55a124669a8/Image/Profile pic.jpg -------------------------------------------------------------------------------- /Image/Programming.svg: -------------------------------------------------------------------------------- 1 | programming -------------------------------------------------------------------------------- /Image/Project.svg: -------------------------------------------------------------------------------- 1 | project_completed -------------------------------------------------------------------------------- /Image/Skills.svg: -------------------------------------------------------------------------------- 1 | laravel and vue -------------------------------------------------------------------------------- /Image/brush script mt kursiv.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AjitVerma15/Interactive-Portfolio/cdb958f38176ac5550c1b0007ccbd55a124669a8/Image/brush script mt kursiv.ttf -------------------------------------------------------------------------------- /Image/c-logo-icon-28389.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AjitVerma15/Interactive-Portfolio/cdb958f38176ac5550c1b0007ccbd55a124669a8/Image/c-logo-icon-28389.png -------------------------------------------------------------------------------- /Image/connection.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Image/dark-mode-update.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AjitVerma15/Interactive-Portfolio/cdb958f38176ac5550c1b0007ccbd55a124669a8/Image/dark-mode-update.gif -------------------------------------------------------------------------------- /Image/dialogflow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AjitVerma15/Interactive-Portfolio/cdb958f38176ac5550c1b0007ccbd55a124669a8/Image/dialogflow.png -------------------------------------------------------------------------------- /Image/engineer.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AjitVerma15/Interactive-Portfolio/cdb958f38176ac5550c1b0007ccbd55a124669a8/Image/engineer.ico -------------------------------------------------------------------------------- /Image/kindpng_5747046.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AjitVerma15/Interactive-Portfolio/cdb958f38176ac5550c1b0007ccbd55a124669a8/Image/kindpng_5747046.png -------------------------------------------------------------------------------- /Image/website.svg: -------------------------------------------------------------------------------- 1 | static_website -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Ajit Verma 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 | # Interactive-Portfolio 2 | 3 | [![GitHub](https://img.shields.io/github/license/AjitVerma15/Interactive-Portfolio?color=green)](https://img.shields.io/github/license/AjitVerma15/Interactive-Portfolio) 4 | 5 | ## A Resposive and attractive portfolio for Developers 🔥 6 | 7 | A clean, beautiful and responsive portfolio templete with using only HTML and css. 8 | Later on add some javascript for animation and designing. 9 | visit the website [here.](https://ajitverma15.github.io/Interactive-Portfolio/) 10 | 11 | ![ezgif com-optimize](https://user-images.githubusercontent.com/53833570/87217363-f9e6ff00-c365-11ea-9e1a-4d017964f2b4.gif) 12 | 13 | ## Sections: 14 | 15 | 💥 About me\ 16 | 💥 Education\ 17 | 💥 Cretification\ 18 | 💥 Skills\ 19 | 💥 Projects\ 20 | 💥 Contact me 21 | 22 | ## Technology used: 23 | 24 | - HTML 25 | - CSS 26 | 27 | ## Illustration and Images 28 | 29 | - [Undraw](https://undraw.co/) 30 | - [Hackerblock](https://hack.codingblocks.com/) 31 | 32 | ## For the Future 33 | If you can help us with these. Please don't hesitate to open a pull request. 34 | 35 | - Add a page loader 36 | - Add some Animation 37 | - Add some more Section 38 | 39 | ## Updates 40 | 41 | - Added Dark Mode 42 | 43 | ![Dark Mode](https://github.com/AjitVerma15/Interactive-Portfolio/blob/master/Image/dark-mode-update.gif) - [PR](https://github.com/AjitVerma15/Interactive-Portfolio/pull/18) 26/08/2024 44 | 45 | ## Reference 46 | 47 | Some Design idea are taken from [Ashutosh Hathidara](https://github.com/ashutosh1919/masterPortfolio) 48 | -------------------------------------------------------------------------------- /contact.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Open Sans", sans-serif; 3 | font-weight: 700; 4 | margin: 0; 5 | } 6 | .body_section { 7 | padding: 3% 5% 1%; 8 | } 9 | 10 | a { 11 | text-decoration: none; 12 | } 13 | 14 | @font-face { 15 | font-family: "Lovely Home"; 16 | src: local("Lovely Home"), url("Image/LovelyHome-9aBZ.ttf") format("truetype"); 17 | } 18 | 19 | .brand-name, 20 | .navbar-light .navbar-brand { 21 | /* font-family: "Brush Script MT"; */ 22 | /* margin-bottom: 3px; */ 23 | font-family: "Lovely Home"; 24 | font-size: 50px; 25 | font-weight: bold; 26 | color: #351458; 27 | } 28 | @media only screen and (max-width: 764px) { 29 | .brand-name, 30 | .navbar-light .navbar-brand { 31 | font-family: "Lovely Home"; 32 | font-size: 40px; 33 | font-weight: bold; 34 | color: #351458; 35 | } 36 | } 37 | 38 | .headerachor { 39 | color: black; 40 | margin: 0 7px 0 7px; 41 | font-size: 25px; 42 | } 43 | 44 | .headerachor:hover { 45 | background-color: #f1f1f1; 46 | } 47 | 48 | #contact { 49 | padding: 20px 20px 10px; 50 | } 51 | 52 | .first-section { 53 | text-align: center; 54 | } 55 | 56 | .Profilepic { 57 | border-radius: 100%; 58 | width: 300px; 59 | height: 300px; 60 | border: 10px solid; 61 | border-color: #6c63ff; 62 | box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.897); 63 | } 64 | 65 | .context { 66 | text-align: center; 67 | padding-top: 20px; 68 | } 69 | 70 | h1 { 71 | font-weight: bold; 72 | } 73 | 74 | p { 75 | padding-top: 5px; 76 | padding-bottom: 5px; 77 | color: #868e96; 78 | } 79 | 80 | .ico { 81 | padding: 0; 82 | } 83 | 84 | .icon { 85 | text-decoration: none; 86 | list-style: none; 87 | margin: 0 7px 0; 88 | display: inline; 89 | } 90 | 91 | .github { 92 | color: gray; 93 | } 94 | .instagram { 95 | color: #fb3958; 96 | } 97 | .linkedin { 98 | color: #0e76a8; 99 | } 100 | .google { 101 | color: #ea4335; 102 | } 103 | 104 | .github:hover, 105 | .instagram:hover, 106 | .google:hover, 107 | .linkedin:hover { 108 | color: black; 109 | } 110 | 111 | .Resume { 112 | background-color: #6c63ff; 113 | } 114 | .Resume:hover { 115 | color: black; 116 | background-color: white; 117 | } 118 | 119 | .second-section { 120 | text-align: center; 121 | } 122 | 123 | .connect { 124 | font-weight: normal; 125 | margin-top: 30px; 126 | margin-bottom: 20px; 127 | font-size: 30px; 128 | color: white; 129 | background-color: #6c63ff; 130 | padding: 10px 30px 10px; 131 | margin-left: 12%; 132 | margin-right: 12%; 133 | border-radius: 10px; 134 | } 135 | 136 | .connection { 137 | margin-top: 30px; 138 | width: 100%; 139 | height: 100%; 140 | margin-bottom: 10px; 141 | } 142 | 143 | .sayhello { 144 | margin-top: 15px; 145 | border: 1px solid #6c63ff; 146 | border-radius: 10px; 147 | padding: 10px 20px 10px; 148 | } 149 | 150 | .sayhello:hover { 151 | text-align: none; 152 | text-decoration: none; 153 | color: white; 154 | background-color: #6c63ff; 155 | } 156 | 157 | span.wave { 158 | animation-name: wave-animation; 159 | animation-duration: 2.5s; 160 | animation-iteration-count: infinite; 161 | transform-origin: 70% 70%; 162 | display: inline-block; 163 | } 164 | 165 | @keyframes wave-animation { 166 | 0% { 167 | transform: rotate(0deg); 168 | } 169 | 10% { 170 | transform: rotate(-10deg); 171 | } 172 | 20% { 173 | transform: rotate(12deg); 174 | } 175 | 30% { 176 | transform: rotate(-10deg); 177 | } 178 | 40% { 179 | transform: rotate(9deg); 180 | } 181 | 50% { 182 | transform: rotate(0deg); 183 | } 184 | 100% { 185 | transform: rotate(0deg); 186 | } 187 | } 188 | 189 | @media only screen and (max-width: 950px) { 190 | body, 191 | html { 192 | text-align: center; 193 | font-size: 16px; 194 | line-height: normal; 195 | } 196 | h1 { 197 | font-size: 30px; 198 | } 199 | .connect { 200 | font-size: 20px; 201 | } 202 | .connection { 203 | margin-left: 0px; 204 | } 205 | } 206 | 207 | footer { 208 | padding-top: 2%; 209 | color: #868e96; 210 | text-align: center; 211 | } 212 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ajit's Portfolio 7 | 8 | 14 | 15 | 16 | 17 | 21 | 25 | 26 | 30 | 34 | 39 | 44 | 49 | 50 | 54 | 63 | 64 | 65 |
66 | 109 |
110 |
111 |
112 |
113 | 114 |
115 |
116 |

Reach out to me!

117 |

118 | I am available on almost every social media platform.
119 | You want to discuss a project or just want to say hi? My Inbox is 120 | always open for you. 121 |

122 |
    123 |
  • 124 | 125 | 132 | 134 |
    • 135 |
  • 136 | 145 |
    • 146 |
  • 147 | 158 |
    • 159 |
  • 160 | 169 |
    • 170 |
171 | 178 |
179 |
180 |
181 |
182 |
183 |

Let's connect and build something together!

184 | Say Hello 👋 187 |
188 | 189 |
190 |
191 |
192 | 193 | 194 | 195 | 196 | -------------------------------------------------------------------------------- /dark-mode.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --dark-background-color: #171c28; 3 | --dark-text-color: #ffffff; 4 | --dark-button-color: #55198b; 5 | } 6 | 7 | iframe { 8 | border: none; 9 | width: 92px; 10 | height: 65px; 11 | } 12 | 13 | @media (min-width: 992px) { 14 | .navbar-expand-lg .navbar-nav { 15 | align-items: center; 16 | } 17 | } 18 | 19 | .dark-mode { 20 | background-color: var(--dark-background-color) !important; 21 | background-image: var(--dark-background-color) !important; 22 | color: var(--dark-text-color) !important; 23 | } 24 | 25 | .dark-mode .card-title { 26 | color: var(--dark-text-color); 27 | } 28 | 29 | .dark-mode .card { 30 | background-color: var(--dark-background-color); 31 | } 32 | 33 | .dark-mode .column1 { 34 | background-image: var(--dark-background-color) !important; 35 | } 36 | 37 | .dark-mode .nav-link { 38 | color: var(--dark-text-color) !important; 39 | } 40 | 41 | .dark-mode .headerachor:hover { 42 | background-color: var(--dark-button-color) !important; 43 | } 44 | 45 | .dark-mode .brand-name { 46 | color: var(--dark-text-color) !important; 47 | } 48 | 49 | .dark-mode .brand-name:hover { 50 | color: var(--dark-button-color) !important; 51 | } 52 | 53 | .dark-mode p { 54 | color: #fffff0 !important; 55 | } 56 | -------------------------------------------------------------------------------- /dark-mode.js: -------------------------------------------------------------------------------- 1 | function onIframeLoad() { 2 | const iframe = document.getElementById("toggle-iframe"); 3 | const body = document.querySelector("body"); 4 | const iframeContentDocument = iframe.contentDocument; 5 | const navBar = document.querySelector( 6 | ".navbar.navbar-expand-lg.navbar-light" 7 | ); 8 | const darkToggleMode = 9 | iframeContentDocument.getElementById("darkmode-toggle"); 10 | if (localStorage.getItem("dark-mode") === "true") { 11 | body.classList.add("dark-mode"); 12 | darkToggleMode.checked = true; 13 | navBar.classList.remove("navbar-light"); 14 | navBar.classList.add("navbar-dark"); 15 | } 16 | 17 | darkToggleMode.addEventListener("click", function (event) { 18 | if (event.target.checked) { 19 | body.classList.add("dark-mode"); 20 | localStorage.setItem("dark-mode", true); 21 | navBar.classList.remove("navbar-light"); 22 | navBar.classList.add("navbar-dark"); 23 | } else { 24 | body.classList.remove("dark-mode"); 25 | localStorage.setItem("dark-mode", false); 26 | navBar.classList.add("navbar-light"); 27 | navBar.classList.remove("navbar-dark"); 28 | } 29 | }); 30 | } 31 | -------------------------------------------------------------------------------- /education.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Open Sans", sans-serif; 3 | font-weight: 700; 4 | margin: 0; 5 | } 6 | .body_section { 7 | padding: 3% 5% 1%; 8 | } 9 | 10 | a { 11 | text-decoration: none; 12 | } 13 | 14 | @font-face { 15 | font-family: "Lovely Home"; 16 | src: local("Lovely Home"), url("Image/LovelyHome-9aBZ.ttf") format("truetype"); 17 | } 18 | 19 | .brand-name, 20 | .navbar-light .navbar-brand { 21 | /* font-family: "Brush Script MT"; */ 22 | /* margin-bottom: 3px; */ 23 | font-family: "Lovely Home"; 24 | font-size: 50px; 25 | font-weight: bold; 26 | color: #351458; 27 | } 28 | @media only screen and (max-width: 764px) { 29 | .brand-name, 30 | .navbar-light .navbar-brand { 31 | font-family: "Lovely Home"; 32 | font-size: 40px; 33 | font-weight: bold; 34 | color: #351458; 35 | } 36 | } 37 | 38 | .headerachor { 39 | color: black; 40 | margin: 0 7px 0 7px; 41 | font-size: 25px; 42 | } 43 | 44 | .headerachor:hover { 45 | background-color: #f1f1f1; 46 | } 47 | 48 | #Section1 { 49 | padding: 7% 0 3%; 50 | } 51 | 52 | .Programming { 53 | width: 100%; 54 | height: 100%; 55 | } 56 | 57 | .Coding { 58 | padding-top: 3%; 59 | text-align: center; 60 | } 61 | 62 | @media only screen and (max-width: 950px) { 63 | body, 64 | html { 65 | text-align: center; 66 | font-size: 16px; 67 | line-height: normal; 68 | } 69 | } 70 | 71 | .competitive_icon li { 72 | margin: 0 2% 0; 73 | list-style: none; 74 | display: inline; 75 | } 76 | 77 | .fab { 78 | color: #2ec866; 79 | } 80 | .fab:hover { 81 | color: black; 82 | } 83 | 84 | .iconify { 85 | color: gray; 86 | margin-bottom: 40px; 87 | } 88 | .iconify:hover { 89 | color: black; 90 | } 91 | 92 | .Heading { 93 | text-align: center; 94 | } 95 | 96 | .timeline { 97 | margin-top: 20px; 98 | position: relative; 99 | } 100 | 101 | .timeline:before { 102 | position: absolute; 103 | content: ""; 104 | width: 4px; 105 | height: calc(100% - 150px); 106 | background: #6f67ff; 107 | left: 14px; 108 | top: 5px; 109 | border-radius: 4px; 110 | } 111 | 112 | .timeline-month { 113 | color: black; 114 | position: relative; 115 | padding: 4px 15px 4px 35px; 116 | background-color: #a6a1ff; 117 | display: inline-block; 118 | width: auto; 119 | border-radius: 40px; 120 | border: 1px solid #17191b; 121 | border-right-color: black; 122 | margin-bottom: 30px; 123 | } 124 | 125 | .timeline-month span { 126 | position: absolute; 127 | top: -1px; 128 | left: calc(100% - 10px); 129 | z-index: -1; 130 | white-space: nowrap; 131 | display: inline-block; 132 | background-color: #111; 133 | padding: 4px 10px 4px 20px; 134 | border-top-right-radius: 40px; 135 | border-bottom-right-radius: 40px; 136 | border: 1px solid black; 137 | box-sizing: border-box; 138 | } 139 | 140 | .timeline-month:before { 141 | position: absolute; 142 | content: ""; 143 | width: 20px; 144 | height: 20px; 145 | background: #362cff; 146 | border-radius: 100%; 147 | border: 1px solid #17191b; 148 | left: 5px; 149 | } 150 | 151 | .timeline-section { 152 | padding-left: 35px; 153 | display: block; 154 | position: relative; 155 | margin-bottom: 30px; 156 | } 157 | 158 | .timeline-date { 159 | margin-bottom: 15px; 160 | padding: 2px 15px; 161 | background: #a6a1ff; 162 | position: relative; 163 | display: inline-block; 164 | border-radius: 20px; 165 | border: 1px solid #17191b; 166 | color: black; 167 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); 168 | } 169 | .timeline-section:before { 170 | content: ""; 171 | position: absolute; 172 | width: 30px; 173 | height: 1px; 174 | background-color: #362cff; 175 | top: 12px; 176 | left: 20px; 177 | } 178 | 179 | .timeline-section:after { 180 | content: ""; 181 | position: absolute; 182 | width: 10px; 183 | height: 10px; 184 | background: #362cff; 185 | top: 7px; 186 | left: 11px; 187 | border: 1px solid #17191b; 188 | border-radius: 100%; 189 | } 190 | 191 | .timeline-box { 192 | position: relative; 193 | color: black; 194 | background-color: #a6a1ff; 195 | border-radius: 15px; 196 | border-top-left-radius: 0px; 197 | border-bottom-right-radius: 0px; 198 | border: 1px solid #17191b; 199 | transition: all 0.3s ease; 200 | overflow: hidden; 201 | } 202 | 203 | .box-icon { 204 | position: absolute; 205 | right: 5px; 206 | top: 0px; 207 | } 208 | 209 | .box-title { 210 | padding: 10px 15px; 211 | font-size: 25px; 212 | border-bottom: 1px solid #17191b; 213 | } 214 | 215 | .degree { 216 | font-size: 15px; 217 | } 218 | 219 | .box-title i { 220 | margin-right: 5px; 221 | } 222 | 223 | .box-content { 224 | padding: 5px 15px; 225 | background-color: white; 226 | } 227 | 228 | .box-item { 229 | margin-bottom: 5px; 230 | color: #868e96; 231 | font-weight: 400; 232 | } 233 | 234 | .certificate { 235 | padding-top: 20px; 236 | } 237 | .certificate-text { 238 | text-align: center; 239 | } 240 | 241 | .box-shadow { 242 | box-shadow: 5px 5px 5px #d9dbdf; 243 | } 244 | 245 | footer { 246 | padding-top: 2%; 247 | color: #868e96; 248 | text-align: center; 249 | } 250 | -------------------------------------------------------------------------------- /education.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ajit's Portfolio 7 | 8 | 14 | 15 | 16 | 17 | 21 | 25 | 26 | 30 | 34 | 35 | 40 | 45 | 50 | 51 | 55 | 64 | 65 | 66 |
67 | 110 |
111 |
112 |
113 |
114 | 115 |
116 |
117 |

Competitive Programming

118 | 139 |
140 |
141 |
142 |
143 |
144 |
145 |

Degrees Received

146 |
147 |
148 |
149 |
Education
150 |
151 |
2017 - Present
152 |
153 |
154 |
155 |
156 | J.C. 157 | Bose University of Science and Technology, YMCA 158 |

B.tech in Computer Engineering

159 |
160 |
161 | Website 169 |
170 | 💥 I have studied software engineering subjects like Data 171 | Structures, Algorithms, DBMS, OS, CA, CN etc. 172 |
173 |
💥 CGPA: 7.14
174 |
175 |
176 |
177 |
178 |
179 | 180 |
181 |
2015 - 2017
182 |
183 |
184 |
185 |
186 | G.B.S.S 187 | School, Sarojini Nagar 188 |

Senior Secondary Education

189 |
190 |
191 | Details 197 |
198 | 💥 I have studied the subjects Physics, Chemistry, 199 | Mathematics etc. 200 |
201 |
💥 Percentage: 80%
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |

Certifications

213 |
214 |
215 |
216 |
217 | 221 |
222 | Card image cap 227 |
228 |

229 | C++ with Data Structures and Algorithms
-by Coding Blocks 233 |

234 |
235 |
236 | 237 |
238 |
239 | 243 |
244 | Card image cap 249 |
250 |

JavaScript Basics

251 |

252 | -by Sololearn 253 |

254 |
255 |
256 | 257 |
258 |
259 | 263 |
264 | Card image cap 269 |
270 |

Data Science

271 |

-by _____

272 |
273 |
274 | 275 |
276 |
277 |
278 |
279 | 280 | 281 | 282 | 283 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ajit's Portfolio 7 | 8 | 14 | 15 | 16 | 17 | 21 | 25 | 29 | 33 | 38 | 43 | 48 | 49 | 53 | 62 | 63 |
64 | 107 |
108 | 109 |
110 |
111 |
112 | 113 |
114 |
115 |

116 | Hello All! I'm Ajit 👋 117 |

118 |

119 | A passionate Developer having an experience in Data Analytics, 120 | Machine Learning and Web Development and want to develop sustainable 121 | and scalable social and technical systems to create impact 122 |

123 | 153 |
154 |
155 | 156 |
157 |
158 |
159 | 160 |
161 |

What I Do ?

162 |
163 |
164 | 165 |
166 |
167 |

Data Analytics & ML

168 |
    169 |
    • 170 |
    • 171 |
  • 172 | 173 |
    • 174 |
175 |
176 |

177 | 💥 Developing Models that clean, tranform and analyse raw data to 178 | discover useful information, in order to make conclusions about 179 | the data. 180 |

181 |

182 | 💥 Experience of working with different python Libraries like 183 | Numpy, Pandas, Matplotlib, Seaborn etc. and have knowledge of Data 184 | analysis algorithms and techniques. 185 |

186 |
187 |
188 |
189 |
190 |
191 |

Web Development

192 |
    193 |
    • 194 |
  • 195 | 196 |
    • 197 |
  • 198 | 199 |
    • 200 |
  • 201 | 202 |
    • 203 |
    • 204 |
    • 205 |
    • 206 |
207 |
208 |

209 | 💥 Building Fully responsive website frontend using HTML, CSS, 210 | Bootstrap and Javascript. 211 |

212 |

213 | 💥 As of now I have knowledge only of frontend but in near future 214 | I will learn more skills and excited to explore React, NodeJS, 215 | Django, Flask and many more. 216 |

217 |

218 | 💥 I have also used Abode Photoshop, Illustrator and Figma to 219 | design User interface of websites and mobile applications and 220 | designed logos. 221 |

222 |
223 |
224 |
225 | 226 |
227 |
228 |
229 |
230 | 231 |
232 |
233 |

Data Structures and Algorithms

234 |
    235 |
  • 236 |
    • 237 | 238 |
  • 239 | 240 |
    • 241 |
242 |
243 |

244 | 💥 I have knowledge of Data Structures like Hash Tables, Trees, 245 | Tries, Graphs, and various algorithms for solving various problems 246 | efficiently. 247 |

248 |

249 | 💥 As I know Data Structures and Algorithms are the heart of 250 | programming, so I love to solve programming questions in different 251 | competitive websites like Codeforces, Codechef, Hackerrank and 252 | many more. 253 |

254 |
255 |
256 |
257 |
258 | 259 | 260 | 261 | 262 | -------------------------------------------------------------------------------- /project.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Open Sans", sans-serif; 3 | font-weight: 700; 4 | margin: 0; 5 | } 6 | .body_section { 7 | padding: 3% 5% 1%; 8 | } 9 | 10 | @font-face { 11 | font-family: "Lovely Home"; 12 | src: local("Lovely Home"), url("Image/LovelyHome-9aBZ.ttf") format("truetype"); 13 | } 14 | 15 | .brand-name, 16 | .navbar-light .navbar-brand { 17 | /* font-family: "Brush Script MT"; */ 18 | /* margin-bottom: 3px; */ 19 | font-family: "Lovely Home"; 20 | font-size: 50px; 21 | font-weight: bold; 22 | color: #351458; 23 | } 24 | @media only screen and (max-width: 764px) { 25 | .brand-name, 26 | .navbar-light .navbar-brand { 27 | font-family: "Lovely Home"; 28 | font-size: 40px; 29 | font-weight: bold; 30 | color: #351458; 31 | } 32 | } 33 | .headerachor { 34 | color: black; 35 | margin: 0 7px 0 7px; 36 | font-size: 25px; 37 | } 38 | 39 | .headerachor:hover { 40 | background-color: #f1f1f1; 41 | } 42 | 43 | .projectimage { 44 | width: 100%; 45 | height: 100%; 46 | } 47 | 48 | .Section1 { 49 | padding: 5% 0 3%; 50 | } 51 | 52 | .project-heading { 53 | margin: auto; 54 | width: 60%; 55 | padding: 10px; 56 | text-align: center; 57 | } 58 | .P-heading { 59 | padding-bottom: 10px; 60 | font-size: 40px; 61 | } 62 | 63 | .p-text { 64 | font-size: 18px; 65 | color: #868e96; 66 | } 67 | 68 | .Project-box { 69 | color: black; 70 | text-decoration: none; 71 | } 72 | 73 | .col-sm-6 { 74 | padding-bottom: 20px; 75 | } 76 | 77 | .boxx { 78 | background-color: #fff; 79 | border-color: white; 80 | box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.356); 81 | } 82 | .boxx:hover { 83 | box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.952); 84 | } 85 | 86 | .Project-box:hover { 87 | color: black; 88 | text-decoration: none; 89 | } 90 | 91 | .iconify { 92 | width: 40px; 93 | height: 40px; 94 | float: right; 95 | } 96 | 97 | .project-text { 98 | color: #868e96; 99 | font-family: "Montserrat"; 100 | font-weight: 300; 101 | } 102 | 103 | @media only screen and (max-width: 764px) { 104 | .project-heading { 105 | width: 100%; 106 | } 107 | } 108 | 109 | @media only screen and (max-width: 950px) { 110 | body, 111 | html { 112 | text-align: center; 113 | font-size: 16px; 114 | line-height: normal; 115 | } 116 | } 117 | 118 | footer { 119 | padding-top: 2%; 120 | color: #868e96; 121 | text-align: center; 122 | } 123 | -------------------------------------------------------------------------------- /project.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ajit's Portfolio 7 | 8 | 14 | 15 | 16 | 17 | 21 | 25 | 29 | 30 | 34 | 39 | 44 | 49 | 50 | 54 | 63 | 64 |
65 | 108 |
109 |
110 |
111 |
112 | 113 |
114 |
115 |

Projects

116 |

117 | My Project uses various technologies to make the model more accurate 118 | and stable. As of now, I haven't done many projects but in near 119 | future I will make more projects. 120 |

121 |
122 |
123 |
124 |
125 | 130 |
131 |
132 |
Advanced Attendence System
133 |

134 | This project makes the traditional attendence system advance 135 | by including features like marking attendence of students 136 | automatically using face recognition and detection. 137 | 142 |

143 |
144 |
145 | 146 |
147 |
148 | 153 |
154 |
155 |
Telegram Bot
156 |

157 | This bot gives news on diferent topics like sports, 158 | entertainment, according to location and can do small-talk and 159 | also show the covid cases in your state. 165 |

166 |
167 |
168 | 169 |
170 |
171 |
172 | 173 | 174 | 175 | 176 | 177 | -------------------------------------------------------------------------------- /skill.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Open Sans", sans-serif; 3 | font-weight: 700; 4 | margin: 0; 5 | } 6 | .body_section { 7 | padding: 3% 5% 1%; 8 | } 9 | 10 | a { 11 | text-decoration: none; 12 | } 13 | 14 | @font-face { 15 | font-family: "Lovely Home"; 16 | src: local("Lovely Home"), url("Image/LovelyHome-9aBZ.ttf") format("truetype"); 17 | } 18 | 19 | .brand-name, 20 | .navbar-light .navbar-brand { 21 | /* font-family: "Brush Script MT"; */ 22 | /* margin-bottom: 3px; */ 23 | font-family: "Lovely Home"; 24 | font-size: 50px; 25 | font-weight: bold; 26 | color: #351458; 27 | } 28 | 29 | @media only screen and (max-width: 764px) { 30 | .brand-name, 31 | .navbar-light .navbar-brand { 32 | font-family: "Lovely Home"; 33 | font-size: 40px; 34 | font-weight: bold; 35 | color: #351458; 36 | } 37 | } 38 | 39 | .headerachor { 40 | color: black; 41 | margin: 0 7px 0 7px; 42 | font-size: 25px; 43 | } 44 | 45 | .headerachor:hover { 46 | background-color: #f1f1f1; 47 | } 48 | 49 | .Section1 { 50 | padding: 4% 0 3%; 51 | } 52 | 53 | .skill-img { 54 | width: 100%; 55 | height: 100%; 56 | } 57 | 58 | .Skill-heading { 59 | font-family: "Montserrat"; 60 | font-size: 40px; 61 | font-weight: 300; 62 | } 63 | 64 | #SkillBox { 65 | width: 95%; 66 | height: auto; 67 | margin: 40px auto; 68 | padding: 10px; 69 | border-radius: 50px; 70 | -o-border-radius: 20px; 71 | -webkit-border-radius: 20px; 72 | -ms-border-radius: 20px; 73 | -moz-border-radius: 20px; 74 | } 75 | #SkillBox img { 76 | width: 20%; 77 | height: 10%; 78 | margin: auto 35%; 79 | padding: 10px; 80 | } 81 | .SkillBar { 82 | width: 90%; 83 | height: 50px; 84 | position: relative; 85 | border-radius: 20px; 86 | /* background: rgba(17, 17, 17, .3); */ 87 | background: #c5c2ff; 88 | margin: 20px auto; 89 | } 90 | 91 | #Skill-HTML { 92 | width: 90%; 93 | border-radius: 20px; 94 | animation: Animate-HTML 4s; 95 | -webkit-animation: Animate-HTML 4s; 96 | -moz-animation: Animate-HTML 4s; 97 | -o-animation: Animate-HTML 4s; 98 | height: 50px; 99 | position: absolute; 100 | background-color: #6c63ff; 101 | } 102 | @keyframes Animate-HTML { 103 | from { 104 | width: 10px; 105 | } 106 | to { 107 | width: 90%; 108 | } 109 | } 110 | @-webkit-keyframes Animate-HTML { 111 | from { 112 | width: 10px; 113 | } 114 | to { 115 | width: 90%; 116 | } 117 | } 118 | @-moz-keyframes Animate-HTML { 119 | from { 120 | width: 10px; 121 | } 122 | to { 123 | width: 90%; 124 | } 125 | } 126 | @-o-keyframes Animate-HTML { 127 | from { 128 | width: 10px; 129 | } 130 | to { 131 | width: 90%; 132 | } 133 | } 134 | #Skill-CSS { 135 | animation: Animate-CSS 5s; 136 | -webkit-animation: Animate-CSS 5s; 137 | -moz-animation: Animate-CSS 5s; 138 | -o-animation: Animate-CSS 5s; 139 | border-radius: 20px; 140 | width: 70%; 141 | height: 50px; 142 | position: absolute; 143 | background-color: #6c63ff; 144 | } 145 | @keyframes Animate-CSS { 146 | from { 147 | width: 10px; 148 | } 149 | to { 150 | width: 70%; 151 | } 152 | } 153 | @-webkit-keyframes Animate-CSS { 154 | from { 155 | width: 10px; 156 | } 157 | to { 158 | width: 70%; 159 | } 160 | } 161 | @-moz-keyframes Animate-CSS { 162 | from { 163 | width: 10px; 164 | } 165 | to { 166 | width: 70%; 167 | } 168 | } 169 | @-o-keyframes Animate-CSS { 170 | from { 171 | width: 10px; 172 | } 173 | to { 174 | width: 70%; 175 | } 176 | } 177 | #Skill-Python { 178 | border-radius: 20px; 179 | animation: Animate-Python 5s; 180 | -webkit-animation: Animate-Python 5s; 181 | -moz-animation: Animate-Python 5s; 182 | -o-animation: Animate-Python 5s; 183 | width: 80%; 184 | height: 50px; 185 | position: absolute; 186 | background-color: #6c63ff; 187 | } 188 | @keyframes Animate-Python { 189 | from { 190 | width: 10px; 191 | } 192 | to { 193 | width: 80%; 194 | } 195 | } 196 | @-webkit-keyframes Animate-Python { 197 | from { 198 | width: 10px; 199 | } 200 | to { 201 | width: 80%; 202 | } 203 | } 204 | @-moz-keyframes Animate-Python { 205 | from { 206 | width: 10px; 207 | } 208 | to { 209 | width: 80%; 210 | } 211 | } 212 | @-o-keyframes Animate-Python { 213 | from { 214 | width: 10px; 215 | } 216 | to { 217 | width: 80%; 218 | } 219 | } 220 | #Skill-JS { 221 | animation: Animate-JS 4s; 222 | -webkit-animation: Animate-JS 4s; 223 | -moz-animation: Animate-JS 4s; 224 | -o-animation: Animate-JS 4s; 225 | border-radius: 20px; 226 | width: 65%; 227 | height: 50px; 228 | position: absolute; 229 | background-color: #6c63ff; 230 | } 231 | @keyframes Animate-JS { 232 | from { 233 | width: 10px; 234 | } 235 | to { 236 | width: 65%; 237 | } 238 | } 239 | @-webkit-keyframes Animate-JS { 240 | from { 241 | width: 10px; 242 | } 243 | to { 244 | width: 65%; 245 | } 246 | } 247 | @-moz-keyframes Animate-JS { 248 | from { 249 | width: 10px; 250 | } 251 | to { 252 | width: 65%; 253 | } 254 | } 255 | @-o-keyframes Animate-JS { 256 | from { 257 | width: 10px; 258 | } 259 | to { 260 | width: 65%; 261 | } 262 | } 263 | 264 | #Skill-C { 265 | animation: Animate-C 4s; 266 | -webkit-animation: Animate-C 4s; 267 | -moz-animation: Animate-C 4s; 268 | -o-animation: Animate-C 4s; 269 | border-radius: 20px; 270 | width: 80%; 271 | height: 50px; 272 | position: absolute; 273 | background-color: #6c63ff; 274 | } 275 | @keyframes Animate-C { 276 | from { 277 | width: 10px; 278 | } 279 | to { 280 | width: 80%; 281 | } 282 | } 283 | @-webkit-keyframes Animate-C { 284 | from { 285 | width: 10px; 286 | } 287 | to { 288 | width: 80%; 289 | } 290 | } 291 | @-moz-keyframes Animate-C { 292 | from { 293 | width: 10px; 294 | } 295 | to { 296 | width: 80%; 297 | } 298 | } 299 | @-o-keyframes Animate-C { 300 | from { 301 | width: 10px; 302 | } 303 | to { 304 | width: 80%; 305 | } 306 | } 307 | #Skill-Cplus { 308 | animation: Animate-Cplus4s; 309 | -webkit-animation: Animate-Cplus 4s; 310 | -moz-animation: Animate-Cplus 4s; 311 | -o-animation: Animate-Cplus 4s; 312 | border-radius: 20px; 313 | width: 85%; 314 | height: 50px; 315 | position: absolute; 316 | background-color: #6c63ff; 317 | } 318 | @keyframes Animate-Cplus { 319 | from { 320 | width: 10px; 321 | } 322 | to { 323 | width: 85%; 324 | } 325 | } 326 | @-webkit-keyframes Animate-Cplus { 327 | from { 328 | width: 10px; 329 | } 330 | to { 331 | width: 85%; 332 | } 333 | } 334 | @-moz-keyframes Animate-Cplus { 335 | from { 336 | width: 10px; 337 | } 338 | to { 339 | width: 85%; 340 | } 341 | } 342 | @-o-keyframes Animate-Cplus { 343 | from { 344 | width: 10px; 345 | } 346 | to { 347 | width: 85%; 348 | } 349 | } 350 | #Skill-SQL { 351 | animation: Animate-SQL 4s; 352 | -webkit-animation: Animate-SQL 4s; 353 | -moz-animation: Animate-SQL 4s; 354 | -o-animation: Animate-SQL 4s; 355 | border-radius: 20px; 356 | width: 80%; 357 | height: 50px; 358 | position: absolute; 359 | background-color: #6c63ff; 360 | } 361 | @keyframes Animate-SQL { 362 | from { 363 | width: 10px; 364 | } 365 | to { 366 | width: 80%; 367 | } 368 | } 369 | @-webkit-keyframes Animate-SQL { 370 | from { 371 | width: 10px; 372 | } 373 | to { 374 | width: 80%; 375 | } 376 | } 377 | @-moz-keyframes Animate-SQL { 378 | from { 379 | width: 10px; 380 | } 381 | to { 382 | width: 80%; 383 | } 384 | } 385 | @-o-keyframes Animate-SQL { 386 | from { 387 | width: 10px; 388 | } 389 | to { 390 | width: 80%; 391 | } 392 | } 393 | .Skill-Area { 394 | z-index: 1; 395 | float: left; 396 | /* position: absolute; */ 397 | margin-top: 8px; 398 | margin-left: 15px; 399 | text-shadow: none; 400 | color: #fff; 401 | } 402 | 403 | @media only screen and (max-width: 950px) { 404 | body, 405 | html { 406 | text-align: center; 407 | font-size: 16px; 408 | line-height: normal; 409 | } 410 | } 411 | 412 | footer { 413 | padding-top: 2%; 414 | color: #868e96; 415 | text-align: center; 416 | } 417 | -------------------------------------------------------------------------------- /skill.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ajit's Portfolio 7 | 8 | 14 | 15 | 16 | 17 | 21 | 25 | 29 | 33 | 38 | 43 | 48 | 49 | 53 | 62 | 63 |
64 | 107 |
108 |
109 |
110 |
111 | 112 |
113 |
114 |
115 |
Proficiency
116 |
117 |
118 | 125 |
126 |
127 | 128 |
129 |
130 | 137 |
138 |
139 | 140 |
141 |
142 | 149 |
150 |
151 | 152 |
153 |
154 | 161 |
162 |
163 | 164 |
165 |
166 | 173 |
174 |
175 | 176 |
177 |
178 | 185 |
186 |
187 | 188 |
189 |
190 | 198 |
199 |
200 |
201 |
202 |
203 |
204 | 205 | 206 | 207 | 208 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Open Sans", sans-serif; 3 | margin: 0; 4 | } 5 | .body_section { 6 | padding: 3% 5% 1%; 7 | } 8 | 9 | p { 10 | font-size: 18px; 11 | } 12 | 13 | a { 14 | text-decoration: none; 15 | } 16 | 17 | @font-face { 18 | font-family: "Lovely Home"; 19 | src: local("Lovely Home"), url("Image/LovelyHome-9aBZ.ttf") format("truetype"); 20 | } 21 | 22 | .brand-name, 23 | .navbar-light .navbar-brand { 24 | /* font-family: "Brush Script MT"; */ 25 | /* margin-bottom: 3px; */ 26 | font-family: "Lovely Home"; 27 | font-size: 50px; 28 | font-weight: bold; 29 | color: #351458; 30 | } 31 | 32 | .headerachor { 33 | color: black; 34 | margin: 0 7px 0 7px; 35 | font-size: 25px; 36 | } 37 | 38 | .headerachor:hover { 39 | background-color: #f1f1f1; 40 | } 41 | 42 | /* Section 1 */ 43 | .column1 { 44 | background-image: linear-gradient(#fefcfe, #ffffff); 45 | padding: 8px 16px; 46 | } 47 | 48 | .section-1 { 49 | margin-top: 6%; 50 | text-align: left; 51 | position: relative; 52 | } 53 | span.wave { 54 | animation-name: wave-animation; 55 | animation-duration: 2.5s; 56 | animation-iteration-count: infinite; 57 | transform-origin: 70% 70%; 58 | display: inline-block; 59 | } 60 | 61 | @keyframes wave-animation { 62 | 0% { 63 | transform: rotate(0deg); 64 | } 65 | 10% { 66 | transform: rotate(-10deg); 67 | } 68 | 20% { 69 | transform: rotate(12deg); 70 | } 71 | 30% { 72 | transform: rotate(-10deg); 73 | } 74 | 40% { 75 | transform: rotate(9deg); 76 | } 77 | 50% { 78 | transform: rotate(0deg); 79 | } 80 | 100% { 81 | transform: rotate(0deg); 82 | } 83 | } 84 | 85 | .first-image { 86 | position: absolute; 87 | right: 0; 88 | } 89 | .boyimage { 90 | height: 400px; 91 | } 92 | 93 | @media only screen and (max-width: 1183px) { 94 | .first-image { 95 | right: 160px; 96 | } 97 | } 98 | .boy { 99 | width: 100%; 100 | height: 100%; 101 | animation: bounce 1.2s; 102 | animation-direction: alternate; 103 | animation-iteration-count: infinite; 104 | } 105 | 106 | @keyframes bounce { 107 | from { 108 | transform: translate3d(0, 0, 0); 109 | } 110 | to { 111 | transform: translate3d(0, 20px, 0); 112 | } 113 | } 114 | 115 | .Image-boy { 116 | text-align: center; 117 | align-items: center; 118 | } 119 | 120 | @media only screen and (min-width: 951px) { 121 | .Image-boy { 122 | display: none; 123 | } 124 | } 125 | .Hello { 126 | margin-bottom: 20px; 127 | } 128 | p { 129 | line-height: 2; 130 | color: #868e96; 131 | } 132 | 133 | .btn { 134 | display: inline-block; 135 | width: 4.37rem; 136 | height: 4.37rem; 137 | background: #e9e9e9; 138 | padding: 0px 0px; 139 | margin: 10px; 140 | border-radius: 30%; 141 | box-shadow: 0 5px 15px -5px #00000070; 142 | color: #3498db; 143 | overflow: hidden; 144 | position: relative; 145 | } 146 | 147 | .btn i { 148 | line-height: 70px; 149 | font-size: 1.625rem; 150 | transition: 0.2s linear; 151 | } 152 | 153 | .btn:hover i { 154 | transform: scale(1.3); 155 | color: #f1f1f1; 156 | } 157 | 158 | .btn::before { 159 | content: ""; 160 | position: absolute; 161 | width: 120%; 162 | height: 120%; 163 | background: #3498db; 164 | transform: rotate(45deg); 165 | left: -110%; 166 | top: 90%; 167 | } 168 | 169 | .btn:hover::before { 170 | animation: aaa 0.7s 1; 171 | top: -10%; 172 | left: -10%; 173 | } 174 | 175 | @media only screen and (max-width: 470px) { 176 | .btn { 177 | width: 2.5rem; 178 | height: 2.5rem; 179 | margin: 7px; 180 | } 181 | .btn i { 182 | line-height: 40px; 183 | font-size: 1em; 184 | } 185 | } 186 | 187 | #Whatido { 188 | text-align: center; 189 | padding-top: 7%; 190 | } 191 | 192 | /* Section 2 */ 193 | .feature-1 { 194 | padding-top: 5%; 195 | text-align: center; 196 | } 197 | .feature-2 { 198 | padding-top: 5%; 199 | text-align: center; 200 | } 201 | .feature-3 { 202 | padding-top: 5%; 203 | padding-bottom: 20px; 204 | text-align: center; 205 | } 206 | 207 | .Feature-Heading { 208 | font-family: "Montserrat"; 209 | font-weight: 300; 210 | } 211 | 212 | .Feature-first-image { 213 | padding: 0 2% 10%; 214 | } 215 | 216 | .Feature-second-image { 217 | padding: 5% 2% 0; 218 | } 219 | 220 | .Feature-svg-image { 221 | width: 100%; 222 | height: 100%; 223 | } 224 | .Feature-svg-image-3 { 225 | width: 84%; 226 | height: 84%; 227 | } 228 | 229 | .dev-icon { 230 | list-style: none; 231 | display: inline; 232 | padding: 0%; 233 | } 234 | 235 | .numpy { 236 | max-width: 100%; 237 | width: 30%; 238 | height: 30%; 239 | padding-bottom: 7%; 240 | } 241 | 242 | .pandas { 243 | max-width: 100%; 244 | max-height: 100%; 245 | width: 23%; 246 | height: 15%; 247 | padding-bottom: 7%; 248 | padding-left: 0; 249 | } 250 | 251 | li { 252 | display: inline; 253 | } 254 | 255 | .Data-Analytic { 256 | text-align: left; 257 | } 258 | 259 | .Features-paragraph { 260 | margin-top: 8px; 261 | margin-bottom: 8px; 262 | } 263 | 264 | @media only screen and (max-width: 764px) { 265 | .feature-2 { 266 | display: flex; 267 | flex-direction: column; 268 | } 269 | .feature-web { 270 | order: 2; 271 | } 272 | 273 | .brand-name, 274 | .navbar-light .navbar-brand { 275 | /* font-family: "Brush Script MT"; */ 276 | /* margin-bottom: 3px; */ 277 | font-family: "Lovely Home"; 278 | font-size: 40px; 279 | font-weight: bold; 280 | color: #351458; 281 | } 282 | } 283 | @media only screen and (max-width: 991px) and (min-width: 951px) { 284 | .section-1 { 285 | margin-top: auto; 286 | padding-right: 400px; 287 | } 288 | } 289 | @media only screen and (max-width: 950px) { 290 | body, 291 | html { 292 | text-align: center; 293 | font-size: 16px; 294 | line-height: normal; 295 | } 296 | .Hello { 297 | margin-bottom: 10px; 298 | } 299 | h1 { 300 | font-size: 25px; 301 | } 302 | p { 303 | font-size: 15px; 304 | line-height: normal; 305 | } 306 | .section-1 { 307 | text-align: center; 308 | } 309 | .first-image { 310 | display: none; 311 | } 312 | 313 | .pandas { 314 | width: 23%; 315 | height: 15%; 316 | } 317 | } 318 | 319 | footer { 320 | padding-top: 2%; 321 | color: #868e96; 322 | text-align: center; 323 | } 324 | -------------------------------------------------------------------------------- /toggle.css: -------------------------------------------------------------------------------- 1 | label { 2 | width: 80px; 3 | height: 40px; 4 | position: relative; 5 | display: block; 6 | background: #ebebeb; 7 | border-radius: 200px; 8 | box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4), 9 | inset 0px -5px 15px rgba(255, 255, 255, 0.4); 10 | cursor: pointer; 11 | transition: 0.3s; 12 | &:after { 13 | content: ""; 14 | width: 30px; 15 | height: 30px; 16 | position: absolute; 17 | top: 5px; 18 | left: 10px; 19 | background: linear-gradient(180deg, #ffcc89, #d8860b); 20 | border-radius: 180px; 21 | box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); 22 | transition: 0.3s; 23 | } 24 | svg { 25 | position: absolute; 26 | width: 20px; 27 | top: 10px; 28 | z-index: 100; 29 | &.sun { 30 | left: 15px; 31 | fill: #fff; 32 | transition: 0.3s; 33 | } 34 | &.moon { 35 | left: 50px; 36 | fill: #7e7e7e; 37 | transition: 0.3s; 38 | } 39 | } 40 | } 41 | 42 | input { 43 | width: 0; 44 | height: 0; 45 | visibility: hidden; 46 | &:checked + label { 47 | background: #242424; 48 | &:after { 49 | left: 74px; 50 | transform: translateX(-100%); 51 | background: linear-gradient(180deg, #777, #3a3a3a); 52 | } 53 | svg { 54 | &.sun { 55 | fill: #7e7e7e; 56 | } 57 | &.moon { 58 | fill: #fff; 59 | } 60 | } 61 | + .background { 62 | background: #242424; 63 | } 64 | } 65 | &:active:after { 66 | width: 80px; 67 | } 68 | } 69 | 70 | .background { 71 | transition: 0.3s; 72 | } 73 | -------------------------------------------------------------------------------- /toggle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 135 | --------------------------------------------------------------------------------