BIG homepage update

nayakrujul · Feb 14, 2024 · f2c43be · f2c43be
1 parent 243bb8b
commit f2c43be
Show file tree

Hide file tree

Showing 12 changed files with 253 additions and 27 deletions.
diff --git a/Flashcards/index.html b/Flashcards/index.html
diff --git a/VTP6/index.html b/VTP6/index.html
diff --git a/balance_equation.svg b/balance_equation.svg
diff --git a/bg.jpeg b/bg.jpeg
diff --git a/flashcards.svg b/flashcards.svg
diff --git a/homepage.css b/homepage.css
@@ -0,0 +1,89 @@
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    margin: 0;
+    font-family: Helvetica, Arial, sans-serif;
+}
+
+h1#heading {
+    color: lightgray;
+    background-image: url("bg.jpeg");
+    text-align: center;
+    vertical-align: middle;
+    padding-top: 50vh;
+    padding-bottom: 50vh;
+    margin: 0;
+    font-size: 5rem;
+}
+
+h2.subheading {
+    text-align: center;
+    vertical-align: middle;
+    color: #084152;
+    font-size: 3rem;
+    padding-top: 15vh;
+    padding-bottom: 5vh;
+}
+
+div#header {
+    color: lightgray;
+    position: fixed;
+    width: 100%;
+    height: 4rem;
+    background-color: rgba(255, 255, 255, 0.0);
+}
+
+ul#header-list {
+    list-style: none;
+    position: absolute;
+    right: 20px;
+}
+
+ul#header-list li {
+    display: inline-block;
+    margin-right: 1rem;
+    margin-left: 1rem;
+    font-size: 1.5rem;
+}
+
+ul.list {
+    list-style: none;
+    text-align: center;
+    vertical-align: top;
+    padding-left: 0;
+}
+
+ul.list li {
+    display: inline-block;
+    padding: 5vw;
+}
+
+ul li strong.ul-header {
+    font-size: 2rem;
+}
+
+ul li strong.ul-header a {
+    font-style: normal;
+}
+
+ul li img.ul-image {
+    padding-top: 1rem;
+    height: 5rem;
+}
+
+ul li p.ul-description {
+    width: 25vw;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+    font-style: italic;
+}
+
+a:hover {
+    filter: brightness(1.2);
+    text-decoration: underline;
+}
diff --git a/homepage.js b/homepage.js
@@ -0,0 +1,24 @@
+const div = document.getElementById("header");
+
+const hx = window.innerHeight * 0.95;
+const hy = window.innerHeight * 1.1;
+
+function scrolled() {
+    let px = window.scrollY;
+    console.log(px);
+    if (px >= hx) {
+        let a = (px - hx) / (hy - hx);
+        div.style.backgroundColor = `rgba(255, 255, 255, ${a})`;
+        let r = 1 + 210 * (1 - a);
+        let g = 97 + 114 * (1 - a);
+        let b = 109 + 102 * (1 - a);
+        div.style.color = `rgb(${r}, ${g}, ${b})`;
+    } else {
+        div.style.backgroundColor = `rgba(255, 255, 255, 0.0)`;
+        div.style.color = `lightgray`;
+    }
+}
+
+document.addEventListener("scroll", scrolled);
+
+scrolled();
diff --git a/index.html b/index.html
@@ -2,24 +2,82 @@
 
 <html>
     <head>
-        <link rel="stylesheet" href="./main.css">
+        <link rel="stylesheet" href="./homepage.css">
 
         <link rel="icon" type="image/png" href="./logo.png"/>
         <meta property="og:image" content="./logo.png" />
         <meta property="og:image:width" content="1200" />
         <meta property="og:image:height" content="1200" />
 
-        <title>nayakrujul</title>
+        <title>Rujul Nayak</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="description" content="Welcome to my website!">
     </head>
 
     <body>
