The astro first experiences

Building This Portfolio with Astro

Learning Astro turned out to be a lot more enjoyable than I expected. Going in, I anticipated a steep learning curve with new syntax to memorize, but building this portfolio made me realize how approachable it actually is.

The Syntax

The only real addition to what I already knew was the frontmatter block, the triple dashes at the top of every .astro file where you write your JavaScript logic:

---
// your JS/TS logic goes here
const title = "Hello World"
---

<h1>{title}</h1>

Everything else felt familiar. The layout system, imports, and slots all map closely to concepts I already understood from working with other frameworks.

Coming from Laravel

Coming from Laravel, the mental shift was smaller than I expected too. Laravel follows the MVC pattern, your logic lives in Controllers, your data in Models, and your presentation in Blade views.

Astro isn’t strictly MVC, but the separation of concerns feels similar in practice. The frontmatter block acts almost like a lightweight controller where you fetch data, run logic, and pass it down. The markup below it is your view. There’s no formal Model layer since Astro is mostly static, but if you’re used to keeping logic and presentation separate in Laravel, you’ll find yourself doing the same thing naturally without really thinking about it.

The Part That Tripped Me Up

One thing that did trip me up was routing. In Laravel, routes are explicit. You define them in web.php, point them to a controller, and you have full control over the URL structure from one place:

Route::get('/about', [PageController::class, 'about']);

I came into Astro expecting something similar and spent some time looking for where to register routes before realizing there isn’t a routes file at all. Astro uses file-based routing, meaning the file structure inside src/pages/ is your route definition:

src/pages/
├── index.astro       → /
├── about.astro       → /about
└── blog/
    └── [slug].astro  → /blog/:slug

Once I understood that I stopped fighting it, and for a single-page portfolio I ended up just using index.astro as the single entry point and anchoring all the sections from there. Less to configure, and honestly the right call for this kind of project.

The Blog Section

The one part that still needed some extra help was getting the blog section working. Content collections in Astro have their own conventions, but after working through it, it clicked.

Final Thoughts

Overall it was one of the smoother framework learning experiences I’ve had, and coming in with a Laravel background probably helped more than I initially gave it credit for. If you’re a Laravel developer curious about Astro, I’d say just start building something, it’s more familiar than it looks.