Please sign in to access this page
MUS | Bootstrap Portfolio Used AI
Redoing my portfolio website using bootstrap to make it look more modern and professional. Using liquid and YAML to make it as dynamic and automated as possible.
Followers
No followers yet
Ship Your Project
Get ready!
Once you ship this you can't edit the description of the project, but you'll be able to add more devlogs and re-ship it as you add new features!
Timeline
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.
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
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.
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.
.png)
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?
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.
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
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.
