commit 3037d7b4b198a96209e28bbff063c4bf6b7dca9e Author: martyTF Date: Mon Nov 24 16:39:58 2025 +0100 initial commit lol diff --git a/animations.css b/animations.css new file mode 100644 index 0000000..3079d77 --- /dev/null +++ b/animations.css @@ -0,0 +1,65 @@ +@keyframes appearheader { + 0% { + transform: translateY(-100vw); + } + 50% { + transform: translateY(-100vw); + } + 100% { + transform: translateY(0); + } +} + +@keyframes appearlinksrow { + 0% { + transform: translateX(-100vw); + + } + 50% { + transform: translateX(0); + } + 100% { + transform: translateX(0); + } +} + + +@keyframes appearcontent { + 0% { + transform: translateX(100vw); + } + 50% { + transform: translateX(0); + } + 100% { + transform: translateX(0); + } +} + + + +@keyframes disappearcontent { + 0% { + transform: translateX(0); + } + + 50% { + transform: translateX(-100vw); + } + + 100% { + transform: translateX(-100vw); + } +} + +@keyframes appearfooter { + 0% { + transform: translate(-100vw, 100vw); + } + 50% { + transform: translate(0, 100vw); + } + 100% { + transform: translate(0, 0); + } +} diff --git a/base.css b/base.css new file mode 100644 index 0000000..87d7fc3 --- /dev/null +++ b/base.css @@ -0,0 +1,17 @@ +@font-face { + font-family: "Mono Code"; + src: url("src/FiraCodeNerdFont-Regular.ttf"); +} + +* { + font-family: "Mono Code"; + color: var(--mtf-font-color); +} + +body { + background-color: var(--mtf-background-color); + /* background-image: var(--mtf-background-image); */ + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; +} diff --git a/boxes.css b/boxes.css new file mode 100644 index 0000000..b2cbe58 --- /dev/null +++ b/boxes.css @@ -0,0 +1,246 @@ +.box { + color: var(--mtf-font-color); + text-align: center; + background-color: var(--mtf-background-2-color); + border-style: solid; + border-color: var(--mtf-accent-color); + border-radius: 5px; + padding: 20px; + margin: 20px; + flex-basis: 100%; + transition: background-color 0.5s ease, color 0.5s ease; + height: inherit; + +} + +.box a { + color: var(--mtf-font-color); + text-decoration: none; + display: inline-flex; + padding: 0.5% 0.5%; + border: solid; + border-radius: 10px; + border-color: #ffffff00; + transition: background-color 0.5s ease, color 0.5s ease; +} + +.links a { + text-decoration: underline var(--mtf-accent-color) 2px; +} + +.box a:visited { + color: var(--mtf-font-color); +} + +.box a:hover { + background-color: var(--mtf-accent-color); + color: var(--mtf-background-color); +} + +#header { + position: relative; + display: flex; + padding-bottom: 0px; +} + +#linksrow { + position: relative; + padding-bottom: 0px; + +} + +.footnote { + position: relative; + margin-top: 1%; + padding-bottom: 0px; + +} + +#mainmain { + position: relative; + } + +#main { + width: 100%; + position: relative; +} + +.box-shower { + width: 100%; + height: 0px; + position: relative; + overflow: hidden; + transition: height 0.5s ease; +} + + +#lightdark { + align-self: right; + font-size: 40px; + border-color: #ffffff00; +} + +#lightdark a:hover { + background-color: #ffffff00; + color: var(--mtf-font-color); +} + +#darkmode +{ + display:none; +} + +#lightmode { + display:inline; +} + +#service_icons { + margin-left: 25%; + width: 50%; + position: relative; + align-self: right; + margin-right: 25%; +} + +a.service_icon { + color: var(--mtf-font-color); + font-size: 30px; + min-width: 30px; + min-height: 30px; + text-align: center; + text-justify: auto; + background-color: var(--mtf-background-2-color); + border-style: solid; + border-color: var(--mtf-accent-color); + border-radius: 5px; + padding: 20px; + margin: 20px; + transition: background-color 0.5s ease, color 0.5s ease; +} + +#bookmarks { + left: 0; + right: 0; + top: -200px; + margin-left: auto; + margin-right: auto; + width: 60%; + height: calc(auto + 20%); + position: absolute; + display: none; + opacity: 0; + transition: opacity 1s ease; + z-index: 10000; +} + +bookmarks_close { + left: 20px; +} + + + +@media only screen and (max-width: 860px) { + .box-wrapper { + display: block; + } + + .headersplit { + display: block; + } + + #contact_logobox { + max-width: none; + } + + .contact_logo { + min-width: 200px; + } + + .dotfiles_image { + min-width: 200px; + } + + a.bmks { + display: none; + } + + #bmks_mtf, + #bmks_scl { + display: none; + } + + #hdrbx2 { + border: none; + background: none; + } + + #hdrbx1 { + display: none; + } + + +} + +@media only screen and (min-width: 861px) { + body { + width: 89vw; + padding: 5vw; + } + .box-wrapper { + display: flex; + justify-content: space-evenly; + } + + .headersplit { + display: none; + } + + #contact_logobox { + max-width: 35%; + } + + .contact_logo { + max-height: 100%; + min-width: 200px; + } + + .dotfiles_image { + max-height: 100%; + max-width: 0.4vw; + min-width: 200px; + } + + a.bmks { + display: block; + } + + +#hdrbx1, +#hdrbx2 { + border: none; + background: none; +} + +} + + + +.search-box input { + outline: none; + width: calc(100% - 150px); + height: 30px; +} + +.search-box button { + height: 30px; +} + +.contact_logo, +.dotfiles_image { + max-width: 100%; + background-color: var(--mtf-background-2-color); + border-style: solid; + border-color: var(--mtf-accent-color); + border-radius: 5px; + margin: 10px 0px 0px 0px; + } diff --git a/index.html b/index.html new file mode 100644 index 0000000..3ff59a1 --- /dev/null +++ b/index.html @@ -0,0 +1,269 @@ + + + + + + + + + Marty.TF + + + + + + + + + + + + + + + + +
+
+ + + + + + + +
+
+
+ personal website and hosting platform of multiple instance based web services
+ every line of code has been written by a human. no large machine learning models have been used to steal + copy-righted and unlicensed code +

+ as I am not a webdev, this will be very barebones, and will be an aesthetic disaster

+ enjoy +
+
+ licenses: + +
+
+
+ +
+
+
+

my dotfiles:

+ distro: arch linux
+ window manager: hyprland
+ terminal: kitty
+ colour theme: catppuccin mocha (green)
+ bar: waybar
+ notifications: mako
+ browser: firefox
+ editor: emacs
+ link to dotfiles: github repo +
+
+ A screenshot of a monitor with 3 terminals, running asciiquarium, cava and nerdfetch, to display my dotfiles +
+
+
+ +
+
+
+

WIP

+
+
+
+ +
+
+
+

School Projects

+
+ Präsentation Cybersecurity +
+ +
+
+
+
+ + + +
+
+
+ +

+ headshot drawn by narklos +
+ +
+
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..374030c --- /dev/null +++ b/script.js @@ -0,0 +1,215 @@ +function setCookie(cname, cvalue, exdays) { + const d = new Date(); + d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); + let expires = "expires=" + d.toUTCString(); + document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; +}; + +function getCookie(cname) { + let name = cname + "="; + let decodedCookie = decodeURIComponent(document.cookie); + let ca = decodedCookie.split(';'); + for (let i = 0; i < ca.length; i++) { + let c = ca[i]; + while (c.charAt(0) == ' ') { + c = c.substring(1); + } + if (c.indexOf(name) == 0) { + return c.substring(name.length, c.length); + } + } + return ""; +}; + +function show(content) { + var cont = document.getElementById(content); + cont.style.transition = "height 1s ease"; + cont.style.height = "auto"; + var contheight = cont.offsetHeight; + cont.style.height = "0px"; + setTimeout(function () { + cont.style.height = contheight + "px"; + cont.style.overflow = "none"; + }, 1); +}; + +function showcontent(content) { + show(content); + var contbutton = document.getElementById(content + "button"); + contbutton.style.background = "var(--mtf-accent-color)"; + contbutton.style.color = "var(--mtf-background-color)"; +}; + +function hidecontent(content) { + var cont = document.getElementById(content); + var contbutton = document.getElementById(content + "button"); + cont.style.transition = "height 1s ease"; + setTimeout(function () { + cont.style.height = "0px"; + cont.style.overflow = "none"; + }, 1); + contbutton.style.background = "var(--mtf-base-color)"; + contbutton.style.color = "var(--mtf-font-color)"; +}; + +function startup() { +// var srch = document.getElementById("search"); +// srch.style.height = "auto"; +// srch.style.overflow = "auto"; +// var srchh = srch.offsetHeight; +// var srchh = srchh + "px"; +// srch.style.height = srchh; + setTimeout(function () { + document.getElementById('searchbox').focus(); + }, 200); + if (getCookie("contentlist") == "") { + setCookie("contentlist", "search", 10000); + } + var darklight = getCookie("darklightc"); + if (darklight == 0) { + button_lightmode(); + } + else if (darklight == 1) { + button_darkmode(); + } + else { + return ""; + }; + var k = getCookie("contentlist").split(' ').length; + for (var l = 0; l < k; l++) + { + showcontent(getCookie("contentlist").split(' ')[l]); + }; + + show("header"); + show("linksrow"); + show("footer"); +}; + +function shiftcontent(content) { + var contentlist = getCookie("contentlist"); + let containcontent = contentlist.includes(content); + if (containcontent == false) { + newcontentlist = getCookie("contentlist") + " " + content; + setCookie("contentlist", newcontentlist, 10000); + showcontent(content); + var cont = document.getElementById(content); + var position = cont.getBoundingClientRect().top; + window.scrollTo({ + top: position, + left: 0, + behavior: "smooth", + }); + setTimeout(function () { + window.scrollTo({ + top: position, + left: 0, + behavior: "smooth", + }); + }, 300); + } + else if (containcontent == true) { + newcontentlist = getCookie("contentlist").replace(content,''); + setCookie("contentlist", newcontentlist, 10000); + hidecontent(content); + }; +}; + + +//function shiftcontent(content) { +// var x = document.getElementsByClassName("box-shower"); +// var cont = document.getElementById(content); +// cont.style.height = "auto"; +// var contheight = cont.offsetHeight; +// cont.style.height = "0px"; +// for (var i = 0; i < x.length; i++) +// { +// x[i].style.height = "0px"; +// x[i].style.overflow = "hidden"; +// }; +// setTimeout(function() { +// contheight = contheight + "px"; +// cont.style.height = contheight; +// cont.style.overflow = "auto"; +// }, 500); +// if (content == "search") { +// setTimeout(function () +// { +// document.getElementById('searchbox').focus(); +// }, 700); +// } +// else { +// return ""; +// } +//}; + +function toggleld(ld) { + let clrs = document.body.style; + if (ld == light) { + document.getElementById("darkmode").style.display = "inline"; + document.getElementById("lightmode").style.display = "none"; + clrs.setProperty('--mtf-background-color', "#eff1f5"); + clrs.setProperty('--mtf-font-color', "#4c4f69"); + clrs.setProperty('--mtf-background-2-color', "#e6e9efdf"); + clrs.setProperty('--mtf-accent-color', "#dc8a78"); + clrs.setProperty('--mtf-background-image', "url('src/Clearnight.jpg')"); + setCookie("darklightc", 0, 30); + } + else { + document.getElementById("darkmode").style.display = "none"; + document.getElementById("lightmode").style.display = "inline"; + clrs.setProperty('--mtf-background-color', "#1e1e2e"); + clrs.setProperty('--mtf-font-color', "#cdd6f4"); + clrs.setProperty('--mtf-background-2-color', "#181825df"); + clrs.setProperty('--mtf-accent-color', "#f5e0dc"); + clrs.setProperty('--mtf-background-image', "url('src/Clearday.jpg')"); + setCookie("darklightc", 1, 30); + } +}; + +function button_lightmode() { + document.getElementById("darkmode").style.display = "inline"; + document.getElementById("lightmode").style.display = "none"; + document.body.style.setProperty('--mtf-background-color', "#eff1f5"); + document.body.style.setProperty('--mtf-font-color', "#4c4f69"); + document.body.style.setProperty('--mtf-background-2-color', "#e6e9efdf"); + document.body.style.setProperty('--mtf-accent-color', "#dc8a78"); + document.body.style.setProperty('--mtf-background-image', "url('src/Clearnight.jpg')"); + setCookie("darklightc", 0, 30); +}; + + +function button_darkmode() { + document.getElementById("darkmode").style.display = "none"; + document.getElementById("lightmode").style.display = "inline"; + document.body.style.setProperty('--mtf-background-color', "#1e1e2e"); + document.body.style.setProperty('--mtf-font-color', "#cdd6f4"); + document.body.style.setProperty('--mtf-background-2-color', "#181825df"); + document.body.style.setProperty('--mtf-accent-color', "#f5e0dc"); + document.body.style.setProperty('--mtf-background-image', "url('src/Clearday.jpg')"); + setCookie("darklightc", 1, 30); +}; + +function bookmarks_open() { + let bmks = document.getElementById("bookmarks"); + bmks.style.display = "block"; + bmks.style.opacity = "1" +}; + +function bookmarks_close() { + let bmks = document.getElementById("bookmarks"); + bmks.style.display = "none"; + bmks.style.opacity = "0"; +}; + + +function bmks_exp(bmrk) { + var bmk = document.getElementById(bmrk); + var disp = window.getComputedStyle(bmk).display; + if (disp == "none") { + bmk.style.display = "block"; + } + else { + bmk.style.display = "none"; + } +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..a23ff8f --- /dev/null +++ b/style.css @@ -0,0 +1,3 @@ +@import "base.css"; +@import "boxes.css"; +@import "animations.css";