Ship
Massive update today!
To start with, I didn’t really like the morph sidebar I made last time, so I made the hard choice to remove it.
I looked at some Hack Club event websites, and found out many of them are using custom image assets for things like container borders and buttons, I like that idea, it’s cool to make hand drawn assets and use them on your website, it gives your website something special. So of course I tried it myself, First I did some research on how it works and how you can make custom section borders, I found this guide: https://css-tricks.com/revisiting-css-border-image/
This guide explains very well how custom borders work and how you can use it Of course I saved it to my personal Readeck ;)
I started with just drawing a simple square in GIMP (just because I already know how to use GIMP) and then I applied it with CSS to my sections like in the guide, this worked, but I didn’t look that good, so I removed the CSS blur effect from earlier and used image opacity in GIMP to create a blue semi-transparent section, and I added a thin extra line to the border to make it look better.
I wanted to use this on my LastFM music widget as well, but that didn’t work because the background needs to be applied with CSS with colors from the currently playing songs cover image, so there I can’t use the same border image as background. The problem here is that the background is then going outside of the border lines, after MANY ways of trying to fix this I found the solution, I made a black and white version of the image and updated my javascript to replace the black and white with the correct colors and then inject THAT image. This works extremely good, it’s looks so good now!
When that was finally done, I did some last changes, made assets for buttons, lines, the navbar, the other cards, etc, all the components do now have a custom drawn border.
I ended with adding new fonts, all the normal text is now Jetbrains Mono Regular (cause why not, I use that everywhere) and the headings are my own handwriting! I used an online tool to make a hand drawn font and used that font on my site! (MyDamnFont)
Ship
Today, there’s just too many updates to put them all here :D
I cleaned up the whole structure and updated all the pages with the new design. I also added extra features and pages.
Base UI updates
- The good old Yixboost Games glassy theme is back from V1
- New modern navbar with cleaner search bar and better links
- Nicer and bigger glass footer with more content, including links and the logo
- Fade animations on tile hover
- Cleaned up not used CSS
- Image assets updated with GIMP to make them look nicer
- temp “This website is WIP” alert added
- Added “N/I” text to not implemented features
Startpage updates
- Nice large banner at the top
- 4 games of each category
- Clickable links to scroll to each category
Search plugin updated to v1.0.1 (wow, big update)
- Cleaner UI with bootstrap and new theming
- Pagination on searches
Game Loader plugin updated to v1.0.1 (really big update agian, lol)
- Working page to play games
- Game loader and embed pages for iframes
- Game action hooks
- Related games are working now
Core updates
- Plugins can now have required python libraries
- Better database integration for plugins
- Plugins can update content of other plugins with better hooks support
Added new issues plugin
New plugin with a bug report form on /report with auto form fill in and game action button for game report, stores issues in the database.
Profile page updated
- Options and information menu
- Better profile picture with decor support for later
Today is my longest devlog! (I needed time for centering a with CSS, lol)
But now serious, I worked really long on my new desktop sidebar, first it’s the same navbar as earlier but if you scroll the navbar is first decreasing it’s width and then increasing it’s height until it’s a sidebar. It has fade animations for the content inside of it and on mobile it stays a navbar but with a hamburger menu. There are also some small changes, the links in the nav/sidebar are now buttons so it’s more clear you can click on them (thanks for the suggestion you random person from ship #1 rating)
The site is also more mobile friendly, as I said, there’s nwo a better hamburger menu exclusive for mobile devices, and the links in the about section are big buttons on your phone. The allignment for the whole about section is fixed for mobile devices.
Lastly, in many of the feedbacks people said that the hackatime widgets where going out of the section, that’s now fixed (;
I added an ‘What am I doing right now?’ section with a music widget that displays my now playing music, it auto-updates the background gradient and badge colors by getting the main colors from the songs cover image, it gets the now playing song from the Last.fm API, and my Last.fm profile is connected to my JellyFin server. I also added two extra projects to the carousel, “This website” and “The Jump 3000”
Today I added an animated pacman with ghost and pacman made with css animations, and I redesigned the Hackatime section widgets by looking at the documentation for the widgets
Added better database system, plugin loader, default theme, built in plugins, games_loader and search, core systems and better structure
Made the Hackclub guy transparent and outline-only, made javascript to load projects from projects.json and I used swiper.js to put the project cards inside a 3D carousel
Today I did research for all the parts I need, i replaced the ESP devboard with an more powerfull one and more supported with CircuitPython, added SD card module, Audio board, and found parts for battery and charging, I also made and breadboard pinout for an prototype
Ship
Today i added animations, typing effect, moving images, small content updates, and i added a better README, and most important! I published it on jonas.yixboost.dev!
Today I added some cool stuff!
I started with designing a new background image with nicer colors, it’s self made in GIMP, the .xcf file is in the /assets/images folder
Then I wanted to add something happy to the startpage, so i got an image of this Hack Club guy with a flag and added it to the right of the ‘Who am I?’ section (terrible positioning a div is not so fun to do), by the way, I renamed that, it was called the ‘About’ section, but that’s boring….
To make the ‘Who am I?’ section even nicer, I added an CSS shimmer effect to my name, I can use this effect everywhere now by adding the “shimmer” class to an html tag.
In the top right corner of the ’’My Projects” section (renamed from “Projects”) I added a link to all my repositories, to put it in the corner I needed to use the bootstrap “d-flex” class.
Because of the new background the scroll to top button was less visible, so i made it light gray
Lastly, I edited some text content.
I made the starting structure for FastAPI in main.py
Added: Card structure on homepage, Navbar and footer parts, 404 page, example profile page on / profile with testing data.
Today I did not have that much time, but I gave the navbar a nice blurred glass effect, added an scroll to top button that appears when you scroll down (Credits: https://github.com/mdbootstrap/bootstrap-back-to-top-button), I also made the buttons inside the project cards nicer.
Some small changes everywhere, but every minute counts!
Today added many small changes!
To start I added a Favicon (simple but needed)
I did some content changes, and I added a brand new “Hackatime Stats” section, because i think it’s cool if you can see real time data, this works perfect, I added programming language stats, 356 day activity and a button to my Hackatime profile, another thing I did was making the project section nice, I added real content, the right images, hand-written descriptions and buttons and links, I added Yixboost Games, ChessOverAPI and JustTitanium.
I added an logo to the navbar and made the beginning of my Projects section, i’m completing that section later.
I made the allignment better, made the navbar dark and I made the about section a real (visible) container and gave it a blur effect, next I added a cool background
I started the project by making a simple bootstrap structure
