diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..caeecc5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,142 @@ +# Remove all development files +uploads/ + +# remove all PyCharm files +.idea + +# remove all VSCode files +.vscode + +# remove all CSS files +static/css/style.css +static/css/style.css.map + +# Byte-compiled / optimized / DLL files +__pycache__/ +*.py[cod] +*$py.class + +# C extensions +*.so + +# Distribution / packaging +.Python +build/ +develop-eggs/ +dist/ +downloads/ +eggs/ +.eggs/ +lib/ +lib64/ +parts/ +sdist/ +var/ +wheels/ +pip-wheel-metadata/ +share/python-wheels/ +*.egg-info/ +.installed.cfg +*.egg +MANIFEST + +# PyInstaller +# Usually these files are written by a python script from a template +# before PyInstaller builds the exe, so as to inject date/other infos into it. +*.manifest +*.spec + +# Installer logs +pip-log.txt +pip-delete-this-directory.txt + +# Unit test / coverage reports +htmlcov/ +.tox/ +.nox/ +.coverage +.coverage.* +.cache +nosetests.xml +coverage.xml +*.cover +*.py,cover +.hypothesis/ +.pytest_cache/ + +# Translations +*.mo +*.pot + +# Django stuff: +*.log +local_settings.py +db.sqlite3 +db.sqlite3-journal + +# Flask stuff: +instance/ +.webassets-cache + +# Scrapy stuff: +.scrapy + +# Sphinx documentation +docs/_build/ + +# PyBuilder +target/ + +# Jupyter Notebook +.ipynb_checkpoints + +# IPython +profile_default/ +ipython_config.py + +# pyenv +.python-version + +# pipenv +# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control. +# However, in case of collaboration, if having platform-specific dependencies or dependencies +# having no cross-platform support, pipenv may install dependencies that don't work, or not +# install all needed dependencies. +#Pipfile.lock + +# PEP 582; used by e.g. github.com/David-OConnor/pyflow +__pypackages__/ + +# Celery stuff +celerybeat-schedule +celerybeat.pid + +# SageMath parsed files +*.sage.py + +# Environments +.env +.venv +env/ +venv/ +ENV/ +env.bak/ +venv.bak/ + +# Spyder project settings +.spyderproject +.spyproject + +# Rope project settings +.ropeproject + +# mkdocs documentation +/site + +# mypy +.mypy_cache/ +.dmypy.json +dmypy.json + +# Pyre type checker +.pyre/ diff --git a/app.js b/app.js deleted file mode 100644 index 8061ee6..0000000 --- a/app.js +++ /dev/null @@ -1,110 +0,0 @@ -function openTab(evt, tabName) { - var i, tabContent, navItem; - - tabContent = document.getElementsByClassName("tabContent"); - for (i = 0; i < tabContent.length; i++) { - tabContent[i].style.opacity = "0"; - tabContent[i].style.display = "none"; - } - - navItem = document.getElementsByClassName("nav-item"); - for (i = 0; i < navItem.length; i++) { - navItem[i].className = navItem[i].className.replace(" nav-item_selected", ""); - } - - document.getElementById(tabName).style.display = "block"; - setTimeout(function() { - document.getElementById(tabName).style.opacity = "1"; - }, 100); - - evt.currentTarget.className += " nav-item_selected"; - - window.history.replaceState(null, null, `?t=${tabName}`); - - document.getElementById("nav-item_underline").style.left = evt.currentTarget.offsetLeft + "px"; - document.getElementById("nav-item_underline").style.width = evt.currentTarget.offsetWidth + "px"; -} - - -// Scroll listener to change hero look -function scrollFunction(id, section) { - const scrollActivate = 220; - const selector = document.querySelector(id); - - selector.addEventListener("scroll", (event) => { - if (selector.scrollTop > scrollActivate) { - if (!$(selector).hasClass("hero_scrolled")) { - $(".hero")[section].className += " hero_scrolled"; - $(".hero")[section].style.height = ""; - } - } else { - $(".hero")[section].className = "hero"; - $(".hero")[section].style.height = `calc(20rem - ${selector.scrollTop}px)`; - $(".hero img")[section].style.filter = `blur(${2 + (selector.scrollTop / 20)}px) brightness(0.7)`; - } - }); -} - - -// Special link -document.querySelector("#refsheet").onclick = function() { $('.nav-item')[3].click(); } - -// Link to social medias -document.querySelector("#twitter_btn").onclick = function() { window.open("https://twitter.com/fluffybeanUwU", "_blank"); } -document.querySelector('#mastodon_btn').onclick = function() { window.open("https://meow.social/@Fluffy_Bean", "_blank"); } -document.querySelector("#telegram_btn").onclick = function() { window.open("http://t.me/Fluffy_Bean", "_blank"); } -document.querySelector("#github_btn").onclick = function() { window.open("https://github.com/Fluffy-Bean", "_blank"); } -document.querySelector("#discord_btn").onclick = function() { - navigator.clipboard.writeText("Fluffy Bean#5212"); - - this.innerHTML = "

Copied!

"; - this.style.backgroundColor = "#8c977d"; - this.style.color = "#151515"; - - setTimeout(() => { - this.innerHTML = "

Discord

