Add a Projects view with major site changes

This required many changes to my CSS and the creation of a new ContentView handler written in JavaScript.
ThatStella7922 · Nov 28, 2023 · 548e225 · 548e225
1 parent 7435e7c
commit 548e225
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -1,14 +1,16 @@
 # [Stella's Landing Site](https://thatstel.la)
-- Index HTML v2023.1128.1
+- Index HTML v2023.1128.2
   - Main page structure
-- Stylesheet v2023.1128.1
+- Stylesheet v2023.1128.2
   - Styling, blurs, layout
 - Quotes JavaScript v2023.0822.0
   - Handles quotes text under the nav buttons, sometimes does other messages
 - EDR JavaScript v2023.0918.3
   - Doesn't do anything useful and instead lets the user blind themselves
 - Cat JavaScript v2023.1030.1
   - Handles showing the cat video on the website
+- ContentView JavaScript v2023.1128.2
+  - Allows the user to switch between the different views on the site
 - .htaccess v2023.0411.0
   - Rewrites `http://thatstel.la/mailto.html` to a mailto: URI (could be done better but this works)
 - IMG4036.jpg

diff --git a/index.html b/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!-- Stella's Landing Site 
-v2023.1128.1
+v2023.1128.2
 
 https://github.com/ThatStella7922/landing
 
@@ -12,7 +12,7 @@
   <head>
     <meta charset="utf-8">
     <title>Stella's Landing Site</title>
-    <link rel="stylesheet" href="//files.thatstel.la/hidden/css/landing-styleshit.css?version=202311281">
+    <link rel="stylesheet" href="//files.thatstel.la/hidden/css/landing-styleshit.css?version=202311282">
     <!--<link rel="stylesheet" href="landing-styleshit.css">-->
  	<link rel="shortcut icon" href="landing-assets/favicon.ico" type="image/x-icon">
  	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi, viewport-fit=cover"/>
@@ -33,6 +33,7 @@
 	<script src="landing-assets/quotes.js?version=202308220"></script>
 	<script src="landing-assets/edr.js?version=202309182"></script>
 	<script src="landing-assets/cat.js?version=202311190"></script>
+	<script src="landing-assets/contentview.js?version=202311282"></script>
 
  	<!-- Fonts --> 	
  	<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -66,6 +67,11 @@
   				<p id="displayname" onclick="promptShowCat()">ThatStella7922</p>
   			</div>
 
+			<noscript>
+				<div id="noscript-warning">
+					<p>JavaScript is disabled on your browser. This site requires JavaScript for proper functionality.</p>
+				</div>
+			</noscript>
   			<p id="backdrop-warning">Your browser doesn't support backdrop effects which is why the background image isn't blurred or is hidden.</p>
 
   			<div id="horizontalcontainer">
@@ -93,14 +99,25 @@
   						</div>
   					</div>
   				</div>
-
-  				<div id="about">
-  					<p id="about-heading" class="edr-low">About</p>
-
-  					<div id="about-text">
-  						<p>Hey everyone, my name is Stella. I'm a passionate technology enthusiast, working with all sorts of tech. From PHP, Python, Swift and more languages to installing Windows on Android phones, to doing amateur audio mixing, I do a bit of everything. I also enjoy working with hardware and networking, having built several PCs, designing small electronics projects of my own and hosting my own services on a home server.</p>
-  						<p>My main goal is to help improve other people's lives, and I enjoy creating new things and meeting new people. Consider joining Fruitycord to talk to me and meet some of the great people I've met along my journey!</p>
-  					</div>
+
+  				<div id="contentview-container">
+					<div id="contentview-headings">
+  						<p id="contentview-about-heading" class="edr-low contentview-selected" onclick="selectItem('contentview-about')">About</p>
+						<p id="contentview-projects-heading" class="edr-low contentview-selected" onclick="selectItem('contentview-projects')">Projects</p>
+					</div>
+
+					<div id="contentview-items">
+						<div id="contentview-about-content">
+							<p>Hey everyone, my name is Stella. I'm a passionate technology enthusiast, working with all sorts of tech. From PHP, Python, Swift and more languages to installing Windows on Android phones, to doing amateur audio mixing, I do a bit of everything. I also enjoy working with hardware and networking, having built several PCs, designing small electronics projects of my own and hosting my own services on a home server.</p>
+							<p>My main goal is to help improve other people's lives, and I enjoy creating new things and meeting new people. Consider joining Fruitycord to talk to me and meet some of the great people I've met along my journey!</p>
+						</div>
+
+						<div id="contentview-projects-content">
+							<p><a href="https://software.thatstel.la/software/crossplatform-apps/battery-webhook">Battery Webhook</a> is my flagship project, allowing you to send your battery info to popular services using webhooks. It's a modern Swift+SwiftUI app built from the ground up with source available on <a href="https://github.com/ThatStella7922/battery-webhook">GitHub</a>, it supports automations on iOS and macOS and is primed for a 1.0 release soon!</p>
+							<p><b>This landing page</b> is another big project of mine, having been written from the ground up with <b>pure</b> HTML, CSS and JavaScript. It's the most performant and lightweight webpage I've ever made, and retains its functionality on legacy devices. It has documentation and source available on <a href="https://github.com/ThatStella7922/landing">GitHub</a>.</p>
+							<p>I also often work on smaller projects, like the code-side of my <a href="https://github.com/ThatStella7922/blog">blog</a>, my Discord bot called <a href="https://github.com/ThatStella7922/astral">astral</a>, and command-line uwuifying utility called <a href="https://github.com/ThatStella7922/uwufile">uwufile</a>.</p>
+						</div>
+					</div>
   				</div>  	
 
   				<div id="catvideo">
