---

╔══════════════════════════════════════════════════════════════════╗
║                                                                  ║
║      A portfolio isn't just a page.                              ║
║      It's the first thing they judge you by.                     ║
║                                                                  ║
║      Make it unforgettable.                                      ║
║                                                                  ║
╚══════════════════════════════════════════════════════════════════╝

---

✦ Features

🎨	Glassmorphism Design	Frosted glass cards. Depth. Atmosphere. Pure visual craft.
⚡	Vanilla JS Only	No React. No bloat. Loads in under a second. Lighthouse 100.
📱	Pixel-Perfect Responsive	iPhone SE → 4K ultrawide. Every pixel intentional.
✍️	Typing Animation	Roles cycle on the hero. Visitors stay. They always stay.
📨	Telegram Notifications	Contact form → your phone. No backend. No server. No bill.
🌙	Dark Mode Native	Because dark mode isn't a feature — it's the design itself.
🚀	One-Click Deploy	git clone to live URL. 60 seconds flat.

---

✦ Gallery

▲  The Hero — A first impression they won't forget

▲  The Story — Who you are. What you've built.

▲  The Journey — Your timeline. Your growth. Your proof.

---

✦ Quick Start

Step 1 — Clone

git clone https://github.com/omarmetman/devfolio-template.git
cd devfolio-template

Step 2 — Inject your identity  script.js

const CONFIG = {
  name: "Your Name",                    // ← The name they'll remember
  titles: [
    "Full Stack Developer",             // ← What you do
    "Open Source Builder",
    "Creative Coder",
  ],
  typingSpeed:    80,
  deletingSpeed:  40,
  pauseAfterWord: 2000,
};

Step 3 — Connect Telegram  (optional)

const BOT_TOKEN = "YOUR_BOT_TOKEN";    // ← From @BotFather
const CHAT_ID   = "YOUR_CHAT_ID";      // ← Your Telegram ID

Every message from your contact form appears in your Telegram — instantly.

---

✦ Deploy

  Clone ──────→ Edit CONFIG ──────→ Push to GitHub ──────→ Import in Vercel ──────→ 🌐 Live

Or just click this:

---

✦ File Structure

devfolio-template/
├── index.html       ← Semantic structure
├── style.css        ← All the visual magic
├── script.js        ← CONFIG + animations + Telegram
└── assets/          ← Your images & icons

---

DevFolio — Built for developers who give a damn about design.

Made with ♥ by Omar M. Etman · Egypt 🇪🇬 · 2026

If this helped you, a ⭐ goes a long way.