{"id":44539643,"url":"https://github.com/umairazmat/umairazmat.com","last_synced_at":"2026-02-13T18:56:28.449Z","repository":{"id":332076351,"uuid":"1127695058","full_name":"umairazmat/umairazmat.com","owner":"umairazmat","description":"Personal portfolio of Umair Azmat – Software Engineer (Frontend, Backend, Full-Stack). Built with Next.js, SEO-first, interactive, and remote-job focused.","archived":false,"fork":false,"pushed_at":"2026-02-10T05:37:36.000Z","size":1157,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-10T10:48:25.157Z","etag":null,"topics":["gitflow","nextjs","portfolio","reactjs","vibe-coding"],"latest_commit_sha":null,"homepage":"https://umairazmat.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/umairazmat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-04T12:16:15.000Z","updated_at":"2026-02-10T05:37:40.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/umairazmat/umairazmat.com","commit_stats":null,"previous_names":["umairazmat/umairazmat.com"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/umairazmat/umairazmat.com","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umairazmat%2Fumairazmat.com","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umairazmat%2Fumairazmat.com/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umairazmat%2Fumairazmat.com/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umairazmat%2Fumairazmat.com/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/umairazmat","download_url":"https://codeload.github.com/umairazmat/umairazmat.com/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umairazmat%2Fumairazmat.com/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29414289,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-13T06:24:03.484Z","status":"ssl_error","status_checked_at":"2026-02-13T06:23:12.830Z","response_time":78,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gitflow","nextjs","portfolio","reactjs","vibe-coding"],"created_at":"2026-02-13T18:56:27.066Z","updated_at":"2026-02-13T18:56:28.436Z","avatar_url":"https://github.com/umairazmat.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Umair Azmat - Professional Portfolio Website\n\nA modern, SEO-friendly, multi-language personal portfolio website built with Next.js 14+ (App Router), TypeScript, and Tailwind CSS. Features full internationalization (i18n) support with 5 languages, RTL support for Arabic, responsive design, and comprehensive SEO optimization.\n\n## 🆕 Version 2.0 - Latest Updates (2024)\n\n### 🎉 Major New Features\n- ✅ **Admin Dashboard System** - Complete admin panel with Supabase authentication\n  - Blog management (create, edit, delete, featured posts)\n  - Appointment management with search and filtering\n  - Newsletter leads management\n  - Site analytics dashboard\n- ✅ **Custom Appointment System** - Replaced Calendly with custom booking system\n  - Public appointment booking at `/appointments`\n  - Admin dashboard for managing appointments\n  - Full appointment details and status management\n- ✅ **Featured Blogs on Homepage** - Display 3 latest featured blog posts\n  - Matches homepage UI/UX with animated backgrounds\n  - Responsive grid layout\n  - Auto-hides if no featured blogs exist\n- ✅ **Newsletter with Interests** - Enhanced newsletter form in footer\n  - Email subscription with optional interest selection\n  - Dropdown selector for compact design\n  - Saves to Supabase leads table\n\n### Previous Updates (v1.0)\n- ✅ **Full Internationalization** - Added Italian language support, completing 5-language coverage\n- ✅ **Complete Translation Coverage** - All homepage sections, navbar, footer, contact modal, and blog pages fully translated\n- ✅ **RTL Layout Fixes** - Fixed Arabic RTL layout issues in navbar and components\n- ✅ **Responsive Navigation** - Improved mobile/tablet navigation with hamburger menu below 786px\n- ✅ **Hero Section Enhancements** - Updated buttons (View My Work, Contact Me), improved scroll behavior, styled resume download button\n- ✅ **Contact Form Integration** - Full Resend API integration with auto-close, click-outside, and Escape key support\n- ✅ **SEO Optimization** - Enhanced sitemap, robots.txt, structured data, and comprehensive meta tags\n- ✅ **API Routes** - Fixed Next.js 14 compatibility for dynamic routes (async params)\n- ✅ **Build Optimization** - All build errors resolved, production-ready\n\n### UI/UX Improvements\n- Language and theme switchers always visible in header (mobile/tablet)\n- Responsive logo display (Umair on mobile/tablet/laptop, Umair Azmat on desktop)\n- Resume download button in Hero section and mobile menu\n- Improved contact modal z-index and toast notifications\n- Better RTL-aware spacing and alignment\n\n## 🌟 Features\n\n### Core Features ✅\n\n- ✅ **Next.js 14+ App Router** - Modern React framework with TypeScript\n- ✅ **Multi-Language Support (i18n)** - 5 languages: English (US/GB), Arabic, German, Italian\n- ✅ **RTL Support** - Full right-to-left layout support for Arabic\n- ✅ **SEO Optimization** - Comprehensive metadata, sitemap, robots.txt, structured data (JSON-LD)\n- ✅ **Responsive Design** - Mobile-first design optimized for all screen sizes\n- ✅ **Dark/Light Theme** - System preference detection with manual toggle\n- ✅ **Contact Form** - Professional contact modal with Resend email integration\n- ✅ **Resume Download** - Easy access to resume PDF\n- ✅ **Blog System** - Full-featured blog with Supabase backend\n  - Create, edit, delete blog posts\n  - Categories and tags\n  - Featured posts\n  - Comments system\n  - Search and filtering\n- ✅ **Admin Dashboard** - Complete admin panel for content management\n- ✅ **Appointment System** - Custom appointment booking system\n- ✅ **Newsletter System** - Lead capture with interest tracking\n- ✅ **Interactive Sections** - Animated sections with Framer Motion\n- ✅ **Analytics Ready** - Built-in analytics tracking system\n- ✅ **Accessibility** - WCAG compliant with skip-to-content, ARIA labels\n\n### Homepage Sections\n\n1. **Hero Section** - Introduction with quick stats, CTA buttons (View My Work, Contact Me, Download Resume)\n2. **About Me** - Personal summary and professional highlights\n3. **Instant Proof** - Value proposition and proof points\n4. **Skills \u0026 Tech Stack** - Technical expertise organized by category (Frontend, Backend, Cloud, AI)\n5. **Featured Projects** - Showcase of key projects with filtering\n6. **Experiences** - Interactive timeline with detailed work history\n7. **How I Work** - Work methodology and process\n8. **Who I Work With** - Ideal clients and collaboration approach\n9. **Testimonials** - Client feedback and references\n10. **FAQ** - Frequently asked questions\n11. **Let's Build** - Final CTA section\n\n### Additional Pages\n\n- **Blog** - Full-featured blog with Supabase backend, categories, tags, comments\n- **Projects** - Detailed project showcase\n- **Skills** - Comprehensive skills breakdown\n- **Experience** - Work experience timeline\n- **Education** - Educational background\n- **Certifications** - Professional certifications\n- **Learning** - Continuous learning resources\n- **Appointments** - Custom appointment booking system\n\n### Admin Pages (Protected)\n\n- **Admin Dashboard** - Overview with statistics (`/admin/dashboard`)\n- **Blog Management** - Create, edit, delete blog posts (`/admin/blogs`)\n- **Appointment Management** - View and manage appointments (`/admin/appointments`)\n- **Leads Management** - View newsletter subscribers (`/admin/leads`)\n- **Analytics** - Site analytics and statistics (`/admin/analytics`)\n\n## 🌍 Internationalization (i18n)\n\nThe website supports 5 languages with full translation coverage:\n\n- **English (US)** - `en-US` (default)\n- **English (GB)** - `en-GB`\n- **Arabic** - `ar` (with RTL support)\n- **German** - `de`\n- **Italian** - `it`\n\n### Translation Coverage\n\n- ✅ All homepage sections\n- ✅ Navigation bar and dropdowns\n- ✅ Footer\n- ✅ Contact modal\n- ✅ Blog pages\n- ✅ All static pages\n- ✅ Error pages\n\n### RTL Support\n\nFull right-to-left (RTL) layout support for Arabic:\n- Automatic text direction switching\n- RTL-aware spacing and alignment\n- Proper flex direction handling\n- Navbar and component RTL optimization\n\n## 🛠️ Tech Stack\n\n### Core\n- **Framework**: Next.js 14+ (App Router)\n- **Language**: TypeScript\n- **Styling**: Tailwind CSS\n- **Animations**: Framer Motion\n- **Forms**: React Hook Form + Zod validation\n- **Icons**: Lucide React\n\n### Internationalization\n- **i18n**: react-i18next, i18next-browser-languagedetector\n- **Language Detection**: Automatic browser language detection with localStorage persistence\n\n### Blog\n- **MDX**: next-mdx-remote\n- **Content**: Gray Matter for frontmatter parsing\n\n### Backend \u0026 Database\n- **Database**: Supabase (PostgreSQL)\n- **Authentication**: Supabase Auth\n- **Real-time**: Supabase Realtime (if needed)\n\n### Email \u0026 Communication\n- **Email Service**: Resend API\n- **Notifications**: React Hot Toast\n\n### SEO \u0026 Analytics\n- **Structured Data**: JSON-LD schema\n- **Sitemap**: Dynamic sitemap generation\n- **Robots**: Configurable robots.txt\n- **Metadata**: Comprehensive Open Graph and Twitter Card support\n\n## 📁 Project Structure\n\n```\n├── app/\n│   ├── api/                    # API routes\n│   │   ├── analytics/          # Analytics tracking\n│   │   ├── blog/               # Blog API\n│   │   ├── comments/           # Comment system (like, dislike, report)\n│   │   └── contact/            # Contact form handler\n│   ├── blog/                   # Blog pages\n│   ├── [pages]/                # Static pages (projects, skills, etc.)\n│   ├── globals.css             # Global styles with RTL support\n│   ├── layout.tsx              # Root layout with metadata\n│   ├── page.tsx                # Homepage\n│   ├── robots.ts               # Robots.txt generator\n│   └── sitemap.ts              # Sitemap generator\n├── components/\n│   ├── sections/               # Homepage sections (11 sections)\n│   ├── ContactModal.tsx        # Contact form modal\n│   ├── Navbar.tsx              # Responsive navigation with i18n\n│   ├── Footer.tsx              # Footer with translations\n│   ├── LanguageSwitcher.tsx    # Language selection component\n│   ├── ThemeToggle.tsx         # Dark/light theme toggle\n│   ├── Chatbot.tsx             # AI chatbot component\n│   └── [other components]      # Additional UI components\n├── constants/\n│   └── index.ts                # Portfolio data and configuration\n├── content/\n│   └── blog/                   # Blog posts (MDX files)\n├── i18n/\n│   ├── config.ts               # i18n configuration\n│   └── locales/                # Translation files\n│       ├── en-US.json\n│       ├── en-GB.json\n│       ├── ar.json\n│       ├── de.json\n│       └── it.json\n├── lib/\n│   └── blog.ts                 # Blog utilities\n├── providers/\n│   └── I18nProvider.tsx        # i18n provider wrapper\n└── public/\n    ├── resume/                 # Resume PDF\n    ├── images/                 # Static images\n    ├── manifest.json           # PWA manifest\n    └── robots.txt              # Static robots.txt fallback\n```\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js 18+ \n- npm or yarn\n- Resend API key (for contact form)\n\n### Installation\n\n1. **Clone the repository:**\n```bash\ngit clone https://github.com/umairazmat/umairazmat.com.git\ncd umairazmat.com\n```\n\n2. **Install dependencies:**\n```bash\nnpm install\n```\n\n3. **Set up environment variables:**\nCreate a `.env.local` file:\n```env\n# Supabase (Required)\nNEXT_PUBLIC_SUPABASE_URL=your_supabase_url\nNEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your_publishable_key\n# OR\nNEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY=your_publishable_key\nSUPABASE_SERVICE_ROLE_KEY=your_service_role_key\n\n# Email (Optional - for contact form)\nRESEND_API_KEY=your_resend_api_key_here\n\n# Google Analytics \u0026 Tag Manager (Optional - for tracking)\nNEXT_PUBLIC_GTM_ID=GTM-WKFSSMK3\nNEXT_PUBLIC_GA_MEASUREMENT_ID=G-J38SWH6FV7\n\n# Site URL (Optional)\nNEXT_PUBLIC_SITE_URL=http://localhost:3000\n```\n\n4. **Run the development server:**\n```bash\nnpm run dev\n```\n\n5. **Open [http://localhost:3000](http://localhost:3000)** in your browser.\n\n## ⚙️ Configuration\n\n### Update Personal Information\n\nEdit `constants/index.ts` to update:\n- Personal info (name, email, location, timezone)\n- Experience entries\n- Projects\n- Skills\n- Social links\n- Resume URL\n\n### Add/Update Translations\n\nTranslation files are located in `i18n/locales/`. Each language has a JSON file:\n- `en-US.json` - English (US)\n- `en-GB.json` - English (GB)\n- `ar.json` - Arabic\n- `de.json` - German\n- `it.json` - Italian\n\nTo add a new translation:\n1. Add the key to all language files\n2. Use `t('key.path')` in components with `useTranslation()` hook\n\n### Add Blog Posts\n\nCreate MDX files in `content/blog/` with frontmatter:\n\n```mdx\n---\ntitle: Your Post Title\ndate: 2024-01-01\nexcerpt: Post excerpt\ntags: [tag1, tag2]\nauthor: Umair Azmat\nslug: your-post-slug\n---\n\nYour content here...\n```\n\n### Resume\n\nPlace your resume PDF at `public/resume/umair-azmat-resume.pdf` and update the path in `constants/index.ts`.\n\n### Contact Form Setup\n\nThe contact form uses Resend API for email delivery:\n\n1. Sign up at [resend.com](https://resend.com)\n2. Get your API key\n3. Add to `.env.local`: `RESEND_API_KEY=your_key`\n4. Update email recipient in `app/api/contact/route.ts`\n\n### Theme Customization\n\nTheme colors are configured in `tailwind.config.ts`. The site uses:\n- Primary: Sky blue (`sky-500`)\n- Dark mode: Gray scale\n- Custom RTL classes for Arabic support\n\n## 🔍 SEO Configuration\n\n### Metadata\n\nSEO metadata is configured in:\n- `app/layout.tsx` - Global metadata, Open Graph, Twitter Cards\n- `app/page.tsx` - Homepage-specific metadata\n- `app/blog/[slug]/page.tsx` - Blog post metadata\n\n### Sitemap\n\nDynamic sitemap generation in `app/sitemap.ts`:\n- Includes all main pages\n- Blog posts with priorities\n- Homepage sections\n- Change frequencies\n\n### Robots.txt\n\nConfigured in `app/robots.ts`:\n- Allow/disallow rules\n- Sitemap reference\n- User-agent specific rules\n\n### Structured Data\n\nJSON-LD structured data in `components/StructuredData.tsx`:\n- Person schema\n- Organization schema\n- Website schema\n- Breadcrumb schema\n\n## 📱 Responsive Design\n\nThe website is fully responsive with breakpoints:\n- **Mobile**: \u003c 640px (sm)\n- **Tablet**: 640px - 1024px (md, lg)\n- **Desktop**: \u003e 1024px (xl, 2xl)\n\n### Mobile Optimizations\n\n- Hamburger menu below 786px\n- Language and theme switchers always visible in header\n- Optimized touch targets\n- Mobile-first navigation\n- Responsive logo (Umair / Umair Azmat)\n\n## 🚢 Deployment\n\n### Vercel (Recommended)\n\n**Quick Deploy:**\n1. Push code to GitHub\n2. Go to [vercel.com](https://vercel.com) and sign in\n3. Click \"Add New Project\" and import repository\n4. Add environment variables:\n   - `RESEND_API_KEY`\n   - `NEXT_PUBLIC_SITE_URL`\n5. Click \"Deploy\"\n\n**Manual Deploy:**\n```bash\nnpm install -g vercel\nvercel\n```\n\n### Netlify\n\n**Quick Deploy:**\n1. Push code to GitHub\n2. Go to [netlify.com](https://netlify.com) and sign in\n3. Click \"Add new site\" → \"Import an existing project\"\n4. Connect GitHub repository\n5. Add environment variables\n6. Click \"Deploy site\"\n\n**Manual Deploy:**\n```bash\nnpm install -g netlify-cli\nnetlify deploy --prod\n```\n\n### Environment Variables\n\nRequired for production:\n- `RESEND_API_KEY` - Resend API key for contact form\n- `NEXT_PUBLIC_SITE_URL` - Your production site URL (e.g., `https://umairazmat.com`)\n\nOptional:\n- `OPENAI_API_KEY` - For enhanced chatbot (if implemented)\n\n### Build Verification\n\nTest the build locally:\n```bash\nnpm run build\nnpm start\n```\n\nVisit `http://localhost:3000` to verify everything works.\n\n## 🧹 Code Quality\n\n### Linting\n\n```bash\nnpm run lint\n```\n\n### Type Checking\n\nTypeScript is configured with strict mode. Check types:\n```bash\nnpx tsc --noEmit\n```\n\n### Code Cleanup\n\nThe project has been cleaned up:\n- ✅ Removed unused components\n- ✅ Removed unused pages\n- ✅ Removed unused dependencies\n- ✅ Optimized imports\n- ✅ Removed admin/auth pages\n\n## 📊 API Routes\n\n### Contact Form\n- **Route**: `/api/contact`\n- **Method**: POST\n- **Body**: `{ name, email, message }`\n- **Response**: `{ success: boolean }`\n\n### Blog Posts\n- **Route**: `/api/blog/posts`\n- **Method**: GET\n- **Response**: Array of blog posts\n\n### Comments\n- **Route**: `/api/comments`\n- **Methods**: GET, POST\n- **Dynamic Routes**:\n  - `/api/comments/[id]/like` - POST\n  - `/api/comments/[id]/dislike` - POST\n  - `/api/comments/[id]/report` - POST\n\n### Analytics\n- **Route**: `/api/analytics`\n- **Method**: POST\n- **Body**: `{ event, data }`\n\n## 🎨 Customization Guide\n\n### Adding a New Language\n\n1. Create new JSON file in `i18n/locales/` (e.g., `fr.json`)\n2. Add translations following the structure of `en-US.json`\n3. Update `i18n/config.ts`:\n   ```typescript\n   import fr from './locales/fr.json'\n   // Add to resources\n   'fr': { translation: fr },\n   // Add to supportedLngs\n   supportedLngs: ['en-US', 'en-GB', 'ar', 'de', 'it', 'fr'],\n   ```\n4. Add language option to `LanguageSwitcher.tsx`\n\n### Adding a New Section\n\n1. Create component in `components/sections/`\n2. Add to `app/page.tsx`\n3. Add translations to all language files\n4. Update sitemap if needed\n\n### Modifying Styles\n\n- Global styles: `app/globals.css`\n- Tailwind config: `tailwind.config.ts`\n- Component styles: Inline Tailwind classes\n\n## 🐛 Troubleshooting\n\n### Build Errors\n\nIf you encounter build errors:\n1. Clear `.next` directory: `rm -rf .next`\n2. Clear node_modules: `rm -rf node_modules \u0026\u0026 npm install`\n3. Check TypeScript errors: `npx tsc --noEmit`\n\n### Translation Issues\n\nIf translations don't appear:\n1. Check browser console for missing keys\n2. Verify translation files are valid JSON\n3. Clear localStorage: `localStorage.removeItem('i18nextLng')`\n\n### RTL Layout Issues\n\nIf Arabic layout is broken:\n1. Check `app/globals.css` for RTL rules\n2. Verify components use RTL-aware classes (`ms-`, `ps-`, `border-s`)\n3. Check for `no-rtl-reverse` class usage\n\n## 📄 License\n\nMIT License - see LICENSE file for details.\n\n## 📧 Contact\n\n- **Website**: [umairazmat.com](https://umairazmat.com)\n- **Email**: umair@umairazmat.com\n- **GitHub**: [@umairazmat](https://github.com/umairazmat)\n\n## 🙏 Acknowledgments\n\n- Built with [Next.js](https://nextjs.org/)\n- Styled with [Tailwind CSS](https://tailwindcss.com/)\n- Icons by [Lucide](https://lucide.dev/)\n- Animations by [Framer Motion](https://www.framer.com/motion/)\n- Translations powered by [react-i18next](https://react.i18next.com/)\n\n---\n\n**Last Updated**: 2024 - Portfolio v2.0.0 with admin dashboard, custom appointment system, featured blogs, and newsletter with interests.\n\nSee [V2_RELEASE_NOTES.md](./V2_RELEASE_NOTES.md) for detailed v2.0 release notes and [PRODUCTION_CHECKLIST.md](./PRODUCTION_CHECKLIST.md) for production deployment checklist.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumairazmat%2Fumairazmat.com","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fumairazmat%2Fumairazmat.com","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumairazmat%2Fumairazmat.com/lists"}