As a full-stack developer, I wanted a portfolio that didn’t just list my projects — I wanted it to feel crafted, expressive, and scalable. Inspired by the elegance of antfu.me, I started building my own — but with my stack of choice: Laravel, Alpine.js, Tailwind CSS, and FilamentPHP.
This blog walks you through why I chose this tech stack, how I built it, and some behind-the-scenes insights.
#🧠 Why Laravel + Alpine.js + Tailwind + Filament?
#🔧 Laravel — The Foundation
Laravel powers the backend of my portfolio. Its routing, Blade templating, and built-in features make development smooth. I wanted the freedom to scale the site later — maybe add a blog, contact form, or even custom APIs. Laravel gave me that foundation.
#⚡ Alpine.js — Lightweight Interactivity
Alpine.js gave me just enough JavaScript without the bloat. For tasks like toggling dark mode, adding small interactions, or revealing content dynamically, Alpine did the job beautifully.
#🎨 Tailwind CSS — Rapid UI Design
Tailwind lets me design directly in HTML. Paired with dark mode support and custom themes, I could recreate the aesthetic I loved in antfu.me with full control over responsiveness and animations.
#🛠️ FilamentPHP — A Beautiful Admin Panel, Effortlessly
I needed a way to manage projects and content without hardcoding them every time. That’s where FilamentPHP came in. It gave me:
A stunning admin dashboard out of the box,
CRUD for portfolio projects, categories, blog posts, and more,
Realtime insights, activity logs, and form customization.
Filament let me keep the frontend clean while having full backend control — and yes, it matches the aesthetic too.
#🏗️ The Build Breakdown
#🔩 Project Structure
I followed a standard Laravel layout:
layouts/app.blade.php: main layout with header, footer, and Alpine data.Blade components for project cards, navigation, modals, and more.
Dynamic content pulled from the database using Filament resources.
#🌙 Dark Mode Support
I used Alpine.js to toggle dark mode and persisted the setting using localStorage.
<html lang="en" x-data="{ darkMode: localStorage.getItem('theme') === 'dark' }" :class="{ 'dark': darkMode }">
A simple button toggled the mode and remembered it across visits.
#🖼️ Dynamic Project Listing
Projects were added via the Filament admin panel and listed on the frontend using a simple Eloquent query:
$projects = Project::latest()->get(); return view('pages.home', compact('projects'));
Each project is rendered using a reusable <x-project-card /> component.
#⚙️ Admin Control with Filament
I created resources like:
App\Filament\Resources\ProjectResourceApp\Filament\Resources\BlogResource
These allowed me to add/update projects or blog posts without touching the database or UI code. Filament even gave me filtering, searching, and media upload fields out of the box.
#✨ Polishing the UI
Design-wise, I focused on:
Clean typography (
Inter+ Tailwind'sprose),Smooth transitions (
transition-all,ease-in-out,duration-300),Animations on scroll and hover,
Custom cursors and gradients to echo the inspiration from antfu.me.
I also added Open Graph tags, SEO meta descriptions, and responsive layout tweaks for a fully shareable experience.
#📈 What's Coming Next?
Contact form with spam protection and AJAX submission.
GitHub activity tracker and integration with Wakatime or Stats API.
Language toggle — planning to add multiple languages.
#🧠 Lessons Learned
Filament is a game changer for content-heavy portfolios.
Alpine.js is all you need for simple interactivity.
Tailwind is unmatched for design consistency and productivity.
Blade components make the UI modular and reusable — a huge plus as the site grows.
#🙌 Final Thoughts
Building this portfolio was more than just putting my projects on the web. It was about building a platform I’m proud of — something scalable, modern, and uniquely mine.
If you’re thinking of building your own portfolio and love the Laravel ecosystem, this stack is powerful and future-proof.
👉 Visit my portfolio
👉 Explore the source (coming soon on GitHub!)