Welcome to my little corner of the internet! This is where I pretend to be a serious software engineer while secretly being excited about making LEDs blink.
This portfolio website is built with Astro because... well, it's fast, it's cool, and it lets me write less JavaScript (which my future self will thank me for). It features:
- ⚡ Lightning-fast static site - Loads faster than you can say "is it responsive?"
- 🌙 Dark mode - For those 3 AM coding sessions (we've all been there)
- 📱 Mobile-friendly - Looks good on everything from phones to those ancient tablets your parents still use
- 🎨 Minimal design - Because I spent more time choosing fonts than building features
- 🤖 Easily extensible - Ready for when I inevitably add a blog that I'll update twice
- Astro - The new shiny thing that makes static sites less static
- Tailwind CSS - For when you want to write CSS in your HTML and feel good about it
- TypeScript - Because
anyis not a type, fight me - GitHub Pages - Free hosting that actually works
- MDX - Markdown with superpowers (unused but ready for when I get ambitious)
-
Clone it (you know the drill):
git clone https://github.com/MBilalShafi/MBilalShafi.github.io cd MBilalShafi.github.io -
Install the dependencies (warning: may take longer than expected):
pnpm install
-
Fire it up:
pnpm run dev
-
Visit
http://localhost:4321and pretend you're impressed
The portfolio is live at bilalshafi.dev - because custom domains make everything look more professional, right?
- The profile picture was taken after my 47th attempt to look "casually professional"
- I spent 3 hours perfecting the shadow on that image (priorities, right?)
- The color scheme was inspired by my coffee cup collection
- There are exactly zero jQuery dependencies (we've evolved)
- The dark mode toggle was the first thing I built because aesthetics > functionality
This site is deployed automatically via GitHub Actions, which means I can push broken code and have it live in under 5 minutes. Modern problems require modern solutions!
The build process:
- GitHub Actions wakes up
- Runs
pnpm install(probably fails once for good measure) - Builds the site with
pnpm run build - Deploys to GitHub Pages
- Sends me an email that I'll check in 3 hours
├── public/ # Static files (including that perfectly cropped profile pic)
├── src/
│ ├── components/ # Reusable components (all 4 of them)
│ ├── layouts/ # Page layouts (singular, because minimalism)
│ ├── pages/ # The actual pages (currently just one)
│ └── styles/ # Global styles (mostly Tailwind imports)
├── astro.config.mjs # The magic configuration
└── README.md # This masterpiece
pnpm run dev- Start the development server (and immediately break something)pnpm run build- Build for production (cross your fingers)pnpm run preview- Preview the production build locallypnpm run astro- Access Astro CLI commands (for when you want to feel fancy)
Want to make this your own? Here's what you should probably change:
- Replace my face with yours in
public/profile.jpg - Update the text to be about you (revolutionary concept)
- Change the colors if you don't like my exquisite taste
- Add your own social links in
SocialLinks.astro - Deploy to your own domain (don't steal my 15 minutes of fame)
- Set up your DNS to point to GitHub Pages (if using a custom domain)
- The theme toggle occasionally has an existential crisis
- Profile image might look slightly different on Internet Explorer (if you're still using IE, we need to talk)
- Some CSS classes are named with the creativity of a tired developer at 2 AM
MIT License - aka "do whatever you want with this code, just don't blame me when it breaks"
Built with ❤️, ☕, and a healthy dose of impostor syndrome.
P.S. If you found a bug, it's not a bug, it's a feature. If you found a typo... well, that's just embarrassing.