How this site works
Maybe you haven’t noticed that this is a website on the internet. It may look simple at first glance, but there’s a lot going on behind the scenes.
I built this site from the ground up using the web technologies I’m most comfortable with...
♡ HTML for structure,
♡ CSS for styling,
♡ and a dash of JavaScript for interactivity.
The goal of this page is to give you a quick tour of what I can do as a developer. You’ll see examples of how I link icons to external profiles,
embed images that act as navigation shortcuts, and expose the raw CSS that powers the visual layout.
¨
Each section is intentionally minimal so you can focus on the code itself rather than getting lost in flashy design.
Let me show you the HTML code that creates this page.
Below you’ll find the exact markup I used for the header, the introductory paragraph, and the first set of interactive elements.
Feel free to inspect, copy, or modify it—this is the first thing you’ll encounter when you enter my programming portfolio,
and I hope it sparks curiosity about the rest of the work I’ve put together.
♡ What a list?
Well this is from the
Content Creation
site!
Looks simple enough right?
♡ Well I have coded this...
And you can se on the right how it usualy looks for me!
♡ Like how can a link/icon be so hard?
♡ Or maby you want a picture that links somewere?
♡ Or maby you want to se all my css?
Well for that you have to click the pic above ☝ ♡
<strong>♡ What a list?</strong><br>
Well this is from the
<a href="https://binarybotanic.github.io/Html/ContentCreation.html"
target="_blank" >
<span>Content Creation</span>
/a> site! <br>
Looks simple enough right?
<br><br>
<strong>♡ Well I have coded this...</strong><br>
And you can se on the right how it usualy looks for me!
<br><br>
<strong>♡ Like how can a link/icon be so hard?</strong><br>
<a href="https://github.com/binarybotanic"
class="social-item"
aria-label="GitHub"
target="_blank"
rel="noopener">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d= "M12 .5C5.73.5.5 5.73.5 12c0 5.09 3.29 9.41 7.86 10.95.58
.11.79-.25.79-.56 0-.28-.01 -1.02-.02-2-3.2.7-3.88-1.54-3.88-1.54 -
.53-1.34-1.3-1.7-1.3-1.7- 1.06-.73.08-.72.08- .72 1.17.08 1.78 1.2 1.
78 1.2 1.04 1.78 2.73 1.27 3.4.97.11-.75.41-1.27.74-1.56-2.55-.29-5.
23-1.27-5.23-5.66 0-1.25.45-2.27 1.2-3.07-.12-.3-.52-1.51.11-3.15
0 0 .98-.31 3.22 1.18a11.2 11.2 0 012.93-.39c.99.01 2 .13 2.94.39 2.2
4-1.5 3.22-1.18 3.22-1.18.63 1.64.23 2.85.11 3.15.75.8 1.2 1.82 1.2 3.
07 0 4.4-2.68 5.36-5.24 5.64.42.37.8 1.1.8 2.22 0 1.6-.01 2.89-.01 3.2
8 0 .31.21.68.8.56A10.5 10.5 0 0023.5 12c0-6.27-5.23-11.5-11.5-11.5z"/>
</svg>
<span class="social-label">GitHub
</a>
<br><br>
<strong>♡ Or maby you want a picture that links somewere?</strong>
<div class="visual">
<a href="https://github.com/BinaryBotanic/binarybotanic.github.
io/blob/main/Css/Styles.css">
<img src="../Assets/Programmingmini.png" alt="Code editor with highlighted syntax">
<span class="overlay-text">Se more
</a>
</div>
<br><br>
<strong>♡ Or maby you want to se all my css?
Well for that you have to click the pic above ♡
Soo… yes, this is exactly what I spend most of my time looking at and tweaking!
It’s the front door of my programming showcase, the place where I introduce myself and give you a taste of the code‑centric world I live in. From here you can jump straight into my latest experiments, explore the full source files, or simply enjoy the visual quirks I’ve added for fun. So go ahead – click around, dig into the snippets, and discover what makes my portfolio tick.