"; - this.style.backgroundColor = ""; - this.style.color = ""; - }, 2000); -} - -window.onpopstate = function(e){ - const urlParams = new URLSearchParams(window.location.search); - const tab = urlParams.get('t').toLowerCase(); - - if (tab === "home") { - $('.nav-item')[0].click(); - } else if (tab === "hobbies") { - $('.nav-item')[1].click(); - } else if (tab === "experiance") { - $('.nav-item')[2].click(); - } else if (tab === "gallery") { - $('.nav-item')[3].click(); - } else { - $('.nav-item')[0].click(); - } -}; - -$(document).ready(function() { - // Assign scroll to all sections - scrollFunction("#Home", 0); - scrollFunction("#Hobbies", 1); - scrollFunction("#Experiance", 2); - scrollFunction("#Gallery", 3); - - const urlParams = new URLSearchParams(window.location.search); - const tab = urlParams.get('t').toLowerCase(); - - // Switch to tab on load - if (tab === "home") { - $('.nav-item')[0].click(); - } else if (tab === "hobbies") { - $('.nav-item')[1].click(); - } else if (tab === "experiance") { - $('.nav-item')[2].click(); - } else if (tab === "gallery") { - $('.nav-item')[3].click(); - } else { - $('.nav-item')[0].click(); - } -}); \ No newline at end of file diff --git a/app.py b/app.py new file mode 100644 index 0000000..1679628 --- /dev/null +++ b/app.py @@ -0,0 +1,205 @@ +from flask import Flask, render_template, request, jsonify +from flask_compress import Compress + +import dotenv + +from random import choice +import json +import requests + +# Getting color palette from album art +import colorthief + +LASTFM_API_KEY = dotenv.get_key('./.env', 'LASTFM') + +app = Flask(__name__) +Compress(app) + + +# +# ROUTES +# +@app.route('/') +def index(): + msg = [ + 'Don\'t cry because it\'s over, smile because it happened', + 'This could go one of two ways...', 'Gwa Gwa', + 'It\'s a UNIX system! I know this!', '*internal screaming*', + 'Don\'t forget to drink water!', 'I wish we were better strangers.', + 'If I were you, I\'d run now', 'SILICA GEL "DO NOT EAT".', + 'Gods die too.', 'Eat hotchip and lie' + ] + + return render_template('index.html', msg=choice(msg)) + + +@app.route('/cretura') +def cretura(): + return render_template('cretura.html') + + +@app.route('/about') +def about(): + """ + Returns a dict with all the languages I know and their level of knowledge + 0 = Absolute beginner + 1 = Basics + 2 = Intermediate + 3 = Advanced + 4 = Expert + 5 = Undefeated + """ + languages = { + 'Python': { + 'level': 3, + 'since': '2020', + 'color': '#3776AB', + }, + 'HTML': { + 'level': 4, + 'since': '2021', + 'color': '#E34F26', + }, + 'CSS': { + 'level': 3, + 'since': '2021', + 'color': '#1572B6', + }, + 'JavaScript': { + 'level': 2, + 'since': '2022', + 'color': '#F7DF1E', + }, + 'Sass/SCSS': { + 'level': 4, + 'since': '2022', + 'color': '#CC6699', + }, + 'PHP': { + 'level': 2, + 'since': '2022', + 'color': '#777BB4', + }, + 'SQL': { + 'level': 1, + 'since': '2022', + 'color': '#4479A1', + }, + 'Scratch': { + 'level': 5, + 'since': '2015', + 'color': '#FFD500', + }, + 'Shell': { + 'level': 2, + 'since': '2021', + 'color': '#89E051', + }, + 'Rust': { + 'level': 0, + 'since': '2023', + 'color': '#CE422B', + }, + } + + systems = { + 'Ubuntu': { + 'level': 2, + 'since': '2022', + 'color': '#E95420', + }, + 'Arch': { + 'level': 3, + 'since': '2021', + 'color': '#1793D1', + }, + 'Proxmox': { + 'level': 2, + 'since': '2021', + 'color': '#E57000', + }, + 'Windows': { + 'level': 1, + 'since': '2011', + 'color': '#0078D6', + }, + } + return render_template('about.html', languages=languages, systems=systems) + + +@app.route('/music', methods=['GET', 'POST']) +def music(): + if request.method == 'POST': + current_tracks = requests.get( + f'http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=Fluffy_Bean_&api_key={LASTFM_API_KEY}&limit=5&format=json' + ) + current_tracks = json.loads(current_tracks.text) + + tracks = [] + + for track in current_tracks['recenttracks']['track']: + # As django is weird with @attr in json data + # I make a new dict with a bool for nowPlaying + nowPlaying = False + if '@attr' in track: + nowPlaying = True + + # Yoink color palette from album art + color_thief = colorthief.ColorThief( + requests.get(track['image'][2]['#text'], stream=True).raw) + palette = color_thief.get_palette() + + tmp_track = { + 'name': track['name'], + 'artist': track['artist']['#text'], + 'album': track['album']['#text'], + 'url': track['url'], + 'image': track['image'][2]['#text'], + 'nowPlaying': nowPlaying, + 'palette': palette[0] + } + + tracks.append(tmp_track) + + return jsonify(tracks) + + # GET request + return render_template('music.html') + + +# +# ERROR HANDLERS +# +@app.errorhandler(405) +def method_not_allowed(e): + error = '405' + msg = 'Method sussy wussy' + return render_template('error.html', error=error, msg=msg), 404 + + +@app.errorhandler(404) +def page_not_found(e): + error = '404' + msg = 'Could not find what you need!' + return render_template('error.html', error=error, msg=msg), 404 + + +@app.errorhandler(403) +def forbidden(e): + error = '403' + msg = 'Go away! This is no place for you!' + return render_template('error.html', error=error, msg=msg), 403 + + +@app.errorhandler(410) +def gone(e): + error = '410' + msg = 'The page is no longer available! *sad face*' + return render_template('error.html', error=error, msg=msg), 410 + + +@app.errorhandler(500) +def internal_server_error(e): + error = '500' + msg = 'Server died inside :c' + return render_template('error.html', error=error, msg=msg), 500 \ No newline at end of file diff --git a/bg.jpg b/bg.jpg deleted file mode 100644 index 5a8e723..0000000 Binary files a/bg.jpg and /dev/null differ diff --git a/css/_footer.scss b/css/_footer.scss deleted file mode 100644 index c7645f1..0000000 --- a/css/_footer.scss +++ /dev/null @@ -1,37 +0,0 @@ -footer { - margin: 0; - padding: 0.5rem 1rem; - - width: 100%; - height: 2.5rem; - - display: flex; - flex-direction: row; - gap: 1rem; - - justify-content: space-around; - align-items: center; - - box-sizing: border-box; - - background-color: $black-darker; - - border-radius: 0 0 0.5rem 0.5rem; - - p, - a { - margin: 0; - padding: 0; - - font-family: $font-body; - font-size: 0.8rem; - font-weight: 800; - font-stretch: semi-condensed; - - color: $white; - - display: block; - - text-transform: uppercase; - } -} diff --git a/css/_hero.scss b/css/_hero.scss deleted file mode 100644 index 5dafc03..0000000 --- a/css/_hero.scss +++ /dev/null @@ -1,120 +0,0 @@ -.heroSpacing { - margin: 0; - padding: 0; - - width: 100%; - height: 20rem; - - display: block; - - background-color: $black-darker; -} - -.hero { - margin: 0; - padding: 1rem; - - width: 100%; - height: 20rem; - - display: flex; - flex-direction: column; - gap: 1rem; - - position: absolute; - top: 3rem; - - box-sizing: border-box; - - background-color: $black; - - overflow: hidden; - - pointer-events: none; - user-select: none; - - h1 { - margin: 0; - padding: 0 0 0 0.5rem; - - font-family: $font-header; - font-size: 2.5rem; - font-weight: 800; - font-stretch: ultra-expanded; - - line-height: 1; - - color: $white; - border-left: 1.5rem solid $green; - - transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); - - z-index: +2; - } - p { - margin: 0; - padding: 0; - - font-family: $font-body; - font-size: 1rem; - font-weight: 600; - font-stretch: semi-expanded; - - color: $white; - - z-index: +2; - } - - img { - margin: 0; - padding: 0; - - width: 100%; - height: 100%; - - opacity: 1; - - filter: blur(2px) brightness(0.7); - - object-fit: cover; - object-position: center; - - position: absolute; - top: 0; - left: 0; - - z-index: +1; - } -} - -.hero_scrolled { - padding: 0.5rem 1rem; - - height: 3rem; - - top: 0; - - justify-content: center; - - background-color: $black-darker; - - border-radius: 0.5rem 0.5rem 0 0; - - pointer-events: all; - - h1 { - padding: 0; - - font-size: 1.5rem; - - border-left: 0rem $black-darker solid; - } - - p { - display: none; - } - - img { - opacity: 0; - } -} diff --git a/css/_nav.scss b/css/_nav.scss deleted file mode 100644 index 0b2524b..0000000 --- a/css/_nav.scss +++ /dev/null @@ -1,86 +0,0 @@ -nav { - margin: 0; - padding: 0; - - width: 100%; - - display: flex; - flex-direction: row; - justify-content: space-between; - - position: relative; - - border-radius: 0.5rem 0.5rem 0 0; -} - -.nav-item { - margin: 0; - padding: 0.5rem; - - width: 100%; - height: 3rem; - - display: flex; - justify-content: center; - align-items: center; - - box-sizing: border-box; - - background-color: $black; - - border: none; - - user-select: none; - - &:hover { - background-color: $black-darker; - } - - p, - a { - margin: auto; - padding: 0; - - display: inline-block; - - font-family: $font-body; - font-size: 1rem; - font-weight: 600; - font-stretch: semi-expanded; - - color: $white; - - transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1); - } - - &:nth-child(1) { - border-radius: 0.5rem 0 0 0; - } - &:nth-child(4) { - border-radius: 0 0.5rem 0 0; - } -} - -.nav-item_selected { - background-color: $black-est; -} - -#nav-item_underline { - margin: 0; - padding: 0; - - width: 25%; - height: 0.3rem; - - display: block; - - position: absolute; - - bottom: 0; - left: 0; - - background-color: $green; - - transition: left 0.2s cubic-bezier(0.86, 0, 0.07, 1), - width 0.2s cubic-bezier(0.86, 0, 0.07, 1); -} diff --git a/css/_variables.scss b/css/_variables.scss deleted file mode 100644 index 16bf4b1..0000000 --- a/css/_variables.scss +++ /dev/null @@ -1,49 +0,0 @@ -// Variables -$black: #151515; -$black-darker: #121212; -$black-est: #101010; -$white: #e8e5e5; - -$red: #b66467; -$orange: #d8a657; -$yellow: #d9bc8c; -$green: #8c977d; -$blue: #8da3b9; -$purple: #a988b0; - -@font-face { - font-family: 'Mona-Sans'; - src: url('fonts/Mona-Sans.woff2') format('woff2 supports variations'), - url('fonts/Mona-Sans.woff2') format('woff2-variations'); - font-weight: 200 900; - font-stretch: 75% 125%; -} -@font-face { - font-family: 'Hubot-Sans'; - src: url('fonts/Hubot-Sans.woff2') format('woff2 supports variations'), - url('fonts/Hubot-Sans.woff2') format('woff2-variations'); - font-weight: 200 900; - font-stretch: 75% 125%; -} - -$font-header: "Mona-Sans", sans-serif; -$font-body: "Hubot-Sans", sans-serif; - -.c_red { - color: $red; -} -.c_orange { - color: $orange; -} -.c_yellow { - color: $yellow; -} -.c_green { - color: $green; -} -.c_blue { - color: $blue; -} -.c_purple { - color: $purple; -} diff --git a/css/fonts/Hubot-Sans.woff2 b/css/fonts/Hubot-Sans.woff2 deleted file mode 100644 index 5089fc4..0000000 Binary files a/css/fonts/Hubot-Sans.woff2 and /dev/null differ diff --git a/css/fonts/Mona-Sans.woff2 b/css/fonts/Mona-Sans.woff2 deleted file mode 100644 index 8208a50..0000000 Binary files a/css/fonts/Mona-Sans.woff2 and /dev/null differ diff --git a/css/style.css b/css/style.css deleted file mode 100644 index 9c16015..0000000 --- a/css/style.css +++ /dev/null @@ -1,439 +0,0 @@ -@font-face { - font-family: "Mona-Sans"; - src: url("fonts/Mona-Sans.woff2") format("woff2 supports variations"), url("fonts/Mona-Sans.woff2") format("woff2-variations"); - font-weight: 200 900; - font-stretch: 75% 125%; -} -@font-face { - font-family: "Hubot-Sans"; - src: url("fonts/Hubot-Sans.woff2") format("woff2 supports variations"), url("fonts/Hubot-Sans.woff2") format("woff2-variations"); - font-weight: 200 900; - font-stretch: 75% 125%; -} -.c_red { - color: #b66467; -} - -.c_orange { - color: #d8a657; -} - -.c_yellow { - color: #d9bc8c; -} - -.c_green { - color: #8c977d; -} - -.c_blue { - color: #8da3b9; -} - -.c_purple { - color: #a988b0; -} - -nav { - margin: 0; - padding: 0; - width: 100%; - display: flex; - flex-direction: row; - justify-content: space-between; - position: relative; - border-radius: 0.5rem 0.5rem 0 0; -} - -.nav-item { - margin: 0; - padding: 0.5rem; - width: 100%; - height: 3rem; - display: flex; - justify-content: center; - align-items: center; - box-sizing: border-box; - background-color: #151515; - border: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.nav-item:hover { - background-color: #121212; -} -.nav-item p, -.nav-item a { - margin: auto; - padding: 0; - display: inline-block; - font-family: "Hubot-Sans", sans-serif; - font-size: 1rem; - font-weight: 600; - font-stretch: semi-expanded; - color: #e8e5e5; - transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1); -} -.nav-item:nth-child(1) { - border-radius: 0.5rem 0 0 0; -} -.nav-item:nth-child(4) { - border-radius: 0 0.5rem 0 0; -} - -.nav-item_selected { - background-color: #101010; -} - -#nav-item_underline { - margin: 0; - padding: 0; - width: 25%; - height: 0.3rem; - display: block; - position: absolute; - bottom: 0; - left: 0; - background-color: #8c977d; - transition: left 0.2s cubic-bezier(0.86, 0, 0.07, 1), width 0.2s cubic-bezier(0.86, 0, 0.07, 1); -} - -.heroSpacing { - margin: 0; - padding: 0; - width: 100%; - height: 20rem; - display: block; - background-color: #121212; -} - -.hero { - margin: 0; - padding: 1rem; - width: 100%; - height: 20rem; - display: flex; - flex-direction: column; - gap: 1rem; - position: absolute; - top: 3rem; - box-sizing: border-box; - background-color: #151515; - overflow: hidden; - pointer-events: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.hero h1 { - margin: 0; - padding: 0 0 0 0.5rem; - font-family: "Mona-Sans", sans-serif; - font-size: 2.5rem; - font-weight: 800; - font-stretch: ultra-expanded; - line-height: 1; - color: #e8e5e5; - border-left: 1.5rem solid #8c977d; - transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); - z-index: 2; -} -.hero p { - margin: 0; - padding: 0; - font-family: "Hubot-Sans", sans-serif; - font-size: 1rem; - font-weight: 600; - font-stretch: semi-expanded; - color: #e8e5e5; - z-index: 2; -} -.hero img { - margin: 0; - padding: 0; - width: 100%; - height: 100%; - opacity: 1; - filter: blur(2px) brightness(0.7); - -o-object-fit: cover; - object-fit: cover; - -o-object-position: center; - object-position: center; - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -.hero_scrolled { - padding: 0.5rem 1rem; - height: 3rem; - top: 0; - justify-content: center; - background-color: #121212; - border-radius: 0.5rem 0.5rem 0 0; - pointer-events: all; -} -.hero_scrolled h1 { - padding: 0; - font-size: 1.5rem; - border-left: 0rem #121212 solid; -} -.hero_scrolled p { - display: none; -} -.hero_scrolled img { - opacity: 0; -} - -footer { - margin: 0; - padding: 0.5rem 1rem; - width: 100%; - height: 2.5rem; - display: flex; - flex-direction: row; - gap: 1rem; - justify-content: space-around; - align-items: center; - box-sizing: border-box; - background-color: #121212; - border-radius: 0 0 0.5rem 0.5rem; -} -footer p, -footer a { - margin: 0; - padding: 0; - font-family: "Hubot-Sans", sans-serif; - font-size: 0.8rem; - font-weight: 800; - font-stretch: semi-condensed; - color: #e8e5e5; - display: block; - text-transform: uppercase; -} - -html { - margin: 0; - padding: 0; - height: 100%; - background-color: #121212; - overflow: hidden; -} - -body { - margin: 0; - padding: 0.5rem; - height: 100%; - background-image: url("../bg.jpg"); - background-size: cover; - background-repeat: no-repeat; - background-position: center; - box-sizing: border-box; -} - -@media (max-width: 500px) { - body { - padding: 0; - background-image: none; - } -} -main { - margin: 0 auto; - padding: 0; - max-width: 769px; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - position: relative; - background-color: #151515; - box-sizing: border-box; - border-radius: 0.5rem; - z-index: 1; -} - -#Home, -#Hobbies, -#Experiance, -#Gallery { - overflow-y: scroll; - scroll-behavior: smooth; - scrollbar-width: none; - -ms-overflow-style: none; -} -#Home::-webkit-scrollbar, -#Hobbies::-webkit-scrollbar, -#Experiance::-webkit-scrollbar, -#Gallery::-webkit-scrollbar { - display: none; -} - -.main { - margin: 0; - padding: 0; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - gap: 1rem; - box-sizing: border-box; - overflow: hidden; -} - -.tabContent { - display: none; - height: 100%; - opacity: 0; - transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); - overflow: hidden; -} - -.content { - margin: 0; - padding: 1rem 1.5rem; - width: 100%; - height: auto; - display: flex; - flex-direction: column; - gap: 0.5rem; - box-sizing: border-box; - overflow: hidden; - background-color: #151515; -} -.content h2 { - margin: 0.5rem 0 0.5rem 0; - padding: 0; - font-family: "Mona-Sans", sans-serif; - font-size: 2rem; - font-stretch: ultra-expanded; - color: #8c977d; -} -.content h3 { - margin: 0.5rem 0 0.5rem 0; - padding: 0 0 0 0.5rem; - font-family: "Mona-Sans", sans-serif; - font-size: 1.5rem; - font-stretch: ultra-expanded; - color: #e8e5e5; - border-left: 0.9rem solid #8c977d; -} -.content h4 { - margin: 0.5rem 0 0.25rem 0; - padding: 0 0 0 0.5rem; - font-family: "Mona-Sans", sans-serif; - font-size: 1.25rem; - font-stretch: ultra-expanded; - color: #e8e5e5; - border-left: 0.6rem solid #8c977d; -} -.content br { - margin: 0 0 2rem 0; - padding: 0; -} -.content i { - margin: 0; - padding: 0; - display: inline-block; - vertical-align: middle; - font-family: "Hubot-Sans", sans-serif; - font-size: 1rem; -} -.content p { - margin: 0; - padding: 0; - display: inline-block; - font-family: "Hubot-Sans", sans-serif; - font-size: 1.1rem; - font-weight: 600; - color: #e8e5e5; -} -.content a { - margin: 0; - padding: 0; - display: inline-block; - font-family: "Hubot-Sans", sans-serif; - font-size: 1rem; - font-weight: 600; - color: #e8e5e5; - -webkit-text-decoration: underline 0.3rem #8c977d; - text-decoration: underline 0.3rem #8c977d; - transition: all 0.15s ease-in-out; -} -.content a:hover { - color: #8c977d; - -webkit-text-decoration: underline 0.1px #151515; - text-decoration: underline 0.1px #151515; -} -.content img { - margin: 0 auto; - padding: 0; - max-width: 100%; - max-height: 30rem; - width: auto; - height: auto; - display: block; - -o-object-fit: contain; - object-fit: contain; - border-radius: 0.5rem; -} -.content iframe { - border-radius: 0.5rem; -} - -.matrix-list { - margin: 0; - padding: 0; - width: auto; - height: auto; - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 0.5rem; -} -.matrix-list > * { - white-space: nowrap; -} -.matrix-list > *::after { - content: ","; -} -.matrix-list > *:last-child::after { - content: ""; -} - -.btn_large { - margin: 0; - padding: 0.5rem 1rem; - width: auto; - height: auto; - font-family: "Hubot-Sans", sans-serif; - font-size: 1.25rem; - font-weight: 600; - background-color: #121212; - color: #e8e5e5; - display: flex; - justify-content: end; - align-items: center; - gap: 0.5rem; - border: none; - border-left: 0.3rem solid #8c977d; - border-radius: 0; - box-sizing: border-box; - cursor: pointer; - transition: all 0.2s ease-in-out; -} -.btn_large p { - color: inherit; - font-stretch: expanded; -} -.btn_large:hover { - background-color: #101010; - color: #8c977d; - border-left: 0.9rem solid #8c977d; -} -.btn_large:hover p { - color: inherit; -}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/css/style.css.map b/css/style.css.map deleted file mode 100644 index c6fef9a..0000000 --- a/css/style.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["_variables.scss","style.css","_nav.scss","_hero.scss","_footer.scss","style.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/css/style.scss b/css/style.scss deleted file mode 100644 index 2857f35..0000000 --- a/css/style.scss +++ /dev/null @@ -1,297 +0,0 @@ -@import 'variables'; -@import 'nav'; -@import 'hero'; -@import 'footer'; - - -html { - margin: 0; - padding: 0; - - height: 100%; - - background-color: $black-darker; - - overflow: hidden; -} - -body { - margin: 0; - padding: 0.5rem; - - height: 100%; - - background-image: url("../bg.jpg"); - background-size: cover; - background-repeat: no-repeat; - background-position: center; - - box-sizing: border-box; -} - -@media (max-width: 500px) { - body { - padding: 0; - background-image: none; - } -} - -main { - margin: 0 auto; - padding: 0; - - max-width: 769px; - width: 100%; - - height: 100%; - - display: flex; - flex-direction: column; - - position: relative; - - background-color: $black; - - box-sizing: border-box; - - border-radius: 0.5rem; - - z-index: +1; -} - -#Home, -#Hobbies, -#Experiance, -#Gallery { - overflow-y: scroll; - scroll-behavior: smooth; - scrollbar-width: none; - -ms-overflow-style: none; - &::-webkit-scrollbar { - display: none; - } -} - -.main { - margin: 0; - padding: 0; - - width: 100%; - height: 100%; - - display: flex; - flex-direction: column; - gap: 1rem; - - box-sizing: border-box; - - overflow: hidden; -} - -.tabContent { - display: none; - - height: 100%; - - opacity: 0; - - transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); - - overflow: hidden; -} - -.content { - margin: 0; - padding: 1rem 1.5rem; - - width: 100%; - height: auto; - - display: flex; - flex-direction: column; - gap: 0.5rem; - - box-sizing: border-box; - - overflow: hidden; - - background-color: $black; - - h2 { - margin: 0.5rem 0 0.5rem 0; - padding: 0; - - font-family: $font-header; - font-size: 2rem; - font-stretch: ultra-expanded; - - color: $green; - } - - h3 { - margin: 0.5rem 0 0.5rem 0; - padding: 0 0 0 0.5rem; - - font-family: $font-header; - font-size: 1.5rem; - font-stretch: ultra-expanded; - - color: $white; - border-left: 0.9rem solid $green; - } - - h4 { - margin: 0.5rem 0 0.25rem 0; - padding: 0 0 0 0.5rem; - - font-family: $font-header; - font-size: 1.25rem; - font-stretch: ultra-expanded; - - color: $white; - border-left: 0.6rem solid $green; - } - - br { - margin: 0 0 2rem 0; - padding: 0; - } - - i { - margin: 0; - padding: 0; - - display: inline-block; - - vertical-align: middle; - - font-family: $font-body; - - font-size: 1rem; - } - - p { - margin: 0; - padding: 0; - - display: inline-block; - - font-family: $font-body; - font-size: 1.1rem; - font-weight: 600; - - color: $white; - } - - a { - margin: 0; - padding: 0; - - display: inline-block; - - font-family: $font-body; - font-size: 1rem; - font-weight: 600; - - color: $white; - - text-decoration: underline 0.3rem $green; - - transition: all 0.15s ease-in-out; - - &:hover { - color: $green; - text-decoration: underline 0.1px $black; - } - } - - img { - margin: 0 auto; - padding: 0; - - max-width: 100%; - max-height: 30rem; - - width: auto; - height: auto; - - display: block; - - object-fit: contain; - - border-radius: 0.5rem; - } - - iframe { - border-radius: 0.5rem; - } -} - -.matrix-list { - margin: 0; - padding: 0; - - width: auto; - height: auto; - - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 0.5rem; - - > * { - white-space: nowrap; - - &::after { - content:","; - } - &:last-child::after { - content:""; - } - } -} - -.btn_large { - margin: 0; - padding: 0.5rem 1rem; - - width: auto; - height: auto; - - font-family: $font-body; - font-size: 1.25rem; - font-weight: 600; - - background-color: $black-darker; - color: $white; - - display: flex; - justify-content: end; - align-items: center; - gap: 0.5rem; - - border: none; - border-left: 0.3rem solid $green; - border-radius: 0; - - box-sizing: border-box; - - cursor: pointer; - - transition: all 0.2s ease-in-out; - - p { - color: inherit; - font-stretch: expanded; - } - - &:hover { - background-color: $black-est; - color: $green; - border-left: 0.9rem solid $green; - - p { - color: inherit; - } - } -} \ No newline at end of file diff --git a/img/funny.jpg b/img/funny.jpg deleted file mode 100644 index 3239b03..0000000 Binary files a/img/funny.jpg and /dev/null differ diff --git a/img/landscape.webp b/img/landscape.webp deleted file mode 100644 index f34a982..0000000 Binary files a/img/landscape.webp and /dev/null differ diff --git a/img/meet-2021.webp b/img/meet-2021.webp deleted file mode 100644 index 8a05a07..0000000 Binary files a/img/meet-2021.webp and /dev/null differ diff --git a/img/sad.png b/img/sad.png deleted file mode 100644 index ae6b3a2..0000000 Binary files a/img/sad.png and /dev/null differ diff --git a/index.php b/index.php deleted file mode 100644 index 50b654d..0000000 --- a/index.php +++ /dev/null @@ -1,226 +0,0 @@ - - - - - Hiiiiiii - - - - - - - - - - - - - - - - - -
- - -
-
-
- - - ".$welcome[array_rand($welcome)].""; - ?> - -

