MUS | Bootstrap + Jekyll Portfolio

Added a README

DARK MODE 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

DARK MODE CODE BLOCKS
DARK MODE REPO CARDS
DARK MODE MERMAID DIAGRAMS

Created an about embed. I can use this on my other websites so that all are updated with my portfolio whenever I make any changes.

Using the share_bar plugin I just made. Auto-generated URLs and Icons.

FA Doesn't have a gravatar icon. I had to manually open the woff file, add a gravatar font I found from somewhere, paste inside the opened woff file and save. Then I had to create fa-classes in the source file of FA so that it can work with the modifiers.

Also update the way my footer socials are pulled, so that links aren't unreadable glyphs for SEO.

Added GitKraken to my Open Source Skills

Minor fixing and improvements
- Added Pointer to MUS project at homepage for SoM Reviewers
- Made PurgeCSS build-time process via a custom ruby gem
- Using my own custom Base Image for Docker

• Added Mermaid
• Completed Project Description for MUS
• Improved Code Blocks

Created a Search page

Created a new Project Layout

Found a fatal performance flaw. PurgeCSS wasn't working! The entire time I thought it was!
Turns out it's having issues with using the config, so I had to inline it.

Now the file size went from 464KiB to 11KiB.

I also added Docker, I was using it to debug and it might as well just stay there.

Added More Archived Projects

Localized Libraries

Made the search bar functional using Fuse.js

Created a PDF embedder function. Used this function to embed my resume on the Resume page

Added JPT. Makes my images dynamic as well allowing it to auto-resize ensuring a fast load on websites.

Dynamified:
- Navbar
- Footer
- Timeline
- Projects Catalog
- 'More' page to display all pages

Fully Dynamic Timeline. Automatically generated from an Array of Events!!

Created my Project Schema. Using my current setup, I can auto generate Cards at the landing page for my projects just by filling in the variables and create a new page for each.

Added Icons to my projects as well

Created Project Cards

Added AOS. Surprisingly easy way to make the website more....pop-out

Hackatime API broke so I had to update my website to use a manually set start time which I was able to find from my wakatime logs.

After that I went ahead and created this skills section using devicons.

Hackatime removed the CORS Policy!!!! I've removed the proxy server from my source code.

I've also made the data to be extracted as soon as possible instead of after DOM-Content-Loaded. I've also added a nice loading text incase DOM finishes before Data.

Creating an automated projects page. It will automatically categorize and show all my projects, however it's still a bit bland. Instead of normal links, I need to generate something stylish. Maybe create slideshows with links?

Managed to get the hacaktime data via a public proxy server!

Created a dynamic more page. It's empty for now, but it is completely automatic. Everytime I create a file, a link for it will be automatically generated over here. This will be the complete glossary of sorts, everything will be alphabetically stored.

Created a nav-box at the end of the home page

Just added a Hackatime page!
I want to add the total coded time as a whole, but Hackatime API is blocking external requests.

I might have to extract the data from the svg itself :(

When I compared my original bootstrap prodced css with the one after running PurgeCSS, I was very impressed to see the 13727 lines of code become 48 lines.
I formatted the file to re-add all the white space to find out only 30 lines of code was removed.
Those 48 lines were actually 13699 stripped down and moved onto the same line.

Added Dual Deploy!! Now I can host my new and old website together!!

Although I still can't seem to get it to be automatic. I have to manually trigger it.

Trying to silence some deprecation warnings.

Removed a bit of them, but the following still remain in the sass
-> @import
-> Global Built-in Functions
-> Color Functions

I'll probably leave them as is, since most of them occur from my local bootstrap downloads

Created a responsive Intro to myself!

Made my footer! Also completely dynamic!

I tried to fix up all of my @import sass deprecation warnings, but it turns out bootstrap already uses them. I'll create a ruby gem and plug it into my website, but for now I'll stick with @import until bootstrap creates their own solution.

Downloaded the Bootstrap SASS and started using it locally.

Now I have complete control over the color scheme, and now I will have reduced a file size when since I will use purgeCSS during build.

Finally created a completely dynamic navbar. It automatically detects my number of pages. to create a link for each of them.

Then simply by filling some variables it will create a dropdown for each section of the page that I tell it to go to.

THE BEST PART? THIS IS ALL BUILD TIME ONLY. THE USER NEVER HAS TO RUN ANY SCRIPTS!

After fiddling around to get a hand of things, I have reverted back to the scaffold and doing it properly and ethically from scratch.