├── CNAME ├── img ├── og-img.png ├── preview.png ├── profile.jpg ├── telegram-bot.jpg ├── favicon │ ├── favicon.ico │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── apple-touch-icon.png │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── site.webmanifest │ └── about.txt ├── decentralized-voting.png ├── virtual-voice-assistant.png ├── css.svg ├── x.svg ├── link.svg ├── html.svg ├── expressjs.svg ├── mongodb.svg ├── javascript.svg ├── github.svg ├── java.svg ├── gmail.svg ├── nodejs.svg ├── python.svg ├── linkedin.svg ├── git.svg ├── mysql.svg └── flask.svg ├── fonts ├── satoshi │ ├── Satoshi-Black.ttf │ ├── Satoshi-Bold.ttf │ ├── Satoshi-Bold.woff │ ├── Satoshi-Light.ttf │ ├── Satoshi-Black.woff │ ├── Satoshi-Black.woff2 │ ├── Satoshi-Bold.woff2 │ ├── Satoshi-Light.woff │ ├── Satoshi-Light.woff2 │ ├── Satoshi-Medium.ttf │ ├── Satoshi-Medium.woff │ ├── Satoshi-Regular.ttf │ ├── Satoshi-Medium.woff2 │ ├── Satoshi-Regular.woff │ ├── Satoshi-Regular.woff2 │ ├── Satoshi-Variable.ttf │ ├── Satoshi-Variable.woff │ └── Satoshi-Variable.woff2 ├── general-sans │ ├── GeneralSans-Bold.ttf │ ├── GeneralSans-Bold.woff │ ├── GeneralSans-Bold.woff2 │ ├── GeneralSans-Semibold.ttf │ ├── GeneralSans-Semibold.woff │ └── GeneralSans-Semibold.woff2 └── okine │ ├── madeokinesanspersonaluse-black-webfont.woff │ ├── madeokinesanspersonaluse-black-webfont.woff2 │ ├── madeokinesanspersonaluse-bold-webfont.woff │ ├── madeokinesanspersonaluse-bold-webfont.woff2 │ ├── madeokinesanspersonaluse-light-webfont.woff │ ├── madeokinesanspersonaluse-light-webfont.woff2 │ ├── madeokinesanspersonaluse-medium-webfont.woff │ ├── madeokinesanspersonaluse-medium-webfont.woff2 │ ├── madeokinesanspersonaluse-regular-webfont.woff │ └── madeokinesanspersonaluse-regular-webfont.woff2 ├── js └── main.js ├── README.md ├── css ├── font-root-styles │ ├── general-sans.css │ ├── okinesans.css │ └── satoshi.css ├── reset.css ├── normalize.css └── style.css ├── LICENSE └── index.html /CNAME: -------------------------------------------------------------------------------- 1 | krish-depani.vercel.app -------------------------------------------------------------------------------- /img/og-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/img/og-img.png -------------------------------------------------------------------------------- /img/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/img/preview.png -------------------------------------------------------------------------------- /img/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/img/profile.jpg -------------------------------------------------------------------------------- /img/telegram-bot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/img/telegram-bot.jpg -------------------------------------------------------------------------------- /img/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/img/favicon/favicon.ico -------------------------------------------------------------------------------- /img/decentralized-voting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/img/decentralized-voting.png -------------------------------------------------------------------------------- /fonts/satoshi/Satoshi-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/satoshi/Satoshi-Black.ttf -------------------------------------------------------------------------------- /fonts/satoshi/Satoshi-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/satoshi/Satoshi-Bold.ttf -------------------------------------------------------------------------------- /fonts/satoshi/Satoshi-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/satoshi/Satoshi-Bold.woff -------------------------------------------------------------------------------- /fonts/satoshi/Satoshi-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/satoshi/Satoshi-Light.ttf -------------------------------------------------------------------------------- /img/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/img/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /img/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/img/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /img/virtual-voice-assistant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/img/virtual-voice-assistant.png -------------------------------------------------------------------------------- /fonts/satoshi/Satoshi-Black.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/satoshi/Satoshi-Black.woff -------------------------------------------------------------------------------- /fonts/satoshi/Satoshi-Black.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/satoshi/Satoshi-Black.woff2 -------------------------------------------------------------------------------- /fonts/satoshi/Satoshi-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/satoshi/Satoshi-Bold.woff2 -------------------------------------------------------------------------------- /fonts/satoshi/Satoshi-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/satoshi/Satoshi-Light.woff -------------------------------------------------------------------------------- /fonts/satoshi/Satoshi-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/satoshi/Satoshi-Light.woff2 -------------------------------------------------------------------------------- /fonts/satoshi/Satoshi-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/satoshi/Satoshi-Medium.ttf -------------------------------------------------------------------------------- /fonts/satoshi/Satoshi-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/satoshi/Satoshi-Medium.woff -------------------------------------------------------------------------------- /fonts/satoshi/Satoshi-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/satoshi/Satoshi-Regular.ttf -------------------------------------------------------------------------------- /img/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/img/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /fonts/satoshi/Satoshi-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/satoshi/Satoshi-Medium.woff2 -------------------------------------------------------------------------------- /fonts/satoshi/Satoshi-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/satoshi/Satoshi-Regular.woff -------------------------------------------------------------------------------- /fonts/satoshi/Satoshi-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/satoshi/Satoshi-Regular.woff2 -------------------------------------------------------------------------------- /fonts/satoshi/Satoshi-Variable.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/satoshi/Satoshi-Variable.ttf -------------------------------------------------------------------------------- /fonts/satoshi/Satoshi-Variable.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/satoshi/Satoshi-Variable.woff -------------------------------------------------------------------------------- /fonts/satoshi/Satoshi-Variable.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/satoshi/Satoshi-Variable.woff2 -------------------------------------------------------------------------------- /img/favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/img/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /img/favicon/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/img/favicon/android-chrome-512x512.png -------------------------------------------------------------------------------- /fonts/general-sans/GeneralSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/general-sans/GeneralSans-Bold.ttf -------------------------------------------------------------------------------- /fonts/general-sans/GeneralSans-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/general-sans/GeneralSans-Bold.woff -------------------------------------------------------------------------------- /fonts/general-sans/GeneralSans-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/general-sans/GeneralSans-Bold.woff2 -------------------------------------------------------------------------------- /fonts/general-sans/GeneralSans-Semibold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/general-sans/GeneralSans-Semibold.ttf -------------------------------------------------------------------------------- /fonts/general-sans/GeneralSans-Semibold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/general-sans/GeneralSans-Semibold.woff -------------------------------------------------------------------------------- /fonts/general-sans/GeneralSans-Semibold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/general-sans/GeneralSans-Semibold.woff2 -------------------------------------------------------------------------------- /fonts/okine/madeokinesanspersonaluse-black-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/okine/madeokinesanspersonaluse-black-webfont.woff -------------------------------------------------------------------------------- /fonts/okine/madeokinesanspersonaluse-black-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/okine/madeokinesanspersonaluse-black-webfont.woff2 -------------------------------------------------------------------------------- /fonts/okine/madeokinesanspersonaluse-bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/okine/madeokinesanspersonaluse-bold-webfont.woff -------------------------------------------------------------------------------- /fonts/okine/madeokinesanspersonaluse-bold-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/okine/madeokinesanspersonaluse-bold-webfont.woff2 -------------------------------------------------------------------------------- /fonts/okine/madeokinesanspersonaluse-light-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/okine/madeokinesanspersonaluse-light-webfont.woff -------------------------------------------------------------------------------- /fonts/okine/madeokinesanspersonaluse-light-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/okine/madeokinesanspersonaluse-light-webfont.woff2 -------------------------------------------------------------------------------- /fonts/okine/madeokinesanspersonaluse-medium-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/okine/madeokinesanspersonaluse-medium-webfont.woff -------------------------------------------------------------------------------- /fonts/okine/madeokinesanspersonaluse-medium-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/okine/madeokinesanspersonaluse-medium-webfont.woff2 -------------------------------------------------------------------------------- /fonts/okine/madeokinesanspersonaluse-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/okine/madeokinesanspersonaluse-regular-webfont.woff -------------------------------------------------------------------------------- /fonts/okine/madeokinesanspersonaluse-regular-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krish-Depani/Portfolio-Website/HEAD/fonts/okine/madeokinesanspersonaluse-regular-webfont.woff2 -------------------------------------------------------------------------------- /img/favicon/site.webmanifest: -------------------------------------------------------------------------------- 1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} -------------------------------------------------------------------------------- /img/favicon/about.txt: -------------------------------------------------------------------------------- 1 | This favicon was generated using the following font: 2 | 3 | - Font Title: Balsamiq Sans 4 | - Font Author: Copyright 2011 The Balsamiq Sans Project Authors (https://github.com/balsamiq/balsamiqsans) 5 | - Font Source: http://fonts.gstatic.com/s/balsamiqsans/v14/P5sEzZiAbNrN8SB3lQQX7Pnc8dkdIYdNHzs.ttf 6 | - Font License: SIL Open Font License, 1.1 (http://scripts.sil.org/OFL)) 7 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | const menuBtn = document.querySelector('.hamburger'); 2 | const menuBar = document.querySelector('.menu-bar'); 3 | const menuList = document.querySelector('.nav-menu'); 4 | 5 | menuBtn.addEventListener('click', showMenu); 6 | 7 | function showMenu(){ 8 | menuBtn.classList.toggle('is-active'); 9 | menuBar.classList.toggle('is-active'); 10 | menuList.classList.toggle('is-active'); 11 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Portfolio-Website 2 | 3 | ## Table of contents 4 | * [General info](#general-info) 5 | * [Technologies](#technologies) 6 | * [Setup](#setup) 7 | 8 | ## General info 9 | This is a portfolio website that contains my personal information, my projects, my skills, and my contact information. It is a website that is built using HTML, CSS, and JavaScript. It is a responsive website that can be viewed on different devices such as mobile phones, tablets, and desktops. 10 | 11 | ## Technologies 12 | Project is created with: 13 | * HTML 14 | * CSS 15 | * JavaScript 16 | 17 | ## View the website 18 | To view the website, click on the link below: 19 | 20 | https://krish-depani.vercel.app/ 21 | 22 | ## If you like this project, please give it a 🌟. 23 | ## Thank you 😊. 24 | -------------------------------------------------------------------------------- /img/css.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/x.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/link.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/html.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/font-root-styles/general-sans.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * 4 | * Font Family: General Sans 5 | * Designed by: Frode Helland 6 | * URL: https://www.fontshare.com/fonts/general-sans 7 | * © 2022 Indian Type Foundryneral Sans Bold Italic 8 | * 9 | */ 10 | 11 | @font-face { 12 | font-family: 'GeneralSans 600'; 13 | src: url('../../fonts/general-sans/GeneralSans-Semibold.woff2') format('woff2'), 14 | url('../../fonts/general-sans/GeneralSans-Semibold.woff') format('woff'), 15 | url('../../fonts/general-sans/GeneralSans-Semibold.ttf') format('truetype'); 16 | font-weight: 600; 17 | font-display: swap; 18 | font-style: normal; 19 | } 20 | 21 | 22 | @font-face { 23 | font-family: 'GeneralSans 700'; 24 | src: url('../../fonts/general-sans/GeneralSans-Bold.woff2') format('woff2'), 25 | url('../../fonts/general-sans/GeneralSans-Bold.woff') format('woff'), 26 | url('../../fonts/general-sans/GeneralSans-Bold.ttf') format('truetype'); 27 | font-weight: 700; 28 | font-display: swap; 29 | font-style: normal; 30 | } -------------------------------------------------------------------------------- /img/expressjs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Krish Depani 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 | -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | html, body, div, span, applet, object, iframe, 6 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 7 | a, abbr, acronym, address, big, cite, code, 8 | del, dfn, em, img, ins, kbd, q, s, samp, 9 | small, strike, strong, sub, sup, tt, var, 10 | b, u, i, center, 11 | dl, dt, dd, ol, ul, li, 12 | fieldset, form, label, legend, 13 | table, caption, tbody, tfoot, thead, tr, th, td, 14 | article, aside, canvas, details, embed, 15 | figure, figcaption, footer, header, hgroup, 16 | menu, nav, output, ruby, section, summary, 17 | time, mark, audio, video { 18 | margin: 0; 19 | padding: 0; 20 | border: 0; 21 | font-size: 100%; 22 | font: inherit; 23 | vertical-align: baseline; 24 | } 25 | /* HTML5 display-role reset for older browsers */ 26 | article, aside, details, figcaption, figure, 27 | footer, header, hgroup, menu, nav, section { 28 | display: block; 29 | } 30 | body { 31 | line-height: 1; 32 | } 33 | ol, ul { 34 | list-style: none; 35 | } 36 | blockquote, q { 37 | quotes: none; 38 | } 39 | blockquote:before, blockquote:after, 40 | q:before, q:after { 41 | content: ''; 42 | content: none; 43 | } 44 | table { 45 | border-collapse: collapse; 46 | border-spacing: 0; 47 | } 48 | -------------------------------------------------------------------------------- /img/mongodb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/javascript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/font-root-styles/okinesans.css: -------------------------------------------------------------------------------- 1 | /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on September 13, 2022 */ 2 | 3 | 4 | 5 | @font-face { 6 | font-family: 'Okine 700'; 7 | src: url('../../fonts/okine/madeokinesanspersonaluse-black-webfont.woff2') format('woff2'), 8 | url('../../fonts/okine/madeokinesanspersonaluse-black-webfont.woff') format('woff'); 9 | font-weight: 700; 10 | font-style: normal; 11 | 12 | } 13 | 14 | 15 | 16 | 17 | @font-face { 18 | font-family: 'Okine 600'; 19 | src: url('../../fonts/okine/madeokinesanspersonaluse-bold-webfont.woff2') format('woff2'), 20 | url('../../fonts/okine/madeokinesanspersonaluse-bold-webfont.woff') format('woff'); 21 | font-weight: 600; 22 | font-style: normal; 23 | 24 | } 25 | 26 | 27 | 28 | @font-face { 29 | font-family: 'Okine 500'; 30 | src: url('../../fonts/okine/madeokinesanspersonaluse-medium-webfont.woff2') format('woff2'), 31 | url('../../fonts/okine/madeokinesanspersonaluse-medium-webfont.woff') format('woff'); 32 | font-weight: 500; 33 | font-style: normal; 34 | 35 | } 36 | 37 | 38 | 39 | 40 | @font-face { 41 | font-family: 'Okine 400'; 42 | src: url('../../fonts/okine/madeokinesanspersonaluse-regular-webfont.woff2') format('woff2'), 43 | url('../../fonts/okine/madeokinesanspersonaluse-regular-webfont.woff') format('woff'); 44 | font-weight: 400; 45 | font-style: normal; 46 | 47 | } 48 | 49 | 50 | 51 | @font-face { 52 | font-family: 'Okine 300'; 53 | src: url('../../fonts/okine/madeokinesanspersonaluse-light-webfont.woff2') format('woff2'), 54 | url('../../fonts/okine/madeokinesanspersonaluse-light-webfont.woff') format('woff'); 55 | font-weight: 300; 56 | font-style: normal; 57 | 58 | } -------------------------------------------------------------------------------- /img/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/font-root-styles/satoshi.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * 4 | * Font Family: Satoshi 5 | * Designed by: Deni Anggara 6 | * URL: https://www.fontshare.com/fonts/satoshi 7 | * © 2022 Indian Type Foundry 8 | */ 9 | 10 | 11 | @font-face { 12 | font-family: 'Satoshi 300'; 13 | src: url('../../fonts/satoshi/Satoshi-Light.woff2') format('woff2'), 14 | url('../../fonts/satoshi/Satoshi-Light.woff') format('woff'), 15 | url('../../fonts/satoshi/Satoshi-Light.ttf') format('truetype'); 16 | font-weight: 300; 17 | font-display: swap; 18 | font-style: normal; 19 | } 20 | 21 | 22 | @font-face { 23 | font-family: 'Satoshi 400'; 24 | src: url('../../fonts/satoshi/Satoshi-Regular.woff2') format('woff2'), 25 | url('../../fonts/satoshi/Satoshi-Regular.woff') format('woff'), 26 | url('../../fonts/satoshi/Satoshi-Regular.ttf') format('truetype'); 27 | font-weight: 400; 28 | font-display: swap; 29 | font-style: normal; 30 | } 31 | 32 | 33 | @font-face { 34 | font-family: 'Satoshi 500'; 35 | src: url('../../fonts/satoshi/Satoshi-Medium.woff2') format('woff2'), 36 | url('../../fonts/satoshi/Satoshi-Medium.woff') format('woff'), 37 | url('../../fonts/satoshi/Satoshi-Medium.ttf') format('truetype'); 38 | font-weight: 500; 39 | font-display: swap; 40 | font-style: normal; 41 | } 42 | 43 | 44 | @font-face { 45 | font-family: 'Satoshi 700'; 46 | src: url('../../fonts/satoshi/Satoshi-Bold.woff2') format('woff2'), 47 | url('../../fonts/satoshi/Satoshi-Bold.woff') format('woff'), 48 | url('../../fonts/satoshi/Satoshi-Bold.ttf') format('truetype'); 49 | font-weight: 700; 50 | font-display: swap; 51 | font-style: normal; 52 | } 53 | 54 | 55 | @font-face { 56 | font-family: 'Satoshi 900'; 57 | src: url('../../fonts/satoshi/Satoshi-Black.woff2') format('woff2'), 58 | url('../../fonts/satoshi/Satoshi-Black.woff') format('woff'), 59 | url('../../fonts/satoshi/Satoshi-Black.ttf') format('truetype'); 60 | font-weight: 900; 61 | font-display: swap; 62 | font-style: normal; 63 | } -------------------------------------------------------------------------------- /img/java.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/gmail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/nodejs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/python.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/linkedin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/git.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/mysql.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } 350 | -------------------------------------------------------------------------------- /img/flask.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* Box Model Hack */ 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | /* Clear fix hack */ 7 | .clearfix:after { 8 | content: "."; 9 | display: block; 10 | clear: both; 11 | visibility: hidden; 12 | line-height: 0; 13 | height: 0; 14 | } 15 | 16 | .clear { 17 | clear: both; 18 | } 19 | 20 | html { 21 | font-size: 62.5%; 22 | } 23 | 24 | html, 25 | body { 26 | scroll-behavior: smooth; 27 | } 28 | 29 | body { 30 | /* background-color: rgb(34, 40, 49); */ 31 | background-color: rgb(0, 0, 0); 32 | 33 | font-family: "Satoshi 400"; 34 | font-size: 1.5rem; 35 | font-weight: 300; 36 | line-height: 1.5; 37 | /* color: rgb(204, 213, 243); */ 38 | color: rgb(208, 212, 212); 39 | } 40 | 41 | header, 42 | main, 43 | main ~ section, 44 | footer { 45 | padding: 2rem; 46 | } 47 | 48 | h1, 49 | .declaration { 50 | margin: 0; 51 | font-family: "GeneralSans 700"; 52 | font-size: 3.5rem; 53 | } 54 | 55 | h2 { 56 | margin: 0; 57 | font-size: 2.8rem; 58 | font-family: "Satoshi 700"; 59 | } 60 | 61 | h3 { 62 | font-family: "Satoshi 900"; 63 | font-size: 2rem; 64 | } 65 | 66 | h4 { 67 | margin: 0; 68 | margin-left: 2rem; 69 | font-family: "Satoshi 700"; 70 | font-size: 2.5rem; 71 | } 72 | 73 | .separator { 74 | margin-bottom: 1rem; 75 | } 76 | 77 | .logo { 78 | background: -webkit-linear-gradient( 79 | top right, 80 | rgba(18, 55, 246, 1), 81 | rgba(9, 244, 244, 1) 82 | ); 83 | -webkit-background-clip: text; 84 | -webkit-text-fill-color: transparent; 85 | background-clip: text; 86 | } 87 | 88 | .featured-projects-box h3 { 89 | background: -webkit-linear-gradient( 90 | 90.98deg, 91 | rgba(24, 185, 207, 0.9) -2.14%, 92 | #6688ff 103.54% 93 | ); 94 | -webkit-background-clip: text; 95 | -webkit-text-fill-color: transparent; 96 | background-clip: text; 97 | } 98 | 99 | img { 100 | height: auto; 101 | } 102 | 103 | a { 104 | text-decoration: none; 105 | } 106 | 107 | a > img { 108 | width: 3rem; 109 | } 110 | 111 | a > img:hover { 112 | transform: scale(1.05); 113 | transition: all 0.4s ease-in-out; 114 | } 115 | 116 | header { 117 | padding: 1rem 2rem; 118 | border-bottom: 1px solid rgb(0, 0, 0); 119 | } 120 | 121 | nav { 122 | display: flex; 123 | justify-content: space-between; 124 | align-items: center; 125 | } 126 | 127 | nav img { 128 | width: 55px; 129 | z-index: 2; 130 | } 131 | 132 | .nav-menu { 133 | position: fixed; 134 | display: flex; 135 | top: -2rem; 136 | right: -200vh; 137 | height: 100vh; 138 | width: 75vw; 139 | 140 | list-style: none; 141 | padding: 0; 142 | display: flex; 143 | flex-direction: column; 144 | justify-content: center; 145 | align-items: center; 146 | gap: 2.5rem; 147 | 148 | background: #131313; 149 | transition: all 0.5s ease-in-out; 150 | 151 | z-index: 2; 152 | } 153 | 154 | .nav-menu.is-active { 155 | top: 0; 156 | right: 0; 157 | margin: 0; 158 | box-shadow: 0 1rem 5rem 0 #131313; 159 | } 160 | 161 | .hamburger { 162 | height: 3.5rem; 163 | width: 3.5rem; 164 | padding: 0; 165 | appearance: none; 166 | border: none; 167 | outline: none; 168 | background: none; 169 | cursor: pointer; 170 | z-index: 2; 171 | } 172 | 173 | .hamburger.is-active { 174 | position: fixed; 175 | top: 2.3rem; 176 | right: 2rem; 177 | background: #131313; 178 | } 179 | 180 | .menu-bar { 181 | position: relative; 182 | width: 100%; 183 | } 184 | 185 | .menu-bar, 186 | .menu-bar::before, 187 | .menu-bar::after { 188 | height: 0.2rem; 189 | border-radius: 0.5rem; 190 | background: rgba(24, 185, 207, 0.9); 191 | transition: all 0.5s ease-in-out; 192 | } 193 | 194 | .menu-bar::before { 195 | position: absolute; 196 | content: ""; 197 | top: -1.1rem; 198 | right: 0; 199 | width: 70%; 200 | transition: all 0.5s ease-in-out; 201 | } 202 | 203 | .menu-bar::after { 204 | position: absolute; 205 | content: ""; 206 | bottom: -1.1rem; 207 | right: 0; 208 | width: 70%; 209 | transition: all 0.5s ease-in-out; 210 | } 211 | 212 | .menu-bar.is-active { 213 | background: transparent; 214 | } 215 | 216 | .menu-bar.is-active::before { 217 | width: 100%; 218 | transform: rotate(45deg) translateX(1.5rem); 219 | } 220 | 221 | .menu-bar.is-active::after { 222 | width: 100%; 223 | transform: rotate(-45deg) translateX(1.5rem); 224 | } 225 | 226 | .nav-link a { 227 | color: rgb(208, 212, 212); 228 | } 229 | 230 | .nav-link a:hover { 231 | color: rgba(24, 185, 207, 0.9); 232 | } 233 | 234 | .nav-link:nth-child(5):hover { 235 | transform: scale(1.08); 236 | background: transparent; 237 | transition: transform 0.4s ease-in-out; 238 | } 239 | 240 | .nav-link:nth-child(5) a { 241 | display: block; 242 | padding: 0.8rem 2.5rem; 243 | cursor: pointer; 244 | } 245 | 246 | .nav-link:nth-child(5) a { 247 | color: rgb(204, 213, 243); 248 | } 249 | 250 | .nav-social-links { 251 | padding: 2.5rem 0; 252 | width: 80%; 253 | display: flex; 254 | justify-content: space-evenly; 255 | } 256 | 257 | .social-links img { 258 | width: 3.5rem; 259 | height: 3.5rem; 260 | } 261 | 262 | .social-links img:hover { 263 | transform: scale(1.03); 264 | transition: transform 0.4s ease-in-out; 265 | } 266 | 267 | /************************ 268 | /* MAIN SECTION STYLING 269 | ************************/ 270 | main { 271 | min-height: 85vh; 272 | display: flex; 273 | justify-content: center; 274 | align-items: center; 275 | } 276 | 277 | .name-highlight { 278 | background: -webkit-linear-gradient( 279 | top right, 280 | rgba(18, 55, 246, 1), 281 | rgba(9, 244, 244, 1) 282 | ); 283 | -webkit-background-clip: text; 284 | -webkit-text-fill-color: transparent; 285 | background-clip: text; 286 | } 287 | 288 | .declaration { 289 | margin: 0; 290 | font-size: 2.5rem; 291 | line-height: 1.4; 292 | color: rgb(208, 212, 212); 293 | } 294 | 295 | .cta-box { 296 | margin-top: 4rem; 297 | } 298 | 299 | .cta, 300 | .cta1 { 301 | font-family: "Satoshi 700"; 302 | } 303 | 304 | .cta { 305 | display: inline-block; 306 | width: 12rem; 307 | margin: 0.5rem 1.8rem; 308 | margin-left: 0; 309 | padding: 1rem 1.5rem; 310 | border-radius: 1rem; 311 | background: linear-gradient( 312 | 99.41deg, 313 | #002cc7 -39.51%, 314 | rgba(24, 185, 207, 0.9) 116.85% 315 | ); 316 | 317 | text-align: center; 318 | text-decoration: none; 319 | color: rgb(208, 212, 212); 320 | } 321 | 322 | .cta1 { 323 | text-transform: uppercase; 324 | font-weight: 500; 325 | } 326 | 327 | .cta:hover { 328 | transform: scale(1.05); 329 | transition: transform 0.4s ease-in-out; 330 | } 331 | 332 | .cta2, 333 | .nav-link:nth-child(5) { 334 | position: relative; 335 | border-radius: 1rem; 336 | border-image-slice: 1; 337 | border-image-source: linear-gradient( 338 | 180deg, 339 | rgba(24, 185, 207, 0.9) 0%, 340 | #3b53a8 100% 341 | ); 342 | background: rgb(34, 40, 49); 343 | } 344 | 345 | .cta2::after, 346 | .nav-link:nth-child(5)::after { 347 | position: absolute; 348 | content: ""; 349 | top: -1.8px; 350 | bottom: -1.8px; 351 | left: -1.8px; 352 | right: -1.8px; 353 | background: linear-gradient(180deg, rgba(24, 185, 207, 0.9) 0%, #3b53a8 100%); 354 | z-index: -1; 355 | border-radius: 1.5rem; 356 | } 357 | 358 | .main-social-links { 359 | display: none; 360 | } 361 | 362 | /* ABOUT SECTION STYLING */ 363 | #about { 364 | display: flex; 365 | flex-direction: column; 366 | justify-content: center; 367 | align-items: center; 368 | padding-bottom: 10rem; 369 | text-align: justify; 370 | } 371 | 372 | .separator { 373 | position: relative; 374 | align-self: flex-start; 375 | } 376 | 377 | .separator::after { 378 | content: ""; 379 | position: absolute; 380 | bottom: -1rem; 381 | left: 0; 382 | width: 5rem; 383 | height: 0.5rem; 384 | border-radius: 3.5rem; 385 | background-color: rgb(31, 165, 218); 386 | } 387 | 388 | .about-text { 389 | padding-top: 1.2rem; 390 | line-height: 1.6; 391 | } 392 | 393 | .about-text span { 394 | font-family: "Satoshi 700"; 395 | color: rgb(29, 228, 255); 396 | } 397 | 398 | .about-text + ul { 399 | display: flex; 400 | flex-flow: row wrap; 401 | justify-content: space-between; 402 | gap: 0.7rem; 403 | padding: 1.55rem; 404 | } 405 | 406 | .tool { 407 | width: 45%; 408 | margin-right: 1rem; 409 | } 410 | 411 | .img-box { 412 | position: relative; 413 | display: flex; 414 | justify-content: center; 415 | align-items: center; 416 | margin-top: 5rem; 417 | /* margin-bottom: 0.5rem; */ 418 | padding: 0.3rem; 419 | border-radius: 1.8rem; 420 | height: max-content; 421 | background: linear-gradient( 422 | 99.41deg, 423 | #002cc7 -39.51%, 424 | rgba(24, 185, 207, 0.9) 116.85% 425 | ); 426 | } 427 | 428 | .img-box::before { 429 | content: ""; 430 | position: absolute; 431 | left: 0; 432 | top: 0; 433 | width: 100%; 434 | height: 100%; 435 | background: rgba(34, 40, 49, 0.35); 436 | } 437 | 438 | .profile-img { 439 | width: 25rem; 440 | border-radius: 1.5rem; 441 | object-fit: fill; 442 | } 443 | 444 | /* SKILLS SECTION STYLING */ 445 | .skill { 446 | width: 100px; 447 | height: 20px; 448 | display: inline-block; 449 | text-align: center; 450 | line-height: 20px; 451 | } 452 | 453 | #skills { 454 | display: flex; 455 | flex-direction: column; 456 | padding-bottom: 10rem; 457 | } 458 | 459 | /* PROJECTS SECTION STYLING */ 460 | .featured-projects-box, 461 | .other-projects-box { 462 | display: flex; 463 | flex-direction: column; 464 | justify-content: center; 465 | align-items: center; 466 | gap: 3.5rem; 467 | padding-bottom: 10rem; 468 | } 469 | 470 | .project { 471 | display: flex; 472 | flex-direction: column-reverse; 473 | max-width: 35rem; 474 | max-height: 58rem; 475 | background: rgb(255, 255, 255, 0.1); 476 | box-shadow: 0 1rem 2rem 0 rgba(27, 27, 27, 0.1); 477 | border-radius: 1.2rem; 478 | } 479 | 480 | .project-details-box { 481 | padding: 2.5rem; 482 | padding-bottom: 0; 483 | } 484 | 485 | .project-main-info span, 486 | h3 { 487 | margin: 0; 488 | text-transform: uppercase; 489 | } 490 | 491 | .project-main-info p > a { 492 | font-family: "Satoshi 700"; 493 | color: rgb(29, 228, 255); 494 | } 495 | 496 | .project-main-info p > a:hover { 497 | text-decoration: underline; 498 | } 499 | 500 | .project-links { 501 | display: flex; 502 | align-items: center; 503 | gap: 2rem; 504 | } 505 | 506 | .project-tools p { 507 | background: linear-gradient( 508 | 150deg, 509 | rgba(29, 228, 255, 0.81) -6.94%, 510 | rgba(59, 83, 168, 0.9) 97.22% 511 | ); 512 | -webkit-background-clip: text; 513 | -webkit-text-fill-color: transparent; 514 | background-clip: text; 515 | padding-bottom: 0.3rem; 516 | font-family: "Satoshi 700"; 517 | } 518 | 519 | .project-image-box { 520 | position: relative; 521 | } 522 | 523 | .project-img-link { 524 | display: block; 525 | width: 100%; 526 | height: 100%; 527 | } 528 | 529 | .project-img-link > img { 530 | width: 100%; 531 | height: 100%; 532 | object-fit: cover; 533 | border-radius: 1.2rem 1.2rem 0 0; 534 | } 535 | 536 | .project-img-link > img:hover { 537 | transform: none; 538 | } 539 | 540 | .notable-projects-box { 541 | display: flex; 542 | flex-direction: column; 543 | gap: 2rem; 544 | } 545 | 546 | .side-project { 547 | padding: 4.5rem 2.75rem; 548 | max-width: 35rem; 549 | background-color: rgb(255, 255, 255, 0.1); 550 | box-shadow: 0 1rem 2rem 0 rgba(27, 27, 27, 0.1); 551 | border-radius: 1rem; 552 | display: flex; 553 | flex-direction: column; 554 | justify-content: space-between; 555 | } 556 | 557 | .side-project > div { 558 | display: flex; 559 | justify-content: space-between; 560 | align-items: center; 561 | padding-right: 2rem; 562 | } 563 | 564 | .side-project img { 565 | width: 3.5rem; 566 | } 567 | 568 | .side-project h3, 569 | .side-project span { 570 | margin: 2.2rem 0 0; 571 | background: -webkit-linear-gradient( 572 | 90.98deg, 573 | rgba(24, 185, 207, 0.9) -2.14%, 574 | #6688ff 103.54% 575 | ); 576 | -webkit-background-clip: text; 577 | -webkit-text-fill-color: transparent; 578 | background-clip: text; 579 | } 580 | 581 | .side-project span { 582 | font-family: "Satoshi 500"; 583 | } 584 | 585 | /* CONTACT SECTION STYLING */ 586 | #contact { 587 | display: flex; 588 | flex-direction: column; 589 | justify-content: center; 590 | align-items: center; 591 | padding-bottom: 10rem; 592 | 593 | text-align: center; 594 | } 595 | 596 | #contact > div { 597 | padding-bottom: 4rem; 598 | } 599 | 600 | #contact span { 601 | font-family: "Satoshi 500"; 602 | font-size: 1.6rem; 603 | background: -webkit-linear-gradient( 604 | 90.98deg, 605 | rgba(24, 185, 207, 0.9) -2.14%, 606 | #6688ff 103.54% 607 | ); 608 | -webkit-background-clip: text; 609 | -webkit-text-fill-color: transparent; 610 | background-clip: text; 611 | } 612 | 613 | /* h4 { 614 | margin: 1rem; 615 | font-family: "Satoshi 900"; 616 | font-size: 3rem; 617 | } */ 618 | 619 | h4 + p { 620 | padding: 1rem 0 2rem; 621 | } 622 | 623 | #contact > aside { 624 | display: flex; 625 | justify-content: center; 626 | gap: 1.2rem; 627 | } 628 | 629 | /* FOOTER STYLING */ 630 | footer { 631 | width: 100%; 632 | padding: 1.2rem; 633 | border-top: 0.1rem solid rgb(38, 50, 67); 634 | 635 | font-size: 1.3rem; 636 | text-align: center; 637 | color: rgb(208, 212, 212); 638 | } 639 | 640 | footer span { 641 | background: -webkit-linear-gradient( 642 | 90.98deg, 643 | rgba(24, 185, 207, 0.9) -2.14%, 644 | #6688ff 103.54% 645 | ); 646 | -webkit-background-clip: text; 647 | -webkit-text-fill-color: transparent; 648 | background-clip: text; 649 | } 650 | 651 | .contact-form { 652 | padding: 4.5rem 2.75rem; 653 | max-width: 35rem; 654 | background: rgba(38, 50, 67, 1); 655 | box-shadow: 0 1rem 2rem 0 rgba(27, 27, 27, 0.1); 656 | /* center the elements of form */ 657 | 658 | display: flex; 659 | flex-direction: column; 660 | justify-content: space-between; 661 | } 662 | 663 | /****************************************** 664 | /* ADDITIONAL STYLES 665 | /* MEDIA QUERIES 666 | /*******************************************/ 667 | @media screen and (min-width: 720px) { 668 | body { 669 | display: flex; 670 | flex-direction: column; 671 | justify-content: center; 672 | align-items: center; 673 | font-size: 1.55rem; 674 | } 675 | 676 | header { 677 | width: 100%; 678 | } 679 | 680 | .nav-social-links { 681 | display: none; 682 | } 683 | 684 | main { 685 | min-height: 90vh; 686 | width: 90vw; 687 | 688 | justify-content: space-between; 689 | } 690 | 691 | main section { 692 | width: 47rem; 693 | } 694 | 695 | h1, 696 | .declaration { 697 | font-size: 3.5rem; 698 | } 699 | 700 | .cta, 701 | .cta1, 702 | .cta2 { 703 | width: fit-content; 704 | padding: 1.3rem 2.5rem; 705 | } 706 | 707 | .main-social-links, 708 | .contact-social-links { 709 | display: flex; 710 | flex-direction: column; 711 | gap: 1.1rem; 712 | } 713 | 714 | #about { 715 | flex-flow: row wrap; 716 | justify-content: space-between; 717 | } 718 | 719 | .separator { 720 | width: 100%; 721 | } 722 | 723 | #about .separator + div { 724 | width: 55vw; 725 | } 726 | 727 | .featured-projects-box { 728 | flex-flow: row wrap; 729 | justify-content: space-evenly; 730 | } 731 | 732 | .other-projects-box .separator::after { 733 | width: 0; 734 | } 735 | 736 | .other-projects-box h2 { 737 | text-align: center; 738 | text-decoration: underline; 739 | } 740 | 741 | .notable-projects-box { 742 | flex-flow: row wrap; 743 | justify-content: center; 744 | } 745 | 746 | .side-project { 747 | width: 35rem; 748 | } 749 | 750 | #contact { 751 | margin: 3rem 0; 752 | 753 | flex-direction: row; 754 | justify-content: center; 755 | gap: 2.5rem; 756 | } 757 | 758 | #contact div { 759 | width: 55vw; 760 | padding: 2.5rem; 761 | } 762 | } 763 | 764 | @media screen and (min-width: 1024px) { 765 | body > * { 766 | width: 85vw; 767 | } 768 | 769 | header { 770 | width: 100%; 771 | padding: 2rem 3.5rem; 772 | } 773 | 774 | main section { 775 | width: 52rem; 776 | } 777 | 778 | h1 { 779 | font-size: 5.5rem; 780 | } 781 | 782 | h2 { 783 | font-size: 3.2rem; 784 | } 785 | 786 | .declaration { 787 | font-size: 3.2rem; 788 | } 789 | 790 | #about .separator + div { 791 | width: 48vw; 792 | } 793 | 794 | .separator ~ .project { 795 | position: relative; 796 | min-width: 100%; 797 | gap: 2.5rem; 798 | margin-top: 4.5rem; 799 | background: none; 800 | } 801 | 802 | .separator ~ .project:nth-child(even) { 803 | flex-direction: row; 804 | } 805 | 806 | .separator ~ .project:nth-child(odd) { 807 | flex-direction: row-reverse; 808 | 809 | text-align: right; 810 | } 811 | 812 | .project { 813 | box-shadow: none; 814 | } 815 | 816 | .project-details-box { 817 | position: relative; 818 | margin-top: 2.5rem; 819 | padding: 0; 820 | max-width: 50%; 821 | } 822 | 823 | .project-main-info { 824 | position: relative; 825 | padding: 2rem; 826 | border-radius: 0.8rem; 827 | /* background: rgb(255, 255, 255, 0.05); 828 | box-shadow: 0 1rem 3rem 0 rgba(27, 27, 27, 0.2); */ 829 | backdrop-filter: blur(5px) saturate(200%); 830 | -webkit-backdrop-filter: blur(2px) saturate(200%); 831 | background-color: rgba(17, 25, 40, 0.7); 832 | border-radius: 12px; 833 | border: 1px solid rgba(255, 255, 255, 0.125); 834 | z-index: 1; 835 | } 836 | 837 | .project-main-info::before { 838 | position: absolute; 839 | content: ""; 840 | width: 100%; 841 | height: 100%; 842 | bottom: 0; 843 | border-radius: 0.8rem; 844 | /* transform: skew(-16deg); */ 845 | /* background-color: rgb(255, 255, 255, 0.05); */ 846 | z-index: -2; 847 | } 848 | 849 | .separator ~ .project:nth-child(even) .project-main-info::before { 850 | top: 0; 851 | left: 3.7rem; 852 | } 853 | 854 | .separator ~ .project:nth-child(odd) .project-main-info::before { 855 | top: 0; 856 | right: 2.7rem; 857 | bottom: 0; 858 | border-radius: 0.8rem; 859 | /* transform: skew(-10deg); 860 | background-color: rgb(38, 50, 67); */ 861 | z-index: -2; 862 | } 863 | 864 | .separator ~ .project:nth-child(odd) .project-links { 865 | justify-content: flex-end; 866 | } 867 | 868 | .separator ~ .project:nth-child(even) .project-image-box { 869 | position: absolute; 870 | right: 0; 871 | top: 0; 872 | bottom: 0; 873 | align-self: stretch; 874 | } 875 | 876 | .separator ~ .project:nth-child(odd) .project-image-box { 877 | position: absolute; 878 | left: 0; 879 | top: 0; 880 | bottom: 0; 881 | align-self: stretch; 882 | } 883 | 884 | .separator ~ .project.project3 .project-main-info::before { 885 | left: 3.7rem; 886 | } 887 | 888 | .project-tools p { 889 | display: inline-block; 890 | } 891 | 892 | .project-image-box::before { 893 | top: -3rem; 894 | bottom: 0; 895 | height: 120%; 896 | } 897 | 898 | .project-img-link > img { 899 | border-radius: 1.2rem; 900 | } 901 | 902 | .project-img-link > img:hover { 903 | transform: scale(1.05); 904 | } 905 | 906 | .notable-projects-box { 907 | width: 100%; 908 | flex-flow: row; 909 | } 910 | 911 | .side-project { 912 | max-width: 33.33%; 913 | background-color: rgb(255, 255, 255, 0.1); 914 | box-shadow: 0 1rem 2rem 0 rgba(27, 27, 27, 0.1); 915 | border-radius: 1rem; 916 | } 917 | 918 | .img-box { 919 | position: relative; 920 | right: 0; 921 | top: -7.5rem; 922 | } 923 | 924 | #contact div { 925 | width: 40vw; 926 | padding-right: 3rem; 927 | } 928 | } 929 | 930 | @media screen and (min-width: 1280px) { 931 | body > * { 932 | width: 70vw; 933 | } 934 | 935 | header { 936 | width: 100%; 937 | padding: 2rem 5.5rem; 938 | } 939 | 940 | nav { 941 | justify-content: space-between; 942 | } 943 | 944 | .nav-menu { 945 | justify-content: flex-end; 946 | } 947 | 948 | nav > a { 949 | display: block; 950 | } 951 | 952 | .nav-menu { 953 | position: static; 954 | width: 30%; 955 | height: auto; 956 | justify-self: flex-end; 957 | flex-direction: row; 958 | gap: 5.5rem; 959 | 960 | background: none; 961 | } 962 | 963 | .hamburger { 964 | display: none; 965 | } 966 | 967 | main > section { 968 | width: 60rem; 969 | } 970 | 971 | main .cta2 { 972 | display: none; 973 | } 974 | 975 | .declaration + p { 976 | width: 75%; 977 | } 978 | 979 | #about .separator + div { 980 | width: 55%; 981 | } 982 | 983 | .side-project { 984 | background-color: rgb(255, 255, 255, 0.1); 985 | box-shadow: 0 1rem 2rem 0 rgba(27, 27, 27, 0.1); 986 | border-radius: 1rem; 987 | } 988 | 989 | #contact div { 990 | width: 43rem; 991 | } 992 | } 993 | 994 | @media screen and (min-width: 1440px) { 995 | body { 996 | font-size: 1.6rem; 997 | } 998 | 999 | body > * { 1000 | width: 103rem; 1001 | } 1002 | 1003 | header, 1004 | footer { 1005 | width: 100%; 1006 | } 1007 | 1008 | main > section { 1009 | width: 65rem; 1010 | } 1011 | 1012 | h1, 1013 | .declaration { 1014 | font-size: 4rem; 1015 | } 1016 | 1017 | .project { 1018 | height: 35rem; 1019 | } 1020 | 1021 | .project-image-box { 1022 | min-height: 100%; 1023 | } 1024 | 1025 | .project-image-box img { 1026 | height: 100%; 1027 | } 1028 | 1029 | .side-project { 1030 | background-color: rgb(255, 255, 255, 0.1); 1031 | box-shadow: 0 1rem 2rem 0 rgba(27, 27, 27, 0.1); 1032 | border-radius: 1rem; 1033 | } 1034 | 1035 | .cta2 { 1036 | width: fit-content; 1037 | } 1038 | } 1039 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Krish Depani 9 | 10 | 16 | 20 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 35 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 51 | 55 | 56 | 57 | 58 | 62 | 63 | 64 | 65 | 70 | 76 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 |
95 | 282 |
283 | 284 |
285 |
286 | Hi there! 287 |

I am Krish Depani.

288 | 289 |

290 | I develop efficient and scalable web solutions 291 |

292 | 293 |

294 | As a Software Engineer, I specialize in creating unique and 295 | captivating web solutions and experiences for people and organizations 296 | who appreciate distinctive craftsmanship. 297 |

298 | 299 |
300 | Reach out 301 | Resume 307 |
308 |
309 | 310 | 460 |
461 | 462 |
463 |
464 |

About

465 |
466 | 467 |
468 |

469 | Hello, I'm Krish Depani, based in Bangalore, India. With a deep 470 | passion for technology, I'm on a quest to craft innovative solutions 471 | in the realms of Automation and Backend Development. But that's not 472 | all; I've got a keen interest in the fascinating world of Blockchain. 473 | As a motivated and enthusiastic newcomer to the industry, I bring not 474 | just technical skills but also a strong sense of self-discipline and a 475 | collaborative spirit. 476 |
477 |
478 | I'm excited to apply my skills, my drive, and my love for technology 479 | to real-world projects, contributing to the growth and success of any 480 | endeavor I embark on. Let's build remarkable solutions together! 481 |
482 |
483 | Outside my regular developer routine, I enjoy playing cricket, 484 | watching movies, and listening to music. 485 |

486 |
487 | 488 |
489 | Profile Image 490 |
491 |
492 | 493 |
494 |
495 |
496 |

Projects

497 |
498 | 499 |
500 |
501 |
502 | Project #1 503 |

Virtual Voice Assistant

504 |

505 | Virtual Voice Assistant is a project that utilizes machine 506 | learning and natural language processing to enable users to 507 | control their devices using voice commands. Technologies used 508 | include TensorFlow, Keras, various Python libraries and RESTful 509 | APIs. 510 |

511 | 512 |
513 | 517 | github repo link icon 518 | 519 |
520 |
521 | 522 |
523 |

Python, TensorFlow, REST APIs

524 |
525 |
526 | 527 |
528 | 533 | Project Preview Image 537 | 538 |
539 |
540 | 541 |
542 |
543 |
544 | Project #2 545 |

Decentralized Voting System

546 |

547 | The Decentralized Voting System on Ethereum Blockchain offers a 548 | secure and transparent approach to elections. Utilizing 549 | Ethereum's blockchain, it guarantees tamper-proof voting 550 | records, enabling remote voting while preserving anonymity and 551 | preventing fraud. 552 |

553 | 554 |
555 | 559 | github repo link icon 560 | 561 |
562 |
563 | 564 |
565 |

HTML, CSS, JS, Solidity, Web3.js

566 |
567 |
568 | 569 |
570 | 575 | Project Preview Image 579 | 580 |
581 |
582 | 583 |
584 |
585 |
586 | Project #3 587 |

Telegram Bot

588 |

589 | This bot was created solely for educational purposes. It serves 590 | as a versatile Telegram bot, capable of providing wallpapers, 591 | movie or TV series information, and much more. 592 |

593 | 594 |
595 | 599 | github repo link icon 600 | 601 | 602 | live site demo link icon 603 | 604 |
605 |
606 | 607 |
608 |

Python, REST APIs

609 |
610 |
611 | 612 |
613 | 618 | Project Preview Image 619 | 620 |
621 |
622 | 623 |
624 |
625 |
626 | Project #4 627 |

Portfolio Website

628 |

629 | Personal Portfolio Website is a project that showcases my skills 630 | and projects. It was developed using HTML, CSS and JavaScript. 631 | It is a responsive website that is compatible with all devices. 632 |

633 | 634 |
635 | 639 | github repo link icon 640 | 641 | 642 | 643 | live site demo link icon 644 | 645 |
646 |
647 | 648 |
649 |

HTML, CSS, JS

650 |
651 |
652 | 653 |
654 | 659 | Project Preview Image 660 | 661 |
662 |
663 |
664 | 665 |
666 |
667 |

Other Notable Projects

668 |
669 | 670 |
671 |
672 |
673 | 677 | github repo link icon 678 | 679 |
680 | 681 |

TODO_list_API

682 | 683 |

684 | The To-Do List API allows users to perform CRUD (Create, Read, 685 | Update, Delete) operations on a task list using API key 686 | authentication. The API uses MySQL database to store the task list 687 | and API keys. 688 |

689 | 690 | Python, MySQL, FastAPI 691 |
692 | 693 |
694 |
695 | 699 | github repo link icon 700 | 701 |
702 | 703 |

Data-Structure-C

704 | 705 |

706 | It contains some data structures such as Arrays, Strings, Stacks, 707 | Queue and Tree implemented in C language. 708 |

709 | 710 | C, DSA 711 |
712 | 713 |
714 |
715 | 719 | github repo link icon 720 | 721 |
722 | 723 |

Github Home Page

724 | 725 |

726 | This is my Github home page where I have described my projects, 727 | skills, interests and contact information. 728 |

729 | 730 | Markdown files 731 |
732 |
733 |
734 |
735 | 736 |
737 |
738 |

Skills

739 |
740 |
741 |
742 |
743 |
744 |

Programming Language

745 |
746 |
747 |
748 | Java 749 |
750 |    Java    751 |
752 |
753 | Python 754 |    Python    755 |
756 |
757 |
758 |
759 |
760 |

Web Development Technology

761 |
762 |
763 |
764 | HTML 765 |    HTML    766 |
767 |
768 | CSS3 769 |    CSS    770 |
771 |
772 | 773 | JavaScript 774 | 775 |    JavaScript    776 |
777 |
778 | Node.js 779 |    Node.js    780 |
781 |
782 | 783 | Express.js 784 | 785 |    Express.js    786 |
787 |
788 |
789 |
790 |
791 |

Database

792 |
793 |
794 |
795 | MySQL 796 |    MySQL    797 |
798 |
799 | 800 | Mongo DB 801 | 802 |    Mongo DB    803 |
804 |
805 |
806 |
807 |
808 |

Version Control

809 |
810 |
811 |
812 | Git 813 |     Git     814 |
815 |
816 | Github 817 |    Github    818 |
819 |
820 |
821 |
822 | 823 |
824 |
825 | Next steps? 826 | 827 |

Don't be a Stranger!

828 | 829 |

830 | Feel free to drop me an email if you believe we'd make a great team 831 | and would like to collaborate. Let's make our work together not only 832 | productive but also enjoyable! 833 |

834 | 835 | Get in Touch 836 |
837 | 838 | 987 |
988 | 989 | 992 | 993 | 994 | 995 | --------------------------------------------------------------------------------