I'm a smelly Maned Wolf that goes by Fluffy Bean. I'm 17 years old that has weird interests

-
- - - -
-

Social Links

- - - - - - -
- -

Special Thanks

-

Jeetix: Helping me with learning how to make websites!

-

Carty: Teaching me how to run servers and the networking!

-

mrHDash: For the Ref Sheet and most other art on the page!

-

Zadok: Silly taidum art seen below!

-

Shep: For the free YHC!

- -
- - Orange maned wolf sona in Taidum form -
-
- -
-
- -

Hobbies

-

Hobbies hobbies hobbies hobbies hobbies hobbies dick hobbies hobbies hobbies hobbies hobbies

-
- - - -
- - -

Metal Boxes

-

My metal box

-

My second most favorite thing to play around with. Though I usually manage to break them, I like making them do things that they weren't designed todo!

-

Due to this I also use Arch Linux btw. Though I haven't used Linux for all that much, I already made some pretty cool things with it!

- Screenshot of Linux desktop environment -

Heres a screenshot of my desktop, for all you nerds thats a Qtile session, Polybar bar with a few custom scripts, Rofi for my app launcher and Dunst for my notification daemon

- -

But its not all graphical

-

I also play around with servers and have this website running on personal one! Its a small Zotac ZBOX-CI527 upgraded to 16Bs of ram with a total of 600GBs of SSD storage.

