| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"> |
| <title>Privacy Policy - Portfolio API</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
| <link rel="icon" type="image/png" href="/images/logo.png"> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| @keyframes fadeInUp { |
| from { |
| opacity: 0; |
| transform: translateY(30px); |
| } |
| |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| @keyframes float { |
| |
| 0%, |
| 100% { |
| transform: translateY(0px); |
| } |
| |
| 50% { |
| transform: translateY(-10px); |
| } |
| } |
| |
| .animate-fadeInUp { |
| animation: fadeInUp 0.6s ease-out; |
| } |
| |
| .animate-float { |
| animation: float 3s ease-in-out infinite; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| |
| .gradient-text { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| |
| .card-hover { |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .logo-img { |
| width: 40px; |
| height: 40px; |
| object-fit: contain; |
| border-radius: 10px; |
| } |
| |
| @media (max-width: 640px) { |
| .py-20 { |
| padding-top: 3rem; |
| padding-bottom: 3rem; |
| } |
| |
| .py-16 { |
| padding-top: 2rem; |
| padding-bottom: 2rem; |
| } |
| |
| .text-5xl { |
| font-size: 2rem; |
| } |
| |
| .text-3xl { |
| font-size: 1.5rem; |
| } |
| |
| .text-xl { |
| font-size: 1rem; |
| } |
| |
| .h-16 { |
| height: auto; |
| padding: 0.5rem 0; |
| } |
| } |
| </style> |
| </head> |
|
|
| <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen"> |
|
|
| |
| <nav class="bg-white/90 backdrop-blur-md shadow-lg sticky top-0 z-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex flex-wrap justify-between items-center py-2 md:py-0 md:h-16"> |
| <div class="flex items-center space-x-3"> |
| <img src="/images/logo.png" alt="Logo" class="logo-img"> |
| <h1 class="text-lg md:text-xl font-bold gradient-text">Portfolio API</h1> |
| </div> |
| <div class="flex items-center space-x-3 mt-2 md:mt-0"> |
| <a href="/" class="text-gray-600 hover:text-purple-600 transition px-2 py-1">Home</a> |
| <a href="/api-docs" class="text-gray-600 hover:text-purple-600 transition px-2 py-1">API Docs</a> |
| <a href="/privacy" class="text-purple-600 font-medium px-2 py-1">Privacy</a> |
| <a href="/terms" class="text-gray-600 hover:text-purple-600 transition px-2 py-1">Terms</a> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="relative overflow-hidden"> |
| <div class="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 opacity-10"></div> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> |
| <div class="text-center animate-fadeInUp"> |
| <div class="inline-flex items-center justify-center p-2 bg-green-100 rounded-full mb-4"> |
| <i class="fas fa-shield-alt text-green-600 mr-2"></i> |
| <span class="text-green-600 text-sm font-medium">Your Privacy Matters</span> |
| </div> |
| <h1 class="text-4xl md:text-5xl font-bold gradient-text mb-4">Privacy Policy</h1> |
| <p class="text-gray-600 max-w-2xl mx-auto">Last updated: April 2, 2026</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-4xl mx-auto px-4 py-8"> |
| <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 card-hover animate-fadeInUp"> |
| <div class="prose prose-purple max-w-none"> |
| <div class="space-y-8"> |
| |
| <div class="border-b border-gray-100 pb-6"> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center"> |
| <i class="fas fa-database text-white text-sm"></i> |
| </div> |
| <h2 class="text-2xl font-bold text-gray-800">1. Information We Collect</h2> |
| </div> |
| <p class="text-gray-600 leading-relaxed">We collect information you provide directly to us, such |
| as when you create an account, update your profile, or use our API services. This may |
| include:</p> |
| <ul class="mt-3 space-y-2"> |
| <li class="flex items-center gap-2 text-gray-600"><i |
| class="fas fa-check-circle text-green-500 text-sm"></i> Name and email address</li> |
| <li class="flex items-center gap-2 text-gray-600"><i |
| class="fas fa-check-circle text-green-500 text-sm"></i> Profile information (avatar, |
| bio, skills)</li> |
| <li class="flex items-center gap-2 text-gray-600"><i |
| class="fas fa-check-circle text-green-500 text-sm"></i> Project data you submit</li> |
| <li class="flex items-center gap-2 text-gray-600"><i |
| class="fas fa-check-circle text-green-500 text-sm"></i> OAuth credentials from |
| Google, Facebook, GitHub, or MGZon</li> |
| </ul> |
| </div> |
|
|
| |
| <div class="border-b border-gray-100 pb-6"> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center"> |
| <i class="fas fa-chart-line text-white text-sm"></i> |
| </div> |
| <h2 class="text-2xl font-bold text-gray-800">2. How We Use Your Information</h2> |
| </div> |
| <p class="text-gray-600 leading-relaxed">We use the information we collect to:</p> |
| <ul class="mt-3 space-y-2"> |
| <li class="flex items-center gap-2 text-gray-600"><i |
| class="fas fa-check-circle text-green-500 text-sm"></i> Provide, maintain, and |
| improve our API services</li> |
| <li class="flex items-center gap-2 text-gray-600"><i |
| class="fas fa-check-circle text-green-500 text-sm"></i> Authenticate your identity |
| and manage your account</li> |
| <li class="flex items-center gap-2 text-gray-600"><i |
| class="fas fa-check-circle text-green-500 text-sm"></i> Respond to your comments and |
| questions</li> |
| <li class="flex items-center gap-2 text-gray-600"><i |
| class="fas fa-check-circle text-green-500 text-sm"></i> Send you technical notices |
| and support messages</li> |
| </ul> |
| </div> |
|
|
| |
| <div class="border-b border-gray-100 pb-6"> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center"> |
| <i class="fas fa-lock text-white text-sm"></i> |
| </div> |
| <h2 class="text-2xl font-bold text-gray-800">3. Data Security</h2> |
| </div> |
| <p class="text-gray-600 leading-relaxed">We implement appropriate technical and organizational |
| measures to protect your personal information against unauthorized access, alteration, |
| disclosure, or destruction. Your data is encrypted and stored securely.</p> |
| </div> |
|
|
| |
| <div> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center"> |
| <i class="fas fa-envelope text-white text-sm"></i> |
| </div> |
| <h2 class="text-2xl font-bold text-gray-800">4. Contact Us</h2> |
| </div> |
| <p class="text-gray-600 leading-relaxed">If you have any questions about this Privacy Policy, |
| please contact us at:</p> |
| <div class="mt-4 p-4 bg-gray-50 rounded-xl"> |
| <a href="mailto:marklasfar@gmail.com" |
| class="text-purple-600 hover:text-purple-700 font-medium flex items-center gap-2"> |
| <i class="fas fa-envelope"></i> |
| marklasfar@gmail.com |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-800 text-white py-8 mt-8"> |
| <div class="max-w-7xl mx-auto px-4 text-center"> |
| <p class="text-gray-400 text-sm">© 2026 Ibrahim Al-Asfar. All rights reserved.</p> |
| <p class="text-gray-500 text-xs mt-2">Built with ❤️ using Node.js, Express, MongoDB & TailwindCSS</p> |
| <div class="flex flex-wrap justify-center gap-3 mt-4"> |
| <a href="/privacy" class="text-gray-500 hover:text-purple-400 text-xs transition">Privacy Policy</a> |
| <span class="text-gray-600 text-xs">•</span> |
| <a href="/terms" class="text-gray-500 hover:text-purple-400 text-xs transition">Terms of Service</a> |
| <span class="text-gray-600 text-xs">•</span> |
| <a href="/sitemap.xml" class="text-gray-500 hover:text-purple-400 text-xs transition">Sitemap</a> |
| <span class="text-gray-600 text-xs">•</span> |
| <a href="/api-docs" class="text-gray-500 hover:text-purple-400 text-xs transition">API Docs</a> |
| </div> |
| </div> |
| </footer> |
| </body> |
|
|
| </html> |
