https://github.com/brianali-codes/portfolio-hackathon
My Portfolio website for the PLP portfolio Hackathon.
https://github.com/brianali-codes/portfolio-hackathon
Last synced: 5 months ago
JSON representation
My Portfolio website for the PLP portfolio Hackathon.
- Host: GitHub
- URL: https://github.com/brianali-codes/portfolio-hackathon
- Owner: Brianali-codes
- License: mit
- Created: 2025-07-30T09:37:20.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-27T08:27:37.000Z (10 months ago)
- Last Synced: 2025-08-27T17:13:47.187Z (10 months ago)
- Language: HTML
- Homepage: https://alibrian.netlify.app/
- Size: 2.09 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Portfolio.
This Project is soon gonna be migrated to react so as to add more features due to the limitation of css and html being lifted and now we have more room to work with more advanced libraries and javascript frameworks
Brian Ali's Hackathon Portfolio made with (vanilla html and css) with pain and suffering due to lack of framework usage.
"Committing once a day, makes your career as a programmer 1 step away" — Brian Ali
Welcome to my personal portfolio website! This is where chaos meets code, and coffee meets commits. Built with pure HTML and CSS
I Used github pages and netlify for its deployment
For the live site visit :
[This link](https://brianali-codes.github.io/Portfolio-Hackathon/)
Alternatively visit :
[This link](https://alibrian.netlify.app/)
## Portfolio Features.
- Interactive Elements
Role Rotator: Watch "Frontend" → "Backend" → "Fullstack" dance across the screen / purely html and css.
Floating Dot Animation: Those achievement cards have dots that move around the border (yes, I spent way too much time on this)
Spinning Tech Icons: 60-second rotation cycle because why not?
Terminal Simulation: Complete with realistic command prompts and witty responses
- Design Philosophy.
```css
/* My design mantra */
.aesthetic-over-everything {
rule: "Once added a 20MB library to move an icon 2px. No regrets.";
priority: "Make the web less ugly, one div at a time";
}
## Sections Breakdown.
- Hero Section.
Animated role rotation (took me 3 hours to get right)
Achievement cards with that satisfying glow effect
Social links that invert colors on hover (the little things matter!)
- About Section.
GitHub stats integration (because numbers don't lie)
Tech stack grid with spinning icons
Terminal interface with actual commands you'd run:
```bash
whoami
Brian Ali — builder of things, breaker of limits (and sometimes code).
```
- Skills section.
add skills such as languages and related proficiencies.
- Work Experience.
Added a cheeky "WAITING FOR YOUR RESPONSE" entry for potential employers
Included skills like "Mastered the art of refreshing my inbox every 3.5 seconds"
- Dev Timeline.
Chronicles my journey from "BR tag solves everything" to actual developer
Honest confessions like debugging in dreams and console.log being my therapist.
- Projects Showcase.
6 real projects with live links theres more on my github of course,
Hover effects that make project names glow orange
Technologies clearly listed for each project
## Installation.
Install my-project by cloning the repo and running from live server
```bash
git clone https://github.com/Brianali-codes/Portfolio-Hackathon.git
```
right click on your terminal to lauunch the site locally.
## Optimizations.
- Fast loading (optimized images and minimal dependencies) by adding webp format instead of jpgs, cause trust me those take eons to load.
- Fully responsive (works on your grandma's tablet) Accessible (semantic HTML and proper contrast) .
- Smooth scrolling navigation Back-to-top button that scales on hover and Micro-interactions throughout.
The "Why" Behind Design Choices Color Palette.
White base: Clean, professional Orange accents (#ff6d4d): Energetic, creative Black text: Maximum readability Gray variations,But also just cause i like orange.
## Typography
Montserrat: Modern, clean, readable Cookie font: For quotes and personal touches Courier New: Terminal sections for authenticity
## Experience.
```css
/* Dev Stats */
.built-with {
love: "Love and Cofee";
dedication: "Way too many late nights debugging CSS animations";
lines-of-code: "~1,500+ (because vanilla CSS is verbose but worth it!)";
commits: "Every single day (almost)";
bugs-fixed: "Not much,since it's just CSS and HTML 😂";
}
```
## Licence.
This project is free to use and contribute just hit me up, or not, just fork it lol.
[](https://choosealicense.com/licenses/mit/)
🤝 Connect With Me:
- 🎮 Discord: @brianali0834
- 📧 Email: brianali427@gmail.com
- 📸 Instagram: @luh_bryxe
- 💼 Looking for opportunities!
This was a very fun project to build and it made me realize i could do some things without actually needing the power of javascript or frameworks, overal this also made me recall the core fundamentals of code and pushed me to my limits making me flexible.