From a7f2f23852aa9bad72e3970da47a3c7b728120a4 Mon Sep 17 00:00:00 2001
From: BusyBird15 <119532048+BusyBird15@users.noreply.github.com>
Date: Wed, 5 Jun 2024 11:17:01 -0400
Subject: [PATCH] New Portfolio page!

---
 index.html | 285 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 168 insertions(+), 117 deletions(-)
diff --git a/index.html b/index.html
index 00ae447..ae7757f 100644
--- a/index.html
+++ b/index.html
@@ -1,120 +1,171 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
+<!DOCTYPE HTML>
+<head>
     <title>BusyBird15</title>
-    <meta name="description" content="One site for everything I do!" />
-    <meta property="og:title" content="BusyBird15" />
-    <meta property="og:description" content="One site for everything I do!" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta charset="utf-8" />
-    <meta property="twitter:card" content="summary_large_image" />
-
-    <style data-tag="reset-style-sheet">
-      html {  line-height: 1.15;}body {  margin: 0;}* {  box-sizing: border-box;  border-width: 0;  border-style: solid;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6,figure,blockquote,figcaption {  margin: 0;  padding: 0;}button {  background-color: transparent;}button,input,optgroup,select,textarea {  font-family: inherit;  font-size: 100%;  line-height: 1.15;  margin: 0;}button,select {  text-transform: none;}button,[type="button"],[type="reset"],[type="submit"] {  -webkit-appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {  border-style: none;  padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus {  outline: 1px dotted ButtonText;}a {  color: inherit;  text-decoration: inherit;}input {  padding: 2px 4px;}img {  display: block;}html { scroll-behavior: smooth  }
-    </style>
-    <style data-tag="default-style-sheet">
-      html {
-        font-family: Inter;
-        font-size: 16px;
-      }
-
-      body {
-        font-weight: 400;
-        font-style:normal;
-        text-decoration: none;
-        text-transform: none;
-        letter-spacing: normal;
-        line-height: 1.15;
-        color: var(--dl-color-gray-black);
-        background-color: var(--dl-color-gray-white);
-
-      }
+
+    <!--Google Fonts stuff-->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+
+    <!--This for social icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <style>
+        body {
+            font-family: 'Poppins', sans-serif;
+            color: white;
+            max-width: 500px;
+            margin: auto;
+            background: linear-gradient(156deg, rgba(33,0,133,1) 0%, rgba(9,42,121,1) 29%, rgba(0,255,169,1) 100%);
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+            background-position: center;
+        }
+
+        .accordion {
+            background-color: rgb(0, 255, 242);
+            font-family: 'Poppins', sans-serif;
+            color: #131313;
+            cursor: pointer;
+            padding: 18px;
+            width: 100%;
+            text-align: left;
+            border: none;
+            outline: none;
+            transition: 0.4s;
+        }
+
+        .active, .accordion:hover {
+            background-color: rgb(0, 174, 255);
+        }
+
+        .panel {
+            padding: 0 18px;
+            background-color: rgb(255, 255, 255);
+            font-size: small;
+            max-height: 0;
+            color: #131313;
+            overflow: hidden;
+            transition: max-height 0.2s ease-out;
+        }
+        .othera {
+            color: rgb(202, 202, 202);
+        }
+        .fa {
+            padding: 5px;
+            font-size: 30px;
+            width: 30px;
+            text-align: center;
+            text-decoration: none;
+            color: black;
+            transition-duration: 0.3s;
+        }
+
+        .fa:hover {
+            opacity: 0.7;
+        }
     </style>
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&amp;display=swap"
-      data-tag="font"
-    />
-    <link rel="stylesheet" href="./style.css" />
-  </head>
-  <body>
-    <div>
-      <link href="./home.css" rel="stylesheet" />
-
-      <div class="home-container">
-        <header data-role="Header" class="home-header">
-          <a href="index.html" class="home-navlink">
-            <img
-              alt="BusyBird15"
-              src="https://avatars.githubusercontent.com/u/119532048?s=48&amp;v=4"
-              loading="eager"
-              class="home-image"
-            />
-          </a>
-          <div class="home-nav">
-            <a href="apps.html" class="home-navlink1">Apps</a>
-            <a href="tutorials.html" class="home-navlink2">Tutorials</a>
-            <a href="contact.html" class="home-navlink3">Contact</a>
-            <a href="about.html" class="home-navlink4">About Me</a>
-          </div>
-          <div class="home-btn-group"></div>
-          <div data-role="BurgerMenu" class="home-burger-menu">
-            <svg viewBox="0 0 1024 1024" class="home-icon">
-              <path
-                d="M128 554.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 298.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 810.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667z"
-              ></path>
-            </svg>
-          </div>
-          <div data-role="MobileMenu" class="home-mobile-menu">
-            <div class="home-nav1">
-              <div class="home-container1">
-                <img
-                  alt="image"
-                  src="https://presentation-website-assets.teleporthq.io/logos/logo.png"
-                  class="home-image1"
-                />
-                <div data-role="CloseMobileMenu" class="home-menu-close">
-                  <svg viewBox="0 0 1024 1024" class="home-icon02">
-                    <path
-                      d="M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z"
-                    ></path>
-                  </svg>
-                </div>
-              </div>
-              <nav
-                class="navigation-links-nav navigation-links-root-class-name11"
-              >
-                <span class="navigation-links-text"><span>About</span></span>
-                <span class="navigation-links-text1">
-                  <span>Features</span>
-                </span>
-                <span class="navigation-links-text2"><span>Pricing</span></span>
-                <span class="navigation-links-text3"><span>Team</span></span>
-                <span class="navigation-links-text4"><span>Blog</span></span>
-              </nav>
-            </div>
-            This site under construction!
-            <a href="WeatherRadar-githubedit.html">Weather Radar</a>
-            <div>
-              <svg viewBox="0 0 950.8571428571428 1024" class="home-icon04">
-                <path
-                  d="M925.714 233.143c-25.143 36.571-56.571 69.143-92.571 95.429 0.571 8 0.571 16 0.571 24 0 244-185.714 525.143-525.143 525.143-104.571 0-201.714-30.286-283.429-82.857 14.857 1.714 29.143 2.286 44.571 2.286 86.286 0 165.714-29.143 229.143-78.857-81.143-1.714-149.143-54.857-172.571-128 11.429 1.714 22.857 2.857 34.857 2.857 16.571 0 33.143-2.286 48.571-6.286-84.571-17.143-148-91.429-148-181.143v-2.286c24.571 13.714 53.143 22.286 83.429 23.429-49.714-33.143-82.286-89.714-82.286-153.714 0-34.286 9.143-65.714 25.143-93.143 90.857 112 227.429 185.143 380.571 193.143-2.857-13.714-4.571-28-4.571-42.286 0-101.714 82.286-184.571 184.571-184.571 53.143 0 101.143 22.286 134.857 58.286 41.714-8 81.714-23.429 117.143-44.571-13.714 42.857-42.857 78.857-81.143 101.714 37.143-4 73.143-14.286 106.286-28.571z"
-                ></path></svg
-              ><svg viewBox="0 0 877.7142857142857 1024" class="home-icon06">
-                <path
-                  d="M585.143 512c0-80.571-65.714-146.286-146.286-146.286s-146.286 65.714-146.286 146.286 65.714 146.286 146.286 146.286 146.286-65.714 146.286-146.286zM664 512c0 124.571-100.571 225.143-225.143 225.143s-225.143-100.571-225.143-225.143 100.571-225.143 225.143-225.143 225.143 100.571 225.143 225.143zM725.714 277.714c0 29.143-23.429 52.571-52.571 52.571s-52.571-23.429-52.571-52.571 23.429-52.571 52.571-52.571 52.571 23.429 52.571 52.571zM438.857 152c-64 0-201.143-5.143-258.857 17.714-20 8-34.857 17.714-50.286 33.143s-25.143 30.286-33.143 50.286c-22.857 57.714-17.714 194.857-17.714 258.857s-5.143 201.143 17.714 258.857c8 20 17.714 34.857 33.143 50.286s30.286 25.143 50.286 33.143c57.714 22.857 194.857 17.714 258.857 17.714s201.143 5.143 258.857-17.714c20-8 34.857-17.714 50.286-33.143s25.143-30.286 33.143-50.286c22.857-57.714 17.714-194.857 17.714-258.857s5.143-201.143-17.714-258.857c-8-20-17.714-34.857-33.143-50.286s-30.286-25.143-50.286-33.143c-57.714-22.857-194.857-17.714-258.857-17.714zM877.714 512c0 60.571 0.571 120.571-2.857 181.143-3.429 70.286-19.429 132.571-70.857 184s-113.714 67.429-184 70.857c-60.571 3.429-120.571 2.857-181.143 2.857s-120.571 0.571-181.143-2.857c-70.286-3.429-132.571-19.429-184-70.857s-67.429-113.714-70.857-184c-3.429-60.571-2.857-120.571-2.857-181.143s-0.571-120.571 2.857-181.143c3.429-70.286 19.429-132.571 70.857-184s113.714-67.429 184-70.857c60.571-3.429 120.571-2.857 181.143-2.857s120.571-0.571 181.143 2.857c70.286 3.429 132.571 19.429 184 70.857s67.429 113.714 70.857 184c3.429 60.571 2.857 120.571 2.857 181.143z"
-                ></path></svg
-              ><svg viewBox="0 0 602.2582857142856 1024" class="home-icon08">
-                <path
-                  d="M548 6.857v150.857h-89.714c-70.286 0-83.429 33.714-83.429 82.286v108h167.429l-22.286 169.143h-145.143v433.714h-174.857v-433.714h-145.714v-169.143h145.714v-124.571c0-144.571 88.571-223.429 217.714-223.429 61.714 0 114.857 4.571 130.286 6.857z"
-                ></path>
-              </svg>
-            </div>
-          </div>
-        </header>
-        <span>&nbsp;</span>
-        <h1>I don't know what to put here so please visit a different page.</h1>
-      </div>
+</head>
+<body>
+    <br><br>
+    <div style="display: grid; justify-content: center;">
+        <img width="100px" height="100px" style="border-radius: 50px;" src="https://cdn.discordapp.com/avatars/1061023304862933122/a89b672e442ca4e7f37bf0afa16affa4.webp?size=128">
+    </div><div style="display: grid; justify-content: center;">
+        <h2>Hey! I'm BusyBird15.</h2>
+    </div>
+
+    <div style="display: grid; justify-content: center;">
+        <p>I make random things for the internet.<p>
+    </div>
+
+    <div style="display: grid; justify-content: center;">
+        <h3>My best stuff</h3>
+    </div>
+
+    <button class="accordion" style="border-radius: 20px 20px 0px 0px;"><b>The Weather Team</b></button>
+    <div class="panel">
+        <p>The Weather Team is a small yet growing Discord server of weather enthusiasts. We hang out,
+            talk about the weather, track storms, and more! I own the server, and have also built a
+            <a href="https://busybird15.github.io/theweatherteam">website</a> for it, along with a
+            <a href="https://busybird15.github.io/radar">weather radar.</a> Lastly, it has a 
+            <a href="https://youtube.com/@theweatherteamofficial">YouTube channel.</a>
+        </p>
+    </div>
+
+    <button id="head-bc" class="accordion" style="border-radius: 0px 0px 20px 20px;"><b>BlockCoin</b></button>
+    <div id="panel-bc" class="panel" style="border-radius: 0px 0px 20px 20px;">
+        <p><a href="https://blockcoin.social">BlockCoin</a> is a new social media based around its own
+        currency! When your posts get liked, someone follows you, or someone buys your post,
+        you get BlockCoin, which you can then buy other posts with, or store up to become rich!</p>
+    </div>
+
+    <br><br><br>
+
+    <div style="display: grid; justify-content: center;">
+        <h3 style="margin: 0px; padding-bottom: 5px;">Programming languages and platforms I know</h3>
+    </div>
+    <div style="display: grid; justify-content: center;">
+        <p style="margin: 0px; padding-bottom: 5px;"><b>(and how well I know them)</b></p>
+    </div>
+
+    <div style="display: grid; justify-content: center;">
+        <ul>
+            <li>HTML (5/10)</li>
+            <li>CSS (4/10)</li>
+            <li>JavaScript (4/10)</li>
+            <li>Python (9/10)</li>
+            <li>Arduino (C or C++) (6/10)</li>
+            <li>Scratch (6/10)</li>
+            <li>MIT App Inventor (9/10)</li>
+        </ul>
+    </div>
+
+    <br><br><br>
+
+    <div style="display: grid; justify-content: center;">
+        <h3 style="margin: 0px; padding-bottom: 5px;">Other cool stuff I have made</h3>
     </div>
-  </body>
-</html>
+
+    <div style="display: grid; justify-content: center;">
+        <ul>
+            <li><a class="othera" href="https://community.appinventor.mit.edu/t/raindrop-a-lightning-fast-weather-app-using-weatherapi/">Raindrop: Weather app</a></li>
+            <li><a class="othera" href="https://community.appinventor.mit.edu/t/a-simple-and-elegant-notes-app/">Notes app</a></li>
+            <li><a class="othera" href="https://github.com/BusyBird15/YTDL"> YTDL (Python script to download YouTube videos)</a></li>
+        </ul>
+    </div>
+
+    <br><br><br>
+
+    <div style="border-radius: 10px; background-color: rgba(255, 255, 255, 0.158);">
+        <div style="display: grid; justify-content: center;">
+            <p style="margin: 10px; padding-bottom: 5px;"><b>Find me elsewhere!</b></p>
+        </div>
+        <div style="display: flex; justify-content: center; flex-wrap: wrap; align-content: center;">
+            <a href="https://x.com/BusyBird150" class="fa fa-twitter"></a>
+            <a href="https://github.com/busybird15" class="fa fa-github"></a>
+        </div>
+    </div>
+
+    <br><br>
+
+    <script>
+        var acc = document.getElementsByClassName("accordion");
+        var i;
+
+        for (i = 0; i < acc.length; i++) {
+        acc[i].addEventListener("click", function() {
+            this.classList.toggle("active");
+            var panel = this.nextElementSibling;
+            if (panel.style.maxHeight) {
+            panel.style.maxHeight = null;
+            } else {
+            panel.style.maxHeight = panel.scrollHeight + "px";
+            }
+            if (document.getElementById("panel-bc").style.maxHeight == panel.scrollHeight + "px"){
+                document.getElementById("head-bc").style.borderRadius = "0px"
+            } else {
+                document.getElementById("head-bc").style.borderRadius = "0px 0px 20px 20px"
+            }
+        });
+        }
+    </script>
+</body>