@@ -123,13 +140,14 @@
 
   	<footer>
   		<div id="footer-sidebyside">
-  			<p onclick="manualSetQuotesText()">ThatStella7922 - v2023.1128.1</p>
+  			<p onclick="manualSetQuotesText()">ThatStella7922 - v2023.1128.2</p>
   			<p class="edr-max" id="edr-enable" onclick="promptSetMaxEDRBrightness()"><strong>EDR Supported</strong></sub></p> <!-- only visible on EDR displays in WebKit -->
   		</div>
   	</footer>
 
   </body>
   <script>
+	setupInitialContentView()
   	setQuotesText()
   	twemoji.parse(document.body)
   </script>

diff --git a/landing-assets/contentview.js b/landing-assets/contentview.js
@@ -0,0 +1,48 @@
+/* 
+ThatStella7922 Landing Website ContentView
+
+This allows the user to switch between the different views (About, Projects) on the site
+
+v2023.1128.2
+*/
+
+// about is to be selected by default so hide the projects item
+function setupInitialContentView() {
+    document.getElementById('contentview-projects-content').style.display = "none";
+    document.getElementById('contentview-projects-heading').classList.remove('contentview-selected');
+    document.getElementById('contentview-projects-heading').classList.add('contentview-notselected');
+}
+
+const headingElements = [
+    "contentview-about-heading",
+    "contentview-projects-heading",
+];
+
+const contentElements = [
+    "contentview-about-content",
+    "contentview-projects-content",
+];
+
+/*
+Supply a base name, like contentview-about and the function will control the
+contentview-about-heading and contentview-about-content automatically
+*/
+function selectItem(elementID) {    
+    // deselect all header items
+    headingElements.forEach(function (item, index) {
+        document.getElementById(item).classList.remove('contentview-selected');
+        document.getElementById(item).classList.add('contentview-notselected');
+    });
+
+    // hide all content items
+    contentElements.forEach(function (item, index) {
+        document.getElementById(item).style.display = "none";
+    });
+
+    // select the passed header item
+    document.getElementById(elementID + '-heading').classList.remove('contentview-notselected');
+    document.getElementById(elementID + '-heading').classList.add('contentview-selected');
+
+    // show the passsed content item
+    document.getElementById(elementID + '-content').style.display = "block";
+}
diff --git a/landing-styleshit.css b/landing-styleshit.css
@@ -3,7 +3,7 @@ ThatStella7922 Landing Website Stylesheet
 
 mreowww :3
 
-v2023.1128.1
+v2023.1128.2
 */
 
 /* small css reset because something was causing issues and im too dumb to figure out what it was */
@@ -26,6 +26,7 @@ body {
 
 a {
     color: #e872e2;
+    font-weight: bold;
 }
 
 p {
@@ -141,22 +142,35 @@ Links Styling
 
 /*
 
-About Styling
+Contentview Styling
 
 */
-/* Maximum width for the about div */
-/* This is done so that the about section doesn't span across the entire width of the viewport in the case of a wide viewport */
-#master #verticalcontainer #about #about-text {
+#master #verticalcontainer #contentview-container {
+    display: grid;
+}
+/* Maximum width for the contentview div */
+/* This is done so that the contentview section doesn't span across the entire width of the viewport in the case of a wide viewport */
+#master #verticalcontainer #contentview-container #contentview-items {
     max-width: 600px;
     display: inline-block;
 }
-/* Styling for the about heading */
-#master #verticalcontainer #about #about-heading {
+/* Styling for all contentview headings */
+#master #verticalcontainer #contentview-container #contentview-headings  {
     margin-top: 7vh;
     font-size: 18px;
+    display: block;
+}
+/* Styling for not selected contentview headings */
+#master #verticalcontainer #contentview-container #contentview-headings .contentview-notselected {
+    font-weight: lighter;
+    cursor: pointer;
+    color:#b4b4b4
+}
+#master #verticalcontainer #contentview-container #contentview-headings .contentview-selected {
     font-weight: bold;
+    cursor: normal;
+    color: #FFFFFF;
 }
-
 /*
 
 Cat Video Styling
@@ -270,7 +284,7 @@ img.emoji {
         max-width: 50vw;
         padding-right: 15px;
     }
-    #master #verticalcontainer #horizontalcontainer #about {
+    #master #verticalcontainer #horizontalcontainer #contentview-container {
         max-width: 50vw;
         padding-right: 15px;
     }
@@ -284,14 +298,13 @@ img.emoji {
     #master #verticalcontainer #textabovelinks {
         margin-top: 5vh;
     }
-    #master #verticalcontainer #horizontalcontainer #about {
-        margin-bottom: 5vh;
-    }
 
     /* Left align the about heading on big screens */
-    #master #verticalcontainer #about #about-heading {
+    #master #verticalcontainer #contentview-container #contentview-headings,
+    #master #verticalcontainer #contentview-container #contentview-headings #contentview-about-heading,
+    #master #verticalcontainer #contentview-container #contentview-headings #contentview-projects-heading {
         margin-top: 0;
-        text-align: left;
+        display: flex;
     }
 
     /* Allow elements in the footer to sit side by side */