Skip to content

Commit

Permalink
New Portfolio page!
Browse files Browse the repository at this point in the history
  • Loading branch information
@BusyBird15
BusyBird15 authored Jun 5, 2024
1 parent 7e68fba commit a7f2f23
Showing 1 changed file with 168 additions and 117 deletions.
285 changes: 168 additions & 117 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit a7f2f23

Please sign in to comment.