{"id":11,"date":"2026-07-15T11:56:48","date_gmt":"2026-07-15T08:26:48","guid":{"rendered":"http:\/\/hemayateman.ir\/?page_id=11"},"modified":"2026-07-15T12:43:11","modified_gmt":"2026-07-15T09:13:11","slug":"%d9%85%d8%ad%d9%85%d8%af-%d8%ae%d8%af%db%8c%d9%88-%d8%b7%d8%b1%d8%a7%d8%ad-%d8%b3%d8%a7%db%8c%d8%aa-%d9%88-%d8%b7%d8%b1%d8%a7%d8%ad-%da%af%d8%b1%d8%a7%d9%81%db%8c%da%a9","status":"publish","type":"page","link":"https:\/\/hemayateman.ir\/","title":{"rendered":"\u0645\u062d\u0645\u062f \u062e\u062f\u06cc\u0648 | \u0637\u0631\u0627\u062d \u0633\u0627\u06cc\u062a \u0648 \u0637\u0631\u0627\u062d \u06af\u0631\u0627\u0641\u06cc\u06a9"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11\" class=\"elementor elementor-11\">\n\t\t\t\t<div class=\"elementor-element elementor-element-77d7749 e-con-full e-flex e-con e-parent\" data-id=\"77d7749\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-68cf4f0 elementor-widget elementor-widget-html\" data-id=\"68cf4f0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \n  Mohammad Khadiv - Creative Portfolio Landing Page (Elementor Optimized)\n  Designed with Modern Glassmorphism, Animations, and Interactive Tabs.\n-->\n\n<!-- CDN Links for Fonts and Icons -->\n<link href=\"https:\/\/cdn.jsdelivr.net\/gh\/rastikerdar\/vazirmatn@v33.003\/Vazirmatn-font-face.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\" \/>\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<script>\n  \/\/ Tailwind Configuration for Theme Customization\n  tailwind.config = {\n    theme: {\n      extend: {\n        colors: {\n          brand: {\n            primary: '#8B5CF6',    \/* Violet *\/\n            secondary: '#3B82F6',  \/* Blue *\/\n            dark: '#0B0F19',       \/* Deep Dark Space *\/\n            glass: 'rgba(17, 24, 39, 0.7)',\n            border: 'rgba(255, 255, 255, 0.08)'\n          }\n        },\n        fontFamily: {\n          vazir: ['Vazirmatn', 'sans-serif']\n        }\n      }\n    }\n  }\n<\/script>\n\n<style>\n  \/* Base Isolation and Scope for Elementor to prevent style bleeding *\/\n  .khadiv-landing-root {\n    font-family: 'Vazirmatn', sans-serif !important;\n    direction: rtl !important;\n    text-align: right !important;\n    box-sizing: border-box;\n  }\n\n  .khadiv-landing-root *, .khadiv-landing-root *::before, .khadiv-landing-root *::after {\n    box-sizing: inherit;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  \/* Custom Scrollbar for Inner Tab Content to maintain strict heights *\/\n  .khadiv-custom-scroll::-webkit-scrollbar {\n    width: 5px;\n  }\n  .khadiv-custom-scroll::-webkit-scrollbar-track {\n    background: rgba(255, 255, 255, 0.02);\n    border-radius: 10px;\n  }\n  .khadiv-custom-scroll::-webkit-scrollbar-thumb {\n    background: rgba(139, 92, 246, 0.3);\n    border-radius: 10px;\n  }\n  .khadiv-custom-scroll::-webkit-scrollbar-thumb:hover {\n    background: rgba(139, 92, 246, 0.6);\n  }\n\n  \/* Glassmorphism details *\/\n  .glass-card {\n    background: rgba(10, 15, 30, 0.75);\n    backdrop-filter: blur(16px);\n    -webkit-backdrop-filter: blur(16px);\n    border: 1px solid rgba(255, 255, 255, 0.08);\n  }\n\n  \/* Custom animated neon background blobs *\/\n  @keyframes blob-bounce {\n    0%, 100% { transform: translate(0, 0) scale(1); }\n    50% { transform: translate(30px, -50px) scale(1.1); }\n  }\n  @keyframes blob-bounce-reverse {\n    0%, 100% { transform: translate(0, 0) scale(1.1); }\n    50% { transform: translate(-30px, 40px) scale(0.9); }\n  }\n  .animate-blob-1 {\n    animation: blob-bounce 12s infinite alternate ease-in-out;\n  }\n  .animate-blob-2 {\n    animation: blob-bounce-reverse 16s infinite alternate ease-in-out;\n  }\n\n  \/* Tab Curve Top Fold Effect *\/\n  .tab-curve {\n    border-top-left-radius: 16px;\n    border-top-right-radius: 16px;\n    position: relative;\n  }\n\n  .tab-active {\n    background: rgba(10, 15, 30, 0.75);\n    border-bottom-color: transparent !important;\n    color: #a78bfa !important;\n    font-weight: 700;\n  }\n  \n  .tab-inactive {\n    background: rgba(255, 255, 255, 0.02);\n    border-color: transparent;\n    color: #9ca3af;\n  }\n  .tab-inactive:hover {\n    background: rgba(255, 255, 255, 0.05);\n    color: #f3f4f6;\n  }\n\n  \/* Notification Toast styling *\/\n  #khadiv-toast {\n    transform: translateY(100px);\n    opacity: 0;\n    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n  #khadiv-toast.show {\n    transform: translateY(0);\n    opacity: 1;\n  }\n<\/style>\n\n<!-- Main Container Wrapping everything inside Elementor Page -->\n<div class=\"khadiv-landing-root relative w-full min-h-screen md:h-screen overflow-hidden bg-[#070a13] flex flex-col items-center justify-center p-4 sm:p-6 md:p-8 select-none\">\n  \n  <!-- Ambient Decorative Background Blobs -->\n  <div class=\"absolute top-1\/4 left-1\/4 -translate-x-1\/2 -translate-y-1\/2 w-72 h-72 sm:w-96 sm:h-96 rounded-full bg-indigo-600\/20 blur-[80px] pointer-events-none animate-blob-1\"><\/div>\n  <div class=\"absolute bottom-1\/4 right-1\/4 translate-x-1\/2 translate-y-1\/2 w-80 h-80 sm:w-[450px] sm:h-[450px] rounded-full bg-violet-600\/15 blur-[100px] pointer-events-none animate-blob-2\"><\/div>\n  \n  <!-- Main Grid\/Flex Container containing the layout -->\n  <div class=\"relative w-full max-w-5xl z-10 flex flex-col h-full justify-center\">\n    \n    <!-- Branding Header (Title & Profession) -->\n    <div class=\"text-center mb-6 md:mb-8 animate-fade-in\">\n      <h1 class=\"text-3xl md:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-violet-400 via-indigo-200 to-blue-400 tracking-tight\">\n        \u0645\u062d\u0645\u062f \u062e\u062f\u06cc\u0648\n      <\/h1>\n      <p class=\"text-xs md:text-sm text-gray-400 mt-2 font-medium tracking-wide uppercase\">\n        <i class=\"fa-solid fa-laptop-code ml-1 text-violet-400\"><\/i> \u0637\u0631\u0627\u062d \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0648 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc (UI\/UX) \/ \u0637\u0631\u0627\u062d \u06af\u0631\u0627\u0641\u06cc\u06a9\n      <\/p>\n    <\/div>\n\n    <!-- Interactive Navigation Tabs Section with Curved tops -->\n    <div class=\"flex items-end justify-center px-4 space-x-1 sm:space-x-2 md:space-x-3 space-x-reverse\">\n      \n      <!-- Tab 1: About Me -->\n      <button onclick=\"switchTab('about')\" id=\"tab-btn-about\" class=\"tab-curve px-4 sm:px-6 py-3 text-sm md:text-base border border-b-0 border-white\/10 flex items-center gap-2 tab-active cursor-pointer\">\n        <i class=\"fa-solid fa-user-tie text-xs md:text-sm\"><\/i>\n        <span>\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0646<\/span>\n      <\/button>\n\n      <!-- Tab 2: Portfolio -->\n      <button onclick=\"switchTab('portfolio')\" id=\"tab-btn-portfolio\" class=\"tab-curve px-4 sm:px-6 py-3 text-sm md:text-base border border-b-0 border-white\/10 flex items-center gap-2 tab-inactive cursor-pointer\">\n        <i class=\"fa-solid fa-cubes text-xs md:text-sm\"><\/i>\n        <span>\u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627<\/span>\n      <\/button>\n\n      <!-- Tab 3: Contact Me -->\n      <button onclick=\"switchTab('contact')\" id=\"tab-btn-contact\" class=\"tab-curve px-4 sm:px-6 py-3 text-sm md:text-base border border-b-0 border-white\/10 flex items-center gap-2 tab-inactive cursor-pointer\">\n        <i class=\"fa-solid fa-paper-plane text-xs md:text-sm\"><\/i>\n        <span>\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0646<\/span>\n      <\/button>\n\n    <\/div>\n\n    <!-- Main Content Box (Glassmorphic) -->\n    <div class=\"glass-card w-full rounded-2xl md:rounded-3xl p-5 sm:p-6 md:p-8 shadow-2xl relative overflow-hidden flex flex-col min-h-[400px] max-h-[70vh] md:max-h-[55vh]\">\n      \n      <!-- Inside Container With Inner Scroll -->\n      <div class=\"khadiv-custom-scroll overflow-y-auto h-full pr-1 pl-1\">\n        \n        <!-- ================= TAB CONTENT: ABOUT ME ================= -->\n        <div id=\"tab-content-about\" class=\"space-y-6 block\">\n          <div class=\"flex flex-col md:flex-row items-center md:items-start gap-6\">\n            <div class=\"flex-shrink-0 relative group\">\n              <!-- Animated outer glow for profile image fallback icon -->\n              <div class=\"absolute -inset-1.5 bg-gradient-to-r from-violet-600 to-blue-500 rounded-full blur opacity-60 group-hover:opacity-100 transition duration-1000\"><\/div>\n              <div class=\"relative w-20 h-20 sm:w-24 sm:h-24 bg-brand-dark rounded-full border border-white\/20 flex items-center justify-center text-white\">\n                <i class=\"fa-solid fa-user text-3xl sm:text-4xl text-violet-400\"><\/i>\n              <\/div>\n            <\/div>\n            \n            <div class=\"flex-1 text-center md:text-right space-y-3\">\n              <h3 class=\"text-xl font-bold text-white flex items-center justify-center md:justify-start gap-2\">\n                <span>\u062f\u0627\u0633\u062a\u0627\u0646 \u0645\u0646 \u0686\u06cc\u0633\u062a\u061f<\/span>\n                <span class=\"text-xs bg-violet-600\/30 text-violet-300 py-1 px-2 rounded-full border border-violet-500\/30\">\u06f7 \u0633\u0627\u0644 \u0633\u0627\u0628\u0642\u0647<\/span>\n              <\/h3>\n              <p class=\"text-sm text-gray-300 leading-relaxed max-w-3xl\">\n                \u0645\u0646 \u0645\u062d\u0645\u062f \u062e\u062f\u06cc\u0648 \u0647\u0633\u062a\u0645\u061b \u0637\u0631\u0627\u062d \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0648 \u06af\u0631\u0627\u0641\u06cc\u0633\u062a \u0628\u0627 \u0628\u06cc\u0634 \u0627\u0632 \u06f7 \u0633\u0627\u0644 \u062a\u062c\u0631\u0628\u0647 \u0645\u0633\u062a\u0645\u0631 \u062f\u0631 \u0627\u0631\u0627\u0626\u0647 \u0631\u0627\u0647\u200c\u062d\u0644\u200c\u0647\u0627\u06cc \u062e\u0644\u0627\u0642\u0627\u0646\u0647 \u0648 \u0645\u062f\u0631\u0646 \u0628\u0635\u0631\u06cc. \u062a\u062e\u0635\u0635 \u0645\u0646 \u062f\u0631 \u0622\u0641\u0631\u06cc\u0646\u0634 \u0631\u0627\u0628\u0637\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc (UI\/UX) \u0645\u0646\u062d\u0635\u0631\u200c\u0628\u0647\u200c\u0641\u0631\u062f\u060c \u062e\u0644\u0642 \u0647\u0648\u06cc\u062a \u0628\u0631\u0646\u062f \u0645\u0646\u0633\u062c\u0645 \u0648 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0628\u0647\u06cc\u0646\u0647 \u0648 \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u0627\u0633\u062a. \u0647\u0645\u0648\u0627\u0631\u0647 \u062f\u0631 \u062a\u0644\u0627\u0634\u0645 \u062a\u0627 \u0628\u0627 \u062a\u0644\u0641\u06cc\u0642 \u0647\u0646\u0631 \u06af\u0631\u0627\u0641\u06cc\u06a9 \u0648 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc \u0646\u0648\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u0648\u0628\u060c \u0627\u062b\u0631\u06cc \u0645\u0627\u0646\u062f\u06af\u0627\u0631 \u0648 \u06a9\u0627\u0631\u0628\u0631\u067e\u0633\u0646\u062f \u0628\u0631 \u062c\u0627\u06cc \u0628\u06af\u0630\u0627\u0631\u0645.\n              <\/p>\n            <\/div>\n          <\/div>\n\n          <!-- Professional Experience Timeline -->\n          <div class=\"mt-8 pt-6 border-t border-white\/5\">\n            <h4 class=\"text-base font-semibold text-violet-300 mb-6 flex items-center gap-2\">\n              <i class=\"fa-solid fa-briefcase text-sm\"><\/i>\n              <span>\u062a\u062c\u0631\u0628\u0647\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0645\u0646<\/span>\n            <\/h4>\n            \n            <div class=\"relative border-r border-violet-500\/20 mr-4 md:mr-6 space-y-8 pb-4\">\n              <!-- Experience 1 -->\n              <div class=\"relative pr-6\">\n                <!-- Timeline Dot -->\n                <span class=\"absolute -right-[6px] top-1 w-3.5 h-3.5 bg-violet-500 rounded-full border-4 border-[#070a13] shadow-md shadow-violet-500\/50\"><\/span>\n                <div class=\"flex flex-col sm:flex-row sm:items-center justify-between gap-1 mb-2\">\n                  <h5 class=\"text-sm sm:text-base font-bold text-white\">\u0645\u062c\u062a\u0645\u0639 \u0686\u0627\u067e \u062e\u062f\u06cc\u0648<\/h5>\n                  <span class=\"text-xs font-semibold text-violet-400 bg-violet-500\/10 py-1 px-3 rounded-full border border-violet-500\/20 w-fit\">\u06f4 \u0633\u0627\u0644 (\u06f1\u06f3\u06f9\u06f6 - \u06f1\u06f4\u06f0\u06f3)<\/span>\n                <\/div>\n                <p class=\"text-xs text-gray-400 font-medium mb-2\">\u0633\u0645\u062a: \u0633\u0631\u067e\u0631\u0633\u062a \u0628\u062e\u0634 \u0637\u0631\u0627\u062d\u06cc \u06af\u0631\u0627\u0641\u06cc\u06a9 \u0648 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648\u0628\u200c\u0633\u0627\u06cc\u062a<\/p>\n                <p class=\"text-xs text-gray-300 leading-relaxed\">\n                  \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u06af\u0631\u0627\u0641\u06cc\u06a9\u06cc \u0645\u062a\u0646\u0648\u0639\u060c \u0637\u0631\u0627\u062d\u06cc \u0642\u0627\u0644\u0628\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u200c\u0631\u0641\u062a\u0647 \u0686\u0627\u067e\u060c \u0646\u0638\u0627\u0631\u062a \u0628\u0631 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc \u0631\u0646\u06af\u06cc \u0648 \u0628\u0635\u0631\u06cc \u0648 \u0628\u0627\u0632\u0637\u0631\u0627\u062d\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u067e\u0644\u062a\u0641\u0631\u0645 \u0633\u0641\u0627\u0631\u0634 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0645\u062c\u062a\u0645\u0639 \u0628\u0627 \u0647\u062f\u0641 \u062a\u0633\u0647\u06cc\u0644 \u062a\u062c\u0631\u0628\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646.\n                <\/p>\n              <\/div>\n\n              <!-- Experience 2 -->\n              <div class=\"relative pr-6\">\n                <!-- Timeline Dot -->\n                <span class=\"absolute -right-[6px] top-1 w-3.5 h-3.5 bg-blue-500 rounded-full border-4 border-[#070a13] shadow-md shadow-blue-500\/50\"><\/span>\n                <div class=\"flex flex-col sm:flex-row sm:items-center justify-between gap-1 mb-2\">\n                  <h5 class=\"text-sm sm:text-base font-bold text-white\">\u0634\u0631\u06a9\u062a \u0631\u0646\u06af \u0648 \u0631\u0632\u06cc\u0646 \u067e\u0627\u0631\u0633 \u0645\u0647\u0631<\/h5>\n                  <span class=\"text-xs font-semibold text-blue-400 bg-blue-500\/10 py-1 px-3 rounded-full border border-blue-500\/20 w-fit\">\u06f3 \u0633\u0627\u0644 (\u06f1\u06f4\u06f0\u06f3 - \u06f1\u06f4\u06f0\u06f6)<\/span>\n                <\/div>\n                <p class=\"text-xs text-gray-400 font-medium mb-2\">\u0633\u0645\u062a: \u0637\u0631\u0627\u062d \u0627\u0631\u0634\u062f \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0648 \u06a9\u0627\u062a\u0627\u0644\u0648\u06af\u200c\u0647\u0627\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644<\/p>\n                <p class=\"text-xs text-gray-300 leading-relaxed\">\n                  \u0637\u0631\u0627\u062d\u06cc \u0648 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0631\u0633\u0645\u06cc \u0628\u0631\u0646\u062f \u067e\u0627\u0631\u0633\u200c\u0645\u0647\u0631\u060c \u0627\u06cc\u062c\u0627\u062f \u0628\u0633\u062a\u0631\u0647\u0627\u06cc \u0646\u0648\u06cc\u0646 \u0628\u0627\u0632\u0627\u0631\u06cc\u0627\u0628\u06cc \u0628\u0635\u0631\u06cc\u060c \u0637\u0631\u0627\u062d\u06cc \u0628\u0631\u0648\u0634\u0648\u0631\u0647\u0627 \u0648 \u06a9\u0627\u062a\u0627\u0644\u0648\u06af\u200c\u0647\u0627\u06cc \u0635\u0646\u0639\u062a\u06cc \u0686\u0646\u062f\u0631\u0633\u0627\u0646\u0647\u200c\u0627\u06cc \u0648 \u0627\u0631\u062a\u0642\u0627\u06cc \u0686\u0634\u0645\u06af\u06cc\u0631 \u0631\u062a\u0628\u0647 \u0628\u0635\u0631\u06cc \u0628\u0631\u0646\u062f \u062f\u0631 \u0631\u0633\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644.\n                <\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n\n        <!-- ================= TAB CONTENT: PORTFOLIO ================= -->\n        <div id=\"tab-content-portfolio\" class=\"space-y-6 hidden\">\n          <div class=\"text-center md:text-right mb-4\">\n            <h3 class=\"text-xl font-bold text-white\">\u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627<\/h3>\n            <p class=\"text-xs text-gray-400 mt-1\">\u06af\u0632\u06cc\u062f\u0647\u200c\u0627\u06cc \u0627\u0632 \u0622\u062e\u0631\u06cc\u0646 \u0641\u0639\u0627\u0644\u06cc\u062a\u200c\u0647\u0627 \u0648 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0627\u062c\u0631\u0627 \u0634\u062f\u0647 \u0645\u0646<\/p>\n          <\/div>\n\n          <!-- Portfolio Grid (3 Responsive Cards) -->\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6\">\n            \n            <!-- Card 1 -->\n            <div class=\"group bg-white\/3 border border-white\/5 rounded-xl overflow-hidden hover:border-violet-500\/30 flex flex-col h-full\">\n              <div class=\"relative aspect-video bg-gradient-to-tr from-violet-900\/40 to-blue-900\/40 flex items-center justify-center overflow-hidden\">\n                <!-- Vector Visual Placeholder instead of dynamic external images -->\n                <i class=\"fa-solid fa-paint-roller text-4xl text-blue-400\/80 group-hover:scale-110 transition duration-500\"><\/i>\n                <div class=\"absolute inset-0 bg-brand-dark\/40 opacity-0 group-hover:opacity-100 flex items-center justify-center transition duration-500\">\n                  <span class=\"text-xs bg-white\/10 text-white py-1.5 px-3 rounded-full backdrop-blur-md border border-white\/20\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0637\u0631\u062d<\/span>\n                <\/div>\n              <\/div>\n              <div class=\"p-4 flex flex-col justify-between flex-1\">\n                <div>\n                  <h4 class=\"text-sm font-bold text-white mb-2\">\u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0634\u0631\u06a9\u062a\u06cc \u0631\u0646\u06af \u067e\u0627\u0631\u0633 \u0645\u0647\u0631<\/h4>\n                  <p class=\"text-xs text-gray-400 line-clamp-2\">\u062a\u0648\u0633\u0639\u0647 \u067e\u0644\u062a\u0641\u0631\u0645 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u06a9\u0627\u0645\u0644\u0627\u064b \u0631\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u0648 \u0645\u0639\u0631\u0641\u06cc \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0635\u0646\u0639\u062a\u06cc \u0628\u0627 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc.<\/p>\n                <\/div>\n                <button onclick=\"openModal('project-1')\" class=\"mt-4 w-full py-2 px-3 text-xs font-semibold text-violet-300 bg-violet-600\/10 hover:bg-violet-600\/20 border border-violet-500\/20 rounded-lg flex items-center justify-center gap-1 cursor-pointer\">\n                  <span>\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0628\u06cc\u0634\u062a\u0631<\/span>\n                  <i class=\"fa-solid fa-arrow-left-long text-[10px]\"><\/i>\n                <\/button>\n              <\/div>\n            <\/div>\n\n            <!-- Card 2 -->\n            <div class=\"group bg-white\/3 border border-white\/5 rounded-xl overflow-hidden hover:border-violet-500\/30 flex flex-col h-full\">\n              <div class=\"relative aspect-video bg-gradient-to-tr from-indigo-900\/40 to-violet-900\/40 flex items-center justify-center overflow-hidden\">\n                <i class=\"fa-solid fa-print text-4xl text-violet-400\/80 group-hover:scale-110 transition duration-500\"><\/i>\n                <div class=\"absolute inset-0 bg-brand-dark\/40 opacity-0 group-hover:opacity-100 flex items-center justify-center transition duration-500\">\n                  <span class=\"text-xs bg-white\/10 text-white py-1.5 px-3 rounded-full backdrop-blur-md border border-white\/20\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0637\u0631\u062d<\/span>\n                <\/div>\n              <\/div>\n              <div class=\"p-4 flex flex-col justify-between flex-1\">\n                <div>\n                  <h4 class=\"text-sm font-bold text-white mb-2\">\u06a9\u0627\u062a\u0627\u0644\u0648\u06af \u0647\u0648\u0634\u0645\u0646\u062f \u0645\u062c\u062a\u0645\u0639 \u062e\u062f\u06cc\u0648<\/h4>\n                  <p class=\"text-xs text-gray-400 line-clamp-2\">\u0637\u0631\u0627\u062d\u06cc \u06af\u0631\u0627\u0641\u06cc\u06a9\u06cc \u0647\u0648\u06cc\u062a \u0628\u0635\u0631\u06cc \u0648 \u06a9\u0627\u062a\u0627\u0644\u0648\u06af \u062f\u06cc\u062c\u062a\u0627\u0644 \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0645\u062c\u062a\u0645\u0639 \u0686\u0627\u067e \u062e\u062f\u06cc\u0648.<\/p>\n                <\/div>\n                <button onclick=\"openModal('project-2')\" class=\"mt-4 w-full py-2 px-3 text-xs font-semibold text-violet-300 bg-violet-600\/10 hover:bg-violet-600\/20 border border-violet-500\/20 rounded-lg flex items-center justify-center gap-1 cursor-pointer\">\n                  <span>\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0628\u06cc\u0634\u062a\u0631<\/span>\n                  <i class=\"fa-solid fa-arrow-left-long text-[10px]\"><\/i>\n                <\/button>\n              <\/div>\n            <\/div>\n\n            <!-- Card 3 -->\n            <div class=\"group bg-white\/3 border border-white\/5 rounded-xl overflow-hidden hover:border-violet-500\/30 flex flex-col h-full\">\n              <div class=\"relative aspect-video bg-gradient-to-tr from-fuchsia-900\/40 to-pink-900\/40 flex items-center justify-center overflow-hidden\">\n                <i class=\"fa-solid fa-store text-4xl text-fuchsia-400\/80 group-hover:scale-110 transition duration-500\"><\/i>\n                <div class=\"absolute inset-0 bg-brand-dark\/40 opacity-0 group-hover:opacity-100 flex items-center justify-center transition duration-500\">\n                  <span class=\"text-xs bg-white\/10 text-white py-1.5 px-3 rounded-full backdrop-blur-md border border-white\/20\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0637\u0631\u062d<\/span>\n                <\/div>\n              <\/div>\n              <div class=\"p-4 flex flex-col justify-between flex-1\">\n                <div>\n                  <h4 class=\"text-sm font-bold text-white mb-2\">\u0637\u0631\u0627\u062d\u06cc \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc<\/h4>\n                  <p class=\"text-xs text-gray-400 line-clamp-2\">\u062a\u062d\u0642\u06cc\u0642 \u06a9\u0627\u0631\u0628\u0631\u06cc\u060c \u0627\u062a\u0648\u062f\u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0648 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u067e\u0631\u0648\u062a\u0648\u062a\u0627\u06cc\u067e \u06a9\u0627\u0645\u0644 UI\/UX \u06cc\u06a9 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc \u0645\u062f\u0631\u0646.<\/p>\n                <\/div>\n                <button onclick=\"openModal('project-3')\" class=\"mt-4 w-full py-2 px-3 text-xs font-semibold text-violet-300 bg-violet-600\/10 hover:bg-violet-600\/20 border border-violet-500\/20 rounded-lg flex items-center justify-center gap-1 cursor-pointer\">\n                  <span>\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0628\u06cc\u0634\u062a\u0631<\/span>\n                  <i class=\"fa-solid fa-arrow-left-long text-[10px]\"><\/i>\n                <\/button>\n              <\/div>\n            <\/div>\n\n          <\/div>\n        <\/div>\n\n\n        <!-- ================= TAB CONTENT: CONTACT ================= -->\n        <div id=\"tab-content-contact\" class=\"space-y-6 hidden\">\n          <div class=\"text-center md:text-right mb-4\">\n            <h3 class=\"text-xl font-bold text-white\">\u067e\u0644\u200c\u0647\u0627\u06cc \u0627\u0631\u062a\u0628\u0627\u0637\u06cc<\/h3>\n            <p class=\"text-xs text-gray-400 mt-1\">\u0628\u0627 \u06a9\u0645\u0627\u0644 \u0645\u06cc\u0644 \u0622\u0645\u0627\u062f\u0647 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u0628\u0647 \u0633\u0648\u0627\u0644\u0627\u062a\u060c \u0645\u0634\u0627\u0648\u0631\u0647\u200c\u0647\u0627 \u0648 \u0647\u0645\u06a9\u0627\u0631\u06cc\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0647\u0633\u062a\u0645.<\/p>\n          <\/div>\n\n          <!-- Contact Cards Grid -->\n          <div class=\"grid grid-cols-1 md:grid-cols-3 gap-5\">\n            \n            <!-- Contact Box: Phone -->\n            <div class=\"bg-white\/3 border border-white\/5 rounded-xl p-5 flex flex-col justify-between hover:border-violet-500\/20 relative group\">\n              <div class=\"flex items-start justify-between mb-4\">\n                <div class=\"w-10 h-10 rounded-lg bg-violet-600\/10 flex items-center justify-center text-violet-400 border border-violet-500\/20\">\n                  <i class=\"fa-solid fa-phone text-lg\"><\/i>\n                <\/div>\n                <button onclick=\"copyToClipboard('09100221728', '\u0634\u0645\u0627\u0631\u0647 \u062a\u0645\u0627\u0633')\" class=\"text-gray-400 hover:text-white text-xs cursor-pointer bg-white\/5 p-2 rounded-md hover:bg-white\/10 transition\" title=\"\u06a9\u067e\u06cc \u06a9\u0631\u062f\u0646 \u0634\u0645\u0627\u0631\u0647\">\n                  <i class=\"fa-regular fa-copy\"><\/i>\n                <\/button>\n              <\/div>\n              <div>\n                <h4 class=\"text-xs text-gray-400 mb-1\">\u0634\u0645\u0627\u0631\u0647 \u062a\u0644\u0641\u0646 \u0645\u0633\u062a\u0642\u06cc\u0645<\/h4>\n                <a href=\"tel:09100221728\" class=\"text-base font-bold text-white hover:text-violet-300 tracking-wider\">09100221728<\/a>\n              <\/div>\n            <\/div>\n\n            <!-- Contact Box: Instagram -->\n            <div class=\"bg-white\/3 border border-white\/5 rounded-xl p-5 flex flex-col justify-between hover:border-violet-500\/20 relative group\">\n              <div class=\"flex items-start justify-between mb-4\">\n                <div class=\"w-10 h-10 rounded-lg bg-pink-600\/10 flex items-center justify-center text-pink-400 border border-pink-500\/20\">\n                  <i class=\"fa-brands fa-instagram text-xl\"><\/i>\n                <\/div>\n                <div class=\"flex gap-1\">\n                  <button onclick=\"copyToClipboard('mohamad__khadiv', '\u0622\u06cc\u062f\u06cc \u0627\u06cc\u0646\u0633\u062a\u0627\u06af\u0631\u0627\u0645')\" class=\"text-gray-400 hover:text-white text-xs cursor-pointer bg-white\/5 p-2 rounded-md hover:bg-white\/10 transition\" title=\"\u06a9\u067e\u06cc \u06a9\u0631\u062f\u0646 \u0622\u06cc\u062f\u06cc\">\n                    <i class=\"fa-regular fa-copy\"><\/i>\n                  <\/button>\n                  <a href=\"https:\/\/instagram.com\/mohamad__khadiv\" target=\"_blank\" class=\"text-gray-400 hover:text-white text-xs cursor-pointer bg-white\/5 p-2 rounded-md hover:bg-white\/10 transition\" title=\"\u0648\u0631\u0648\u062f \u0628\u0647 \u067e\u06cc\u062c\">\n                    <i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i>\n                  <\/a>\n                <\/div>\n              <\/div>\n              <div>\n                <h4 class=\"text-xs text-gray-400 mb-1\">\u067e\u06cc\u062c \u0627\u06cc\u0646\u0633\u062a\u0627\u06af\u0631\u0627\u0645 \u0645\u0646<\/h4>\n                <a href=\"https:\/\/instagram.com\/mohamad__khadiv\" target=\"_blank\" class=\"text-sm font-bold text-white hover:text-pink-300 tracking-wider\">mohamad__khadiv<\/a>\n              <\/div>\n            <\/div>\n\n            <!-- Contact Box: Email -->\n            <div class=\"bg-white\/3 border border-white\/5 rounded-xl p-5 flex flex-col justify-between hover:border-violet-500\/20 relative group\">\n              <div class=\"flex items-start justify-between mb-4\">\n                <div class=\"w-10 h-10 rounded-lg bg-blue-600\/10 flex items-center justify-center text-blue-400 border border-blue-500\/20\">\n                  <i class=\"fa-solid fa-envelope text-lg\"><\/i>\n                <\/div>\n                <div class=\"flex gap-1\">\n                  <button onclick=\"copyToClipboard('info@mohammadkhadiv.ir', '\u0627\u06cc\u0645\u06cc\u0644')\" class=\"text-gray-400 hover:text-white text-xs cursor-pointer bg-white\/5 p-2 rounded-md hover:bg-white\/10 transition\" title=\"\u06a9\u067e\u06cc \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0645\u06cc\u0644\">\n                    <i class=\"fa-regular fa-copy\"><\/i>\n                  <\/button>\n                  <a href=\"mailto:info@mohammadkhadiv.ir\" class=\"text-gray-400 hover:text-white text-xs cursor-pointer bg-white\/5 p-2 rounded-md hover:bg-white\/10 transition\" title=\"\u0627\u0631\u0633\u0627\u0644 \u0627\u06cc\u0645\u06cc\u0644 \u0645\u0633\u062a\u0642\u06cc\u0645\">\n                    <i class=\"fa-solid fa-paper-plane\"><\/i>\n                  <\/a>\n                <\/div>\n              <\/div>\n              <div>\n                <h4 class=\"text-xs text-gray-400 mb-1\">\u067e\u0633\u062a \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9\u06cc<\/h4>\n                <a href=\"mailto:info@mohammadkhadiv.ir\" class=\"text-xs sm:text-sm font-bold text-white hover:text-blue-300 tracking-wide break-all\">info@mohammadkhadiv.ir<\/a>\n              <\/div>\n            <\/div>\n\n          <\/div>\n\n          <!-- Bottom friendly notice -->\n          <div class=\"bg-violet-600\/5 border border-violet-500\/10 rounded-xl p-4 flex items-center gap-3 mt-4\">\n            <i class=\"fa-solid fa-circle-info text-violet-400 text-lg\"><\/i>\n            <p class=\"text-xs text-gray-300 leading-relaxed\">\n              \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0644\u0645\u0633 \u0622\u06cc\u06a9\u0648\u0646 \u06a9\u067e\u06cc\u060c \u0628\u0647 \u0633\u0631\u0639\u062a \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0631\u0627\u0647\u200c\u0647\u0627\u06cc \u0627\u0631\u062a\u0628\u0627\u0637\u06cc \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f \u06cc\u0627 \u0628\u0631 \u0631\u0648\u06cc \u0622\u0646\u200c\u0647\u0627 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u0644\u0627\u0641\u0627\u0635\u0644\u0647 \u062a\u0645\u0627\u0633 \u062d\u0627\u0635\u0644 \u0641\u0631\u0645\u0627\u06cc\u06cc\u062f. \u062f\u0631 \u0633\u0631\u06cc\u0639\u200c\u062a\u0631\u06cc\u0646 \u0632\u0645\u0627\u0646 \u0645\u0645\u06a9\u0646 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc \u0634\u0645\u0627 \u062e\u0648\u0627\u0647\u0645 \u0628\u0648\u062f.\n            <\/p>\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n  <!-- Footer Info inside landing wrapper -->\n  <div class=\"relative z-10 mt-6 text-center text-[10px] text-gray-500 flex items-center gap-2\">\n    <span>\u00a9 \u06f2\u06f0\u06f2\u06f6 \u0645\u062d\u0645\u062f \u062e\u062f\u06cc\u0648. \u062a\u0645\u0627\u0645\u06cc \u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638 \u0627\u0633\u062a.<\/span>\n  <\/div>\n\n  <!-- ================= PORTFOLIO DETAILS MODALS ================= -->\n  \n  <!-- Project Modal 1 -->\n  <div id=\"modal-project-1\" class=\"fixed inset-0 z-50 bg-[#02050b]\/80 backdrop-blur-md hidden items-center justify-center p-4\">\n    <div class=\"glass-card w-full max-w-lg rounded-2xl p-6 relative animate-zoom-in\">\n      <button onclick=\"closeModal('project-1')\" class=\"absolute top-4 left-4 text-gray-400 hover:text-white cursor-pointer w-8 h-8 rounded-full bg-white\/5 flex items-center justify-center\">\n        <i class=\"fa-solid fa-xmark\"><\/i>\n      <\/button>\n      <h3 class=\"text-lg font-bold text-white mb-4 flex items-center gap-2\">\n        <i class=\"fa-solid fa-circle-check text-violet-400\"><\/i>\n        <span>\u062c\u0632\u0626\u06cc\u0627\u062a \u067e\u0631\u0648\u0698\u0647 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u067e\u0627\u0631\u0633 \u0645\u0647\u0631<\/span>\n      <\/h3>\n      <div class=\"space-y-3 text-xs sm:text-sm text-gray-300 leading-relaxed\">\n        <p><strong>\u06a9\u0627\u0631\u0641\u0631\u0645\u0627:<\/strong> \u0634\u0631\u06a9\u062a \u062a\u0648\u0644\u06cc\u062f\u06cc \u0631\u0646\u06af \u0648 \u0631\u0632\u06cc\u0646 \u0635\u0646\u0639\u062a\u06cc \u067e\u0627\u0631\u0633 \u0645\u0647\u0631<\/p>\n        <p><strong>\u0646\u0642\u0634 \u0645\u0646:<\/strong> \u0637\u0631\u0627\u062d \u0627\u0631\u0634\u062f \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0648 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc (UI\/UX)<\/p>\n        <p><strong>\u062a\u0648\u0636\u06cc\u062d\u0627\u062a:<\/strong> \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u062a\u0645\u0631\u06a9\u0632 \u0627\u0635\u0644\u06cc \u0628\u0631 \u0631\u0648\u06cc \u0627\u0631\u0627\u0626\u0647 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0631\u0648\u0627\u0646 \u0628\u0631\u0627\u06cc \u0645\u0639\u0631\u0641\u06cc \u06a9\u0627\u0645\u0644 \u062f\u0633\u062a\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0631\u0646\u06af\u200c\u0647\u0627\u06cc \u0635\u0646\u0639\u062a\u06cc\u060c \u0686\u0633\u0628\u200c\u0647\u0627 \u0648 \u0622\u0633\u062a\u0631\u06cc\u200c\u0647\u0627 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a. \u0633\u0627\u062e\u062a\u0627\u0631 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0628\u0647 \u06af\u0648\u0646\u0647\u200c\u0627\u06cc \u0628\u0647\u06cc\u0646\u0647 \u0634\u062f \u06a9\u0647 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc \u0646\u06cc\u0627\u0632 \u062a\u0648\u0632\u06cc\u0639\u200c\u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0648 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u062e\u0631\u062f \u0628\u0627\u0634\u062f.<\/p>\n        <p><strong>\u0627\u0645\u06a9\u0627\u0646\u0627\u062a \u0634\u0627\u062e\u0635:<\/strong> \u06a9\u0627\u062a\u0627\u0644\u0648\u06af \u0622\u0646\u0644\u0627\u06cc\u0646 \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc\u200c\u0634\u062f\u0647\u060c \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0628\u0627\u0644\u0627 \u062f\u0631 \u0646\u062a\u0627\u06cc\u062c \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 (SEO)\u060c \u0648 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u06a9\u0627\u0645\u0644\u0627\u064b \u0645\u0646\u0637\u0628\u0642 \u0628\u0627 \u0647\u0648\u06cc\u062a \u0633\u0627\u0632\u0645\u0627\u0646\u06cc \u0633\u0646\u062a\u06cc \u0648 \u0646\u0648\u0622\u0648\u0631\u0627\u0646\u0647 \u0634\u0631\u06a9\u062a.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Project Modal 2 -->\n  <div id=\"modal-project-2\" class=\"fixed inset-0 z-50 bg-[#02050b]\/80 backdrop-blur-md hidden items-center justify-center p-4\">\n    <div class=\"glass-card w-full max-w-lg rounded-2xl p-6 relative\">\n      <button onclick=\"closeModal('project-2')\" class=\"absolute top-4 left-4 text-gray-400 hover:text-white cursor-pointer w-8 h-8 rounded-full bg-white\/5 flex items-center justify-center\">\n        <i class=\"fa-solid fa-xmark\"><\/i>\n      <\/button>\n      <h3 class=\"text-lg font-bold text-white mb-4 flex items-center gap-2\">\n        <i class=\"fa-solid fa-circle-check text-violet-400\"><\/i>\n        <span>\u062c\u0632\u0626\u06cc\u0627\u062a \u06a9\u0627\u062a\u0627\u0644\u0648\u06af \u0647\u0648\u0634\u0645\u0646\u062f \u0645\u062c\u062a\u0645\u0639 \u062e\u062f\u06cc\u0648<\/span>\n      <\/h3>\n      <div class=\"space-y-3 text-xs sm:text-sm text-gray-300 leading-relaxed\">\n        <p><strong>\u06a9\u0627\u0631\u0641\u0631\u0645\u0627:<\/strong> \u0645\u062c\u062a\u0645\u0639 \u0686\u0627\u067e \u062e\u062f\u06cc\u0648<\/p>\n        <p><strong>\u0646\u0642\u0634 \u0645\u0646:<\/strong> \u0633\u0631\u067e\u0631\u0633\u062a \u0647\u0646\u0631\u06cc \u0648 \u0637\u0631\u0627\u062d \u0647\u0648\u06cc\u062a \u0628\u0635\u0631\u06cc<\/p>\n        <p><strong>\u062a\u0648\u0636\u06cc\u062d\u0627\u062a:<\/strong> \u062a\u062d\u0648\u0644 \u0628\u0632\u0631\u06af\u06cc \u062f\u0631 \u0641\u0631\u0622\u06cc\u0646\u062f \u0627\u0631\u0627\u0626\u0647 \u0646\u0645\u0648\u0646\u0647\u200c\u06a9\u0627\u0631\u0647\u0627\u06cc \u0645\u062c\u062a\u0645\u0639 \u0686\u0627\u067e \u062e\u062f\u06cc\u0648 \u0627\u0632 \u06a9\u0627\u062a\u0627\u0644\u0648\u06af\u200c\u0647\u0627\u06cc \u0641\u06cc\u0632\u06cc\u06a9\u06cc \u0647\u0632\u06cc\u0646\u0647\u200c\u0628\u0631 \u0628\u0647 \u06cc\u06a9 \u0628\u0633\u062a\u0631 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0648 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644\u06cc \u06a9\u0647 \u062f\u0631 \u062a\u0645\u0627\u0645\u06cc \u0627\u0628\u0639\u0627\u062f \u062f\u0633\u06a9\u062a\u0627\u067e \u0648 \u0645\u0648\u0628\u0627\u06cc\u0644 \u0628\u0631\u0627\u06cc \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0642\u0627\u0628\u0644 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0627\u0633\u062a.<\/p>\n        <p><strong>\u0627\u0645\u06a9\u0627\u0646\u0627\u062a \u0634\u0627\u062e\u0635:<\/strong> \u06af\u0627\u0644\u0631\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0634\u062f\u0647\u060c \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0633\u0631\u06cc\u0639 \u0646\u0645\u0648\u0646\u0647\u200c\u06a9\u0627\u0631\u0647\u0627\u06cc \u0641\u06cc\u0632\u06cc\u06a9\u06cc \u0628\u0627 \u0631\u0648\u0644 \u0622\u067e \u0633\u0647\u200c\u0628\u0639\u062f\u06cc \u0648 \u0631\u0646\u06af\u200c\u0622\u0645\u06cc\u0632\u06cc \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0645\u0646\u0637\u0628\u0642 \u0628\u0627 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u0627\u0634\u06cc\u0646 \u0686\u0627\u067e.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Project Modal 3 -->\n  <div id=\"modal-project-3\" class=\"fixed inset-0 z-50 bg-[#02050b]\/80 backdrop-blur-md hidden items-center justify-center p-4\">\n    <div class=\"glass-card w-full max-w-lg rounded-2xl p-6 relative\">\n      <button onclick=\"closeModal('project-3')\" class=\"absolute top-4 left-4 text-gray-400 hover:text-white cursor-pointer w-8 h-8 rounded-full bg-white\/5 flex items-center justify-center\">\n        <i class=\"fa-solid fa-xmark\"><\/i>\n      <\/button>\n      <h3 class=\"text-lg font-bold text-white mb-4 flex items-center gap-2\">\n        <i class=\"fa-solid fa-circle-check text-violet-400\"><\/i>\n        <span>\u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc<\/span>\n      <\/h3>\n      <div class=\"space-y-3 text-xs sm:text-sm text-gray-300 leading-relaxed\">\n        <p><strong>\u06a9\u0627\u0631\u0641\u0631\u0645\u0627:<\/strong> \u067e\u0631\u0648\u0698\u0647 \u06a9\u0627\u0646\u0633\u067e\u062a \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u06cc \u0627\u0633\u062a\u0627\u0631\u062a\u200c\u0622\u067e\u06cc<\/p>\n        <p><strong>\u0646\u0642\u0634 \u0645\u0646:<\/strong> \u0637\u0631\u0627\u062d \u062a\u0639\u0627\u0645\u0644\u06cc \u0648 \u0645\u0639\u0645\u0627\u0631 \u0627\u0637\u0644\u0627\u0639\u0627\u062a (UI\/UX Designer)<\/p>\n        <p><strong>\u062a\u0648\u0636\u06cc\u062d\u0627\u062a:<\/strong> \u062f\u0631 \u0627\u06cc\u0646 \u06a9\u0627\u0646\u0633\u067e\u062a \u0647\u062f\u0641 \u0645\u0646 \u0627\u06cc\u062c\u0627\u062f \u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u06cc\u0646\u06cc\u0645\u0627\u0644\u06cc\u0633\u062a\u06cc \u062f\u0631 \u062c\u0647\u062a \u062e\u0631\u06cc\u062f \u0622\u0633\u0627\u0646 \u0628\u062f\u0648\u0646 \u062d\u0648\u0627\u0633\u200c\u067e\u0631\u062a\u06cc\u200c\u0647\u0627\u06cc \u062a\u0628\u0644\u06cc\u063a\u0627\u062a\u06cc \u0645\u0631\u0633\u0648\u0645 \u0628\u0648\u062f. \u06a9\u0644\u06cc\u0647 \u0627\u0644\u0645\u0627\u0646\u200c\u0647\u0627\u06cc \u062e\u0631\u06cc\u062f \u0627\u0632 \u06a9\u0627\u0631\u062a \u06a9\u0627\u0644\u0627 \u062a\u0627 \u0633\u0628\u062f \u0646\u0647\u0627\u06cc\u06cc \u0628\u0631 \u067e\u0627\u06cc\u0647 \u0631\u0648\u0627\u0646\u200c\u0634\u0646\u0627\u0633\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u06af\u0631\u062f\u06cc\u062f.<\/p>\n        <p><strong>\u0627\u0645\u06a9\u0627\u0646\u0627\u062a \u0634\u0627\u062e\u0635:<\/strong> \u062f\u0627\u0631\u06a9 \u0645\u0648\u062f \u062e\u0648\u062f\u06a9\u0627\u0631\u060c \u062f\u06a9\u0645\u0647 \u062e\u0631\u06cc\u062f \u0633\u0631\u06cc\u0639 \u0634\u0646\u0627\u0648\u0631\u060c \u0641\u0631\u0622\u06cc\u0646\u062f \u062a\u0633\u0648\u06cc\u0647\u200c\u062d\u0633\u0627\u0628 \u062a\u06a9\u200c\u0635\u0641\u062d\u0647\u200c\u0627\u06cc \u0647\u0645\u200c\u062a\u0631\u0627\u0632 \u0628\u0627 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u062c\u0647\u0627\u0646\u06cc.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n\n\n  <!-- ================= DYNAMIC TOAST ALERT ================= -->\n  <div id=\"khadiv-toast\" class=\"fixed bottom-6 left-6 z-50 bg-[#0b0f19] border border-emerald-500\/30 text-white rounded-xl shadow-2xl p-4 flex items-center gap-3\">\n    <span class=\"w-2 h-2 rounded-full bg-emerald-400 animate-pulse\"><\/span>\n    <p class=\"text-xs font-semibold text-gray-200\" id=\"toast-message\">\u0645\u0648\u0631\u062f \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u06a9\u067e\u06cc \u0634\u062f!<\/p>\n  <\/div>\n\n<\/div>\n\n\n<!-- ================= JS SCRIPT (INTERACTIVE LOGIC) ================= -->\n<script>\n  \/\/ Active state management\n  let activeTab = 'about';\n\n  \/\/ Function to switch between tabs\n  function switchTab(tabId) {\n    if (activeTab === tabId) return;\n\n    \/\/ Hide current active tab content\n    const prevContent = document.getElementById(`tab-content-${activeTab}`);\n    if (prevContent) {\n      prevContent.classList.add('hidden');\n      prevContent.classList.remove('block');\n    }\n\n    \/\/ Deactive current tab button\n    const prevBtn = document.getElementById(`tab-btn-${activeTab}`);\n    if (prevBtn) {\n      prevBtn.classList.remove('tab-active');\n      prevBtn.classList.add('tab-inactive');\n    }\n\n    \/\/ Set new tab active\n    activeTab = tabId;\n\n    \/\/ Show new tab content\n    const activeContent = document.getElementById(`tab-content-${tabId}`);\n    if (activeContent) {\n      activeContent.classList.remove('hidden');\n      activeContent.classList.add('block');\n    }\n\n    \/\/ Active new tab button\n    const activeBtn = document.getElementById(`tab-btn-${tabId}`);\n    if (activeBtn) {\n      activeBtn.classList.remove('tab-inactive');\n      activeBtn.classList.add('tab-active');\n    }\n  }\n\n  \/\/ Robust Clipboard Copier utilizing hidden inputs for maximum compatibility\n  function copyToClipboard(text, title) {\n    \/\/ Create temporary element\n    const tempInput = document.createElement('textarea');\n    tempInput.value = text;\n    \/\/ Hide it from view\n    tempInput.style.position = 'absolute';\n    tempInput.style.left = '-9999px';\n    tempInput.style.top = '0';\n    document.body.appendChild(tempInput);\n    \n    \/\/ Select text & Execute Copy\n    tempInput.select();\n    tempInput.setSelectionRange(0, 99999); \/\/ For mobile devices\n    \n    try {\n      const success = document.execCommand('copy');\n      if (success) {\n        showToast(`${title} \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u062f\u0631 \u06a9\u0644\u06cc\u067e\u200c\u0628\u0648\u0631\u062f \u06a9\u067e\u06cc \u0634\u062f.`);\n      } else {\n        showToast('\u06a9\u067e\u06cc \u0645\u062a\u0627\u0633\u0641\u0627\u0646\u0647 \u0627\u0646\u062c\u0627\u0645 \u0646\u0634\u062f. \u0644\u0637\u0641\u0627 \u062f\u0633\u062a\u06cc \u062a\u0644\u0627\u0634 \u0641\u0631\u0645\u0627\u06cc\u06cc\u062f.');\n      }\n    } catch (err) {\n      showToast('\u062e\u0637\u0627 \u062f\u0631 \u06a9\u067e\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a.');\n    }\n    \n    \/\/ Remove element\n    document.body.removeChild(tempInput);\n  }\n\n  \/\/ Toast Handler\n  let toastTimeout;\n  function showToast(message) {\n    const toast = document.getElementById('khadiv-toast');\n    const toastMsg = document.getElementById('toast-message');\n    \n    if (!toast || !toastMsg) return;\n\n    toastMsg.innerText = message;\n    \n    \/\/ Clear previous timeout if already showing\n    clearTimeout(toastTimeout);\n    \n    toast.classList.add('show');\n    \n    toastTimeout = setTimeout(() => {\n      toast.classList.remove('show');\n    }, 3000);\n  }\n\n  \/\/ Modal Handlers\n  function openModal(projectId) {\n    const modal = document.getElementById(`modal-${projectId}`);\n    if (modal) {\n      modal.classList.remove('hidden');\n      modal.classList.add('flex');\n    }\n  }\n\n  function closeModal(projectId) {\n    const modal = document.getElementById(`modal-${projectId}`);\n    if (modal) {\n      modal.classList.remove('flex');\n      modal.classList.add('hidden');\n    }\n  }\n\n  \/\/ Optional: Close modals on clicking backdrop\n  window.addEventListener('click', function(e) {\n    if (e.target.id.startsWith('modal-project')) {\n      e.target.classList.remove('flex');\n      e.target.classList.add('hidden');\n    }\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0645\u062d\u0645\u062f \u062e\u062f\u06cc\u0648 \u0637\u0631\u0627\u062d \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0648 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc (UI\/UX) \/ \u0637\u0631\u0627\u062d \u06af\u0631\u0627\u0641\u06cc\u06a9 \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0646 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627 \u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0646 \u062f\u0627\u0633\u062a\u0627\u0646 \u0645\u0646 \u0686\u06cc\u0633\u062a\u061f \u06f7 \u0633\u0627\u0644 \u0633\u0627\u0628\u0642\u0647 \u0645\u0646 \u0645\u062d\u0645\u062f \u062e\u062f\u06cc\u0648 \u0647\u0633\u062a\u0645\u061b \u0637\u0631\u0627\u062d \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0648 \u06af\u0631\u0627\u0641\u06cc\u0633\u062a \u0628\u0627 \u0628\u06cc\u0634 \u0627\u0632 \u06f7 \u0633\u0627\u0644 \u062a\u062c\u0631\u0628\u0647 \u0645\u0633\u062a\u0645\u0631 \u062f\u0631 \u0627\u0631\u0627\u0626\u0647 \u0631\u0627\u0647\u200c\u062d\u0644\u200c\u0647\u0627\u06cc \u062e\u0644\u0627\u0642\u0627\u0646\u0647 \u0648 \u0645\u062f\u0631\u0646 \u0628\u0635\u0631\u06cc. \u062a\u062e\u0635\u0635 \u0645\u0646 \u062f\u0631 \u0622\u0641\u0631\u06cc\u0646\u0634 \u0631\u0627\u0628\u0637\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc (UI\/UX) \u0645\u0646\u062d\u0635\u0631\u200c\u0628\u0647\u200c\u0641\u0631\u062f\u060c \u062e\u0644\u0642 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hemayateman.ir\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hemayateman.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hemayateman.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hemayateman.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hemayateman.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":10,"href":"https:\/\/hemayateman.ir\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/hemayateman.ir\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/hemayateman.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}