├── CNAME ├── .gitignore ├── images ├── home-icon.webp ├── mail-logo.webp ├── moon-icon.webp ├── php-logo.webp ├── profile.webp ├── sun-icon.webp ├── about-icon.webp ├── django-logo.webp ├── fiverr-logo.webp ├── python-logo.webp ├── react-logo.webp ├── upwork-logo.webp ├── contact-icon.webp ├── instagram-logo.webp ├── projects-icon.webp ├── telegram-logo.webp ├── twitter-logo.webp └── typescript-logo.webp ├── main.js ├── projects.js ├── index.html ├── main.scss └── main.css /CNAME: -------------------------------------------------------------------------------- 1 | slmn.sh -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache/ 2 | *.sass.map 3 | *.scss.map 4 | node_modules 5 | -------------------------------------------------------------------------------- /images/home-icon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slmnsh/slmnsh.github.io/master/images/home-icon.webp -------------------------------------------------------------------------------- /images/mail-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slmnsh/slmnsh.github.io/master/images/mail-logo.webp -------------------------------------------------------------------------------- /images/moon-icon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slmnsh/slmnsh.github.io/master/images/moon-icon.webp -------------------------------------------------------------------------------- /images/php-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slmnsh/slmnsh.github.io/master/images/php-logo.webp -------------------------------------------------------------------------------- /images/profile.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slmnsh/slmnsh.github.io/master/images/profile.webp -------------------------------------------------------------------------------- /images/sun-icon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slmnsh/slmnsh.github.io/master/images/sun-icon.webp -------------------------------------------------------------------------------- /images/about-icon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slmnsh/slmnsh.github.io/master/images/about-icon.webp -------------------------------------------------------------------------------- /images/django-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slmnsh/slmnsh.github.io/master/images/django-logo.webp -------------------------------------------------------------------------------- /images/fiverr-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slmnsh/slmnsh.github.io/master/images/fiverr-logo.webp -------------------------------------------------------------------------------- /images/python-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slmnsh/slmnsh.github.io/master/images/python-logo.webp -------------------------------------------------------------------------------- /images/react-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slmnsh/slmnsh.github.io/master/images/react-logo.webp -------------------------------------------------------------------------------- /images/upwork-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slmnsh/slmnsh.github.io/master/images/upwork-logo.webp -------------------------------------------------------------------------------- /images/contact-icon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slmnsh/slmnsh.github.io/master/images/contact-icon.webp -------------------------------------------------------------------------------- /images/instagram-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slmnsh/slmnsh.github.io/master/images/instagram-logo.webp -------------------------------------------------------------------------------- /images/projects-icon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slmnsh/slmnsh.github.io/master/images/projects-icon.webp -------------------------------------------------------------------------------- /images/telegram-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slmnsh/slmnsh.github.io/master/images/telegram-logo.webp -------------------------------------------------------------------------------- /images/twitter-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slmnsh/slmnsh.github.io/master/images/twitter-logo.webp -------------------------------------------------------------------------------- /images/typescript-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slmnsh/slmnsh.github.io/master/images/typescript-logo.webp -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | btn = document.querySelector("nav #button"); 2 | active = document.querySelector(".active"); 3 | links = document.querySelectorAll("nav a"); 4 | hours = new Date().getHours(); 5 | var timeout; 6 | function nightMode() { 7 | const darkMode = document.querySelector("body").classList.toggle("dark"); 8 | btn.children[0].src = `images/${darkMode ? "sun" : "moon"}-icon.webp`; 9 | return darkMode; 10 | } 11 | if (location.hash !== "") { 12 | active.style.top = 13 | document.querySelector(`a[href="${location.hash}"]`).offsetTop + "px"; 14 | setTimeout( 15 | () => document.querySelector(location.hash).scrollIntoView(), 16 | 100 17 | ); 18 | } 19 | links.forEach((link) => { 20 | link.addEventListener("click", function () { 21 | active.style.top = this.offsetTop + "px"; 22 | }); 23 | }); 24 | btn.addEventListener("click", () => { 25 | clearTimeout(timeout); 26 | localStorage.setItem("darkmode", nightMode()); 27 | }); 28 | if (localStorage.darkmode == "true") { 29 | nightMode(); 30 | } else { 31 | console.log(hours); 32 | if (hours >= 18 || hours <= 6) { 33 | btn.children[1].innerHTML = "Save your eyes"; 34 | } 35 | timeout = setTimeout(() => { 36 | btn.children[1].style.marginLeft = "10px"; 37 | setTimeout(() => { 38 | btn.children[1].style.opacity = 1; 39 | }, 500); 40 | setTimeout(() => { 41 | btn.children[1].style.opacity = 0; 42 | setTimeout(() => { 43 | btn.children[1].style = ""; 44 | }, 500); 45 | }, 5000); 46 | }, 5000); 47 | } 48 | -------------------------------------------------------------------------------- /projects.js: -------------------------------------------------------------------------------- 1 | const request = new XMLHttpRequest(); 2 | const projectList = document.querySelector(".project-list"); 3 | const template = document.querySelector("#project").innerHTML; 4 | request.open("GET", "https://api.github.com/users/slmnsh/starred"); 5 | request.responseType = "json"; 6 | request.send(); 7 | 8 | function fixCase(x) { 9 | x = x.replace(/[_-]/, " "); 10 | if (x.indexOf(" ") === -1) { 11 | return x; 12 | } 13 | x = x.toLowerCase().split(" "); 14 | for (let i = 0; i < x.length; i++) { 15 | x[i] = x[i][0].toUpperCase() + x[i].slice(1); 16 | } 17 | return x.join(" "); 18 | } 19 | request.onload = () => { 20 | var resp = request.response; 21 | resp.forEach((repo) => { 22 | if (repo.owner.login === "slmnsh") { 23 | var rendered = Mustache.render(template, { 24 | name: fixCase(repo.name), 25 | desc: repo.description, 26 | lang: repo.language, 27 | githubUrl: repo.html_url, 28 | url: repo.homepage, 29 | }); 30 | projectList.innerHTML += rendered; 31 | } 32 | }); 33 | linkBtn = document.querySelectorAll(".project .links .link"); 34 | ripple = document.createElement("div"); 35 | ripple.classList.add("ripple"); 36 | linkBtn.forEach((link) => { 37 | link.addEventListener("click", function (e) { 38 | ripple.style.left = e.layerX + "px"; 39 | ripple.style.top = e.layerY + "px"; 40 | e.target.appendChild(ripple); 41 | ripple.addEventListener("animationend", () => { 42 | ripple.remove(); 43 | }); 44 | }); 45 | }); 46 | }; 47 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 16 | Salman Shaikh's Portfolio 17 | 18 | 19 | 60 |
61 |
62 | Salman Shaikh 63 |