-

For the OS, I have Proxmox as its easier to avoid fuckups to the system as a whole! Also a simple Web-Interface for managing everything :3

- -
- -

Electronics

-

I also recently picked up micro controlers and other fancy things like that. I am still learning, but its been great fun and I made this!

-

A Pi Pico wired up to an LCD and Rotary encoder. Though this is simple, it was interesting learning how to get code to communicate with these parts

- LCD saying 0 days since I peed myself, attached to a pico with a rotary switch laying to the left of it - -
- -

Mah Music taste!

-

I like music! And heres what I like listening to.

-

Rock/Metal

-
-

Bring me the Horizon

-

Pink Floyd

-

Ocean Colour Scene

-

Oasis

-

Fleetwood Mac

-

Stereophonics

-

Muse

-
- -

EDM/DnB

-
-

acloudyskye

-

Conro

-

Pixel Terror

-
- -

Other

-
-

M38

-

C148

-

The Rare Occasion

-

Cavetown

-

Daughter

-

Low Roar

-

Gorillaz

-

Joywave

-

Twenty One Pilots

-
- -
- - -
-
- -
-
- -

Experiance

-

Yet still no job lol

-
- - - -
-

Experience in programming

-

I have a decent understanding of PC operating systems and now also a start on networking with setting up my own server.

