mirror of
https://github.com/Fluffy-Bean/Fluffys-website.git
synced 2024-12-26 17:26:06 +00:00
Fix bugs I created
Make bars prettier
This commit is contained in:
parent
3613f90fa5
commit
2d672d84f2
129
app.py
129
app.py
|
|
@ -12,7 +12,6 @@ import colorthief
|
|||
|
||||
LASTFM_API_KEY = dotenv.get_key('./.env', 'LASTFM')
|
||||
|
||||
|
||||
app = Flask(__name__)
|
||||
Compress(app)
|
||||
|
||||
|
|
@ -22,18 +21,15 @@ Compress(app)
|
|||
#
|
||||
@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']
|
||||
|
||||
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))
|
||||
|
||||
|
||||
|
|
@ -44,29 +40,115 @@ def cretura():
|
|||
|
||||
@app.route('/about')
|
||||
def about():
|
||||
return render_template('about.html')
|
||||
"""
|
||||
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')
|
||||
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)
|
||||
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'],
|
||||
|
|
@ -76,14 +158,15 @@ def music():
|
|||
'nowPlaying': nowPlaying,
|
||||
'palette': palette[0]
|
||||
}
|
||||
|
||||
|
||||
tracks.append(tmp_track)
|
||||
|
||||
|
||||
return jsonify(tracks)
|
||||
|
||||
|
||||
# GET request
|
||||
return render_template('music.html')
|
||||
|
||||
|
||||
#
|
||||
# ERROR HANDLERS
|
||||
#
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ nav
|
|||
|
||||
z-index: 2
|
||||
box-sizing: border-box
|
||||
overflow: hidden
|
||||
//overflow: hidden
|
||||
|
||||
h1
|
||||
margin: 0 // 0 1rem 0
|
||||
|
|
@ -220,64 +220,75 @@ p.subtitle
|
|||
justify-content: space-between
|
||||
gap: 0.5rem
|
||||
|
||||
overflow: hidden
|
||||
//overflow: hidden
|
||||
|
||||
.bar-chart
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
$languages: ("python": #3776AB, "js": #F7DF1E, "html": #E34F26, "css": #1572B6, "sass": #CC6699, "php": #777BB4, "sql": #4479A1, "shell": #89E051, "rust": #CE422B)
|
||||
$os: ("ubuntu": #E95420, "arch": #1793D1, "proxmox": #E57000, "manjaro": #35BF5C, "windows": #0078D6)
|
||||
.sub_experiance
|
||||
padding-left: 0.25rem !important
|
||||
position: relative
|
||||
color: $white !important
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 0.5rem
|
||||
|
||||
&::before
|
||||
content: ''
|
||||
.marker
|
||||
width: 2px
|
||||
height: 100%
|
||||
|
||||
width: 2px
|
||||
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
|
||||
top: 0
|
||||
left: 0
|
||||
|
||||
background-color: $primary
|
||||
border-radius: 2px
|
||||
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
|
||||
|
||||
opacity: 0.5
|
||||
z-index: -1
|
||||
|
||||
@each $lang, $color in $languages
|
||||
&.#{$lang}
|
||||
&::before
|
||||
background-color: $color
|
||||
|
||||
@each $os, $color in $os
|
||||
&.#{$os}
|
||||
&::before
|
||||
background-color: $color
|
||||
|
||||
&.vbad
|
||||
&::before
|
||||
width: 2px
|
||||
&.bad
|
||||
&::before
|
||||
width: 10%
|
||||
&.ok
|
||||
&::before
|
||||
width: 20%
|
||||
&.good
|
||||
&::before
|
||||
width: 40%
|
||||
&.vgood
|
||||
&::before
|
||||
width: 80%
|
||||
&.excellent
|
||||
&::before
|
||||
width: 100%
|
||||
|
||||
span
|
||||
font-size: 0.8rem
|
||||
|
||||
|
||||
@keyframes loader
|
||||
0%
|
||||
width: 0
|
||||
|
|
@ -338,8 +349,13 @@ $os: ("ubuntu": #E95420, "arch": #1793D1, "proxmox": #E57000, "manjaro": #35BF5C
|
|||
.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
|
||||
|
|
|
|||
|
|
@ -26,24 +26,79 @@
|
|||
</div>
|
||||
|
||||
<div class="content">
|
||||
<h2 data-value="Languages">Languages</h2>
|
||||
<p class="sub_experiance python good">Python <span>Good</span></p>
|
||||
<p class="sub_experiance html vgood">HTML <span>Very Good</span></p>
|
||||
<p class="sub_experiance css vgood">CSS <span>Very Good</span></p>
|
||||
<p class="sub_experiance sass vgood">Sass/SCSS <span>Very Good</span></p>
|
||||
<p class="sub_experiance js bad">JavaScript <span>Meh</span></p>
|
||||
<p class="sub_experiance php good">PHP <span>Good</span></p>
|
||||
<p class="sub_experiance sql ok">SQL <span>Ok</span></p>
|
||||
<p class="sub_experiance shell ok">Shell Scripting <span>Ok</span></p>
|
||||
<p class="sub_experiance rust vbad">Rust <span>Learning</span></p>
|
||||
<h2 data-value="Level of knowlage">Level of knowlage</h2>
|
||||
<p>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</p>
|
||||
|
||||
<span class="bar-chart">
|
||||
<h3 data-value="Languages">Languages</h3>
|
||||
{% for lang in languages %}
|
||||
<span class="sub_experiance"
|
||||
data-value="{{ languages[lang].level }}"
|
||||
style="background-color: {{ languages[lang].color }};">
|
||||
<span class="fg"><span>{{ lang }} - Since {{ languages[lang].since }}</span></span>
|
||||
<span class="bg">{{ lang }} - Since {{ languages[lang].since }}</span>
|
||||
</span>
|
||||
{% endfor %}
|
||||
|
||||
<h3 data-value="OS'">OS'</h3>
|
||||
{% for os in systems %}
|
||||
<span class="sub_experiance"
|
||||
data-value="{{ systems[os].level }}"
|
||||
style="background-color: {{ systems[os].color }};">
|
||||
<span class="fg"><span>{{ os }} - Since {{ systems[os].since }}</span></span>
|
||||
<span class="bg">{{ os }} - Since {{ systems[os].since }}</span>
|
||||
</span>
|
||||
{% endfor %}
|
||||
|
||||
<span class="marker" data-value="0"></span>
|
||||
<span class="marker" data-value="1"></span>
|
||||
<span class="marker" data-value="2"></span>
|
||||
<span class="marker" data-value="3"></span>
|
||||
<span class="marker" data-value="4"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<h2 data-value="OS'">OS'</h2>
|
||||
<p class="sub_experiance ubuntu good">Ubuntu <span>Good</span></p>
|
||||
<p class="sub_experiance arch vgood">Arch <span>Very Good</span></p>
|
||||
<p class="sub_experiance proxmox ok">Proxmox <span>Decent</span></p>
|
||||
<p class="sub_experiance manjaro bad">Manjaro <span>Breaking bad</span></p>
|
||||
<p class="sub_experiance windows ok">Windows <span>Ok</span></p>
|
||||
</div>
|
||||
<script>
|
||||
var bars = document.querySelectorAll(".sub_experiance");
|
||||
|
||||
bars.forEach(bar => {
|
||||
var value = bar.getAttribute("data-value");
|
||||
|
||||
// 0 - 5
|
||||
if (value == 0) {
|
||||
bar.style.width = "20%";
|
||||
} else if (value == 1) {
|
||||
bar.style.width = "40%";
|
||||
} else if (value == 2) {
|
||||
bar.style.width = "60%";
|
||||
} else if (value == 3) {
|
||||
bar.style.width = "80%";
|
||||
} else if (value == 4) {
|
||||
bar.style.width = "100%";
|
||||
} else if (value == 5) {
|
||||
bar.style.width = "621%";
|
||||
}
|
||||
});
|
||||
|
||||
var markers = document.querySelectorAll(".marker");
|
||||
|
||||
markers.forEach(bar => {
|
||||
var value = bar.getAttribute("data-value");
|
||||
|
||||
// 0 - 5
|
||||
if (value == 0) {
|
||||
bar.style.left = "20%";
|
||||
} else if (value == 1) {
|
||||
bar.style.left = "40%";
|
||||
} else if (value == 2) {
|
||||
bar.style.left = "60%";
|
||||
} else if (value == 3) {
|
||||
bar.style.left = "80%";
|
||||
} else if (value == 4) {
|
||||
bar.style.left = "100%";
|
||||
} else if (value == 5) {
|
||||
bar.style.left = "621%";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
Reference in a new issue