diff --git a/README.md b/README.md index 08197ff..7439fec 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # [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 @@ -9,6 +9,8 @@ - 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 index c702808..9076ce6 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,6 @@ @@ -33,6 +33,7 @@ + @@ -66,6 +67,11 @@

ThatStella7922

+

Your browser doesn't support backdrop effects which is why the background image isn't blurred or is hidden.

@@ -93,14 +99,25 @@
- -
-

About

- -
-

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.

-

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!

-
+ +
+
+

About

+

Projects

+
+ +
+
+

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.

+

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!

+
+ +
+

Battery Webhook 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 GitHub, it supports automations on iOS and macOS and is primed for a 1.0 release soon!

+

This landing page is another big project of mine, having been written from the ground up with pure 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 GitHub.

+

I also often work on smaller projects, like the code-side of my blog, my Discord bot called astral, and command-line uwuifying utility called uwufile.

+
+
@@ -123,13 +140,14 @@
diff --git a/landing-assets/contentview.js b/landing-assets/contentview.js new file mode 100644 index 0000000..fc71a0a --- /dev/null +++ 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"; +} \ No newline at end of file diff --git a/landing-styleshit.css b/landing-styleshit.css index be61f3b..fd4776d 100644 --- 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 */