-

I delved into computers from when I was very smol and started with Scratch (not BASIC like ya’ll older folks) and then progressed to Python in Secondary School where I started to also explore other possibilities.

-

ince then I attempted many thingies like HTML, CSS, PHP, JavaScript, Bash, C# and other stuffs!

-

I got into Linux just about a year ago when writing this (29th June 22) and broke many things, but that got me into configuring a lot of software! Such as Rofi, Polybar, fish and even Discord, Spotify and Firefox!

-

These stats come from my GitHub profile

- -
-
- - -
- - - - -
- - - \ No newline at end of file diff --git a/static/css/buttons.sass b/static/css/buttons.sass new file mode 100644 index 0000000..be6b94c --- /dev/null +++ b/static/css/buttons.sass @@ -0,0 +1,36 @@ +.btn + margin: 0 + padding: 0.5rem 1rem + + width: auto + height: 2.5rem + + position: relative + + display: flex + justify-content: center + align-items: center + + border: transparent 0 solid + border-radius: 2px + + background: $black + color: $white !important + + font-size: 1rem + font-weight: 500 + line-height: 1 + + text-decoration: none + text-align: center + text-transform: uppercase + + cursor: pointer + transition: all 0.2s ease-in-out + + &:hover + background: $white + color: $black !important + + &:focus + outline: none \ No newline at end of file diff --git a/static/css/style.sass b/static/css/style.sass new file mode 100644 index 0000000..a6c1aa4 --- /dev/null +++ b/static/css/style.sass @@ -0,0 +1,430 @@ +@use 'sass:map' + +$black: #101010 +$dark: #151515 +$grey: #808080 +$white: #e8e3e3 +$primary: #8C977D + +@font-face + font-family: 'jetbrains_monoitalic' + src: url('../fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff2') format('woff2'), url('../fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff') format('woff') + font-weight: normal + font-style: normal + font-display: swap +@font-face + font-family: 'jetbrains_monoregular' + src: url('../fonts/jetbrainsmono-variablefont_wght-webfont.woff2') format('woff2'), url('../fonts/jetbrainsmono-variablefont_wght-webfont.woff') format('woff') + font-weight: normal + font-style: normal + font-display: swap + +html + margin: 0 + padding: 0 +body + margin: 0 + padding: 3rem 1rem 1rem + width: 100vw + min-height: 100vh + + background-color: $black + + font-family: 'jetbrains_monoregular', sans-serif + + display: flex + justify-content: center + align-items: center + + overflow-x: hidden + box-sizing: border-box + + * + box-sizing: border-box + +nav + margin: 0 + padding: 0.5rem 1rem + + width: 100vw + height: 3rem + + position: fixed + top: 0 + left: 0 + + display: flex + justify-content: center + align-items: center + gap: 1rem + + z-index: 1 + + color: $white + + a + margin: 0 + padding: 0 + + width: auto + height: 2rem + + position: relative + + display: flex + justify-content: center + align-items: center + + font-size: 1.1rem + font-weight: 400 + line-height: 1 + + text-align: left + text-decoration: none + text-transform: uppercase + + color: $grey + + &:hover + color: $white + + a.selected + color: $primary + + &:hover + color: $white + + span + margin: 0 0 0.2rem 0 + padding: 0 + + width: 2px + height: 1.25rem + + position: relative + + display: flex + justify-content: center + align-items: center + + background-color: $grey + +.wrapper + margin: 0 auto + padding: 1rem + + width: 100% + max-width: 621px + + min-height: auto + + position: relative + + display: flex + flex-direction: column + gap: 1rem + + background: $dark + color: $white + border-radius: 2px + + z-index: 2 + box-sizing: border-box + //overflow: hidden + + h1 + margin: 0 // 0 1rem 0 + padding: 0 + + font-size: 2.25rem + font-weight: 600 + line-height: 1 + + text-align: left + text-transform: uppercase + white-space: break-spaces + + h2 + margin: 0 + padding: 0 + + font-size: 1.5rem + font-weight: 600 + line-height: 1 + + text-align: left + text-transform: uppercase + + h3 + margin: 0 + padding: 0 + + font-size: 1.25rem + font-weight: 600 + line-height: 1 + + text-align: left + text-transform: uppercase + + p + margin: 0 + padding: 0 + + font-size: 1.1rem + font-weight: 400 + line-height: 1.2 + + text-align: left + + color: $grey + + a + margin: 0 + padding: 0 + + font-size: 1.1rem + font-weight: 400 + line-height: 1.2 + + text-align: left + + color: $primary + + &:hover + color: $white + + img + margin: 0 auto + padding: 0 + + width: auto + max-width: 100% + + position: relative + + display: block + + border-radius: 2px + + object-fit: cover + + z-index: 1 + +p.subtitle + color: $white + text-transform: uppercase + +.content + display: flex + flex-direction: column + justify-content: space-between + gap: 0.5rem + + //overflow: hidden + +.bar-chart + margin: 0 + padding: 0 + + position: relative + + display: flex + flex-direction: column + gap: 0.5rem + +.marker + width: 2px + height: 100% + + position: absolute + top: 0 + left: 0 + + background-color: rgba($white, 0.1) + + z-index: -2 + +.sub_experiance + width: 0% + height: 1.69rem + + position: relative + + background-color: $primary + border-radius: 2px + + transition: width 2s cubic-bezier(.86,0,.07,1) + + .fg + width: 100% + height: 100% + + position: absolute + + overflow: hidden + + span + position: absolute + top: 50% + left: 1.5rem + transform: translateY(-50%) + + font-size: 0.9rem + font-weight: 600 + white-space: nowrap + + color: $black + + .bg + position: absolute + top: 50% + left: 1.5rem + transform: translateY(-50%) + + font-size: 0.9rem + font-weight: 600 + white-space: nowrap + + color: $white + + z-index: -1 + +@keyframes loader + 0% + width: 0 + left: 0 + 30% + width: 100% + left: 0 + 60% + width: 100% + left: 100% + 100% + width: 100% + left: 100% + +.loader + margin: 1rem 0 + + width: 100% + height: 2px + + position: relative + + background-color: $black + + overflow: hidden + + &::after + content: '' + + margin: 0 + padding: 0 + + width: 0 + height: 100% + + position: absolute + top: 0 + left: 0 + + background-color: $primary + + animation: loader 1s ease-in-out infinite + +.music + display: flex + flex-direction: column + gap: 1rem + +.track + display: flex + flex-direction: row + gap: 1rem + + position: relative + + overflow: hidden + +.track-image + padding: 0px + + // Its too late for me to be bothered to fix a bug I have + min-width: 5rem + width: 5rem + max-width: 5rem + min-height: 5rem + height: 5rem + max-height: 5rem + + border-radius: 2px + background-color: $black + + transition: all 0.3s cubic-bezier(.86,0,.07,1) + + img + margin: 0 + padding: 0 + + width: 100% + height: 100% + + display: block + float: left + + border-radius: 2px + background-color: $dark + + opacity: 1 + object-fit: cover + + transition: all 0.2s cubic-bezier(.86,0,.07,1) + +.track-info + display: flex + flex-direction: column + //justify-content: space-between + gap: 0.5rem + + overflow: hidden + + a + margin: 0 + padding: 0 + + font-size: 1.1rem + font-weight: 600 + line-height: 1.2 + + text-align: left + text-decoration: none + + color: $white + + &:hover + color: $primary + +p.track-nowplaying + color: $primary + +@import "buttons" +@import "toast" + +@media (max-width: 669px) + .wrapper + max-width: 100% + border-radius: 0 + + h1 + font-size: 2rem + text-align: center + + p.subtitle + text-align: center + + .track-image + width: 2px + height: auto + + img + opacity: 0 \ No newline at end of file diff --git a/static/css/toast.sass b/static/css/toast.sass new file mode 100644 index 0000000..947da13 --- /dev/null +++ b/static/css/toast.sass @@ -0,0 +1,89 @@ +@keyframes toastTimeout + 0% + left: -100% + 100% + left: 0% + +.toast-container + margin: 0 + padding: 0 + + width: 100% + height: auto + max-width: 400px + + position: fixed + bottom: 0.5rem + left: 50% + transform: translateX(-50%) + + display: flex + flex-direction: column + gap: 0.5rem + + font-size: 1rem + font-weight: 500 + line-height: 1 + text-align: center + + z-index: 9999 + +.toast + margin: 0 + padding: 0.5rem 1rem + + min-height: 2.5rem + + position: relative + + display: flex + justify-content: center + align-items: center + + transform: scaleY(0) + + color: $white + background-color: $dark + border-radius: 2px + + opacity: 0 + + transition: all 0.3s ease-in-out + overflow: hidden + + &:hover + cursor: pointer + +.toast-show + opacity: 1 + transform: scaleY(1) + +.toast-hide + opacity: 0 + tansform: translateY(5rem) + +.toast-time + margin: 0 + padding: 0 + + width: 100% + height: 2px + + position: absolute + bottom: 0 + left: 0% + + background-color: $primary + + animation: toastTimeout 5s linear forwards + +@media (max-width: 669px) + .toast-container + padding: 0.5rem + + width: 100% + max-width: 100% + + bottom: 0 + left: 0 + transform: none \ No newline at end of file diff --git a/static/fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff b/static/fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff new file mode 100644 index 0000000..8bd716b Binary files /dev/null and b/static/fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff differ diff --git a/static/fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff2 b/static/fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff2 new file mode 100644 index 0000000..1ca13f0 Binary files /dev/null and b/static/fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff2 differ diff --git a/static/fonts/jetbrainsmono-variablefont_wght-webfont.woff b/static/fonts/jetbrainsmono-variablefont_wght-webfont.woff new file mode 100644 index 0000000..7c463d3 Binary files /dev/null and b/static/fonts/jetbrainsmono-variablefont_wght-webfont.woff differ diff --git a/static/fonts/jetbrainsmono-variablefont_wght-webfont.woff2 b/static/fonts/jetbrainsmono-variablefont_wght-webfont.woff2 new file mode 100644 index 0000000..186f54a Binary files /dev/null and b/static/fonts/jetbrainsmono-variablefont_wght-webfont.woff2 differ diff --git a/static/images/ny.png b/static/images/ny.png new file mode 100644 index 0000000..00a67ab Binary files /dev/null and b/static/images/ny.png differ diff --git a/img/ref.png b/static/images/ref.png similarity index 100% rename from img/ref.png rename to static/images/ref.png diff --git a/img/sneak.png b/static/images/sneak.png similarity index 100% rename from img/sneak.png rename to static/images/sneak.png diff --git a/img/taidum.png b/static/images/taidum.png similarity index 100% rename from img/taidum.png rename to static/images/taidum.png diff --git a/static/js/main.js b/static/js/main.js new file mode 100644 index 0000000..7eaa429 --- /dev/null +++ b/static/js/main.js @@ -0,0 +1,87 @@ +function addToast(text='Sample toast notification') { + var container = document.querySelector('.toast-container'); + + // Create notification element + var parent = document.createElement('span'); + parent.classList.add('toast'); + parent.innerText = text; + parent.onclick = function() { + if (parent.parentNode) { + parent.classList.add('toast-hide'); + + setTimeout(function() { + container.removeChild(parent); + }, 500); + } + }; + + // Create span to show time remaining + var timer = document.createElement('span'); + timer.classList.add('toast-time'); + parent.appendChild(timer); + + // Append notification to container + container.appendChild(parent); + setTimeout(function() { + parent.classList.add('toast-show'); + }, 1); + + // Remove notification after 5 seconds + setTimeout(function() { + if (parent.parentNode) { + parent.classList.add('toast-hide'); + + setTimeout(function() { + container.removeChild(parent); + }, 500); + } + }, 5000); +} + +function garble(obj, speed=1) { + const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ_-" + + let interval = null; + let iteration = 0; + + clearInterval(interval); + + interval = setInterval(() => { + obj.innerText = obj.innerText + .split("") + .map((letter, index) => { + if (index < iteration) { + return obj.dataset.value[index]; + } + // 27 as hyphens wrap text that can make page jump a lot + return letters[Math.floor(Math.random() * 27)] + }) + .join(""); + + if(iteration >= obj.dataset.value.length){ + clearInterval(interval); + } + + iteration += 1 / speed; + }, 30); +} + + +// Main title and subtitle, should only be one of each per page +if (document.querySelector("h1")) { + const title = document.querySelector("h1"); + garble(title, 1.5); +} +if (document.querySelector(".subtitle")) { + const subtitle = document.querySelector(".subtitle"); + garble(subtitle); +} + + +// h2 and h3 headers on page, there can be multiple so we need to loop through them +if (document.querySelectorAll("h2, h3")) { + const headers = document.querySelectorAll("h2, h3"); + headers.forEach((header) => { + garble(header); + }); +} \ No newline at end of file diff --git a/templates/about.html b/templates/about.html new file mode 100644 index 0000000..0711613 --- /dev/null +++ b/templates/about.html @@ -0,0 +1,104 @@ +{% extends 'layout.html' %} +{% block nav_about %}selected{% endblock %} + +{% block content %} +
+

