Hur den här sidan fungerar
Kanske har du inte märkt att detta är en webbplats på internet. Den kan verka enkel vid första anblicken, men det händer mycket bakom kulisserna.
Jag byggde den här sidan från grunden med de webstekniker jag känner mig mest bekväm med...
♡ HTML för struktur,
♡ CSS för styling,
♡ och en nypa JavaScript för interaktivitet.
Målet med den här sidan är att ge dig en snabb guidad tur om vad jag kan göra som utvecklare. Du kommer se exempel på hur jag länkar ikoner till externa profiler,
inbäddar bilder som fungerar som navigeringsgenvägar, och exponerar rå CSS som driver den visuella layouten.
Varje sektion är avsiktligt minimal så att du kan fokusera på koden själv snarare än att gå vilse i påkostad design.
Låt mig visa dig HTML-koden som skapar den här sidan.
Nedan hittar du den exakta markeringen jag använde för rubriken, introducerande stycke, och den första uppsättningen interaktiva element.
Känn dig fri att inspektera, kopiera eller modifiera det—detta är det första du kommer stöta på när du kommer in i min programmeringsportfolio,
och jag hoppas det väcker nyfikenhet på resten av arbetet jag har sammanställt.
♡ Vad är det här för lista?
Detta är från
Content Creation
-sidan!
Ser ganska enkel ut, eller hur?
♡ Jo, jag har kodat detta...
Och du kan se till höger hur det vanligtvis ser ut för mig!
♡ Hur kan en länk/ikon vara så svår?
♡ Eller kanske vill du ha en bild som länkar någonstans?
♡ Eller kanske vill du se all min CSS?
För det måste du klicka på bilden ovan ☝ ♡
<strong>♡ Vad är det här för lista?</strong><br>
Detta är från
<a href="https://binarybotanic.github.io/Html/ContentCreation.html"
target="_blank" >
<span>Content Creation</span>
/a> -sidan! <br>
Ser ganska enkel ut, eller hur?
<br><br>
<strong>♡ Jo, jag har kodat detta...</strong><br>
Och du kan se till höger hur det vanligtvis ser ut för mig!
<br><br>
<strong>♡ Hur kan en länk/ikon vara så svår?</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>♡ Eller kanske vill du ha en bild som länkar någonstans?</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>♡ Eller kanske vill du se all min CSS?
För det måste du klicka på bilden ovan ☝ ♡
Så… ja, detta är exakt det jag spenderar mest tid på att titta på och justera!
Det är framsidan av min programmeringsutställning, platsen där jag presenterar mig själv och ger dig en smak av den kodcentrerade värld jag lever i. Härifrån kan du hoppa direkt in i mina senaste experiment, utforska hela källkodsfilerna, eller helt enkelt njuta av de visuella särdragen jag lagt till för nöjes skull. Så kör igång – klicka runt, gräv ner dig i kodsnuttarna, och upptäck vad som får min portfolio att fungera.