\u067e\u0648\u0631\u062a\u0641\u0648\u0644\u06cc\u0648 \u06a9\u06cc\u0627\u0646\u0627 | Data Science<\/title>\n\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],\n mono: ['Courier New', 'monospace'],\n },\n colors: {\n 'pastel-pink': '#f7e9ef', \/\/ Original Body Background\n 'light-pink': '#fcdfe2',\n 'dark-pink': '#e1a6b2', \/\/ Primary Accent Color\n 'soft-gray': '#f5f5f5',\n 'text-dark': '#4a4a4a',\n \n \/\/ Custom colors for BMI and Snake Game status\n 'bmi-normal': '#38bdf8', \/\/ Sky 400 - Blue\n 'bmi-warn': '#fbbf24', \/\/ Amber 400 - Yellow\n 'bmi-danger': '#f87171', \/\/ Red 400 - Light Red\n 'snake-bg': '#1f2937', \/\/ Dark Canvas Background\n 'snake-color': '#10b981',\/\/ Emerald 500 - Green\n }\n }\n }\n }\n <\/script>\n<style>\n body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n background-color: #f7e9ef; \/* Pastel pink color *\/\n margin: 0;\n padding: 0;\n }\n\n \/* --- Snake Game Custom Styles --- *\/\n #snakeCanvas {\n border: 2px solid #a1a1aa; \/* Border around the game board *\/\n background-color: #1f2937; \/* Dark background *\/\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);\n display: block;\n margin: 0 auto;\n }\n \n \/* General button styling for the game controls *\/\n .game-button {\n transition: all 0.15s ease-in-out;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);\n font-family: 'Courier New', monospace;\n }\n\n .game-button:hover {\n transform: translateY(-1px);\n box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);\n }\n\n .game-button:active {\n transform: translateY(2px);\n box-shadow: none;\n }\n <\/style>\n<\/head>\n<body class=\"text-text-dark antialiased transition-all duration-300\">\n\n<div class=\"container mx-auto px-4 py-8 md:py-16\">\n\n<header class=\"text-center mb-16\">\n<h1 class=\"text-5xl md:text-6xl font-extrabold text-dark-pink drop-shadow-sm mb-2\">\u06a9\u06cc\u0627\u0646\u0627<\/h1>\n<p class=\"text-xl md:text-2xl font-light text-text-dark\">Data Science | AI<\/p>\n<\/header>\n\n<section class=\"bg-white p-6 md:p-10 rounded-3xl shadow-lg transition-all duration-300 hover:shadow-xl mb-12\" id=\"about\"><h2 class=\"text-3xl md:text-4xl font-bold text-dark-pink mb-4\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0646<\/h2><p class=\"text-lg leading-relaxed mb-4\">\u0633\u0644\u0627\u0645\u060c \u0645\u0646 \u06a9\u06cc\u0627\u0646\u0627 \u0647\u0633\u062a\u0645\u060c \u062e\u0648\u0634\u062d\u0627\u0644\u0645 \u06a9\u0647 \u0627\u0632 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0645\u0646 \u0628\u0627\u0632\u062f\u06cc\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f.<\/p><p class=\"text-lg leading-relaxed mb-4\">\u06f1\u06f8 \u0633\u0627\u0644 \u062f\u0627\u0631\u0645 \u0648 \u0627\u0632 \u0627\u0648\u0627\u062e\u0631 \u06f1\u06f4 \u0633\u0627\u0644\u06af\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0648\u0632\u0647 \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0631\u062f\u0645. \u0628\u0627 \u062a\u062d\u0642\u06cc\u0642 \u0648 \u0634\u0631\u06a9\u062a \u062f\u0631 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627 \u0648 \u062f\u0648\u0631\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u062a\u0648\u0627\u0646\u0633\u062a\u0645 \u0639\u0644\u0627\u0642\u0647 \u0627\u0635\u0644\u06cc \u062e\u0648\u062f\u0645 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0645.<\/p><p class=\"text-lg leading-relaxed mb-4\">\u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0634\u0631\u06a9\u062a\u200c\u06a9\u0646\u0646\u062f\u0647 \u062f\u0648\u0631\u0647 \u062f\u06cc\u062a\u0627\u0633\u0627\u06cc\u0646\u0633 \u062f\u0627\u0646\u0634\u06af\u0627\u0647 \u062a\u0647\u0631\u0627\u0646 \u0647\u0633\u062a\u0645 \u0648 \u0628\u0647 \u062d\u0644 \u0645\u0633\u0626\u0644\u0647 \u0648 \u0627\u0631\u0627\u0626\u0647 \u0631\u0627\u0647\u200c\u062d\u0644\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0639\u0644\u0627\u0642\u0647\u200c\u0645\u0646\u062f\u0645.<\/p><\/section>\n\n<section class=\"bg-white p-6 md:p-10 rounded-3xl shadow-lg transition-all duration-300 hover:shadow-xl mb-12\" id=\"skills\">\n<h2 class=\"text-3xl md:text-4xl font-bold text-dark-pink mb-6\">\u0645\u0647\u0627\u0631\u062a\u200c\u0647\u0627<\/h2>\n<div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6 text-center\">\n\n<div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200\">\n<div class=\"flex items-center justify-center mb-2\">\n\n<svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm2 16.5c-1.5 0-2.5-.9-3-2.1-.5-1.2-.5-2.7 0-3.9.5-1.2 1.5-2.1 3-2.1s2.5.9 3 2.1c.5 1.2.5 2.7 0 3.9-.5 1.2-1.5 2.1-3 2.1zm-4-8.4c1.5 0 2.5.9 3 2.1.5 1.2.5 2.7 0 3.9-.5 1.2-1.5 2.1-3 2.1s-2.5-.9-3-2.1c-.5-1.2-.5-2.7 0-3.9.5-1.2 1.5-2.1 3-2.1z\"><\/path><\/svg>\n<\/div>\n<span class=\"text-lg font-medium\">\u067e\u0627\u06cc\u062a\u0648\u0646<\/span>\n<\/div>\n\n<div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200\">\n<div class=\"flex items-center justify-center mb-2\">\n\n<svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 16h-2v-2h2v2zm0-4h-2V6h2v8z\"><\/path><\/svg>\n<\/div>\n<span class=\"text-lg font-medium\">\u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/span>\n<\/div>\n\n<div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200\">\n<div class=\"flex items-center justify-center mb-2\">\n\n<svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 19V5h14v14H5z\"><\/path><\/svg>\n<\/div>\n<span class=\"text-lg font-medium\">HTML<\/span>\n<\/div>\n\n<div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200\">\n<div class=\"flex items-center justify-center mb-2\">\n\n<svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM5 12h14v1H5v-1zM5 15h14v1H5v-1zM5 9h14v1H5V9z\"><\/path><\/svg>\n<\/div>\n<span class=\"text-lg font-medium\">CSS<\/span>\n<\/div>\n\n<div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200\">\n<div class=\"flex items-center justify-center mb-2\">\n\n<svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-2-12h4v2h-4v-2zm0 4h4v2h-4v-2z\"><\/path><\/svg>\n<\/div>\n<span class=\"text-lg font-medium\">C#<\/span>\n<\/div>\n\n<div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200\">\n<div class=\"flex items-center justify-center mb-2\">\n\n<svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM5 12h14v1H5v-1zM5 15h14v1H5v-1zM5 9h14v1H5V9z\"><\/path><\/svg>\n<\/div>\n<span class=\"text-lg font-medium\">\u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647<\/span>\n<\/div>\n\n<div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200\">\n<div class=\"flex items-center justify-center mb-2\">\n\n<svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M22 17H2c-.55 0-1 .45-1 1s.45 1 1 1h20c.55 0 1-.45 1-1s-.45-1-1-1zM22 7H2c-.55 0-1 .45-1 1s.45 1 1 1h20c.55 0 1-.45 1-1s-.45-1-1-1zM22 12H2c-.55 0-1 .45-1 1s.45 1 1 1h20c.55 0 1-.45 1-1s-.45-1-1-1z\"><\/path><\/svg>\n<\/div>\n<span class=\"text-lg font-medium\">\u0641\u062a\u0648\u0634\u0627\u067e<\/span>\n<\/div>\n\n<div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200\">\n<div class=\"flex items-center justify-center mb-2\">\n\n<svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM7 17l5-5-5-5-5 5 5 5z\"><\/path><\/svg>\n<\/div>\n<span class=\"text-lg font-medium\">\u0627\u06cc\u0644\u0627\u0633\u062a\u0631\u06cc\u062a\u0648\u0631<\/span>\n<\/div>\n<div class=\"bg-soft-gray p-4 rounded-xl shadow-sm\"><div class=\"flex items-center justify-center mb-2\">\ud83d\udcca<\/div><span class=\"text-lg font-medium\">\u062a\u062d\u0644\u06cc\u0644 \u062f\u0627\u062f\u0647 \u0628\u0627 XLSTAT<\/span><\/div><\/div>\n<\/section>\n\n<section class=\"bg-white p-6 md:p-10 rounded-3xl shadow-lg mb-12\" id=\"experience\"><h2 class=\"text-3xl md:text-4xl font-bold text-dark-pink mb-6\">\u0633\u0648\u0627\u0628\u0642 \u06a9\u0627\u0631\u06cc<\/h2><div class=\"space-y-4\"><div><h3 class=\"text-xl font-bold\">\u067e\u0634\u062a\u06cc\u0628\u0627\u0646 \u0641\u0646\u06cc<\/h3><p>\u06f2 \u0633\u0627\u0644 \u0633\u0627\u0628\u0642\u0647 \u0641\u0639\u0627\u0644\u06cc\u062a \u062f\u0631 \u062d\u0648\u0632\u0647 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0641\u0646\u06cc.<\/p><\/div><div><h3 class=\"text-xl font-bold\">\u0637\u0631\u0627\u062d \u0648\u0628\u200c\u0633\u0627\u06cc\u062a<\/h3><p>\u0637\u0631\u0627\u062d\u06cc \u0648 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0634\u062e\u0635\u06cc \u0648 \u0634\u0631\u06a9\u062a\u06cc.<\/p><\/div><\/div><\/section>\n\n<section class=\"bg-white p-6 md:p-10 rounded-3xl shadow-lg transition-all duration-300 hover:shadow-xl\" id=\"contact\">\n<h2 class=\"text-3xl md:text-4xl font-bold text-dark-pink mb-6\">\u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u0645\u0646<\/h2>\n<p class=\"text-lg mb-4 text-center\">\n \u062e\u0648\u0634\u062d\u0627\u0644 \u0645\u06cc\u200c\u0634\u0645 \u0628\u0627 \u0645\u0646 \u062f\u0631 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627\u0634\u06cc\u062f.\n <\/p>\n<div class=\"flex flex-col items-center gap-4\">\n\n<a class=\"w-full max-w-sm text-center bg-dark-pink text-white py-3 rounded-xl font-bold text-lg hover:bg-opacity-90 transition-colors duration-200\" href=\"mailto:kiana.ablnws@gmail.com\">\n \u0627\u0631\u0633\u0627\u0644 \u0627\u06cc\u0645\u06cc\u0644\n <\/a>\n<a class=\"w-full max-w-sm text-center bg-gray-200 text-text-dark py-3 rounded-xl font-bold text-lg hover:bg-gray-300 transition-colors duration-200\" href=\"https:\/\/www.linkedin.com\/in\/kiana-abolfazlian-466882380\">\n \u0644\u06cc\u0646\u06a9\u062f\u06cc\u0646\n <\/a>\n<\/div>\n<\/section>\n<\/div>\n\n<script>\n document.addEventListener('DOMContentLoaded', () => {\n initializeSnakeGame();\n \/\/ Start the game loop only after the canvas size is set and the game initialized\n window.requestAnimationFrame(gameLoop); \n });\n\n \/* =======================================================\n BMI Calculator Logic (\u0645\u0627\u0634\u06cc\u0646 \u062d\u0633\u0627\u0628 BMI)\n =======================================================\n *\/\n\n const BMI_RANGES = [\n { max: 18.5, category: \"\u06a9\u0645\u0628\u0648\u062f \u0648\u0632\u0646\", color: 'bmi-warn', icon: '\u26a0\ufe0f', \n desc: \"\u0648\u0632\u0646 \u0634\u0645\u0627 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0646\u0633\u0628\u062a \u0628\u0647 \u0642\u062f\u062a\u0627\u0646 \u067e\u0627\u06cc\u06cc\u0646 \u0628\u0627\u0634\u062f. \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0628\u0627 \u06cc\u06a9 \u0645\u062a\u062e\u0635\u0635 \u062a\u063a\u0630\u06cc\u0647 \u06cc\u0627 \u067e\u0632\u0634\u06a9 \u0645\u0634\u0648\u0631\u062a \u06a9\u0646\u06cc\u062f.\" },\n { max: 25.0, category: \"\u0648\u0632\u0646 \u0646\u0631\u0645\u0627\u0644\", color: 'bmi-normal', icon: '\u2705', \n desc: \"\u062a\u0628\u0631\u06cc\u06a9! \u0648\u0632\u0646 \u0634\u0645\u0627 \u062f\u0631 \u0645\u062d\u062f\u0648\u062f\u0647 \u0633\u0627\u0644\u0645 \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f. \u0631\u0698\u06cc\u0645 \u063a\u0630\u0627\u06cc\u06cc \u0645\u062a\u0639\u0627\u062f\u0644 \u0648 \u0648\u0631\u0632\u0634 \u0645\u0646\u0638\u0645 \u0631\u0627 \u062d\u0641\u0638 \u06a9\u0646\u06cc\u062f.\" },\n { max: 30.0, category: \"\u0627\u0636\u0627\u0641\u0647 \u0648\u0632\u0646\", color: 'bmi-warn', icon: '\u2757\ufe0f', \n desc: \"\u0627\u06cc\u0646 \u0648\u0636\u0639\u06cc\u062a \u0646\u0634\u0627\u0646\u200c\u062f\u0647\u0646\u062f\u0647 \u062f\u0631\u0635\u062f \u0686\u0631\u0628\u06cc \u0628\u062f\u0646\u06cc \u0628\u0627\u0644\u0627\u062a\u0631 \u0627\u0632 \u062d\u062f \u0633\u0627\u0644\u0645 \u0627\u0633\u062a. \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0628\u0627 \u0631\u0698\u06cc\u0645 \u063a\u0630\u0627\u06cc\u06cc \u0648 \u0641\u0639\u0627\u0644\u06cc\u062a \u0628\u062f\u0646\u06cc\u060c \u06a9\u0645\u06cc \u0648\u0632\u0646 \u06a9\u0645 \u06a9\u0646\u06cc\u062f.\" },\n { max: Infinity, category: \"\u0686\u0627\u0642\u06cc\", color: 'bmi-danger', icon: '\u274c', \n desc: \"\u0627\u06cc\u0646 \u0633\u0637\u062d \u0627\u0632 \u0648\u0632\u0646 \u0627\u0636\u0627\u0641\u06cc\u060c \u062e\u0637\u0631\u0627\u062a \u0633\u0644\u0627\u0645\u062a\u06cc \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0634\u062f\u06cc\u062f\u0627\u064b \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0645\u0634\u0627\u0648\u0631\u0647 \u067e\u0632\u0634\u06a9\u06cc \u0648 \u062a\u063a\u0630\u06cc\u0647\u200c\u0627\u06cc \u0628\u0627\u0634\u06cc\u062f.\" },\n ];\n\n function displayError(message) {\n const errorBox = document.getElementById('error-message');\n const errorText = document.getElementById('error-text');\n \n if (message) {\n errorText.textContent = message;\n errorBox.classList.remove('hidden');\n document.getElementById('bmi-result-section').classList.add('hidden'); \n } else {\n errorBox.classList.add('hidden');\n }\n }\n\n function calculateBmi() {\n displayError(''); \/\/ \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 \u062e\u0637\u0627\u0647\u0627\u06cc \u0642\u0628\u0644\u06cc\n\n const weightInput = document.getElementById('weight');\n const heightInput = document.getElementById('height');\n \n const weight_kg = parseFloat(weightInput.value);\n const height_cm = parseFloat(heightInput.value);\n\n \/\/ 1. \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc\n if (isNaN(weight_kg) || isNaN(height_cm) || weight_kg <= 0 || height_cm <= 0) {\n displayError(\"\u0644\u0637\u0641\u0627 \u0627\u0639\u062f\u0627\u062f \u0645\u062b\u0628\u062a \u0648 \u0645\u0639\u062a\u0628\u0631 \u0628\u0631\u0627\u06cc \u0648\u0632\u0646 \u0648 \u0642\u062f \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f.\");\n return;\n }\n\n try {\n \/\/ 2. \u0645\u062d\u0627\u0633\u0628\u0647\n const height_m = height_cm \/ 100.0;\n const bmi = weight_kg \/ (height_m ** 2);\n const roundedBmi = bmi.toFixed(2);\n\n \/\/ 3. \u0637\u0628\u0642\u0647\u200c\u0628\u0646\u062f\u06cc\n let result = null;\n for (const range of BMI_RANGES) {\n if (bmi < range.max) {\n result = range;\n break;\n }\n }\n\n \/\/ 4. \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc\n const resultSection = document.getElementById('bmi-result-section');\n const bmiValueElement = document.getElementById('bmi-value');\n const categorySpan = document.getElementById('category-span');\n const descriptionText = document.getElementById('description-text');\n \n \/\/ \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627\u06cc \u0631\u0646\u06af\u06cc \u062f\u06cc\u0646\u0627\u0645\u06cc\u06a9 \u0642\u0628\u0644\u06cc\n categorySpan.className = '';\n bmiValueElement.className = 'text-5xl font-extrabold mt-1'; \n \n \/\/ \u0627\u0639\u0645\u0627\u0644 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0648 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\n bmiValueElement.textContent = roundedBmi;\n categorySpan.textContent = `${result.icon} ${result.category}`;\n descriptionText.textContent = result.desc;\n \n \/\/ \u0627\u0639\u0645\u0627\u0644 \u0631\u0646\u06af\u200c\u0647\u0627\u06cc Tailwind \u0628\u0631 \u0627\u0633\u0627\u0633 \u0637\u0628\u0642\u0647\u200c\u0628\u0646\u062f\u06cc\n categorySpan.classList.add('text-' + result.color);\n bmiValueElement.classList.add('text-' + result.color);\n \n \/\/ \u0646\u0645\u0627\u06cc\u0634 \u0628\u062e\u0634 \u0646\u062a\u0627\u06cc\u062c\n resultSection.classList.remove('hidden');\n\n } catch (e) {\n console.error(\"Calculation failed:\", e);\n displayError(\"\u06cc\u06a9 \u062e\u0637\u0627\u06cc \u063a\u06cc\u0631\u0645\u0646\u062a\u0638\u0631\u0647 \u062f\u0631 \u0645\u062d\u0627\u0633\u0628\u0647 BMI \u0631\u062e \u062f\u0627\u062f.\");\n }\n }\n\n \/* =======================================================\n Snake Game Logic (\u0628\u0627\u0632\u06cc \u0645\u0627\u0631)\n =======================================================\n *\/\n\n const canvas = document.getElementById('snakeCanvas');\n const ctx = canvas.getContext('2d');\n const scoreElement = document.getElementById('score');\n const messageElement = document.getElementById('game-message');\n const resetButton = document.getElementById('resetButton');\n const pauseButton = document.getElementById('pauseButton');\n\n \/\/ --- Game Constants ---\n const TILE_COUNT = 15; \/\/ Grid size (smaller for better fit)\n let TILE_SIZE; \n const GAME_SPEED = 120; \/\/ Time in milliseconds between game ticks\n\n \/\/ --- Game State Variables ---\n let snake = [];\n let food = {};\n let dx = 0; \n let dy = 0; \n let score = 0;\n let isRunning = false;\n let isPaused = false;\n let nextDirection = { dx: 1, dy: 0 }; \n let lastUpdateTime = 0;\n \n \/**\n * Initializes canvas size and game state.\n *\/\n function initializeSnakeGame() {\n \/\/ Set canvas size based on its container (e.g., 90% of max 300px)\n const container = document.querySelector('#snakeCanvas').parentElement;\n const size = Math.min(container.clientWidth - 10, 300); \/\/ 300 max width\n canvas.width = size;\n canvas.height = size;\n \n TILE_SIZE = canvas.width \/ TILE_COUNT;\n \n \/\/ Initial snake position (start in the middle-left)\n snake = [\n { x: 5, y: Math.floor(TILE_COUNT \/ 2) },\n { x: 4, y: Math.floor(TILE_COUNT \/ 2) },\n { x: 3, y: Math.floor(TILE_COUNT \/ 2) }\n ];\n dx = 1; \/\/ Start moving right\n dy = 0;\n score = 0;\n isRunning = false; \/\/ Starts paused until user input\n isPaused = false;\n nextDirection = { dx: 1, dy: 0 };\n scoreElement.textContent = score;\n resetButton.classList.add('hidden');\n pauseButton.classList.remove('hidden');\n pauseButton.textContent = \"\u0645\u06a9\u062b\";\n \n spawnFood();\n updateSnakeMessage(\"\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u062d\u0631\u06a9\u062a\u060c \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u062c\u0647\u062a \u06cc\u0627 \u06a9\u0646\u062a\u0631\u0644\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f!\", '#e1a6b2');\n draw();\n }\n\n \/**\n * Spawns food at a random unoccupied grid location.\n *\/\n function spawnFood() {\n let newFood;\n let occupied;\n\n do {\n newFood = {\n x: Math.floor(Math.random() * TILE_COUNT),\n y: Math.floor(Math.random() * TILE_COUNT)\n };\n occupied = snake.some(segment => segment.x === newFood.x && segment.y === newFood.y);\n } while (occupied);\n\n food = newFood;\n }\n\n \/**\n * Draws the game elements (board, snake, food).\n *\/\n function draw() {\n \/\/ 1. Draw Board (clears the canvas)\n ctx.fillStyle = tailwind.config.theme.extend.colors['snake-bg']; \n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n \/\/ 2. Draw Food\n ctx.fillStyle = tailwind.config.theme.extend.colors['bmi-danger'];\n ctx.shadowColor = 'red';\n ctx.shadowBlur = 10;\n ctx.fillRect(food.x * TILE_SIZE, food.y * TILE_SIZE, TILE_SIZE, TILE_SIZE);\n ctx.shadowBlur = 0; \n\n \/\/ 3. Draw Snake\n snake.forEach((segment, index) => {\n if (index === 0) {\n ctx.fillStyle = '#10b981'; \/\/ Brighter green for head (snake-color)\n ctx.strokeStyle = '#a7f3d0'; \n } else {\n ctx.fillStyle = '#059669'; \/\/ Darker green for body\n ctx.strokeStyle = '#34d399';\n }\n \n ctx.fillRect(segment.x * TILE_SIZE, segment.y * TILE_SIZE, TILE_SIZE, TILE_SIZE);\n ctx.strokeRect(segment.x * TILE_SIZE, segment.y * TILE_SIZE, TILE_SIZE, TILE_SIZE);\n });\n }\n\n \/**\n * Updates the position and checks for collisions.\n *\/\n function update() {\n if (!isRunning || isPaused) return;\n\n \/\/ Update direction only if it doesn't immediately reverse the snake\n if (nextDirection.dx !== -dx || nextDirection.dy !== -dy) {\n dx = nextDirection.dx;\n dy = nextDirection.dy;\n }\n\n \/\/ Create new head position\n const head = { x: snake[0].x + dx, y: snake[0].y + dy };\n\n \/\/ 1. Check for Wall Collision\n if (head.x < 0 || head.x >= TILE_COUNT || head.y < 0 || head.y >= TILE_COUNT) {\n gameOver(\"\u0628\u0631\u062e\u0648\u0631\u062f \u0628\u0627 \u062f\u06cc\u0648\u0627\u0631!\");\n return;\n }\n\n \/\/ 2. Check for Self Collision\n if (snake.some((segment, index) => index !== 0 && segment.x === head.x && segment.y === head.y)) {\n gameOver(\"\u062e\u0648\u062f\u062e\u0648\u0631\u06cc!\");\n return;\n }\n\n \/\/ Add new head to the front\n snake.unshift(head);\n\n \/\/ 3. Check for Food Collision\n if (head.x === food.x && head.y === food.y) {\n score++;\n scoreElement.textContent = score;\n spawnFood();\n } else {\n \/\/ Remove the tail\n snake.pop();\n }\n }\n\n \/**\n * The main game loop function.\n *\/\n function gameLoop(timestamp) {\n if (!isRunning && !isPaused) {\n draw();\n requestAnimationFrame(gameLoop);\n return;\n }\n if (!isRunning && isPaused) return; \/\/ Stop loop if game over and paused\n\n const elapsed = timestamp - lastUpdateTime;\n\n if (elapsed > GAME_SPEED && !isPaused) {\n lastUpdateTime = timestamp;\n update();\n }\n\n draw();\n requestAnimationFrame(gameLoop);\n }\n\n \/**\n * Handles the Game Over state.\n * @param {string} reason - The reason for game over.\n *\/\n function gameOver(reason) {\n isRunning = false;\n updateSnakeMessage(`\u0628\u0627\u0632\u06cc \u062a\u0645\u0627\u0645 \u0634\u062f! \u0627\u0645\u062a\u06cc\u0627\u0632 \u0646\u0647\u0627\u06cc\u06cc: ${score}. \u062f\u0644\u06cc\u0644: ${reason}`, '#dc2626');\n resetButton.classList.remove('hidden');\n pauseButton.classList.add('hidden');\n }\n \n \/**\n * Updates the instruction\/status message area.\n * @param {string} text - The message text.\n * @param {string} color - Hex color code.\n *\/\n function updateSnakeMessage(text, color) {\n messageElement.textContent = text;\n messageElement.style.backgroundColor = color + '20'; \/\/ 20% opacity\n messageElement.style.borderColor = color;\n messageElement.style.color = color;\n }\n\n\n \/**\n * Resets and starts a new game.\n *\/\n window.resetGame = function () {\n pauseButton.classList.remove('hidden');\n initializeSnakeGame();\n isRunning = true; \/\/ Start running immediately upon reset\n lastUpdateTime = performance.now(); \n }\n\n \/**\n * Toggles the paused state.\n *\/\n window.togglePause = function () {\n if (!isRunning && score > 0) return; \/\/ Prevent pause if game is over\n if (!isRunning) {\n isRunning = true;\n updateSnakeMessage(\"\u0628\u0627\u0632\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627\u0633\u062a! \u0627\u0632 \u062d\u0631\u06a9\u062a \u0644\u0630\u062a \u0628\u0628\u0631\u06cc\u062f.\", '#10b981');\n }\n \n isPaused = !isPaused;\n if (isPaused) {\n updateSnakeMessage(\"\u0628\u0627\u0632\u06cc \u0645\u062a\u0648\u0642\u0641 \u0634\u062f. \u0628\u0631\u0627\u06cc \u0627\u062f\u0627\u0645\u0647 \u062f\u0648\u0628\u0627\u0631\u0647 \u0645\u06a9\u062b \u0631\u0627 \u0628\u0632\u0646\u06cc\u062f.\", '#f59e0b');\n pauseButton.textContent = \"\u0627\u062f\u0627\u0645\u0647\";\n } else {\n updateSnakeMessage(\"\u0628\u0627\u0632\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627\u0633\u062a!\", '#10b981');\n pauseButton.textContent = \"\u0645\u06a9\u062b\";\n lastUpdateTime = performance.now(); \n requestAnimationFrame(gameLoop);\n }\n }\n\n \/**\n * Public function to change snake direction (used by on-screen buttons).\n * @param {string} direction - 'up', 'down', 'left', or 'right'.\n *\/\n window.changeDirection = function (direction) {\n if (!isRunning) {\n \/\/ If game is not running (first move), start it\n isRunning = true;\n updateSnakeMessage(\"\u0628\u0627\u0632\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627\u0633\u062a! \u0627\u0632 \u062d\u0631\u06a9\u062a \u0644\u0630\u062a \u0628\u0628\u0631\u06cc\u062f.\", '#10b981');\n }\n if (isPaused) return;\n\n switch (direction) {\n case 'up':\n if (dy === 0) nextDirection = { dx: 0, dy: -1 };\n break;\n case 'down':\n if (dy === 0) nextDirection = { dx: 0, dy: 1 };\n break;\n case 'left':\n \/\/ Note: Direction logic is not sensitive to RTL, it's based on canvas coordinates\n if (dx === 0) nextDirection = { dx: -1, dy: 0 };\n break;\n case 'right':\n if (dx === 0) nextDirection = { dx: 1, dy: 0 };\n break;\n }\n }\n\n \/**\n * Handles keyboard input for movement and pausing.\n *\/\n document.addEventListener('keydown', (event) => {\n const key = event.key;\n \n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {\n event.preventDefault(); \n }\n\n switch (key) {\n case 'ArrowUp':\n case 'w':\n changeDirection('up');\n break;\n case 'ArrowDown':\n case 's':\n changeDirection('down');\n break;\n case 'ArrowLeft':\n case 'a':\n changeDirection('left');\n break;\n case 'ArrowRight':\n case 'd':\n changeDirection('right');\n break;\n case ' ': \/\/ Spacebar for pause\/resume\n event.preventDefault();\n togglePause();\n break;\n }\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t\t\t\t\t<\/div>\n\t\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>\u067e\u0648\u0631\u062a\u0641\u0648\u0644\u06cc\u0648 \u06a9\u06cc\u0627\u0646\u0627 | Data Science \u06a9\u06cc\u0627\u0646\u0627 Data Science | AI \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0646 \u0633\u0644\u0627\u0645\u060c \u0645\u0646 \u06a9\u06cc\u0627\u0646\u0627 \u0647\u0633\u062a\u0645\u060c \u062e\u0648\u0634\u062d\u0627\u0644\u0645 \u06a9\u0647 \u0627\u0632 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0645\u0646 \u0628\u0627\u0632\u062f\u06cc\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f. \u06f1\u06f8 \u0633\u0627\u0644 \u062f\u0627\u0631\u0645 \u0648 \u0627\u0632 \u0627\u0648\u0627\u062e\u0631 \u06f1\u06f4 \u0633\u0627\u0644\u06af\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0648\u0632\u0647 \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0631\u062f\u0645. \u0628\u0627 \u062a\u062d\u0642\u06cc\u0642 \u0648 \u0634\u0631\u06a9\u062a \u062f\u0631 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627 \u0648 \u062f\u0648\u0631\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u062a\u0648\u0627\u0646\u0633\u062a\u0645 \u0639\u0644\u0627\u0642\u0647 \u0627\u0635\u0644\u06cc \u062e\u0648\u062f\u0645 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0645. \u062f\u0631 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":12,"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":68,"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/68"}],"wp:attachment":[{"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\n\n\n\n\n\n\u067e\u0648\u0631\u062a\u0641\u0648\u0644\u06cc\u0648 \u06a9\u06cc\u0627\u0646\u0627 | Data Science<\/title>\n\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],\n mono: ['Courier New', 'monospace'],\n },\n colors: {\n 'pastel-pink': '#f7e9ef', \/\/ Original Body Background\n 'light-pink': '#fcdfe2',\n 'dark-pink': '#e1a6b2', \/\/ Primary Accent Color\n 'soft-gray': '#f5f5f5',\n 'text-dark': '#4a4a4a',\n \n \/\/ Custom colors for BMI and Snake Game status\n 'bmi-normal': '#38bdf8', \/\/ Sky 400 - Blue\n 'bmi-warn': '#fbbf24', \/\/ Amber 400 - Yellow\n 'bmi-danger': '#f87171', \/\/ Red 400 - Light Red\n 'snake-bg': '#1f2937', \/\/ Dark Canvas Background\n 'snake-color': '#10b981',\/\/ Emerald 500 - Green\n }\n }\n }\n }\n <\/script>\n<style>\n body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n background-color: #f7e9ef; \/* Pastel pink color *\/\n margin: 0;\n padding: 0;\n }\n\n \/* --- Snake Game Custom Styles --- *\/\n #snakeCanvas {\n border: 2px solid #a1a1aa; \/* Border around the game board *\/\n background-color: #1f2937; \/* Dark background *\/\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);\n display: block;\n margin: 0 auto;\n }\n \n \/* General button styling for the game controls *\/\n .game-button {\n transition: all 0.15s ease-in-out;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);\n font-family: 'Courier New', monospace;\n }\n\n .game-button:hover {\n transform: translateY(-1px);\n box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);\n }\n\n .game-button:active {\n transform: translateY(2px);\n box-shadow: none;\n }\n <\/style>\n<\/head>\n<body class=\"text-text-dark antialiased transition-all duration-300\">\n\n<div class=\"container mx-auto px-4 py-8 md:py-16\">\n\n<header class=\"text-center mb-16\">\n<h1 class=\"text-5xl md:text-6xl font-extrabold text-dark-pink drop-shadow-sm mb-2\">\u06a9\u06cc\u0627\u0646\u0627<\/h1>\n<p class=\"text-xl md:text-2xl font-light text-text-dark\">Data Science | AI<\/p>\n<\/header>\n\n<section class=\"bg-white p-6 md:p-10 rounded-3xl shadow-lg transition-all duration-300 hover:shadow-xl mb-12\" id=\"about\"><h2 class=\"text-3xl md:text-4xl font-bold text-dark-pink mb-4\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0646<\/h2><p class=\"text-lg leading-relaxed mb-4\">\u0633\u0644\u0627\u0645\u060c \u0645\u0646 \u06a9\u06cc\u0627\u0646\u0627 \u0647\u0633\u062a\u0645\u060c \u062e\u0648\u0634\u062d\u0627\u0644\u0645 \u06a9\u0647 \u0627\u0632 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0645\u0646 \u0628\u0627\u0632\u062f\u06cc\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f.<\/p><p class=\"text-lg leading-relaxed mb-4\">\u06f1\u06f8 \u0633\u0627\u0644 \u062f\u0627\u0631\u0645 \u0648 \u0627\u0632 \u0627\u0648\u0627\u062e\u0631 \u06f1\u06f4 \u0633\u0627\u0644\u06af\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0648\u0632\u0647 \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0631\u062f\u0645. \u0628\u0627 \u062a\u062d\u0642\u06cc\u0642 \u0648 \u0634\u0631\u06a9\u062a \u062f\u0631 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627 \u0648 \u062f\u0648\u0631\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u062a\u0648\u0627\u0646\u0633\u062a\u0645 \u0639\u0644\u0627\u0642\u0647 \u0627\u0635\u0644\u06cc \u062e\u0648\u062f\u0645 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0645.<\/p><p class=\"text-lg leading-relaxed mb-4\">\u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0634\u0631\u06a9\u062a\u200c\u06a9\u0646\u0646\u062f\u0647 \u062f\u0648\u0631\u0647 \u062f\u06cc\u062a\u0627\u0633\u0627\u06cc\u0646\u0633 \u062f\u0627\u0646\u0634\u06af\u0627\u0647 \u062a\u0647\u0631\u0627\u0646 \u0647\u0633\u062a\u0645 \u0648 \u0628\u0647 \u062d\u0644 \u0645\u0633\u0626\u0644\u0647 \u0648 \u0627\u0631\u0627\u0626\u0647 \u0631\u0627\u0647\u200c\u062d\u0644\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0639\u0644\u0627\u0642\u0647\u200c\u0645\u0646\u062f\u0645.<\/p><\/section>\n\n<section class=\"bg-white p-6 md:p-10 rounded-3xl shadow-lg transition-all duration-300 hover:shadow-xl mb-12\" id=\"skills\">\n<h2 class=\"text-3xl md:text-4xl font-bold text-dark-pink mb-6\">\u0645\u0647\u0627\u0631\u062a\u200c\u0647\u0627<\/h2>\n<div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6 text-center\">\n\n<div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200\">\n<div class=\"flex items-center justify-center mb-2\">\n\n<svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm2 16.5c-1.5 0-2.5-.9-3-2.1-.5-1.2-.5-2.7 0-3.9.5-1.2 1.5-2.1 3-2.1s2.5.9 3 2.1c.5 1.2.5 2.7 0 3.9-.5 1.2-1.5 2.1-3 2.1zm-4-8.4c1.5 0 2.5.9 3 2.1.5 1.2.5 2.7 0 3.9-.5 1.2-1.5 2.1-3 2.1s-2.5-.9-3-2.1c-.5-1.2-.5-2.7 0-3.9.5-1.2 1.5-2.1 3-2.1z\"><\/path><\/svg>\n<\/div>\n<span class=\"text-lg font-medium\">\u067e\u0627\u06cc\u062a\u0648\u0646<\/span>\n<\/div>\n\n<div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200\">\n<div class=\"flex items-center justify-center mb-2\">\n\n<svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 16h-2v-2h2v2zm0-4h-2V6h2v8z\"><\/path><\/svg>\n<\/div>\n<span class=\"text-lg font-medium\">\u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/span>\n<\/div>\n\n<div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200\">\n<div class=\"flex items-center justify-center mb-2\">\n\n<svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 19V5h14v14H5z\"><\/path><\/svg>\n<\/div>\n<span class=\"text-lg font-medium\">HTML<\/span>\n<\/div>\n\n<div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200\">\n<div class=\"flex items-center justify-center mb-2\">\n\n<svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM5 12h14v1H5v-1zM5 15h14v1H5v-1zM5 9h14v1H5V9z\"><\/path><\/svg>\n<\/div>\n<span class=\"text-lg font-medium\">CSS<\/span>\n<\/div>\n\n<div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200\">\n<div class=\"flex items-center justify-center mb-2\">\n\n<svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-2-12h4v2h-4v-2zm0 4h4v2h-4v-2z\"><\/path><\/svg>\n<\/div>\n<span class=\"text-lg font-medium\">C#<\/span>\n<\/div>\n\n<div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200\">\n<div class=\"flex items-center justify-center mb-2\">\n\n<svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM5 12h14v1H5v-1zM5 15h14v1H5v-1zM5 9h14v1H5V9z\"><\/path><\/svg>\n<\/div>\n<span class=\"text-lg font-medium\">\u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647<\/span>\n<\/div>\n\n<div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200\">\n<div class=\"flex items-center justify-center mb-2\">\n\n<svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M22 17H2c-.55 0-1 .45-1 1s.45 1 1 1h20c.55 0 1-.45 1-1s-.45-1-1-1zM22 7H2c-.55 0-1 .45-1 1s.45 1 1 1h20c.55 0 1-.45 1-1s-.45-1-1-1zM22 12H2c-.55 0-1 .45-1 1s.45 1 1 1h20c.55 0 1-.45 1-1s-.45-1-1-1z\"><\/path><\/svg>\n<\/div>\n<span class=\"text-lg font-medium\">\u0641\u062a\u0648\u0634\u0627\u067e<\/span>\n<\/div>\n\n<div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200\">\n<div class=\"flex items-center justify-center mb-2\">\n\n<svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM7 17l5-5-5-5-5 5 5 5z\"><\/path><\/svg>\n<\/div>\n<span class=\"text-lg font-medium\">\u0627\u06cc\u0644\u0627\u0633\u062a\u0631\u06cc\u062a\u0648\u0631<\/span>\n<\/div>\n<div class=\"bg-soft-gray p-4 rounded-xl shadow-sm\"><div class=\"flex items-center justify-center mb-2\">\ud83d\udcca<\/div><span class=\"text-lg font-medium\">\u062a\u062d\u0644\u06cc\u0644 \u062f\u0627\u062f\u0647 \u0628\u0627 XLSTAT<\/span><\/div><\/div>\n<\/section>\n\n<section class=\"bg-white p-6 md:p-10 rounded-3xl shadow-lg mb-12\" id=\"experience\"><h2 class=\"text-3xl md:text-4xl font-bold text-dark-pink mb-6\">\u0633\u0648\u0627\u0628\u0642 \u06a9\u0627\u0631\u06cc<\/h2><div class=\"space-y-4\"><div><h3 class=\"text-xl font-bold\">\u067e\u0634\u062a\u06cc\u0628\u0627\u0646 \u0641\u0646\u06cc<\/h3><p>\u06f2 \u0633\u0627\u0644 \u0633\u0627\u0628\u0642\u0647 \u0641\u0639\u0627\u0644\u06cc\u062a \u062f\u0631 \u062d\u0648\u0632\u0647 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0641\u0646\u06cc.<\/p><\/div><div><h3 class=\"text-xl font-bold\">\u0637\u0631\u0627\u062d \u0648\u0628\u200c\u0633\u0627\u06cc\u062a<\/h3><p>\u0637\u0631\u0627\u062d\u06cc \u0648 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0634\u062e\u0635\u06cc \u0648 \u0634\u0631\u06a9\u062a\u06cc.<\/p><\/div><\/div><\/section>\n\n<section class=\"bg-white p-6 md:p-10 rounded-3xl shadow-lg transition-all duration-300 hover:shadow-xl\" id=\"contact\">\n<h2 class=\"text-3xl md:text-4xl font-bold text-dark-pink mb-6\">\u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u0645\u0646<\/h2>\n<p class=\"text-lg mb-4 text-center\">\n \u062e\u0648\u0634\u062d\u0627\u0644 \u0645\u06cc\u200c\u0634\u0645 \u0628\u0627 \u0645\u0646 \u062f\u0631 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627\u0634\u06cc\u062f.\n <\/p>\n<div class=\"flex flex-col items-center gap-4\">\n\n<a class=\"w-full max-w-sm text-center bg-dark-pink text-white py-3 rounded-xl font-bold text-lg hover:bg-opacity-90 transition-colors duration-200\" href=\"mailto:kiana.ablnws@gmail.com\">\n \u0627\u0631\u0633\u0627\u0644 \u0627\u06cc\u0645\u06cc\u0644\n <\/a>\n<a class=\"w-full max-w-sm text-center bg-gray-200 text-text-dark py-3 rounded-xl font-bold text-lg hover:bg-gray-300 transition-colors duration-200\" href=\"https:\/\/www.linkedin.com\/in\/kiana-abolfazlian-466882380\">\n \u0644\u06cc\u0646\u06a9\u062f\u06cc\u0646\n <\/a>\n<\/div>\n<\/section>\n<\/div>\n\n<script>\n document.addEventListener('DOMContentLoaded', () => {\n initializeSnakeGame();\n \/\/ Start the game loop only after the canvas size is set and the game initialized\n window.requestAnimationFrame(gameLoop); \n });\n\n \/* =======================================================\n BMI Calculator Logic (\u0645\u0627\u0634\u06cc\u0646 \u062d\u0633\u0627\u0628 BMI)\n =======================================================\n *\/\n\n const BMI_RANGES = [\n { max: 18.5, category: \"\u06a9\u0645\u0628\u0648\u062f \u0648\u0632\u0646\", color: 'bmi-warn', icon: '\u26a0\ufe0f', \n desc: \"\u0648\u0632\u0646 \u0634\u0645\u0627 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0646\u0633\u0628\u062a \u0628\u0647 \u0642\u062f\u062a\u0627\u0646 \u067e\u0627\u06cc\u06cc\u0646 \u0628\u0627\u0634\u062f. \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0628\u0627 \u06cc\u06a9 \u0645\u062a\u062e\u0635\u0635 \u062a\u063a\u0630\u06cc\u0647 \u06cc\u0627 \u067e\u0632\u0634\u06a9 \u0645\u0634\u0648\u0631\u062a \u06a9\u0646\u06cc\u062f.\" },\n { max: 25.0, category: \"\u0648\u0632\u0646 \u0646\u0631\u0645\u0627\u0644\", color: 'bmi-normal', icon: '\u2705', \n desc: \"\u062a\u0628\u0631\u06cc\u06a9! \u0648\u0632\u0646 \u0634\u0645\u0627 \u062f\u0631 \u0645\u062d\u062f\u0648\u062f\u0647 \u0633\u0627\u0644\u0645 \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f. \u0631\u0698\u06cc\u0645 \u063a\u0630\u0627\u06cc\u06cc \u0645\u062a\u0639\u0627\u062f\u0644 \u0648 \u0648\u0631\u0632\u0634 \u0645\u0646\u0638\u0645 \u0631\u0627 \u062d\u0641\u0638 \u06a9\u0646\u06cc\u062f.\" },\n { max: 30.0, category: \"\u0627\u0636\u0627\u0641\u0647 \u0648\u0632\u0646\", color: 'bmi-warn', icon: '\u2757\ufe0f', \n desc: \"\u0627\u06cc\u0646 \u0648\u0636\u0639\u06cc\u062a \u0646\u0634\u0627\u0646\u200c\u062f\u0647\u0646\u062f\u0647 \u062f\u0631\u0635\u062f \u0686\u0631\u0628\u06cc \u0628\u062f\u0646\u06cc \u0628\u0627\u0644\u0627\u062a\u0631 \u0627\u0632 \u062d\u062f \u0633\u0627\u0644\u0645 \u0627\u0633\u062a. \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0628\u0627 \u0631\u0698\u06cc\u0645 \u063a\u0630\u0627\u06cc\u06cc \u0648 \u0641\u0639\u0627\u0644\u06cc\u062a \u0628\u062f\u0646\u06cc\u060c \u06a9\u0645\u06cc \u0648\u0632\u0646 \u06a9\u0645 \u06a9\u0646\u06cc\u062f.\" },\n { max: Infinity, category: \"\u0686\u0627\u0642\u06cc\", color: 'bmi-danger', icon: '\u274c', \n desc: \"\u0627\u06cc\u0646 \u0633\u0637\u062d \u0627\u0632 \u0648\u0632\u0646 \u0627\u0636\u0627\u0641\u06cc\u060c \u062e\u0637\u0631\u0627\u062a \u0633\u0644\u0627\u0645\u062a\u06cc \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0634\u062f\u06cc\u062f\u0627\u064b \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0645\u0634\u0627\u0648\u0631\u0647 \u067e\u0632\u0634\u06a9\u06cc \u0648 \u062a\u063a\u0630\u06cc\u0647\u200c\u0627\u06cc \u0628\u0627\u0634\u06cc\u062f.\" },\n ];\n\n function displayError(message) {\n const errorBox = document.getElementById('error-message');\n const errorText = document.getElementById('error-text');\n \n if (message) {\n errorText.textContent = message;\n errorBox.classList.remove('hidden');\n document.getElementById('bmi-result-section').classList.add('hidden'); \n } else {\n errorBox.classList.add('hidden');\n }\n }\n\n function calculateBmi() {\n displayError(''); \/\/ \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 \u062e\u0637\u0627\u0647\u0627\u06cc \u0642\u0628\u0644\u06cc\n\n const weightInput = document.getElementById('weight');\n const heightInput = document.getElementById('height');\n \n const weight_kg = parseFloat(weightInput.value);\n const height_cm = parseFloat(heightInput.value);\n\n \/\/ 1. \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc\n if (isNaN(weight_kg) || isNaN(height_cm) || weight_kg <= 0 || height_cm <= 0) {\n displayError(\"\u0644\u0637\u0641\u0627 \u0627\u0639\u062f\u0627\u062f \u0645\u062b\u0628\u062a \u0648 \u0645\u0639\u062a\u0628\u0631 \u0628\u0631\u0627\u06cc \u0648\u0632\u0646 \u0648 \u0642\u062f \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f.\");\n return;\n }\n\n try {\n \/\/ 2. \u0645\u062d\u0627\u0633\u0628\u0647\n const height_m = height_cm \/ 100.0;\n const bmi = weight_kg \/ (height_m ** 2);\n const roundedBmi = bmi.toFixed(2);\n\n \/\/ 3. \u0637\u0628\u0642\u0647\u200c\u0628\u0646\u062f\u06cc\n let result = null;\n for (const range of BMI_RANGES) {\n if (bmi < range.max) {\n result = range;\n break;\n }\n }\n\n \/\/ 4. \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc\n const resultSection = document.getElementById('bmi-result-section');\n const bmiValueElement = document.getElementById('bmi-value');\n const categorySpan = document.getElementById('category-span');\n const descriptionText = document.getElementById('description-text');\n \n \/\/ \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627\u06cc \u0631\u0646\u06af\u06cc \u062f\u06cc\u0646\u0627\u0645\u06cc\u06a9 \u0642\u0628\u0644\u06cc\n categorySpan.className = '';\n bmiValueElement.className = 'text-5xl font-extrabold mt-1'; \n \n \/\/ \u0627\u0639\u0645\u0627\u0644 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0648 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\n bmiValueElement.textContent = roundedBmi;\n categorySpan.textContent = `${result.icon} ${result.category}`;\n descriptionText.textContent = result.desc;\n \n \/\/ \u0627\u0639\u0645\u0627\u0644 \u0631\u0646\u06af\u200c\u0647\u0627\u06cc Tailwind \u0628\u0631 \u0627\u0633\u0627\u0633 \u0637\u0628\u0642\u0647\u200c\u0628\u0646\u062f\u06cc\n categorySpan.classList.add('text-' + result.color);\n bmiValueElement.classList.add('text-' + result.color);\n \n \/\/ \u0646\u0645\u0627\u06cc\u0634 \u0628\u062e\u0634 \u0646\u062a\u0627\u06cc\u062c\n resultSection.classList.remove('hidden');\n\n } catch (e) {\n console.error(\"Calculation failed:\", e);\n displayError(\"\u06cc\u06a9 \u062e\u0637\u0627\u06cc \u063a\u06cc\u0631\u0645\u0646\u062a\u0638\u0631\u0647 \u062f\u0631 \u0645\u062d\u0627\u0633\u0628\u0647 BMI \u0631\u062e \u062f\u0627\u062f.\");\n }\n }\n\n \/* =======================================================\n Snake Game Logic (\u0628\u0627\u0632\u06cc \u0645\u0627\u0631)\n =======================================================\n *\/\n\n const canvas = document.getElementById('snakeCanvas');\n const ctx = canvas.getContext('2d');\n const scoreElement = document.getElementById('score');\n const messageElement = document.getElementById('game-message');\n const resetButton = document.getElementById('resetButton');\n const pauseButton = document.getElementById('pauseButton');\n\n \/\/ --- Game Constants ---\n const TILE_COUNT = 15; \/\/ Grid size (smaller for better fit)\n let TILE_SIZE; \n const GAME_SPEED = 120; \/\/ Time in milliseconds between game ticks\n\n \/\/ --- Game State Variables ---\n let snake = [];\n let food = {};\n let dx = 0; \n let dy = 0; \n let score = 0;\n let isRunning = false;\n let isPaused = false;\n let nextDirection = { dx: 1, dy: 0 }; \n let lastUpdateTime = 0;\n \n \/**\n * Initializes canvas size and game state.\n *\/\n function initializeSnakeGame() {\n \/\/ Set canvas size based on its container (e.g., 90% of max 300px)\n const container = document.querySelector('#snakeCanvas').parentElement;\n const size = Math.min(container.clientWidth - 10, 300); \/\/ 300 max width\n canvas.width = size;\n canvas.height = size;\n \n TILE_SIZE = canvas.width \/ TILE_COUNT;\n \n \/\/ Initial snake position (start in the middle-left)\n snake = [\n { x: 5, y: Math.floor(TILE_COUNT \/ 2) },\n { x: 4, y: Math.floor(TILE_COUNT \/ 2) },\n { x: 3, y: Math.floor(TILE_COUNT \/ 2) }\n ];\n dx = 1; \/\/ Start moving right\n dy = 0;\n score = 0;\n isRunning = false; \/\/ Starts paused until user input\n isPaused = false;\n nextDirection = { dx: 1, dy: 0 };\n scoreElement.textContent = score;\n resetButton.classList.add('hidden');\n pauseButton.classList.remove('hidden');\n pauseButton.textContent = \"\u0645\u06a9\u062b\";\n \n spawnFood();\n updateSnakeMessage(\"\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u062d\u0631\u06a9\u062a\u060c \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u062c\u0647\u062a \u06cc\u0627 \u06a9\u0646\u062a\u0631\u0644\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f!\", '#e1a6b2');\n draw();\n }\n\n \/**\n * Spawns food at a random unoccupied grid location.\n *\/\n function spawnFood() {\n let newFood;\n let occupied;\n\n do {\n newFood = {\n x: Math.floor(Math.random() * TILE_COUNT),\n y: Math.floor(Math.random() * TILE_COUNT)\n };\n occupied = snake.some(segment => segment.x === newFood.x && segment.y === newFood.y);\n } while (occupied);\n\n food = newFood;\n }\n\n \/**\n * Draws the game elements (board, snake, food).\n *\/\n function draw() {\n \/\/ 1. Draw Board (clears the canvas)\n ctx.fillStyle = tailwind.config.theme.extend.colors['snake-bg']; \n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n \/\/ 2. Draw Food\n ctx.fillStyle = tailwind.config.theme.extend.colors['bmi-danger'];\n ctx.shadowColor = 'red';\n ctx.shadowBlur = 10;\n ctx.fillRect(food.x * TILE_SIZE, food.y * TILE_SIZE, TILE_SIZE, TILE_SIZE);\n ctx.shadowBlur = 0; \n\n \/\/ 3. Draw Snake\n snake.forEach((segment, index) => {\n if (index === 0) {\n ctx.fillStyle = '#10b981'; \/\/ Brighter green for head (snake-color)\n ctx.strokeStyle = '#a7f3d0'; \n } else {\n ctx.fillStyle = '#059669'; \/\/ Darker green for body\n ctx.strokeStyle = '#34d399';\n }\n \n ctx.fillRect(segment.x * TILE_SIZE, segment.y * TILE_SIZE, TILE_SIZE, TILE_SIZE);\n ctx.strokeRect(segment.x * TILE_SIZE, segment.y * TILE_SIZE, TILE_SIZE, TILE_SIZE);\n });\n }\n\n \/**\n * Updates the position and checks for collisions.\n *\/\n function update() {\n if (!isRunning || isPaused) return;\n\n \/\/ Update direction only if it doesn't immediately reverse the snake\n if (nextDirection.dx !== -dx || nextDirection.dy !== -dy) {\n dx = nextDirection.dx;\n dy = nextDirection.dy;\n }\n\n \/\/ Create new head position\n const head = { x: snake[0].x + dx, y: snake[0].y + dy };\n\n \/\/ 1. Check for Wall Collision\n if (head.x < 0 || head.x >= TILE_COUNT || head.y < 0 || head.y >= TILE_COUNT) {\n gameOver(\"\u0628\u0631\u062e\u0648\u0631\u062f \u0628\u0627 \u062f\u06cc\u0648\u0627\u0631!\");\n return;\n }\n\n \/\/ 2. Check for Self Collision\n if (snake.some((segment, index) => index !== 0 && segment.x === head.x && segment.y === head.y)) {\n gameOver(\"\u062e\u0648\u062f\u062e\u0648\u0631\u06cc!\");\n return;\n }\n\n \/\/ Add new head to the front\n snake.unshift(head);\n\n \/\/ 3. Check for Food Collision\n if (head.x === food.x && head.y === food.y) {\n score++;\n scoreElement.textContent = score;\n spawnFood();\n } else {\n \/\/ Remove the tail\n snake.pop();\n }\n }\n\n \/**\n * The main game loop function.\n *\/\n function gameLoop(timestamp) {\n if (!isRunning && !isPaused) {\n draw();\n requestAnimationFrame(gameLoop);\n return;\n }\n if (!isRunning && isPaused) return; \/\/ Stop loop if game over and paused\n\n const elapsed = timestamp - lastUpdateTime;\n\n if (elapsed > GAME_SPEED && !isPaused) {\n lastUpdateTime = timestamp;\n update();\n }\n\n draw();\n requestAnimationFrame(gameLoop);\n }\n\n \/**\n * Handles the Game Over state.\n * @param {string} reason - The reason for game over.\n *\/\n function gameOver(reason) {\n isRunning = false;\n updateSnakeMessage(`\u0628\u0627\u0632\u06cc \u062a\u0645\u0627\u0645 \u0634\u062f! \u0627\u0645\u062a\u06cc\u0627\u0632 \u0646\u0647\u0627\u06cc\u06cc: ${score}. \u062f\u0644\u06cc\u0644: ${reason}`, '#dc2626');\n resetButton.classList.remove('hidden');\n pauseButton.classList.add('hidden');\n }\n \n \/**\n * Updates the instruction\/status message area.\n * @param {string} text - The message text.\n * @param {string} color - Hex color code.\n *\/\n function updateSnakeMessage(text, color) {\n messageElement.textContent = text;\n messageElement.style.backgroundColor = color + '20'; \/\/ 20% opacity\n messageElement.style.borderColor = color;\n messageElement.style.color = color;\n }\n\n\n \/**\n * Resets and starts a new game.\n *\/\n window.resetGame = function () {\n pauseButton.classList.remove('hidden');\n initializeSnakeGame();\n isRunning = true; \/\/ Start running immediately upon reset\n lastUpdateTime = performance.now(); \n }\n\n \/**\n * Toggles the paused state.\n *\/\n window.togglePause = function () {\n if (!isRunning && score > 0) return; \/\/ Prevent pause if game is over\n if (!isRunning) {\n isRunning = true;\n updateSnakeMessage(\"\u0628\u0627\u0632\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627\u0633\u062a! \u0627\u0632 \u062d\u0631\u06a9\u062a \u0644\u0630\u062a \u0628\u0628\u0631\u06cc\u062f.\", '#10b981');\n }\n \n isPaused = !isPaused;\n if (isPaused) {\n updateSnakeMessage(\"\u0628\u0627\u0632\u06cc \u0645\u062a\u0648\u0642\u0641 \u0634\u062f. \u0628\u0631\u0627\u06cc \u0627\u062f\u0627\u0645\u0647 \u062f\u0648\u0628\u0627\u0631\u0647 \u0645\u06a9\u062b \u0631\u0627 \u0628\u0632\u0646\u06cc\u062f.\", '#f59e0b');\n pauseButton.textContent = \"\u0627\u062f\u0627\u0645\u0647\";\n } else {\n updateSnakeMessage(\"\u0628\u0627\u0632\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627\u0633\u062a!\", '#10b981');\n pauseButton.textContent = \"\u0645\u06a9\u062b\";\n lastUpdateTime = performance.now(); \n requestAnimationFrame(gameLoop);\n }\n }\n\n \/**\n * Public function to change snake direction (used by on-screen buttons).\n * @param {string} direction - 'up', 'down', 'left', or 'right'.\n *\/\n window.changeDirection = function (direction) {\n if (!isRunning) {\n \/\/ If game is not running (first move), start it\n isRunning = true;\n updateSnakeMessage(\"\u0628\u0627\u0632\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627\u0633\u062a! \u0627\u0632 \u062d\u0631\u06a9\u062a \u0644\u0630\u062a \u0628\u0628\u0631\u06cc\u062f.\", '#10b981');\n }\n if (isPaused) return;\n\n switch (direction) {\n case 'up':\n if (dy === 0) nextDirection = { dx: 0, dy: -1 };\n break;\n case 'down':\n if (dy === 0) nextDirection = { dx: 0, dy: 1 };\n break;\n case 'left':\n \/\/ Note: Direction logic is not sensitive to RTL, it's based on canvas coordinates\n if (dx === 0) nextDirection = { dx: -1, dy: 0 };\n break;\n case 'right':\n if (dx === 0) nextDirection = { dx: 1, dy: 0 };\n break;\n }\n }\n\n \/**\n * Handles keyboard input for movement and pausing.\n *\/\n document.addEventListener('keydown', (event) => {\n const key = event.key;\n \n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {\n event.preventDefault(); \n }\n\n switch (key) {\n case 'ArrowUp':\n case 'w':\n changeDirection('up');\n break;\n case 'ArrowDown':\n case 's':\n changeDirection('down');\n break;\n case 'ArrowLeft':\n case 'a':\n changeDirection('left');\n break;\n case 'ArrowRight':\n case 'd':\n changeDirection('right');\n break;\n case ' ': \/\/ Spacebar for pause\/resume\n event.preventDefault();\n togglePause();\n break;\n }\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t\t\t\t\t<\/div>\n\t\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>\u067e\u0648\u0631\u062a\u0641\u0648\u0644\u06cc\u0648 \u06a9\u06cc\u0627\u0646\u0627 | Data Science \u06a9\u06cc\u0627\u0646\u0627 Data Science | AI \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0646 \u0633\u0644\u0627\u0645\u060c \u0645\u0646 \u06a9\u06cc\u0627\u0646\u0627 \u0647\u0633\u062a\u0645\u060c \u062e\u0648\u0634\u062d\u0627\u0644\u0645 \u06a9\u0647 \u0627\u0632 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0645\u0646 \u0628\u0627\u0632\u062f\u06cc\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f. \u06f1\u06f8 \u0633\u0627\u0644 \u062f\u0627\u0631\u0645 \u0648 \u0627\u0632 \u0627\u0648\u0627\u062e\u0631 \u06f1\u06f4 \u0633\u0627\u0644\u06af\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0648\u0632\u0647 \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0631\u062f\u0645. \u0628\u0627 \u062a\u062d\u0642\u06cc\u0642 \u0648 \u0634\u0631\u06a9\u062a \u062f\u0631 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627 \u0648 \u062f\u0648\u0631\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u062a\u0648\u0627\u0646\u0633\u062a\u0645 \u0639\u0644\u0627\u0642\u0647 \u0627\u0635\u0644\u06cc \u062e\u0648\u062f\u0645 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0645. \u062f\u0631 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":12,"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":68,"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/68"}],"wp:attachment":[{"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}