About-Me

+
+ +
+

Meeeeeee

+

Hewwo, I'm a 17 year old nerd, who likes to code and tinker with computers!

+

I'm mostly a frontend developer, with some knowlage of the backend. I also enjoy programming for the hell of it

+

Fluffy Bean is a maned wolf, he reflects my personality and is my fursona

+

Refsheet made by mrHDash

+
+ + Orange maned wolf sneaking under a yellow sheet + +
+

Experiance and Projects

+

I'm quite well experianced with Python, HTML, CSS/Sass, and Shell Scripting.And have some experiance with JavaScript, PHP, MySQL and a few other languages

+

My main operating system has been Linux for about 1.5 years (Arch btw)

+

Now I have started to learn hardware and been messing around with Pi Picos!

+

Recently I have started working on a gallery, originally written in PHP for my own use before making it public

+

It is now written in Python with Flask and is open source! You can find it on GitHub. Or on my self hosted instance of Gitea!

+
+ +
+

Level of knowlage

+

My levels of knowlage are based on a scale of 0-5, with 0 being very little experiance and 5 being best in the world, obviously ;3

+ + +

Languages

+ {% for lang in languages %} + + {{ lang }} - Since {{ languages[lang].since }} + {{ lang }} - Since {{ languages[lang].since }} + + {% endfor %} + +

