From 4cbc0b526f0c129ac61c5866cdf7a4655db1b7ec Mon Sep 17 00:00:00 2001 From: Rushil Umaretiya Date: Tue, 16 Mar 2021 14:07:00 -0500 Subject: [PATCH] feat: fixed mobile view --- public/css/style.css | 754 +++++++++++++++++++++++-------------------- public/index.html | 346 ++++++++++++++------ 2 files changed, 641 insertions(+), 459 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index af05ba4..170334e 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,30 +1,30 @@ @import url("https://fonts.googleapis.com/css?family=Great+Vibes"); ::-webkit-scrollbar { - width: 10px; + width: 10px; } ::-webkit-scrollbar-track { - background-image: linear-gradient(to top, #bdc3c7, #2c3e50) + background-image: linear-gradient(to top, #bdc3c7, #2c3e50); } ::-webkit-scrollbar-thumb { - background-image: linear-gradient(#8e9eab, #eef2f3); - /*(#0f2027, #203a43, #2c5364*/ - /*(#c6ffdd, #fbd786, #f7797d*/ + background-image: linear-gradient(#8e9eab, #eef2f3); + /*(#0f2027, #203a43, #2c5364*/ + /*(#c6ffdd, #fbd786, #f7797d*/ } ::-webkit-scrollbar-thumb:hover { - background: #555; + background: #555; } * { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } html { - height: 100%; + height: 100%; } .preload * { @@ -35,80 +35,79 @@ html { } body { - cursor: default; - overflow-x: hidden; + cursor: default; + overflow-x: hidden; } @font-face { - font-family: gothamBold; - src: url("fonts/Gotham-Bold.otf"); + font-family: gothamBold; + src: url("fonts/Gotham-Bold.otf"); } @font-face { - font-family: sansThin; - src: url("fonts/Sans-Thin.otf"); + font-family: sansThin; + src: url("fonts/Sans-Thin.otf"); } @font-face { - font-family: futuraLight; - src: url("fonts/futura-pt-light.otf"); + font-family: futuraLight; + src: url("fonts/futura-pt-light.otf"); } header { - background-color: #000; - margin: 0 0; - text-align: center; + background-color: #000; + margin: 0 0; + text-align: center; } nav { - transform: translateY(-70px); - color: #0d0d0d; - animation: nav-wipe 0.75s ease-in-out forwards; - animation-delay: 5s; + transform: translateY(-70px); + color: #0d0d0d; + animation: nav-wipe 0.75s ease-in-out forwards; + animation-delay: 5s; } @keyframes nav-wipe { - 0% { - transform: translateY(-70px); - } + 0% { + transform: translateY(-70px); + } - 100% { - transform: translateY(0px); - } + 100% { + transform: translateY(0px); + } } nav li { - list-style: none; - display: inline-block; - margin: 20px 60px; - background: #000; - border-color: #000; + list-style: none; + display: inline-block; + margin: 20px 60px; + background: #000; + border-color: #000; } nav a { - color: #FFFFFF; - background: #000; - text-decoration: none; - text-transform: uppercase; - font-family: sansThin; - letter-spacing: 1px; - font-weight: 500; - font-size: 150%; - cursor: pointer; - text-align: center; - padding: 8px; - outline: 1px solid #000; - transition: outline 2s; - -webkit-transition: outline 2s; - + color: #ffffff; + background: #000; + text-decoration: none; + text-transform: uppercase; + font-family: sansThin; + letter-spacing: 1px; + font-weight: 500; + font-size: 150%; + cursor: pointer; + text-align: center; + padding: 8px; + outline: 1px solid #000; + transition: outline 2s; + -webkit-transition: outline 2s; } nav a:hover { - outline: 1px solid #fff; + outline: 1px solid #fff; } .bottom-padding { - padding-bottom: 20px + padding-bottom: 20px; } .menu-container { @@ -116,7 +115,9 @@ nav a:hover { cursor: pointer; } -.bar1, .bar2, .bar3 { +.bar1, +.bar2, +.bar3 { width: 35px; height: 5px; background-color: #fff; @@ -133,7 +134,9 @@ nav a:hover { transform: rotate(-45deg) translate(-9px, 6px); } -.change .bar2 {opacity: 0;} +.change .bar2 { + opacity: 0; +} .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); @@ -141,478 +144,521 @@ nav a:hover { } .divider { - color: #000; - font-size: 200%; - position: fixed; - bottom: 2px; - right: -75px; - display: inline-block; + color: #000; + font-size: 200%; + position: fixed; + bottom: 2px; + right: -75px; + display: inline-block; } #landing-section { - padding: 0; - background-image: url(res/header-background.jpg); - background-attachment: fixed; - background-size: cover; - position: relative; + padding: 0; + background-image: url(res/header-background.jpg); + background-attachment: fixed; + background-size: cover; + position: relative; } .FrontPageHeaderText { - color: #1ED760; - font-family: gothamBold; - font-size: 200%; - padding: 12px; - + color: #1ed760; + font-family: gothamBold; + font-size: 200%; + padding: 12px; } @keyframes wipe-right { - 0% { - transform: translateX(-400px); - } + 0% { + transform: translateX(-400px); + } - 100% { - transform: translateX(0px); - } + 100% { + transform: translateX(0px); + } } @-webkit-keyframes wipe-right { - 0% { - transform: translateX(-400px); - } + 0% { + transform: translateX(-400px); + } - 100% { - transform: translateX(0px); - } + 100% { + transform: translateX(0px); + } } @keyframes wipe-left { - 0% { - transform: translateX(400px); - } + 0% { + transform: translateX(400px); + } - 100% { - transform: translateX(0px); - } + 100% { + transform: translateX(0px); + } } @-webkit-keyframes wipe-left { - 0% { - transform: translateX(400px); - } + 0% { + transform: translateX(400px); + } - 100% { - transform: translateX(0px); - } + 100% { + transform: translateX(0px); + } } - #TopLeftHeader { - animation: wipe-right 1s forwards; - animation-delay: 4s; - transition-delay: 4s; - transform: translateX(-400px); - overflow: hidden; + animation: wipe-right 1s forwards; + animation-delay: 4s; + transition-delay: 4s; + transform: translateX(-400px); + overflow: hidden; } #BottomRightHeader { - position: absolute; - right: 0; - bottom: 0; - text-align: right; - transform: translateX(400px); - animation: wipe-left 1s forwards; - animation-delay: 4s; - + position: absolute; + right: 0; + bottom: 0; + text-align: right; + transform: translateX(400px); + animation: wipe-left 1s forwards; + animation-delay: 4s; } #headerTitleText { - margin: 0; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 300%; - - animation: cursor-blink 0.5s infinite alternate, typing-anim 3s steps(14); - overflow: hidden; - white-space: nowrap; - border-right: 3px solid #1ED760; + margin: 0; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 300%; + + animation: cursor-blink 0.5s infinite alternate, typing-anim 3s steps(14); + overflow: hidden; + white-space: nowrap; + border-right: 3px solid #1ed760; } @keyframes typing-anim { - from { - width: 0px; - } + from { + width: 0px; + } - to { - width: 350px; - } + to { + width: 350px; + } } @-webkit-keyframes typing-anim { - from { - width: 0ch; - } + from { + width: 0ch; + } - to { - width: 14ch; - } + to { + width: 14ch; + } } @-webkit-keyframes typing-anim { - from { - width: 0ch; - } + from { + width: 0ch; + } - to { - width: 14ch; - } + to { + width: 14ch; + } } @-webkit-keyframes cursor-blink { - from { - border-color: transparent; - } + from { + border-color: transparent; + } - to { - border-color: #1ED760; - } + to { + border-color: #1ed760; + } } #titleToQuote { - border: 2px solid #000; - background-color: transparent; - color: #000; - padding: 14px 28px; - font-size: 16px; - font-family: gothamBold; - cursor: pointer; - border-color: #1ED760; - color: #1ED760; - border-radius: 50px; - position: absolute; - top: 60%; - left: 50%; - transform: translate(-50%, -50%); + border: 2px solid #000; + background-color: transparent; + color: #000; + padding: 14px 28px; + font-size: 16px; + font-family: gothamBold; + cursor: pointer; + border-color: #1ed760; + color: #1ed760; + border-radius: 50px; + position: absolute; + top: 60%; + left: 50%; + transform: translate(-50%, -50%); } #titleToQuote a { - text-decoration: none; - color: #1ED760 + text-decoration: none; + color: #1ed760; } .body-sections { - height: 100vh; - overflow-x: hidden; + height: 100vh; + overflow-x: hidden; } .navbarLogo { - font-family: courier; - padding: 8px; - color: #fff; - display: inline-block; - border: 2px solid #fff; - margin-top: 8px; - cursor: default; + font-family: courier; + padding: 8px; + color: #fff; + display: inline-block; + border: 2px solid #fff; + margin-top: 8px; + cursor: default; } - - #aboutMeQuote { - font-family: 'Great Vibes', cursive; - height: 50%; - font-weight: 10; - font-size: 500%; - margin: 0; - position: relative; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - text-align: center; - clear: both; - - + font-family: "Great Vibes", cursive; + height: 50%; + font-weight: 10; + font-size: 500%; + margin: 0; + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + clear: both; } #quoteByline { - color: #ff1493; - font-size: 50%; - font-family: sansThin; - font-size: 10; - + color: #ff1493; + font-size: 50%; + font-family: sansThin; + font-size: 10; } .relativePos { - position: relative; + position: relative; } .quoteToAbout { - width: 100%; - padding-top: 10px; - margin: 0 auto; - text-align: center; - cursor: pointer; + width: 100%; + padding-top: 10px; + margin: 0 auto; + text-align: center; + cursor: pointer; } .quoteToAbout:after { - content: ""; - width: 40px; - height: 40px; - display: inline; - margin: auto; - position: absolute; - border-right: 1px solid #000; - border-bottom: 1px solid #000; + content: ""; + width: 40px; + height: 40px; + display: inline; + margin: auto; + position: absolute; + border-right: 1px solid #000; + border-bottom: 1px solid #000; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - -webkit-animation: 3s arrow infinite ease; - animation: 3s arrow infinite ease; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-animation: 3s arrow infinite ease; + animation: 3s arrow infinite ease; } @-webkit-keyframes arrow { + 0%, + 100% { + top: 50px; + } - 0%, - 100% { - top: 50px; - } - - 50% { - top: 80px; - } + 50% { + top: 80px; + } } @keyframes arrow { + 0%, + 100% { + top: 50px; + } - 0%, - 100% { - top: 50px; - } - - 50% { - top: 80px; - } + 50% { + top: 80px; + } } #about-section { - background-color: #F7CAD5; - color: #1a1a1a; - height: 100%; + background-color: #f7cad5; + color: #1a1a1a; + height: 100%; } #about-header { - font-family: sansThin; - position: relative; - font-size: 300%; - padding-top: 30px; - padding-bottom: 30px; - height: 10px; - text-align: center; - font-weight: lighter; - + font-family: sansThin; + position: relative; + font-size: 300%; + padding-top: 30px; + padding-bottom: 30px; + height: 10px; + text-align: center; + font-weight: lighter; } #about-header span { - position: relative; - display: block; - width: 40px; - height: 2px; - background: #1a1a1a; - left: 40%; - transform: translate(50%, 0%); - transition: left 2s; + position: relative; + display: block; + width: 40px; + height: 2px; + background: #1a1a1a; + left: 40%; + transform: translate(50%, 0%); + transition: left 2s; } #about-header:hover span { - left: 55%; + left: 55%; } #about-subheader { - font-family: sansThin; - height: 20px; - width: 100%; - text-align: center; - padding: 16px; - + font-family: sansThin; + height: 20px; + width: 100%; + text-align: center; + padding: 16px; } #about-row { - display: flex; - justify-content: center; - text-align: justify; - align-items: center; - font-family: futuraLight, Helvetica, Arial, sans-serif; - margin: 0px; - overflow-x: hidden; + display: flex; + justify-content: center; + text-align: justify; + align-items: center; + font-family: futuraLight, Helvetica, Arial, sans-serif; + margin: 0px; + overflow-x: hidden; } #about-row > div { - padding-left: 25px; - padding-right: 25px; - padding-top: 20px; - width: 450px; - height: 600px; - position: relative; + padding-left: 25px; + padding-right: 25px; + padding-top: 20px; + width: 450px; + height: 600px; + position: relative; } #first-letter { - font-size: 40px; - border: .5px #000 solid; + font-size: 40px; + border: 0.5px #000 solid; } #secret-link { - text-decoration: none; - color: #000; + text-decoration: none; + color: #000; } .about-link { - text-decoration: none; - color: #000; + text-decoration: none; + color: #000; } .about-link:hover { - text-decoration: underline; + text-decoration: underline; } #secret-link:hover { - cursor: pointer; + cursor: pointer; } - #photo-column { - border: 2px solid #000; - padding: 20px; - transition: border .5s; + border: 2px solid #000; + padding: 20px; + transition: border 0.5s; } #photo-column:hover { - border: 4px solid #000; + border: 4px solid #000; } #text-column1 { - border-right: 1px solid #000; + border-right: 1px solid #000; } #contact-section { - margin-left: 200px; - background-color: #fdfd96; - margin-right: 200px; + margin-left: 200px; + background-color: #fdfd96; + margin-right: 200px; } #hr-contact { - margin-top: 4rem; - margin-bottom: 6rem; - - border-width: 0; - border-top: 2px solid #000; - width: 40px; - text-align: left; + margin-top: 4rem; + margin-bottom: 6rem; + border-width: 0; + border-top: 2px solid #000; + width: 40px; + text-align: left; } #contact-link { - font-family: sansThin; - font-size: 250%; - letter-spacing: 1.5px; - margin-bottom: 12rem; + font-family: sansThin; + font-size: 250%; + letter-spacing: 1.5px; + margin-bottom: 12rem; } #about-signature { - font-size: 20px; - font-family: monospace; - text-transform: lowercase; - font-weight: 100; - padding: 5px; + font-size: 20px; + font-family: monospace; + text-transform: lowercase; + font-weight: 100; + padding: 5px; } footer { - height: 200px; - background-color: #414141; - padding-left: 200px; - padding-right: 200px; + height: 200px; + background-color: #414141; + padding-left: 200px; + padding-right: 200px; } #hr-footer { - margin-top: 3rem; - margin-bottom: 3rem; - background-color: pink; + margin-top: 3rem; + margin-bottom: 3rem; + background-color: pink; } .icons { - display: block; - top: -50%; - transform: translateY(-50%); - width: 50px; - height: 50px; - background-size: 50px 50px; - margin-right: 20px; - float: left; + display: block; + top: -50%; + transform: translateY(-50%); + width: 50px; + height: 50px; + background-size: 50px 50px; + margin-right: 20px; + float: left; } .copyright { - color: #E5E5E5; - font-family: futuraLight; + color: #e5e5e5; + font-family: futuraLight; } #footer-name-link { - color: inherit; - text-decoration: none; - transition: color .5s; + color: inherit; + text-decoration: none; + transition: color 0.5s; } #footer-name-link:hover { - color: #F7CAD5; + color: #f7cad5; } .toggle { - width: 100%; - padding: 10px 20px; - background: inherit; - text-align: right; - box-sizing: border-box; - color: #fff; - font-size: 30px; - display: none; + width: 100%; + padding: 10px 20px; + background: inherit; + text-align: right; + box-sizing: border-box; + color: #fff; + font-size: 30px; + display: none; } .toggle .navbarLogo { - position: absolute; - left: 50%; - transform: translateX(-50%); - margin: auto auto; - margin: 0 auto; - font-size: 75%; + position: absolute; + left: 50%; + transform: translateX(-50%); + margin: auto auto; + margin: 0 auto; + font-size: 75%; } @media (max-width: 1250px) { - .toggle { - display: block; - } + .toggle { + display: block; + } - ul { - width: 100%; - display: none; - } + ul { + width: 100%; + display: none; + } - ul li { - display: block; - text-align: center; - } + ul li { + display: block; + text-align: center; + } - ul a + ul a .navbar-bot { + margin-bottom: 0px; + } - .navbar-bot { - margin-bottom: 0px; - } + ul .navbarLogo { + display: none; + } - ul .navbarLogo { - display: none; - } + .active { + display: block; + } - .active { - display: block; - } + #photo-column { + display: none; + } - #photo-column { - display: none; - } + #aboutMeQuote { + font-size: 350%; + } + + #about-subheader { + margin-bottom: 20px; + } + + #about-row { + text-align: left; + } + + #contact-section { + margin-left: 20%; + background-color: inherit; + } + + #contact-section hr { + margin-bottom: 20%; + } + + footer { + height: 200px; + background-color: #414141; + padding: 5px; + } + + #hr-footer { + margin: 0; + display: none; + } + + .icons { + display: block; + top: -50%; + transform: translateY(-50%); + width: 50px; + height: 50px; + background-size: 50px 50px; + margin-top: 50px; + margin-right: 20px; + float: left; + } + + .copyright { + color: #e5e5e5; + font-family: futuraLight; + } + + #footer-name-link { + color: inherit; + text-decoration: none; + transition: color 0.5s; + } + + #footer-name-link:hover { + color: #f7cad5; + } } diff --git a/public/index.html b/public/index.html index d45bc55..1538e00 100644 --- a/public/index.html +++ b/public/index.html @@ -1,113 +1,249 @@ + + + + - - - - + + + + + + + + + + Welcome to CrucialNET + + + - - - - - - - - - - Welcome to CrucialNET - - - - - - - -
- - -
-
-

-

Hi,
I'm Rushil

-
-

And this
is not my website.

-
- - -
-
-
-
-

"The difference between genius and stupidity, is genius has its limits" - Albert Einstein

-
-
+ + + +
+ +
+
+

+

+ Hi,
+ I'm Rushil +

+
+

+ And this
+ is not my website. +

+
+ +
+
+
+
+

+ "The difference between genius and stupidity, is genius has its + limits" - Albert Einstein +

+
+
+
+
+
+

Divulgence (n.)

+

+ 1. To make known
+ 2. To proclaim publicly +

+
+
+ +
+
+ H i! I'm Rushil Umaretiya, sole + proprietor of CrucialNET. Welcome to my eponymous abode, I spent quite + a while working on this, so my Dad said that it should be good, or I'd + get a थप्पड़. Let's start from the beginning, I’m in 4th grade and I + have some great neighbors who are willing to teach me and a bunch of + other 4th graders Scratch, a block based graphic language that is used + to teach the basics of computer programming, such as basic loops and + if/else statements. By 5th grade I'm fluent in Scratch, and I + want + to learn more, so like any other normal 5th grader I take a 8-week + course in web development. I decide that making websites is fun, but + there is more, so as I delve further into coding in my free time, I + decide that learning Java would be a could next step, so I return to + my neighbors who teach me Java through Minecraft modding (It kept my + 10 year-old mind occupied). With a foothold in Java I create some + really cool Minecraft things, and decide that the best course of + action would be learning more languages, and even though I realized + that it would be quite the while before I was able to anything + substantial with this newfound knowledge I knew that learning how to + code teaches one how to think, and I would be more than ready when the + time came to use my knowledge. So I kept learning, and taking more and + more in: from the simplicity of Ruby to the depths of SQL. By this + time I was in 7th grade, and I was realizing that the workload was + catching up. I quickly realized that some of my peers were taken by + surprise, slowly falling behind, while others seemed ready for this + for years. This left me completely disheartened, and I realized that + the one-size-fits-all mindset of the American education system was + leaving too many people behind. So I decided that I would finally + decide to do something about this, and began a completely free + tutoring service. +
+
+ Making it free was one of the things that really pushed it the extra + mile for me, allowing myself to give many students who weren’t + compatible with the learning system a second chance at showing their + strength, and not being able to harmonize with the static flow of the + current educational standards was nothing to be ashamed about, but + really just something that deserves a different point of view than + what was originally fed to the student, because there is no person + without potential to progress. I Currently I have 13 students who I + consult, some coming once a month to twice a week, ranging from + sophomore to 7th grade, on a myriad of subjects. And this becomes a + mutualistic relationship, because just as they are learning, so am I, + constantly, from new techniques to different perspectives on a + subject. And even through tutoring I was still able to indulge in my + other hobbies, especially Arduino, something I’ve always seen as too + difficult, but after getting a starter kit, it turned out to be pretty + simple, so I built myself an alarm clock, and then designed a audio + input to frequency board that I plugged into a LED strip creating a + stunning linear visualizer. Just as I’ve learned Arduino, I’ve also + learned a great deal about game development, mainly through Unity, and + created quite a few 2D and 3D games on multiple platforms. I am + currently working app development for my latest project, FromMeToYou + which you can read more about on The Archives, my personal blog, or + right here. + You’ve made it to the end! As a little secret if you click the + fifty-third word in this biography you can get a surprise. If you wish + to contact me for any reason whatsoever please do so at + r@crucialnet.org + or click here. + You can find my resume right + here or at the top + of the page, and I urge you to visit + my personal blog, The Archives, where I try to post as much as I can. I look forward + to making your acquaintance,
+
+
-Rushil +
+
+
-
-
-

Divulgence (n.)

-

1. To make known
2. To proclaim publicly

-
-
-
H i! I'm Rushil Umaretiya, sole proprietor of CrucialNET. Welcome to my eponymous abode, I spent quite a while working on this, so my Dad said that it should be good, or I'd get a थप्पड़. Let's start from the beginning, I’m in 4th grade and I have some great neighbors who are willing to teach me and a bunch of other 4th graders Scratch, a block based graphic language that is used to teach the basics of computer programming, such as basic loops and if/else statements. By 5th grade I'm fluent in Scratch, and I - want to learn more, so like any other normal 5th grader I take a 8-week course in web development. I decide that making websites is fun, but there is more, so as I delve further into coding in my free time, I decide that learning Java would be a could next step, so I return to my neighbors who teach me Java through Minecraft modding (It kept my 10 year-old mind occupied). With a foothold in Java I create some really cool Minecraft things, and decide that the best course of action would be learning more languages, and even though I realized that it would be quite the while before I was able to anything substantial with this newfound knowledge I knew that learning how to code teaches one how to think, and I would be more than ready when the time came to use my knowledge. So I kept learning, and taking more and more in: from the simplicity of Ruby to the depths of SQL. By this time I was in 7th grade, and I was realizing that the workload was catching up. I quickly realized that some of my peers were taken by surprise, slowly falling behind, while others seemed ready for this for years. This left me completely disheartened, and I realized that the one-size-fits-all mindset of the American education system was leaving too many people behind. So I decided that I would finally decide to do something about this, and began a completely free tutoring service. -
-
Making it free was one of the things that really pushed it the extra mile for me, allowing myself to give many students who weren’t compatible with the learning system a second chance at showing their strength, and not being able to harmonize with the static flow of the current educational standards was nothing to be ashamed about, but really just something that deserves a different point of view than what was originally fed to the student, because there is no person without potential to progress. I Currently I have 13 students who I consult, some coming once a month to twice a week, ranging from sophomore to 7th grade, on a myriad of subjects. And this becomes a mutualistic relationship, because just as they are learning, so am I, constantly, from new techniques to different perspectives on a subject. And even through tutoring I was still able to indulge in my other hobbies, especially Arduino, something I’ve always seen as too difficult, but after getting a starter kit, it turned out to be pretty simple, so I built myself an alarm clock, and then designed a audio input to frequency board that I plugged into a LED strip creating a stunning linear visualizer. Just as I’ve learned Arduino, I’ve also learned a great deal about game development, mainly through Unity, and created quite a few 2D and 3D games on multiple platforms. I am currently working app development for my latest project, FromMeToYou which you can read more about on The Archives, my personal blog, or right here. You’ve made it to the end! As a little secret if you click the fifty-third word in this biography you can get a surprise. If you wish to contact me for any reason whatsoever please do so at r@crucialnet.org or click here. You can find my resume right here or at the top of the page, and I urge you to visit my personal blog, The Archives, where I try to post as much as I can. I look forward to making your acquaintance,
-

-Rushil
-
-
- -
-
-

Let's Talk, r@crucialnet.org

-
- - - +
+
+

+ Let's Talk, + r@crucialnet.org +

+
+ +