We live in a world of 5MB JavaScript bundles.
React, Angular, Vue... they are amazing tools. But for a portfolio or a showcase site? They are often overkill.
As a student developer, I wanted to challenge the status quo.
I asked myself: "Can I build a site that feels instant, looks modern, and scores a perfect 100/100 on Lighthouse, without a single framework?"
The answer is Yes. And here is how I built Drasiotech.dev.
🐢 The Problem: "The Framework Tax"
Most student portfolios I see are built on WordPress or heavy React templates.
The result?
- Slow TTI (Time to Interactive)
Huge JS payloads just to render a static page.
Generic designs that look like everyone else's.
I wanted raw performance. I wanted to be closer to the metal (the browser).
⚡ The Solution: Edge + Vanilla JS
I call my stack the "Pure Performance Stack":
- HTML5 & CSS3 Variables: No Tailwind, no Bootstrap. Just clean, semantic code.
- Vanilla JavaScript: No compilation step, no hydration nightmare.
- Vercel Edge: Serving content from the closest node to the user.
The Result?
![Lighthouse Score 100/100]
Performance: 100
Accessibility: 100
Best Practices: 100
SEO: 100
🐍 The "Easter Egg" Benchmark
Performance is boring if you can't feel it.
So I hid a Snake Game inside the footer (or via the /snake route).
It's not just a game; it's a latency benchmark.
It weighs less than 5KB. It loads instantly. It proves that you don't need a game engine to make something fun in the browser.
Challenge: My high score is 410. Can you beat it?
👉 Play the Benchmark Here
🛠️ Lessons Learned
Building this taught me more than any React tutorial:
DOM Manipulation is fast. You don't always need a Virtual DOM.
CSS Grid > Flexbox for complex layouts (like my Bento Grid design).
Images matter. Preloading WebP images saved me 300ms on load time.
🚀 Check the Code
I decided to make the whole project Open Source.
If you are a student or a junior dev looking to understand how to structure a "No-Framework" project, check the repo:
Drasiotech.dev
L'Art de la Performance Web & du SEO Technique
Architecture Serverless • Vanilla JS • Edge Network
⚡ À propos du projet
Drasiotech est une démonstration technique radicale réalisée dans le cadre du BTS SIO SLAM
À une époque où le web est alourdi par des frameworks complexes, ce projet prend le contre-pied : revenir aux fondamentaux pour une performance absolue.
L'objectif ? Prouver qu'une stack native (HTML5/CSS3/JS) couplée à une infrastructure Edge (Vercel) surpasse les solutions modernes en termes de vitesse, de SEO et d'éco-conception.
🎯 Les Scores (Audit Lighthouse)
| Métrique | Score | Impact |
|---|---|---|
| Performance | 🟢 100 | Chargement instantané (< 0.5s LCP) |
| Accessibilité | 🟢 100 | Compatible lecteurs d'écran & navigation clavier |
| Best Practices | 🟢 100 | HTTPS, HSTS, pas de vulnérabilités |
| SEO | 🟢 100 | Données structurées (JSON-LD) & balisage sémantique |
🛠️ Stack Technique
Ce projet suit la philosophie "Zero Bloat". Aucune librairie inutile.
- …
Whatever your stack, keep shipping! 🚀
If you liked this post, drop a star on the repo or let me know your Snake high score in the comments! 👇
SOCIAL SHARE CARD GENERATOR