Hi, I'm Salman

64 |

And this is my site

65 |
66 |
67 |
68 |
69 | python 70 | django 71 | react 72 | typescript 76 |
77 |
78 |
79 |
80 |
81 |

21 yrs old dev from India

82 |

Passionate Python Developer

83 |

Who can scrape any damn thing

84 |

Freelancer, Web Developer

85 |
86 |
87 | 88 | fiverr 89 |
Fiverr
90 | 91 | 92 | upwork 93 |
Upwork
94 | 95 | 96 | instagram 97 |
Instagram
98 | 99 | 100 | twitter 101 |
Twitter
102 | 103 | 104 | email 105 |
Mail
106 | 107 | 108 | telegram 109 |
Telegram
110 | 111 |
112 |
113 | 114 | 115 | 116 | 141 | 142 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /main.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;700&display=swap"); 2 | 3 | * { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | font-family: "Mulish", sans-serif; 8 | transition: all 0.5s ease; 9 | color: var(--font-color); 10 | } 11 | 12 | a { 13 | text-decoration: none; 14 | } 15 | 16 | html, 17 | body { 18 | --bg-color: whitesmoke; 19 | --font-color: black; 20 | --border-color: lightgray; 21 | height: 100%; 22 | overflow: hidden; 23 | width: 100%; 24 | display: flex; 25 | background-color: var(--bg-color); 26 | scroll-behavior: smooth; 27 | scroll-snap-type: y mandatory; 28 | } 29 | 30 | body.dark { 31 | --bg-color: black !important; 32 | --font-color: whitesmoke !important; 33 | --border-color: darkslategray !important; 34 | #contact, 35 | nav { 36 | img { 37 | filter: invert(1); 38 | } 39 | } 40 | } 41 | 42 | .links span { 43 | padding-left: 10px; 44 | } 45 | 46 | nav { 47 | height: 100%; 48 | width: 15%; 49 | display: flex; 50 | flex-direction: column; 51 | align-items: stretch; 52 | justify-content: center; 53 | position: fixed; 54 | #button { 55 | display: flex; 56 | justify-content: center; 57 | align-items: center; 58 | position: fixed; 59 | height: 50px; 60 | width: max-content; 61 | font-size: 22px; 62 | top: 2%; 63 | left: 2%; 64 | border: 1px solid var(--border-color); 65 | border-radius: 50px; 66 | padding: 10px; 67 | user-select: none; 68 | img { 69 | margin-left: 2px; 70 | height: 25px; 71 | width: 25px; 72 | } 73 | div { 74 | text-align: right; 75 | font-size: medium; 76 | opacity: 0; 77 | transition: opacity 0.5s ease-in-out margin-left 0.5s ease-in-out; 78 | margin-left: -110px; 79 | word-wrap: normal; 80 | } 81 | &:hover { 82 | box-shadow: 5px 5px 5px var(--border-color); 83 | } 84 | } 85 | .links { 86 | position: relative; 87 | div { 88 | padding: 20px; 89 | position: absolute; 90 | top: 0; 91 | left: 0; 92 | right: 0; 93 | border: 1px solid var(--border-color); 94 | box-shadow: 5px 5px 5px var(--border-color); 95 | } 96 | a { 97 | display: flex; 98 | border: 1px solid transparent; 99 | justify-content: center; 100 | padding: 20px; 101 | cursor: pointer; 102 | } 103 | } 104 | } 105 | 106 | #screens { 107 | display: block; 108 | height: 100%; 109 | padding-left: 15%; 110 | flex: 1; 111 | flex-direction: column; 112 | align-items: stretch; 113 | & > div { 114 | display: flex; 115 | scroll-snap-align: center; 116 | flex-direction: column; 117 | height: 100%; 118 | align-items: flex-end; 119 | justify-content: center; 120 | padding-right: 50px; 121 | &#home { 122 | img { 123 | height: 150px; 124 | margin-bottom: 20px; 125 | border-radius: 50%; 126 | } 127 | } 128 | &#projects { 129 | flex-direction: row; 130 | justify-content: space-around; 131 | align-items: center; 132 | .lang-logos { 133 | display: flex; 134 | img { 135 | margin: 25px; 136 | } 137 | } 138 | .project-list { 139 | display: flex; 140 | flex-wrap: wrap; 141 | flex-direction: column; 142 | width: 25%; 143 | overflow-y: hidden; 144 | scroll-snap-type: x mandatory; 145 | height: 500px; 146 | scrollbar-width: thin; 147 | scrollbar-color: var(--border-color) transparent; 148 | &::-webkit-scrollbar { 149 | height: 5px; 150 | background-color: transparent; 151 | } 152 | &::-webkit-scrollbar-thumb { 153 | border-radius: 10px; 154 | background-color: var(--border-color); 155 | } 156 | } 157 | .project { 158 | display: flex; 159 | flex-direction: column; 160 | scroll-snap-align: center; 161 | justify-content: space-between; 162 | flex: 1; 163 | min-width: 95%; 164 | height: 45%; 165 | max-height: 45%; 166 | border: 1px solid var(--border-color); 167 | margin: 10px 20px 10px 5px; 168 | padding: 10px; 169 | border-radius: 5px; 170 | div { 171 | margin: 5px; 172 | } 173 | .details { 174 | flex: 1; 175 | } 176 | .title { 177 | font-weight: bolder; 178 | } 179 | .links { 180 | display: flex; 181 | margin: 30px auto 20px; 182 | } 183 | .link { 184 | border: 1px solid var(--border-color); 185 | position: relative; 186 | border-radius: 5px; 187 | margin: 0 5px; 188 | overflow: hidden; 189 | cursor: pointer; 190 | user-select: none; 191 | a { 192 | display: block; 193 | padding: 10px; 194 | } 195 | .ripple { 196 | position: absolute; 197 | background-color: var(--border-color); 198 | opacity: 0.5; 199 | height: 250px; 200 | width: 250px; 201 | border-radius: 50%; 202 | pointer-events: none; 203 | border: 1px solid var(--border-color); 204 | animation: ripple 1.5s; 205 | transform: translate(-50%, -50%); 206 | } 207 | } 208 | } 209 | } 210 | &#contact { 211 | flex-direction: row; 212 | align-items: center; 213 | justify-content: center; 214 | a { 215 | display: flex; 216 | flex-direction: column; 217 | align-items: center; 218 | margin: 10px; 219 | padding: 10px; 220 | border: 1px solid transparent; 221 | border-radius: 5px; 222 | img { 223 | height: 75px; 224 | width: 75px; 225 | } 226 | &:hover { 227 | border-color: var(--border-color); 228 | box-shadow: 5px 5px 5px var(--border-color); 229 | } 230 | } 231 | } 232 | } 233 | } 234 | @keyframes ripple { 235 | 0% { 236 | height: 0; 237 | width: 0; 238 | opacity: 1; 239 | } 240 | 80% { 241 | height: 250px; 242 | width: 250px; 243 | } 244 | 100% { 245 | opacity: 0; 246 | } 247 | } 248 | 249 | @media (max-width: 768px) { 250 | * { 251 | font-size: 15px; 252 | } 253 | nav { 254 | width: 20%; 255 | #button { 256 | transform: scale(0.75); 257 | left: 3%; 258 | div { 259 | margin-left: -124px; 260 | font-size: large; 261 | } 262 | } 263 | span { 264 | display: none; 265 | } 266 | } 267 | #screens { 268 | padding-left: 20%; 269 | & > div { 270 | padding-right: 5% !important; 271 | align-items: flex-end; 272 | &#home { 273 | img { 274 | height: 10%; 275 | } 276 | } 277 | } 278 | } 279 | #projects { 280 | flex-direction: column !important; 281 | justify-content: space-evenly !important; 282 | .lang-logos { 283 | width: 250px; 284 | overflow: hidden; 285 | .img { 286 | height: 75px; 287 | position: relative; 288 | left: 0; 289 | display: flex; 290 | flex-direction: row !important; 291 | animation: slider 7s ease-in-out infinite; 292 | img { 293 | height: 100%; 294 | margin: 0 90px !important; 295 | } 296 | } 297 | } 298 | .project-list { 299 | width: 90% !important; 300 | height: 300px; 301 | } 302 | .project { 303 | margin-right: 0; 304 | } 305 | } 306 | @keyframes slider { 307 | 10%, 308 | 20%, 309 | 100% { 310 | left: 0%; 311 | } 312 | 25%, 313 | 45% { 314 | left: -131%; 315 | } 316 | 50%, 317 | 70% { 318 | left: -261%; 319 | } 320 | 75%, 321 | 95% { 322 | left: -362.5%; 323 | } 324 | } 325 | #contact { 326 | flex-direction: column !important; 327 | img { 328 | height: 50px !important; 329 | width: 50px !important; 330 | } 331 | } 332 | } 333 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;700&display=swap"); 2 | * { 3 | padding: 0; 4 | margin: 0; 5 | -webkit-box-sizing: border-box; 6 | box-sizing: border-box; 7 | font-family: "Mulish", sans-serif; 8 | -webkit-transition: all 0.5s ease; 9 | transition: all 0.5s ease; 10 | color: var(--font-color); 11 | } 12 | 13 | a { 14 | text-decoration: none; 15 | } 16 | 17 | html, 18 | body { 19 | --bg-color: whitesmoke; 20 | --font-color: black; 21 | --border-color: lightgray; 22 | height: 100%; 23 | overflow: hidden; 24 | width: 100%; 25 | display: -webkit-box; 26 | display: -ms-flexbox; 27 | display: flex; 28 | background-color: var(--bg-color); 29 | scroll-behavior: smooth; 30 | -ms-scroll-snap-type: y mandatory; 31 | scroll-snap-type: y mandatory; 32 | } 33 | 34 | body.dark { 35 | --bg-color: black !important; 36 | --font-color: whitesmoke !important; 37 | --border-color: darkslategray !important; 38 | } 39 | 40 | body.dark #contact img, 41 | body.dark nav img { 42 | -webkit-filter: invert(1); 43 | filter: invert(1); 44 | } 45 | 46 | .links span { 47 | padding-left: 10px; 48 | } 49 | 50 | nav { 51 | height: 100%; 52 | width: 15%; 53 | display: -webkit-box; 54 | display: -ms-flexbox; 55 | display: flex; 56 | -webkit-box-orient: vertical; 57 | -webkit-box-direction: normal; 58 | -ms-flex-direction: column; 59 | flex-direction: column; 60 | -webkit-box-align: stretch; 61 | -ms-flex-align: stretch; 62 | align-items: stretch; 63 | -webkit-box-pack: center; 64 | -ms-flex-pack: center; 65 | justify-content: center; 66 | position: fixed; 67 | } 68 | 69 | nav #button { 70 | display: -webkit-box; 71 | display: -ms-flexbox; 72 | display: flex; 73 | -webkit-box-pack: center; 74 | -ms-flex-pack: center; 75 | justify-content: center; 76 | -webkit-box-align: center; 77 | -ms-flex-align: center; 78 | align-items: center; 79 | position: fixed; 80 | height: 50px; 81 | width: -webkit-max-content; 82 | width: -moz-max-content; 83 | width: max-content; 84 | font-size: 22px; 85 | top: 2%; 86 | left: 2%; 87 | border: 1px solid var(--border-color); 88 | border-radius: 50px; 89 | padding: 10px; 90 | -webkit-user-select: none; 91 | -moz-user-select: none; 92 | -ms-user-select: none; 93 | user-select: none; 94 | } 95 | 96 | nav #button img { 97 | margin-left: 2px; 98 | height: 25px; 99 | width: 25px; 100 | } 101 | 102 | nav #button div { 103 | text-align: right; 104 | font-size: medium; 105 | opacity: 0; 106 | -webkit-transition: opacity 0.5s ease-in-out margin-left 0.5s ease-in-out; 107 | transition: opacity 0.5s ease-in-out margin-left 0.5s ease-in-out; 108 | margin-left: -110px; 109 | word-wrap: normal; 110 | } 111 | 112 | nav #button:hover { 113 | -webkit-box-shadow: 5px 5px 5px var(--border-color); 114 | box-shadow: 5px 5px 5px var(--border-color); 115 | } 116 | 117 | nav .links { 118 | position: relative; 119 | } 120 | 121 | nav .links div { 122 | padding: 20px; 123 | position: absolute; 124 | top: 0; 125 | left: 0; 126 | right: 0; 127 | border: 1px solid var(--border-color); 128 | -webkit-box-shadow: 5px 5px 5px var(--border-color); 129 | box-shadow: 5px 5px 5px var(--border-color); 130 | } 131 | 132 | nav .links a { 133 | display: -webkit-box; 134 | display: -ms-flexbox; 135 | display: flex; 136 | border: 1px solid transparent; 137 | -webkit-box-pack: center; 138 | -ms-flex-pack: center; 139 | justify-content: center; 140 | padding: 20px; 141 | cursor: pointer; 142 | } 143 | 144 | #screens { 145 | display: block; 146 | height: 100%; 147 | padding-left: 15%; 148 | -webkit-box-flex: 1; 149 | -ms-flex: 1; 150 | flex: 1; 151 | -webkit-box-orient: vertical; 152 | -webkit-box-direction: normal; 153 | -ms-flex-direction: column; 154 | flex-direction: column; 155 | -webkit-box-align: stretch; 156 | -ms-flex-align: stretch; 157 | align-items: stretch; 158 | } 159 | 160 | #screens > div { 161 | display: -webkit-box; 162 | display: -ms-flexbox; 163 | display: flex; 164 | scroll-snap-align: center; 165 | -webkit-box-orient: vertical; 166 | -webkit-box-direction: normal; 167 | -ms-flex-direction: column; 168 | flex-direction: column; 169 | height: 100%; 170 | -webkit-box-align: end; 171 | -ms-flex-align: end; 172 | align-items: flex-end; 173 | -webkit-box-pack: center; 174 | -ms-flex-pack: center; 175 | justify-content: center; 176 | padding-right: 50px; 177 | } 178 | 179 | #screens > div#home img { 180 | height: 150px; 181 | margin-bottom: 20px; 182 | border-radius: 50%; 183 | } 184 | 185 | #screens > div#projects { 186 | -webkit-box-orient: horizontal; 187 | -webkit-box-direction: normal; 188 | -ms-flex-direction: row; 189 | flex-direction: row; 190 | -ms-flex-pack: distribute; 191 | justify-content: space-around; 192 | -webkit-box-align: center; 193 | -ms-flex-align: center; 194 | align-items: center; 195 | } 196 | 197 | #screens > div#projects .lang-logos { 198 | display: -webkit-box; 199 | display: -ms-flexbox; 200 | display: flex; 201 | } 202 | 203 | #screens > div#projects .lang-logos img { 204 | margin: 25px; 205 | } 206 | 207 | #screens > div#projects .project-list { 208 | display: -webkit-box; 209 | display: -ms-flexbox; 210 | display: flex; 211 | -ms-flex-wrap: wrap; 212 | flex-wrap: wrap; 213 | -webkit-box-orient: vertical; 214 | -webkit-box-direction: normal; 215 | -ms-flex-direction: column; 216 | flex-direction: column; 217 | width: 25%; 218 | overflow-y: hidden; 219 | -ms-scroll-snap-type: x mandatory; 220 | scroll-snap-type: x mandatory; 221 | height: 500px; 222 | scrollbar-width: thin; 223 | scrollbar-color: var(--border-color) transparent; 224 | } 225 | 226 | #screens > div#projects .project-list::-webkit-scrollbar { 227 | height: 5px; 228 | background-color: transparent; 229 | } 230 | 231 | #screens > div#projects .project-list::-webkit-scrollbar-thumb { 232 | border-radius: 10px; 233 | background-color: var(--border-color); 234 | } 235 | 236 | #screens > div#projects .project { 237 | display: -webkit-box; 238 | display: -ms-flexbox; 239 | display: flex; 240 | -webkit-box-orient: vertical; 241 | -webkit-box-direction: normal; 242 | -ms-flex-direction: column; 243 | flex-direction: column; 244 | scroll-snap-align: center; 245 | -webkit-box-pack: justify; 246 | -ms-flex-pack: justify; 247 | justify-content: space-between; 248 | -webkit-box-flex: 1; 249 | -ms-flex: 1; 250 | flex: 1; 251 | min-width: 95%; 252 | height: 45%; 253 | max-height: 45%; 254 | border: 1px solid var(--border-color); 255 | margin: 10px 20px 10px 5px; 256 | padding: 10px; 257 | border-radius: 5px; 258 | } 259 | 260 | #screens > div#projects .project div { 261 | margin: 5px; 262 | } 263 | 264 | #screens > div#projects .project .details { 265 | -webkit-box-flex: 1; 266 | -ms-flex: 1; 267 | flex: 1; 268 | } 269 | 270 | #screens > div#projects .project .title { 271 | font-weight: bolder; 272 | } 273 | 274 | #screens > div#projects .project .links { 275 | display: -webkit-box; 276 | display: -ms-flexbox; 277 | display: flex; 278 | margin: 30px auto 20px; 279 | } 280 | 281 | #screens > div#projects .project .link { 282 | border: 1px solid var(--border-color); 283 | position: relative; 284 | border-radius: 5px; 285 | margin: 0 5px; 286 | overflow: hidden; 287 | cursor: pointer; 288 | -webkit-user-select: none; 289 | -moz-user-select: none; 290 | -ms-user-select: none; 291 | user-select: none; 292 | } 293 | 294 | #screens > div#projects .project .link a { 295 | display: block; 296 | padding: 10px; 297 | } 298 | 299 | #screens > div#projects .project .link .ripple { 300 | position: absolute; 301 | background-color: var(--border-color); 302 | opacity: 0.5; 303 | height: 250px; 304 | width: 250px; 305 | border-radius: 50%; 306 | pointer-events: none; 307 | border: 1px solid var(--border-color); 308 | -webkit-animation: ripple 1.5s; 309 | animation: ripple 1.5s; 310 | -webkit-transform: translate(-50%, -50%); 311 | transform: translate(-50%, -50%); 312 | } 313 | 314 | #screens > div#contact { 315 | -webkit-box-orient: horizontal; 316 | -webkit-box-direction: normal; 317 | -ms-flex-direction: row; 318 | flex-direction: row; 319 | -webkit-box-align: center; 320 | -ms-flex-align: center; 321 | align-items: center; 322 | -webkit-box-pack: center; 323 | -ms-flex-pack: center; 324 | justify-content: center; 325 | } 326 | 327 | #screens > div#contact a { 328 | display: -webkit-box; 329 | display: -ms-flexbox; 330 | display: flex; 331 | -webkit-box-orient: vertical; 332 | -webkit-box-direction: normal; 333 | -ms-flex-direction: column; 334 | flex-direction: column; 335 | -webkit-box-align: center; 336 | -ms-flex-align: center; 337 | align-items: center; 338 | margin: 10px; 339 | padding: 10px; 340 | border: 1px solid transparent; 341 | border-radius: 5px; 342 | } 343 | 344 | #screens > div#contact a img { 345 | height: 75px; 346 | width: 75px; 347 | } 348 | 349 | #screens > div#contact a:hover { 350 | border-color: var(--border-color); 351 | -webkit-box-shadow: 5px 5px 5px var(--border-color); 352 | box-shadow: 5px 5px 5px var(--border-color); 353 | } 354 | 355 | @-webkit-keyframes ripple { 356 | 0% { 357 | height: 0; 358 | width: 0; 359 | opacity: 1; 360 | } 361 | 80% { 362 | height: 250px; 363 | width: 250px; 364 | } 365 | 100% { 366 | opacity: 0; 367 | } 368 | } 369 | 370 | @keyframes ripple { 371 | 0% { 372 | height: 0; 373 | width: 0; 374 | opacity: 1; 375 | } 376 | 80% { 377 | height: 250px; 378 | width: 250px; 379 | } 380 | 100% { 381 | opacity: 0; 382 | } 383 | } 384 | 385 | @media (max-width: 768px) { 386 | * { 387 | font-size: 15px; 388 | } 389 | nav { 390 | width: 20%; 391 | } 392 | nav #button { 393 | -webkit-transform: scale(0.75); 394 | transform: scale(0.75); 395 | left: 3%; 396 | } 397 | nav #button div { 398 | margin-left: -124px; 399 | font-size: large; 400 | } 401 | nav span { 402 | display: none; 403 | } 404 | #screens { 405 | padding-left: 20%; 406 | } 407 | #screens > div { 408 | padding-right: 5% !important; 409 | -webkit-box-align: end; 410 | -ms-flex-align: end; 411 | align-items: flex-end; 412 | } 413 | #screens > div#home img { 414 | height: 10%; 415 | } 416 | #projects { 417 | -webkit-box-orient: vertical !important; 418 | -webkit-box-direction: normal !important; 419 | -ms-flex-direction: column !important; 420 | flex-direction: column !important; 421 | -webkit-box-pack: space-evenly !important; 422 | -ms-flex-pack: space-evenly !important; 423 | justify-content: space-evenly !important; 424 | } 425 | #projects .lang-logos { 426 | width: 250px; 427 | overflow: hidden; 428 | } 429 | #projects .lang-logos .img { 430 | height: 75px; 431 | position: relative; 432 | left: 0; 433 | display: -webkit-box; 434 | display: -ms-flexbox; 435 | display: flex; 436 | -webkit-box-orient: horizontal !important; 437 | -webkit-box-direction: normal !important; 438 | -ms-flex-direction: row !important; 439 | flex-direction: row !important; 440 | -webkit-animation: slider 7s ease-in-out infinite; 441 | animation: slider 7s ease-in-out infinite; 442 | } 443 | #projects .lang-logos .img img { 444 | height: 100%; 445 | margin: 0 90px !important; 446 | } 447 | #projects .project-list { 448 | width: 90% !important; 449 | height: 300px; 450 | } 451 | #projects .project { 452 | margin-right: 0; 453 | } 454 | @-webkit-keyframes slider { 455 | 10%, 456 | 20%, 457 | 100% { 458 | left: 0%; 459 | } 460 | 25%, 461 | 45% { 462 | left: -131%; 463 | } 464 | 50%, 465 | 70% { 466 | left: -261%; 467 | } 468 | 75%, 469 | 95% { 470 | left: -362.5%; 471 | } 472 | } 473 | @keyframes slider { 474 | 10%, 475 | 20%, 476 | 100% { 477 | left: 0%; 478 | } 479 | 25%, 480 | 45% { 481 | left: -131%; 482 | } 483 | 50%, 484 | 70% { 485 | left: -261%; 486 | } 487 | 75%, 488 | 95% { 489 | left: -362.5%; 490 | } 491 | } 492 | #contact { 493 | -webkit-box-orient: vertical !important; 494 | -webkit-box-direction: normal !important; 495 | -ms-flex-direction: column !important; 496 | flex-direction: column !important; 497 | } 498 | #contact img { 499 | height: 50px !important; 500 | width: 50px !important; 501 | } 502 | } 503 | --------------------------------------------------------------------------------