{"id":2,"date":"2025-08-02T13:05:26","date_gmt":"2025-08-02T13:05:26","guid":{"rendered":"https:\/\/mansour.ly\/?page_id=2"},"modified":"2025-11-21T16:26:30","modified_gmt":"2025-11-21T16:26:30","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/mansour.ly\/","title":{"rendered":"..."},"content":{"rendered":"\n\n\n\n \n \n Ahmed Mansour | Creative Developer<\/title>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600&family=Space+Grotesk:wght@500;700&display=swap\" rel=\"stylesheet\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <style>\n :root {\n \/* REVERTED TO VIBRANT COLORS *\/\n --bg: #050505;\n --card-bg: rgba(20, 20, 22, 0.6);\n --border: rgba(255, 255, 255, 0.08);\n --accent-1: #7928CA; \/* Purple *\/\n --accent-2: #FF0080; \/* Pink\/Magenta *\/\n --status-color: #00ff88; \/* Neon Green *\/\n --text-main: #ffffff;\n --text-muted: #888888;\n }\n\n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n padding: 0;\n font-family: 'Inter', sans-serif;\n background-color: var(--bg);\n color: var(--text-main);\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n }\n\n \/* --- Background Effects --- *\/\n .noise-overlay {\n position: fixed;\n top: 0; left: 0; width: 100%; height: 100%;\n background: url('data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJnoiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjY1Ii nudW1PY3RhdmVzPSIzIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI2cpIiBvcGFjaXR5PSIwLjAzIi8+PC9zdmc+');\n pointer-events: none;\n z-index: 0;\n }\n\n .gradient-orb {\n position: absolute;\n width: 600px;\n height: 600px;\n \/* Using Purple accent *\/\n background: radial-gradient(circle, var(--accent-1) 0%, rgba(0,0,0,0) 70%);\n border-radius: 50%;\n opacity: 0.4;\n filter: blur(80px);\n animation: drift 15s infinite alternate;\n z-index: -1;\n }\n \n .orb-2 {\n \/* Using Pink accent *\/\n background: radial-gradient(circle, var(--accent-2) 0%, rgba(0,0,0,0) 70%);\n right: -100px;\n bottom: -100px;\n animation-delay: -5s;\n }\n\n @keyframes drift {\n 0% { transform: translate(0, 0); }\n 100% { transform: translate(50px, -50px); }\n }\n\n \/* --- The Grid Layout --- *\/\n .bento-grid {\n display: grid;\n grid-template-columns: 1.5fr 1fr;\n grid-template-rows: auto auto;\n gap: 16px;\n width: 90%;\n max-width: 900px;\n z-index: 1;\n }\n\n .card {\n background: var(--card-bg);\n border: 1px solid var(--border);\n border-radius: 24px;\n padding: 32px;\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n }\n\n .card:hover {\n transform: translateY(-2px);\n border-color: rgba(255, 255, 255, 0.2);\n box-shadow: 0 10px 40px rgba(0,0,0,0.5);\n }\n\n \/* Specific Card Styles *\/\n .profile-card { grid-row: span 2; }\n .header-content h1 {\n font-family: 'Space Grotesk', sans-serif;\n font-size: 3rem;\n margin: 0;\n line-height: 1.1;\n background: linear-gradient(to right, #fff, #aaa);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n .header-content p {\n color: var(--text-muted);\n font-size: 1.1rem;\n margin-top: 10px;\n }\n\n \/* Status Badge (Neon Green) *\/\n .status-badge {\n display: inline-flex;\n align-items: center;\n background: rgba(0, 255, 136, 0.1);\n border: 1px solid rgba(0, 255, 136, 0.2);\n color: var(--status-color);\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 0.85rem;\n font-weight: 600;\n margin-bottom: 20px;\n width: fit-content;\n }\n\n .pulse-dot {\n width: 8px;\n height: 8px;\n background-color: var(--status-color);\n border-radius: 50%;\n margin-right: 8px;\n animation: pulse 2s infinite;\n }\n\n @keyframes pulse {\n 0% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.4); }\n 70% { box-shadow: 0 0 0 6px rgba(0, 255, 136, 0); }\n 100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); }\n }\n\n .tech-stack { margin-top: auto; }\n .tech-title {\n font-size: 0.9rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--text-muted);\n margin-bottom: 15px;\n }\n\n .icons {\n display: flex;\n gap: 15px;\n font-size: 1.5rem;\n color: white; \/* Base color for icons *\/\n }\n\n .icons i {\n transition: color 0.3s ease;\n }\n \/* Icon hover color is back to Pink\/Magenta *\/\n .icons i:hover { color: var(--accent-2); } \n\n \/* Contact Card (Purple\/Pink Gradient) *\/\n .contact-card {\n background: linear-gradient(135deg, rgba(121, 40, 202, 0.2), rgba(20, 20, 22, 0.6));\n border-color: rgba(121, 40, 202, 0.3);\n }\n\n .contact-group { margin-bottom: 20px; }\n .email-display {\n background: var(--bg);\n border: 1px solid var(--border);\n border-radius: 12px;\n padding: 10px 15px;\n margin-bottom: 10px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-family: 'Space Grotesk', monospace;\n font-size: 0.9rem;\n cursor: text;\n }\n\n .email-display button {\n background: none;\n border: none;\n color: var(--text-muted);\n cursor: pointer;\n transition: color 0.2s;\n margin-left: 10px;\n }\n\n \/* Copy icon hover color is back to Neon Green *\/\n .email-display button:hover {\n color: var(--status-color); \n }\n \n .email-display button i { pointer-events: none; }\n\n .social-links { display: grid; gap: 10px; }\n .link-btn {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background: rgba(255, 255, 255, 0.05);\n border-radius: 12px;\n text-decoration: none;\n color: white;\n font-weight: 500;\n transition: all 0.2s;\n }\n .link-btn:hover { background: white; color: black; }\n\n \/* Action Card *\/\n .action-card {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n }\n .cta-text {\n font-family: 'Space Grotesk', sans-serif;\n font-size: 1.5rem;\n font-weight: 700;\n }\n .arrow-btn {\n width: 50px;\n height: 50px;\n background: white;\n color: black;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n text-decoration: none;\n font-size: 1.2rem;\n transition: transform 0.3s;\n }\n .arrow-btn:hover { transform: rotate(-45deg); }\n\n \/* Mobile Responsive *\/\n @media (max-width: 768px) {\n body { height: auto; padding: 50px 0; overflow-y: auto; }\n .bento-grid { grid-template-columns: 1fr; grid-template-rows: auto; }\n .profile-card { grid-row: span 1; }\n .header-content h1 { font-size: 2.5rem; }\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"noise-overlay\"><\/div>\n <div class=\"gradient-orb\"><\/div>\n <div class=\"gradient-orb orb-2\"><\/div>\n\n <div class=\"bento-grid\">\n \n <div class=\"card profile-card\">\n <div>\n <div class=\"status-badge\">\n <div class=\"pulse-dot\"><\/div>\n Open to work\n <\/div>\n <div class=\"header-content\">\n <h1>Ahmed<br>Mansour.<\/h1>\n <p>Software Engineer & Creative Developer crafting digital experiences.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"tech-stack\">\n <div class=\"tech-title\">Toolbox<\/div>\n <div class=\"icons\">\n <i class=\"fab fa-laravel\" style=\"color: #FF2D20;\" title=\"Laravel\"><\/i>\n <i class=\"fab fa-dev\" style=\"color: #02569B;\" title=\"Flutter\"><\/i>\n <i class=\"fas fa-desktop\" style=\"color: #68217A;\" title=\"C# \/ .NET\"><\/i>\n <i class=\"fas fa-wind\" style=\"color: #06B6D4;\" title=\"TALL Stack (Livewire, Tailwind)\"><\/i>\n <i class=\"fab fa-ubuntu\" style=\"color: #E95420;\" title=\"Ubuntu\"><\/i>\n <i class=\"fas fa-terminal\" title=\"System \/ CLI\"><\/i>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card contact-card\">\n <div class=\"tech-title\">Connect<\/div>\n \n <div class=\"contact-group\">\n <div class=\"email-display\">\n <span id=\"email-to-copy\">ahmans7@yahoo.com<\/span>\n <button onclick=\"copyEmail()\">\n <i class=\"fas fa-copy\" id=\"copy-icon\"><\/i>\n <\/button>\n <\/div>\n <p style=\"font-size:0.8rem; color:var(--text-muted); margin:0;\">Click to copy, or select to highlight.<\/p>\n <\/div>\n\n <div class=\"social-links\">\n <a href=\"mailto:ahmed@mansour.ly\" class=\"link-btn\">\n <span>Secondary Email<\/span>\n <i class=\"fas fa-arrow-right\"><\/i>\n <\/a>\n <a href=\"https:\/\/wa.me\/2180918819870\" class=\"link-btn\">\n <span>WhatsApp<\/span>\n <i class=\"fab fa-whatsapp\"><\/i>\n <\/a>\n <a href=\"tel:+218918819870\" class=\"link-btn\">\n <span>Call Me!<\/span>\n <i class=\"fa-solid fa-phone\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"card action-card\">\n <div class=\"cta-text\">Let’s build<br>something cool.<\/div>\n <a href=\"mailto:ahmans7@yahoo.com\" class=\"arrow-btn\">\n <i class=\"fas fa-arrow-right\"><\/i>\n <\/a>\n <\/div>\n\n <\/div>\n\n <script>\n function copyEmail() {\n const emailElement = document.getElementById(\"email-to-copy\");\n const emailText = emailElement.textContent;\n const copyIcon = document.getElementById(\"copy-icon\");\n const successColor = 'var(--status-color)'; \/\/ Uses the Neon Green success color\n\n navigator.clipboard.writeText(emailText).then(() => {\n \/\/ Change icon and provide feedback\n copyIcon.classList.remove('fa-copy');\n copyIcon.classList.add('fa-check');\n copyIcon.style.color = successColor;\n \n setTimeout(() => {\n \/\/ Reset icon and color after a delay\n copyIcon.classList.remove('fa-check');\n copyIcon.classList.add('fa-copy');\n copyIcon.style.color = 'var(--text-muted)';\n }, 2000);\n }).catch(err => {\n console.error('Could not copy text: ', err);\n alert(\"Please manually copy the email address: \" + emailText);\n });\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Ahmed Mansour | Creative Developer Open to work AhmedMansour. Software Engineer & Creative Developer crafting digital experiences. Toolbox Connect ahmans7@yahoo.com Click to copy, or select to highlight. Secondary Email WhatsApp Call Me! Let’s buildsomething cool.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"blank-slate-template.php","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mansour.ly\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mansour.ly\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mansour.ly\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mansour.ly\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mansour.ly\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":14,"href":"https:\/\/mansour.ly\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":37,"href":"https:\/\/mansour.ly\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/37"}],"wp:attachment":[{"href":"https:\/\/mansour.ly\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}