-HTML -CSS -JavaScript + + + + + + -## Website +
-https://vimaltech.dev +--- -## Structure +# 📖 Overview -/pages handled via folder-based routing: +This repository contains the source code for my professional portfolio website. -/services +The website is built with **vanilla HTML, CSS, and JavaScript**, focusing on performance, responsive design, accessibility, SEO, and maintainability. It highlights my professional experience, technical expertise, frontend projects, freelance services, and contact information through a modern and interactive user interface. -/expertise +The portfolio is designed to provide an excellent user experience across desktop, tablet, and mobile devices while following modern frontend development best practices. -/about +--- -/contact +# ✨ Features + +## 🎨 User Interface + +- Modern Glassmorphism Design +- Responsive Layout +- Mobile-first Design +- Dark Mode Support +- Gradient Effects +- Interactive Components +- Smooth Animations +- Hover Effects +- Particle Background Animation +- Professional Typography +- Sticky Navigation Bar + +--- + +## 🚀 Performance + +- Lightweight Vanilla JavaScript +- Optimized CSS +- Lazy Loaded Images +- Optimized Font Loading +- Fast Page Rendering +- Clean Semantic HTML + +--- + +## 📱 Responsive Design + +- Desktop Optimized +- Tablet Friendly +- Mobile Responsive +- Hamburger Navigation +- Adaptive Layouts +- Flexible Grid System + +--- + +## 🔍 SEO Optimization + +- Semantic HTML5 +- Meta Tags +- Meta Description +- Meta Keywords +- Canonical URL +- Open Graph Tags +- Twitter Cards +- JSON-LD Structured Data +- Search Engine Friendly URLs +- Robots Meta Tag +- Optimized Page Titles + +--- + +## 📈 Analytics + +- Google Analytics Integration +- Visitor Tracking +- Traffic Insights + +--- + +## 🎯 User Experience + +- Smooth Scrolling +- Scroll To Top Button +- Floating WhatsApp Contact +- Animated Hero Section +- Interactive Project Cards +- Project Category Filtering +- Call-To-Action Sections +- Social Media Integration + +--- + +# 🛠️ Tech Stack + +| Technology | Purpose | +|------------|---------| +| HTML5 | Website Structure | +| CSS3 | Styling & Layout | +| JavaScript (ES6+) | Interactivity | +| Font Awesome | Icons | +| Google Fonts | Typography | +| Particles.js | Hero Background Animation | +| Google Analytics | Website Analytics | +| GitHub Actions | Continuous Integration | + +--- + +# 📂 Project Structure + +```text +portfolio-ui/ +│ +├── .github/ +│ ├── workflows/ +│ │ └── doc-check-linter.yml +│ └── CODEOWNERS +│ +├── css/ +│ ├── global.css +│ ├── index.css +│ ├── latest-works.css +│ ├── dropdown.css +│ └── whatsapp-floating.css +│ +├── images/ +│ +├── js/ +│ ├── global.js +│ ├── global-dark-mode-particles.js +│ ├── dropdown.js +│ └── latest-works.js +│ +├── index.html +│ +└── README.md +``` + +--- + +# 🖥️ Website Sections + +- Hero Section +- Competency & Proficiency +- Professional Services +- Live Projects +- Portfolio Preview +- Call-To-Action +- Professional Footer +- Resources +- Contact Information +- Social Media Links + +--- + +# 💼 Featured Projects + +The portfolio currently showcases several frontend applications built using different modern frontend frameworks. + +| Project | Technology | +|----------|------------| +| Alex Food Corner | React + Tailwind CSS + Vite | +| Suman Enterprise | Vue.js + Vuetify | +| Chai Makers | Angular | + +Each project includes: + +- Live Demo +- Source Code +- Technology Stack +- Project Description +- Interactive Project Card + +--- + +# 🎨 UI Components + +- Responsive Navigation +- Dropdown Menu +- Hero Banner +- Service Cards +- Experience Section +- Interactive Portfolio Cards +- Glassmorphism Cards +- CTA Banner +- Responsive Footer +- Social Icons +- Floating WhatsApp Button +- Scroll To Top Button +- Dark Mode Toggle + +--- + +# ⚡ JavaScript Features + +- Mobile Navigation +- Dark Mode +- Scroll Animations +- Project Filtering +- Dropdown Navigation +- Particle Initialization +- Scroll Button +- Interactive Components + +--- + +# 🌐 SEO Features + +The website includes modern SEO implementation such as: + +- Search Engine Optimized Metadata +- Open Graph Support +- Twitter Card Support +- Structured Data (JSON-LD) +- Canonical URLs +- Semantic HTML +- Accessibility-Friendly Structure + +--- + +# ⚙️ Continuous Integration + +GitHub Actions automatically performs: + +- HTML Validation +- CSS Linting +- JavaScript Linting +- DCO Verification +- Commit Signature Verification +- Trusted GPG Key Validation + +This ensures that every contribution follows coding standards and repository security requirements. + +--- + +# 🚀 Getting Started + +Clone the repository. + +```bash +git clone https://github.com/your-username/portfolio-ui.git +``` + +Navigate into the project. + +```bash +cd portfolio-ui +``` + +Open the project. + +```text +Open index.html in your preferred web browser. +``` + +Or use VS Code Live Server for local development. + +--- + +# 🌍 Deployment + +The project can be deployed to any static hosting platform including: + +- GitHub Pages +- Netlify +- Vercel +- Cloudflare Pages +- Firebase Hosting +- AWS S3 Static Website Hosting + +--- + +# 🌐 Browser Support + +| Browser | Supported | +|----------|-----------| +| Google Chrome | ✅ | +| Microsoft Edge | ✅ | +| Mozilla Firefox | ✅ | +| Safari | ✅ | +| Opera | ✅ | + +--- + +# 📋 Code Quality + +This project follows several frontend development best practices including: + +- Semantic HTML +- Modular CSS +- Reusable JavaScript +- Responsive Design +- Performance Optimization +- Accessibility Considerations +- SEO Best Practices +- Clean Folder Structure +- Continuous Integration +- Secure Repository Workflow + +--- + +# 🤝 Contributing + +Contributions are welcome. + +1. Fork the repository. + +2. Create a feature branch. + +```bash +git checkout -b feature/new-feature +``` + +3. Commit your changes. + +```bash +git commit -S -m "Add new feature" +``` + +4. Push your branch. + +```bash +git push origin feature/new-feature +``` + +5. Open a Pull Request. + +--- + +# 📄 License + +This project is licensed under the **MIT License**. + +--- + +# 👨💻 Author + +**Vimal Patel** + +Founder • Software Developer + +- 🌐 Website: https://vimaltech.dev +- 💼 LinkedIn: https://linkedin.com/in/vimaltech +- 💻 GitHub: https://github.com/vimal-java-dev +- 💻 GitHub: https://github.com/vimaltech-dev +- 💻 GitHub: https://github.com/vimaltech-starter +- 📧 Email: vimal.patel@vimaltech.dev + +--- + +# ⭐ Support + +If you found this project useful, please consider giving it a ⭐ on GitHub. + +Your support helps improve the project and encourages future open-source contributions. + +--- + +## 📌 Project Highlights + +- ✅ Built entirely with HTML5, CSS3, and JavaScript +- ✅ Fully responsive across all devices +- ✅ Modern Glassmorphism UI +- ✅ Interactive project showcase +- ✅ SEO optimized for search engines +- ✅ JSON-LD structured data +- ✅ Google Analytics integration +- ✅ Responsive navigation +- ✅ Dark mode support +- ✅ Floating WhatsApp integration +- ✅ GitHub Actions CI +- ✅ HTML, CSS, and JavaScript linting +- ✅ DCO & GPG commit verification +- ✅ Clean and maintainable project architecture +- ✅ Production-ready static portfolio website \ No newline at end of file diff --git a/robots.txt b/robots.txt index 8e00ee8..1aa4b7e 100644 --- a/robots.txt +++ b/robots.txt @@ -1,4 +1,7 @@ +# robots.txt for https://vimaltech.dev + User-agent: * Allow: / +# XML Sitemap Sitemap: https://vimaltech.dev/sitemap.xml \ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml index ceb60e9..d179c9f 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -2,39 +2,84 @@