How I Built This Portfolio Site: From Blade to VPS and Beyond

May 20, 2025 · By Khaled AGN · ⏱️ 2 min read
I built this site to represent me, not just as a developer, but as a creator of tools for other devs.
How I Built This Portfolio Site: From Blade to VPS and Beyond

This portfolio isn’t just a personal site, it’s a custom Laravel app, a CMS, a mini-blog engine, and a testbed for future tools I plan to release for my dev/design audience.

I started with Laravel 12 (Jetstream felt too bloated, so I used Breeze with Blade), layered Bootstrap 5, and made it fully component-based. Every section (Hero, About, Work, Projects, Contact) is driven by dynamic data models. I added rich admin control: you can update text, upload images, add projects/blogs/tags, and tweak SEO from the backend.

I also fetch the latest GitHub repo data (stars, forks, updated time) for each project via the GitHub API, refreshed daily using a Laravel scheduled cron job, fully automated.

One underrated touch? The contact form. It’s spam-protected via a honeypot AND reCAPTCHA. When someone sends a message, I get a real-time Telegram ping thanks to a custom helper class that integrates with Telegram Bot API.

Blogs are Markdown-powered (with future plan to support inline media + syntax highlighting). The admin dashboard uses TALL-style modals (Laravel + Alpine), and every form has inline validation with instant toasts.

For hosting, I spun up a clean Ubuntu 20 VPS and set up a basic Apache + PHP 8.2 + MySQL stack. I uploaded the project directly to my VPS and deployed it manually, no CI/CD, just good old SSH and Git.

Planned additions:

  • Built-in tools for developers/designers (color palette generator, SVG-to-HTML utility, etc.)
  • User login system for gated tools & saved projects
  • Blog comment system (likely via Livewire + moderation panel)
  • Better analytics (server-side only, no Google junk)

I’m also sketching the architecture for a full multi-tenant version of this, where users can spin up their own portfolio site with custom themes, blog engine, and analytics, all powered by my Laravel core.

This project has been my dev playground. A mix of serious engineering and UI obsession. Built with purpose, styled with care, and open for upgrades.

App Context
  • App Name: Khaled AGN Portfolio
  • Tech Stack:
    • Laravel 12
    • Bootstrap 5
    • Blade
    • MySQL
    • Alpine.js
    • Telegram API
    • reCAPTCHA
    • Apache
    • PHP 8.2
  • Business Model: Personal showcase & upcoming tool hub for devs/designers
  • Key Features:
    • Clean dark theme with custom CSS
    • Admin panel for full control
    • Telegram alerts from contact form
    • GitHub API to fetch the latest repo data
    • reCAPTCHA + honeypot anti-spam
    • Tag-based dynamic project filtering
    • Planned tool ecosystem for registered users
Core Features
  • 0: Admin-controlled content (Projects, Blog, Contact)
  • 1: Tag-based project filtering with badges
  • 2: Responsive UI with dark mode
  • 3: Real-time Telegram contact notifications
  • 4: Spam protection via honeypot + reCAPTCHA
  • 5: Markdown blog system
  • 6: VPS-deployed
Need Help?
Chat on Facebook Email Support