-        <h1>Websites that I've created:</h1>
-        <ul>
-            <li><a href="./CompSci/">Computer Science Revision</a></li>
-            <li><a href="./VTP6/">Vocabulary Testing Program 6</a></li>
-            <li><a href="./Flashcards/">Flashcards</a></li>
+
+        <div id="header">
+            <ul id="header-list">
+                <li><a href="#heading">Home</a></li>
+                <li><a href="#python">Python Projects</a></li>
+                <li><a href="#websites">Websites</a></li>
+            </ul>
+        </div>
+
+        <h1 id="heading">RUJUL NAYAK</h1>
+
+        <h2 id="python" class="subheading">Python Projects</h2>
+
+        <ul class="list">
+            <li>
+                <strong class="ul-header"><a href="https://github.com/Thunno/Thunno2">Thunno 2</a></strong> <br />
+                <a href="https://thunno2.rujulnayak.com/"><img src="./thunno_logo.svg" class="ul-image" /></a>
+                <p class="ul-description">Thunno 2 is a very concise code-golfing programming language that I made in 2023. It has 21 stars on GitHub and over 25,000 downloads on PyPI.</p>
+            </li>
+            <li>
+                <strong class="ul-header"><a href="https://github.com/nayakrujul/balance-equation">Balance Equation</a></strong> <br />
+                <a href="https://github.com/nayakrujul/balance-equation"><img src="./balance_equation.svg" class="ul-image" /></a>
+                <p class="ul-description">Balance Equation is a library that I wrote in 2022 to help me with my Chemistry homework. Given a chemical reaction equation, it will balance it using brute-force.</p>
+            </li>
         </ul>
+
+        <ul class="list">
+            <li>
+                <strong class="ul-header"><a href="https://github.com/nayakrujul/plot-on-the-go">Plot On The Go</a></strong> <br />
+                <a href="https://github.com/nayakrujul/plot-on-the-go"><img src="./plot_on_the_go.svg" class="ul-image" /></a>
+                <p class="ul-description">Plot On The Go is a Python library which I created in 2022. It plots a graph while the data is being created so you don't have to wait for all the results to come in.</p>
+            </li>
+            <li>
+                <strong class="ul-header"><a href="https://github.com/nayakrujul/python-scripts">Python Scripts</a></strong> <br />
+                <a href="https://github.com/nayakrujul/python-scripts"><img src="./python_scripts.svg" class="ul-image" /></a>
+                <p class="ul-description">Python Scripts is a collection of Python programs that I wrote between 2019 and 2022. It includes all sorts of programs, from image manipulation to games.</p>
+            </li>
+        </ul>
+
+        <h2 id="websites" class="subheading">Websites</h2>
+
+        <ul class="list">
+            <li>
+                <strong class="ul-header"><a href="https://vtp6.rujulnayak.com/">VTP6</a></strong> <br />
+                <a href="https://github.com/vtp6/vtp6.github.io"><img src="./vtp6.svg" class="ul-image" /></a>
+                <p class="ul-description">VTP6 is an online platform that I created in 2023 to help language students learn vocabulary.</p>
+            </li>
+            <li>
+                <strong class="ul-header"><a href="https://flashcards.rujulnayak.com/">Flashcards</a></strong> <br />
+                <a href="https://github.com/flashcards7/flashcards7.github.io"><img src="./flashcards.svg" class="ul-image" /></a>
+                <p class="ul-description">Flashcards is a website that I created in 2023. It contains activities for Maths, Biology, and Physics.</p>
+            </li>
+        </ul>
+
+        <ul class="list">
+            <li>
+                <strong class="ul-header"><a href="https://rujulnayak.com/CompSci/">Computer Science Revision</a></strong> <br />
+                <a href="https://github.com/nayakrujul/nayakrujul.github.io/tree/main/CompSci"><img src="./CompSci/icons/logo.svg" class="ul-image" /></a>
+                <p class="ul-description">Computer Science Revision is a revision guide I created in 2024 to help GCSE Computer Science students.</p>
+            </li>
+        </ul>
+
+        <script src="./homepage.js"></script>
+
     </body>
 </html>
diff --git a/plot_on_the_go.svg b/plot_on_the_go.svg
diff --git a/python_scripts.svg b/python_scripts.svg
diff --git a/thunno_logo.svg b/thunno_logo.svg
diff --git a/vtp6.svg b/vtp6.svg