OS'

+ {% for os in systems %} + + {{ os }} - Since {{ systems[os].since }} + {{ os }} - Since {{ systems[os].since }} + + {% endfor %} + + + + + + + +
+ + +{% endblock %} \ No newline at end of file diff --git a/templates/cretura.html b/templates/cretura.html new file mode 100644 index 0000000..a6a4407 --- /dev/null +++ b/templates/cretura.html @@ -0,0 +1,23 @@ +{% extends 'layout.html' %} +{% block nav_cretura %}selected{% endblock %} + +{% block content %} +

Cretura

+

Thanks to these critters!

+ +
+

Jeetix: Helping me with learning how to make websites!

+

Carty: Teaching me how to run servers and the networking!

+

mrHDash: For the Ref Sheet, also my smelly brother

+

Zadok: Silly taidum art on the icon of this page!

+ +
+ + +{% endblock %} \ No newline at end of file diff --git a/templates/error.html b/templates/error.html new file mode 100644 index 0000000..c118c0e --- /dev/null +++ b/templates/error.html @@ -0,0 +1,7 @@ +{% extends 'layout.html' %} +{% block content %} +
+

{{error}}

+

{{msg}}

+
+{% endblock %} \ No newline at end of file diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..6cc0a70 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,28 @@ +{% extends 'layout.html' %} +{% block nav_home %}selected{% endblock %} + +{% block content %} +
+

Social-Media

+

{{msg}}

+
+ +
+ Twitter + Mastodon + Telegram + Github + +
+ + +{% endblock %} \ No newline at end of file diff --git a/templates/layout.html b/templates/layout.html new file mode 100644 index 0000000..05c303e --- /dev/null +++ b/templates/layout.html @@ -0,0 +1,27 @@ + + + + + + Leggy land + + + + + + + + +
+ {% block content %} {% endblock %} +
+ +
+ + \ No newline at end of file diff --git a/templates/music.html b/templates/music.html new file mode 100644 index 0000000..7472ebd --- /dev/null +++ b/templates/music.html @@ -0,0 +1,103 @@ +{% extends 'layout.html' %} +{% block nav_music %}selected{% endblock %} + +{% block content %} +

Muuuuuuusic

+ +
+ +
+ +
+

Provided by Last.fm

+
+ + +{% endblock %} \ No newline at end of file