Leon - Personal Portfolio Template

A clean, responsive, and modern personal portfolio template built with vanilla HTML, CSS, and JavaScript. Ideal for developers and creatives who want to showcase their work in a professional way.

🚀 Features

• ✅ Normalize.css for consistent styling across all browsers
• 🧩 Custom-made CSS framework to avoid repetition and ensure scalability
• 💠 Built-in CSS variables for easy theming and customization
• 🔳 Utilizes Flexbox (via Tailwind CSS) and CSS Grid (via Bootstrap) for flexible, responsive layouts
• 🎯 Fully responsive and mobile-friendly
• 🌟 Integrated with Font Awesome for beautiful, scalable icons
• 🎬 JavaScript-powered effects for interactivity and dynamic UI
• 🎞️ Dedicated animation CSS file to keep the codebase clean and organized

📁 Project Structure

├── .vscode/               # VS Code settings (e.g., extensions, launch configs)
├── css/                   # All CSS files including framework, styles, and animations
│   ├── main.css
│   ├── framework.css
│   ├── variables.css
│   └── animation.css      # Animations separated for clarity
├── images/                # Project images (e.g., logo, banners)
├── vendor/                # PHPMailer and dependencies
├── webfonts/              # Font Awesome web fonts
├── index.php              # Main entry page (includes form and content)
├── logic.js               # JavaScript logic for interactivity
├── send.php               # Form handling via PHPMailer
├── composer.json          # PHP dependencies
├── composer.lock          # Lock file for composer
└── README.md              # Project documentation

✨ Normalize.css

Modern browsers apply default styles to HTML elements, but these defaults vary. Normalize.css ensures a consistent base across all browsers.

🧱 CSS Framework & Layouts

A lightweight, custom-built CSS framework was created to enhance scalability and maintain DRY (Don't Repeat Yourself) principles. It includes:

• Grid system (Bootstrap)
• Flexbox utilities (Tailwind CSS)
• Spacing utilities (margin/padding)
• Text alignment classes
• Button styles
• And more...

🎨 Fonts & Icons

Font Awesome is used for scalable, customizable vector icons to enhance the UI while maintaining performance.

📱 Responsiveness

Responsive design was a key focus. Media queries and responsive units ensure the layout adapts perfectly to:

• Desktop
• Tablets
• Mobile phones

🎬 JavaScript & Animations

JavaScript was used to implement dynamic visual effects. All CSS animations are organized in a separate animation.css file to keep the stylesheets modular and clean.

📌 How to Use

Clone the repository:

git clone https://github.com/devSeyf/leon-portfolio.git

Then open index.html in your browser or through a live server. Customize content, colors, and structure as needed.

📄 License

This project is open-source and available under the MIT License.

---

هل تحب أن أترجم هذا الملف للعربية أو أجهزه لك بنسخة Markdown جاهزة للرفع؟