diff --git a/Graphics/hero-section-photo.jpg b/Graphics/hero-section-photo.jpg new file mode 100644 index 0000000..f66add9 Binary files /dev/null and b/Graphics/hero-section-photo.jpg differ diff --git a/StyleSheets/animation.css b/StyleSheets/animation.css new file mode 100644 index 0000000..bcf794a --- /dev/null +++ b/StyleSheets/animation.css @@ -0,0 +1,9 @@ +@keyframes left-slide { + 0% {transform: translateX(-600px); opacity: 0%;} + 100% {transform: translateX(0px); opacity: 100%;} +} + +@keyframes right-slide { + 0% {transform: translateX(600px); opacity: 0%;} + 100% {transform: translateX(0px); opacity: 100%;} +} diff --git a/StyleSheets/responsive.css b/StyleSheets/responsive.css deleted file mode 100644 index de52153..0000000 --- a/StyleSheets/responsive.css +++ /dev/null @@ -1,233 +0,0 @@ -@media (max-width: 1100px) { - .home .intro { - font-size: 50px; - } -} - -@media (max-width: 900px) { - .home .intro { - font-size: 45px; - } -} - -@media (max-width: 800px) { - .navigator { - flex-wrap: wrap; - } -} - -@media (max-width: 600px) { - .home .intro { - font-size: 35px; - } - - .home .intro .space { - height: 120px; - } - - .about div { - font-size: 18px; - } -} - -@media (max-width: 550px) { - .navigator ul li { - font-size: 12px; - } - - .home { - height: 500px; - } -} - -@media (max-width: 450px) { - .project .project-set .project-item h3 { - font-size: 20px; - } - - .project .project-set .project-item .content{ - font-size: 14px; - } - - .resume a { - padding: 3px; - font-size: 12px; - } - - .navigator ul li { - font-size: 8px; - } - - .home .intro { - font-size: 25px; - } - - .home .intro .space { - height: 80px; - } -} - -@media (max-width: 400px) { - .navigator .left { - font-size: 1.3rem; - } - - .home { - height: 350px; - } - - .photo img { - width: 80%; - } - - h2 { - font-size: 25px; - } - - .about div { - font-size: 15px; - } -} - -@media (max-width: 360px) { - .navigator .right ul li { - margin: 0 10px; - } - - .skill-set .flex-container .flex-item{ - padding: 30px 5px; - height: 150px; - } - - .skill-set .flex-container .flex-item img { - height: 100px; - } -} - -@media (max-width: 350px) { - .about div { - font-size: 15px; - } - - .resume { - margin: 10px 0px - } - - .resume a { - padding: 3px; - font-size: 10px; - } -} - -@media (max-width: 300px) { - - .project { - padding: 12px; - } - - .skill { - padding: 12px; - } - - .home { - height: 200px; - } - - .home .intro { - font-size: 15px; - } - - .home .intro .space { - height: 50px; - } - - h2 { - font-size: 20px; - padding: 10px 0px; - } - - .about div { - font-size: 12px; - } - - .project .project-set .project-item .content{ - font-size: 10px; - } -} - -@media (max-width: 250px) { - .resume { - margin: 5px 0px - } - - .resume a { - padding: 3px; - font-size: 8px; - } -} - -@media (max-width: 230px) { - .navigator .right ul li { - margin: 0px 5px; - } -} - -@media (max-width: 200px) { - .navigator { - height: 45px; - } - - .navigator .left { - display: none; - } - - .navigator .right ul li { - margin: 0px 3px; - } - - .home { - height: 150px; - } - - .home .intro { - font-size: 10px; - } - - .home .intro .space { - height: 32px; - } - - .about { - padding: 2px; - } - - h2 { - font-size: 15px; - padding: 5px 0px; - } - - .about div { - font-size: 7px; - } - - .resume { - margin: 3px 0px - } - - .resume a { - padding: 3px; - font-size: 6px; - } -} - -@media (max-width: 160px) -{ - .resume { - margin: 3px 0px - } - - .resume a { - padding: 3px; - font-size: 4px; - } -} \ No newline at end of file diff --git a/StyleSheets/standby.css b/StyleSheets/standby.css new file mode 100644 index 0000000..e091b85 --- /dev/null +++ b/StyleSheets/standby.css @@ -0,0 +1,84 @@ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; +} + +.light-theme { + --headersection: #5910ad; + --primary-color: #007ACC; + --secondary-color: #7d2fd7; +} + +.dark-theme { + +} + +:root { + --scrollbar-bg: linear-gradient(to top left, rgb(0, 57, 255), rgb(239, 249, 255)); + --scrollbar-bg-hover: linear-gradient(to top left, rgb(0, 0, 255), rgb(0, 232, 255)); +} + +::-webkit-scrollbar { + width: 5px; +} + +::-webkit-scrollbar-thumb { + background: var(--scrollbar-bg, #999); + border-radius: 16px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--scrollbar-bg-hover, #555); +} + +a { + text-decoration: none; + color: black; +} + +body { + background-color: var(--primary-color); + font-family: Helvetica, sans-serif, Georgia; + font-weight: 400; +} + +.main-header { + width: 100vw; + position: fixed; + top: 0; + padding: 10px; + background-color: var(--headersection); + font-size: 1.5rem; +} + +.main-header nav { + display: flex; + justify-content: space-between; +} + +.main-header nav div { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0px 12px; +} + +.main-header nav div ul { + display: flex; + justify-content: space-between; + align-items: center; + list-style: none; +} + +.main-header nav div ul li { + margin: 12px; +} + +.main-header nav div ul li a { + color: #00000080 +} + +.main-header nav div ul li a:hover { + color: #000000 +} diff --git a/StyleSheets/style.css b/StyleSheets/style.css index 93cb118..307adeb 100644 --- a/StyleSheets/style.css +++ b/StyleSheets/style.css @@ -1,251 +1,126 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); - -* { - margin: 0; - padding: 0; - font-family: Poppins, sans-serif; -} - - -ul { - padding-left: 20px; -} - -body { - background-color: rgb(0, 0, 33); - color: white; +.navbar { + margin: 5px; } -nav { +.container { display: flex; - justify-content: space-around; - align-items: center; - height: 100px; - background-color: rgb(6, 6, 46); + flex-wrap: wrap; + justify-content: space-evenly; + align-content: space-evenly; } -nav ul { +.hero-intro { + margin: 10px; + width: 500px; display: flex; + flex-direction: column; justify-content: center; -} - -nav ul li { - list-style: none; - font-size: 16px; - margin: 0 23px; - text-align: center; -} - -nav ul li a { - text-decoration: none; - color: white; -} - -nav ul li a:hover { - color: blueviolet; -} - -.left { - font-size: 1.8rem; - padding: 0px 20px; -} - -.left:hover { - color: blueviolet; -} - -.home { - display: flex; - justify-content: space-around; - height: 700px; -} - -.intro { - width: 40%; - margin: 23px 0px; - font-size: 60px; - display: flex; align-items: center; } -.intro span { - color: blueviolet; -} - -.intro .space{ - height: 200px; -} - -.photo { +.hero-image { + margin: 10px; + width: 500px; display: flex; - width: 40%; - margin: 23px 0px; + justify-content: center; align-items: center; } -.photo img { +.hero-image img { width: 100%; } -.about { - padding: 20px; - margin: 10px; -} - -.about div { - font-size: 20px; +.contact { + display: flex; + flex-wrap: wrap; } -/* .about h2 { - color: rgb(120, 38, 208); - font-size: 35px; - padding: 23px 0px; -} */ - -.resume { - margin: 23px 0px; +.contact .item { + width: 50px; + margin: 5px; } -.resume a { - padding: 10px; - color: white; - border: 3px solid white; - border-radius: 20px; +.contact img { + width: 100%; } -.resume a:hover{ - background-color: white; - color: black; +section { + padding: 20px 5px; } -.skill{ - padding:30px; +#hero-section .text { + margin: 2px; + font-size: 2.2rem; } -/* .skill h2{ - color: rgb(120, 38, 208); - font-size: 35px; - padding: 23px 0px; -} */ - -.skill-set{ - padding: 2px; +#about-section div { + margin: 12px 0px; } -.skill-set .flex-container{ - justify-content: space-around; +#skill { + margin: 12px 0px; } -.skill-set .flex-container .flex-item { - height: 300px; - width: 250px; - text-align: center; - padding: 30px 10px; - font-size: larger; +.skills { margin: 10px; } -.skill-set .flex-container .flex-item img { - height: 200px; -} - -.project{ - padding:30px; -} - -/* .project h2{ - color: rgb(120, 38, 208); - font-size: 35px; - padding: 23px 0px; - margin:5px 0px; -} */ - -.project .project-set .project-item h3{ - color: rgb(120, 38, 208); - font-size: 30px; - padding: 5px 0px; - margin:5px 0px; -} - -.project .project-set .project-item .content{ - padding: 5px 0px; - margin:5px 0px; -} - -.project .project-set .project-item .tech { - padding: 5px 0px; -} - -.project .project-set .project-item .links { - padding: 5px 0px; +.skills-container { + display: flex; + flex-wrap: wrap; } -.project .project-set .project-item .links a { - display: inline-block; - padding: 6px 8px; - margin: 0px 4px; - border: 4px solid white; - border-radius: 20px; - color: white; +.skill { + margin: 15px; + width: 200px; + border: 10px solid blueviolet; + padding: 10px; } -.project .project-set .project-item .links a:hover { - color: black; - background-color: white; +.skill img { + width: 100%; + height: auto; } -.project .project-set { - padding: 10px 0px; +.skill p { + text-align: center; } -.project .project-set .project-item { - margin: 20px 0px; - padding: 10px 10px; - background-color: rgb(0, 0, 50); - border-radius: 3vw; +.projects-container { + margin: 20px; } -.contact{ - padding: 20px; +.project { + margin-top: 25px; + padding: 15px; + border: 5px solid yellowgreen; + border-radius: 30px; + animation-name: right-slide; + animation-duration: 1s; } -/* h2{ - color: rgb(120, 38, 208); - font-size: 35px; - padding: 13px 0px; - margin: 10px 0px; -} */ - -.certificates { - padding: 20px; +.projects-container ul { + margin-left: 12px; + padding-left: 12px; } -.certify { +.certificates-container { + margin: 10px; display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 12px; + flex-wrap: wrap; } -.certify div{ - width: 90%; - margin: 12px; +.certificate { + margin: 10px; + width: 400px; } -.certify div img{ +.certificate img { width: 100%; } -.contact .contact-set ul{ - margin: 5px; - list-style: none; -} - -.contact .contact-set ul li{ - display: inline; +@media (max-width: 1200px) { + .container { + margin-top: 100px; + } } - -.contact .contact-set ul li img { - height:40px; -} \ No newline at end of file diff --git a/StyleSheets/utils.css b/StyleSheets/utils.css index 10726c3..b80b6bd 100644 --- a/StyleSheets/utils.css +++ b/StyleSheets/utils.css @@ -1,19 +1,41 @@ -a { - text-decoration: none; +h1 { + font-size: 2.2rem; } -h2 { - color: rgb(120, 38, 208); - font-size: 35px; - padding: 23px 0px; +h2 { + font-size: 1.8rem; } -.flex-container { +h3 { + font-size: 1.3rem; +} + +body { + font-size: 1rem; + /* overflow-x: hidden; */ +} + +.screen-fit-center { + margin: 5vw; + min-width: 90vw; + min-height: 90vh; display: flex; - justify-content: space-around; - flex-wrap: wrap; + align-content: center; + justify-content: center; } -.flex-item{ - padding: 10px; -} \ No newline at end of file +.button { + margin-top: 20px; +} + +.button a { + display: inline-block; + padding: 12px; + border: 3px solid white; + border-radius: 16px; + transition: background-color 0.2s; +} + +.button a:hover { + background-color: white; +} diff --git a/icons/coder.ico b/icons/coder.ico new file mode 100644 index 0000000..55f69de Binary files /dev/null and b/icons/coder.ico differ diff --git a/index.html b/index.html index f36de31..6a2e403 100644 --- a/index.html +++ b/index.html @@ -4,277 +4,292 @@
- - + + - +