From 041e3ec4a35e469bd773a8019571ddad1967258c Mon Sep 17 00:00:00 2001
From: Atheer <utherr120@gmail.com>
Date: Tue, 31 Mar 2026 01:55:33 +0300
Subject: [PATCH 1/3] ai_revolution

---
 ai_revolution/index.html |  85 ++++++++++++++++++++++++++++++++
 ai_revolution/style.css  | 102 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 187 insertions(+)
 create mode 100644 ai_revolution/index.html
 create mode 100644 ai_revolution/style.css
diff --git a/ai_revolution/index.html b/ai_revolution/index.html
new file mode 100644
index 0000000..b3e89ef
--- /dev/null
+++ b/ai_revolution/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>AI Revolution</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <h1>AI Revolution</h1>
+    <p>Artificial Intelligence <b>AI</b> is a branch of computer science that creates <i>intelligent systems</i> capable of learning and making decisions.</p>
+
+    <p>For more information, visit 
+        <a href="https://www.ibm.com/topics/artificial-intelligence" target="_blank">IBM AI</a>.
+    </p>
+
+    <!-- Image -->
+    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Artificial_intelligence_brain.png" 
+         alt="AI Brain" width="300">
+
+    <!-- Lists -->
+    <h2>AI Applications</h2>
+    <ul>
+        <li>Image Recognition</li>
+        <li>Smart Assistants like Siri and Alexa</li>
+        <li>Self-driving Cars</li>
+        <li>Medical Data Analysis</li>
+    </ul>
+
+    <h2>Steps to Learn AI</h2>
+    <ol>
+        <li>Learn Programming</li>
+        <li>Study Math and Statistics</li>
+        <li>Understand Machine Learning</li>
+        <li>Apply Practical Projects</li>
+    </ol>
+
+    <!-- Table -->
+    <h2>AI Techniques Comparison</h2>
+    <table border="1">
+        <tr>
+            <th>Technique</th>
+            <th>Description</th>
+        </tr>
+        <tr>
+            <td>Machine Learning</td>
+            <td>Algorithms that allow computers to learn from data</td>
+        </tr>
+        <tr>
+            <td>Neural Networks</td>
+            <td>Systems that mimic how the human brain works</td>
+        </tr>
+        <tr>
+            <td>Natural Language Processing</td>
+            <td>Enables computers to understand human language</td>
+        </tr>
+    </table>
+
+    <!-- YouTube Video -->
+    <h2>AI Revolution Video</h2>
+    <div class="video-container">
+        <iframe src="https://www.youtube.com/embed/xCY3qE0iUfU" 
+                title="AI Revolution" frameborder="0" 
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                allowfullscreen>
+        </iframe>
+    </div>
+
+    <!-- Contact Form -->
+    <h2>Contact Us</h2>
+    <form action="#" method="post">
+        <label for="name">Name:</label>
+        <input type="text" id="name" name="name" required><br>
+
+        <label for="email">Email:</label>
+        <input type="email" id="email" name="email" required><br>
+
+        <label for="message">Message:</label><br>
+        <textarea id="message" name="message" rows="4" cols="50" required></textarea><br>
+
+        <button type="submit">Send</button>
+    </form>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/ai_revolution/style.css b/ai_revolution/style.css
new file mode 100644
index 0000000..1352292
--- /dev/null
+++ b/ai_revolution/style.css
@@ -0,0 +1,102 @@
+/* Body */
+body {
+    font-family: Arial, sans-serif;
+    margin: 20px;
+    background-color: #f0f8ff;
+    line-height: 1.6;
+}
+
+/* Headings */
+h1 {
+    color: #003366;
+    font-size: 2.5em;
+    text-align: center;
+    margin-bottom: 15px;
+}
+
+h2 {
+    color: #0055a5;
+    font-size: 1.8em;
+    margin-top: 25px;
+    margin-bottom: 10px;
+}
+
+/* Paragraphs */
+p {
+    font-size: 1.1em;
+    margin-bottom: 15px;
+}
+
+/* Lists */
+ul, ol {
+    margin-left: 30px;
+    margin-bottom: 20px;
+}
+
+/* Tables */
+table {
+    border-collapse: collapse;
+    width: 90%;
+    margin-bottom: 20px;
+}
+
+table, th, td {
+    border: 1px solid #003366;
+    padding: 10px;
+    text-align: left;
+    background-color: #f9f9f9;
+}
+
+/* Links */
+a {
+    color: #0055a5;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+/* Form Inputs */
+input, textarea {
+    padding: 8px;
+    margin-top: 5px;
+    margin-bottom: 10px;
+    width: 100%;
+    max-width: 400px;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+/* Buttons */
+button {
+    background-color: #003366;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+button:hover {
+    background-color: #0055a5;
+}
+
+/* YouTube Video Responsive */
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 ratio */
+    height: 0;
+    overflow: hidden;
+    max-width: 100%;
+    margin-bottom: 20px;
+}
+
+.video-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
\ No newline at end of file

From 49c6ae8e5cd16e5501d1a413ccdfd1612f4f5234 Mon Sep 17 00:00:00 2001
From: Atheer <utherr120@gmail.com>
Date: Tue, 31 Mar 2026 12:38:58 +0300
Subject: [PATCH 2/3] Add Advanced AI Revolution Article with Glassmorphism
 design

---
 ai/article/indix.html   |  96 +++++++++++++++++++
 ai/article/style.css    | 207 ++++++++++++++++++++++++++++++++++++++++
 ai_revolution/style.css |   8 +-
 ai_revolution_article   |   0
 indix.html              |  58 +++++++++++
 style.css               | 107 +++++++++++++++++++++
 6 files changed, 475 insertions(+), 1 deletion(-)
 create mode 100644 ai/article/indix.html
 create mode 100644 ai/article/style.css
 create mode 100644 ai_revolution_article
 create mode 100644 indix.html
 create mode 100644 style.css

diff --git a/ai/article/indix.html b/ai/article/indix.html
new file mode 100644
index 0000000..c99c2ea
--- /dev/null
+++ b/ai/article/indix.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Revolution | Advanced Article</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&display=swap" rel="stylesheet">
+</head>
+<body>
+
+    <header>
+        <nav class="navbar">
+            <div class="logo">AI<span>.Future</span></div>
+            <ul class="nav-links">
+                <li><a href="#home">Home</a></li>
+                <li><a href="#article">Article</a></li>
+                <li><a href="#tech">Technologies</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main class="container">
+        <article id="article" class="main-content">
+            <header class="article-header fade-in">
+                <h1>The AI Revolution: Beyond Limits</h1>
+                <p class="meta-data">Published: March 31, 2026 | By: Atheer Al-Shahrani</p>
+            </header>
+
+            <section class="intro">
+                <h2>The New Era</h2>
+                <p>Artificial Intelligence is transforming how we live, work, and connect. From healthcare to space exploration, AI is the new electricty of the 21st century.</p>
+                <img src="https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&w=1000&q=80" alt="AI Neural Network" class="featured-image">
+            </section>
+
+            <section id="tech">
+                <h2>AI Core Technologies</h2>
+                <div class="table-container">
+                    <table class="styled-table">
+                        <thead>
+                            <tr>
+                                <th>Category</th>
+                                <th>Technology</th>
+                                <th>Impact Level</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Language</td>
+                                <td>NLP (Natural Language Processing)</td>
+                                <td>High</td>
+                            </tr>
+                            <tr>
+                                <td>Vision</td>
+                                <td>Computer Vision</td>
+                                <td>Extreme</td>
+                            </tr>
+                            <tr>
+                                <td>Prediction</td>
+                                <td>Machine Learning</td>
+                                <td>Critical</td>
+                            </tr>
+                            <tr>
+                                <td>Robotics</td>
+                                <td>Neural Networks</td>
+                                <td>Revolutionary</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+        </article>
+
+        <section id="contact" class="contact-section">
+            <h2>Stay Updated</h2>
+            <form class="advanced-form">
+                <div class="form-group">
+                    <label for="user-name">Full Name</label>
+                    <input type="text" id="user-name" placeholder="Enter your name" required>
+                </div>
+                <div class="form-group">
+                    <label for="user-email">Email Address</label>
+                    <input type="email" id="user-email" placeholder="email@example.com" required>
+                </div>
+                <button type="submit" class="btn-submit">Subscribe Now</button>
+            </form>
+        </section>
+    </main>
+
+    <footer class="main-footer">
+        <p>&copy; 2026 AI Revolution Project | Designed by Atheer</p>
+    </footer>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/ai/article/style.css b/ai/article/style.css
new file mode 100644
index 0000000..e58f32b
--- /dev/null
+++ b/ai/article/style.css
@@ -0,0 +1,207 @@
+/* 1. Global Setup & Keyframes */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --primary-color: #00f2ff; /* Cyan مضيء */
+    --secondary-color: #8a2be2; /* بنفجسي تقني */
+    --text-color: #f8fafc;
+    --text-muted: #94a3b8;
+    --glass-bg: rgba(255, 255, 255, 0.05);
+    --glass-border: rgba(255, 255, 255, 0.1);
+}
+
+/* حركة الخلفية المتحركة */
+@keyframes gradientBG {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    /* خلفية متدرجة متحركة ساحرة */
+    background: linear-gradient(-45deg, #0f172a, #1e1b4b, #2e1065, #0f172a);
+    background-size: 400% 400%;
+    animation: gradientBG 15s ease infinite;
+    color: var(--text-color);
+    line-height: 1.8;
+    font-size: 15px;
+}
+
+/* 2. Navigation (Glassmorphism Effect) */
+header {
+    background: rgba(15, 23, 42, 0.7);
+    backdrop-filter: blur(15px); /* تأثير ضبابي زجاجي */
+    -webkit-backdrop-filter: blur(15px);
+    padding: 12px 0;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    border-bottom: 1px solid var(--glass-border);
+}
+
+.navbar {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    max-width: 1000px;
+    margin: auto;
+}
+
+.logo { font-size: 1.4rem; font-weight: 700; color: white; text-transform: uppercase; letter-spacing: 2px; }
+.logo span { color: var(--primary-color); }
+
+.nav-links { display: flex; list-style: none; gap: 20px; }
+.nav-links a { 
+    color: var(--text-muted); 
+    text-decoration: none; 
+    font-size: 0.9rem; 
+    transition: 0.4s ease;
+    position: relative;
+}
+.nav-links a:hover { color: white; }
+.nav-links a::after {
+    content: '';
+    position: absolute;
+    width: 0; height: 2px;
+    bottom: -5px; left: 0;
+    background: var(--primary-color);
+    transition: 0.4s;
+}
+.nav-links a:hover::after { width: 100%; }
+
+/* 3. Container & Main Article */
+.container {
+    width: 90%;
+    max-width: 750px;
+    margin: 40px auto;
+}
+
+.main-article {
+    background: var(--glass-bg);
+    padding: 30px;
+    border-radius: 20px;
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+}
+
+.article-header {
+    text-align: center;
+    margin-bottom: 40px;
+    position: relative;
+}
+
+/* العنوان الرئيسي مع تأثير توهج */
+h1 {
+    font-size: 2.2rem;
+    color: white;
+    margin-bottom: 10px;
+    text-shadow: 0 0 15px rgba(0, 242, 255, 0.4);
+}
+
+.meta-data { color: var(--text-muted); font-size: 0.85rem; }
+
+/* الصورة الجديدة: صغيرة، دائرية، وأنيقة كشعار للمقال */
+.featured-image {
+    width: 100px; /* حجم صغير جداً ومتناسق */
+    height: 100px;
+    border-radius: 50%; /* دائرية تماماً */
+    object-fit: cover;
+    display: block;
+    margin: 20px auto;
+    border: 4px solid var(--glass-border);
+    box-shadow: 0 0 20px rgba(138, 43, 226, 0.5); /* توهج بنفسجي خلف الصورة */
+}
+
+/* العناوين الفرعية */
+h2 {
+    font-size: 1.4rem;
+    color: var(--primary-color);
+    margin: 30px 0 15px 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+h2::before {
+    content: '';
+    width: 6px; height: 20px;
+    background: var(--secondary-color);
+    border-radius: 3px;
+}
+
+p { margin-bottom: 20px; color: #cbd5e1; }
+
+/* 4. Table Styling (Advanced & Compact) */
+.styled-table {
+    width: 100%;
+    font-size: 0.9rem;
+    border-collapse: collapse;
+    background: rgba(0,0,0,0.2);
+    border-radius: 10px;
+    overflow: hidden;
+    margin: 30px 0;
+}
+
+.styled-table th, .styled-table td { padding: 15px; text-align: left; }
+.styled-table thead { background: rgba(138, 43, 226, 0.2); color: var(--primary-color); }
+.styled-table tbody tr { border-bottom: 1px solid var(--glass-border); transition: 0.3s; }
+.styled-table tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.01); }
+.styled-table tbody tr:hover { background-color: rgba(0, 242, 255, 0.03); transform: scale(1.01); }
+
+/* 5. Animations & Form */
+@keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(30px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.fade-in { animation: fadeInUp 1s ease-out; }
+
+/* فورم اشتراك احترافي */
+.contact-section {
+    background: var(--glass-bg);
+    padding: 30px;
+    border-radius: 20px;
+    max-width: 500px;
+    margin: 50px auto;
+    border: 1px solid var(--glass-border);
+    text-align: center;
+}
+
+input {
+    width: 100%;
+    padding: 12px;
+    background: rgba(0,0,0,0.3);
+    border: 1px solid var(--glass-border);
+    color: white;
+    border-radius: 8px;
+    margin-bottom: 15px;
+    transition: 0.3s;
+}
+input:focus { outline: none; border-color: var(--primary-color); }
+
+.btn-submit {
+    width: 100%;
+    padding: 14px;
+    background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
+    color: white;
+    font-weight: 700;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    transition: 0.4s;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+.btn-submit:hover { filter: brightness(1.2); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 242, 255, 0.3); }
+
+@media (max-width: 600px) {
+    h1 { font-size: 1.8rem; }
+    .navbar { flex-direction: column; gap: 10px; }
+    .main-article { padding: 20px; }
+}
+
+.main-footer { text-align: center; padding: 30px; color: #64748b; font-size: 0.8rem; }
\ No newline at end of file
diff --git a/ai_revolution/style.css b/ai_revolution/style.css
index 1352292..f92019d 100644
--- a/ai_revolution/style.css
+++ b/ai_revolution/style.css
@@ -20,6 +20,12 @@ h2 {
     margin-top: 25px;
     margin-bottom: 10px;
 }
+table, .video-container, form {
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    background-color: white;
+    padding: 20px;
+    border-radius: 10px;
+}
 
 /* Paragraphs */
 p {
@@ -89,7 +95,7 @@ button:hover {
     padding-bottom: 56.25%; /* 16:9 ratio */
     height: 0;
     overflow: hidden;
-    max-width: 100%;
+    max-width: 80%;
     margin-bottom: 20px;
 }
 
diff --git a/ai_revolution_article b/ai_revolution_article
new file mode 100644
index 0000000..e69de29
diff --git a/indix.html b/indix.html
new file mode 100644
index 0000000..76029aa
--- /dev/null
+++ b/indix.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AI Revolution</title>
+
+<link rel="stylesheet" href="style.css">
+
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap" rel="stylesheet">
+
+</head>
+<body>
+
+<!-- Background Animation -->
+<div class="background"></div>
+
+<header class="hero">
+<h1>AI Revolution</h1>
+<p>The Future Powered by Artificial Intelligence</p>
+</header>
+
+<main class="container">
+
+<section class="card">
+<h2>What is Artificial Intelligence?</h2>
+<p>
+Artificial Intelligence is transforming industries, education,
+healthcare and technology. AI allows machines to learn,
+analyze data, and make decisions similar to humans.
+</p>
+
+<img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?auto=format&fit=crop&w=900&q=60">
+</section>
+
+<section class="card">
+<h2>AI in Daily Life</h2>
+<p>
+AI is used in smart assistants, recommendations,
+self-driving cars, and medical diagnosis systems.
+</p>
+
+<img src="https://images.unsplash.com/photo-1555255707-c07966088b7b?auto=format&fit=crop&w=900&q=60">
+</section>
+
+<section class="card video-card">
+<h2>Watch AI Revolution</h2>
+
+<iframe
+src="https://www.youtube.com/embed/2ePf9rue1Ao"
+title="AI Revolution"
+allowfullscreen>
+</iframe>
+
+</section>
+</iframe>
+
+</section>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..eb06af0
--- /dev/null
+++ b/style.css
@@ -0,0 +1,107 @@
+*{
+margin:0;
+padding:0;
+box-sizing:border-box;
+font-family:Poppins;
+}
+
+body{
+background:#020617;
+color:white;
+overflow-x:hidden;
+}
+
+/* Animated Background */
+
+.background{
+position:fixed;
+width:100%;
+height:100%;
+background:radial-gradient(circle at 20% 30%, #00e5ff33, transparent 40%),
+radial-gradient(circle at 80% 70%, #00e5ff22, transparent 40%),
+#020617;
+animation:moveBg 10s infinite alternate;
+z-index:-1;
+}
+
+@keyframes moveBg{
+0%{background-position:0 0, 100% 100%;}
+100%{background-position:100% 50%, 0 50%;}
+}
+
+/* Hero */
+
+.hero{
+text-align:center;
+padding:70px 20px;
+}
+
+.hero h1{
+font-size:50px;
+color:#00e5ff;
+margin-bottom:10px;
+}
+
+.hero p{
+color:#94a3b8;
+font-size:18px;
+}
+
+/* Container */
+.container {
+    display: flex;
+    flex-wrap: wrap; 
+    gap: 20px;
+    justify-content: center;
+}
+
+.card {
+    flex: 1 1 400px; /* يجعل الكروت تتوزع بجانب بعضها إذا سمحت المساحة */
+}
+
+/* Cards */
+
+.card{
+background:#1e293b;
+padding:25px;
+border-radius:18px;
+margin-bottom:30px;
+box-shadow:0 10px 30px rgba(0,0,0,0.5);
+transition:0.4s;
+}
+
+.card:hover{
+transform:translateY(-8px) scale(1.01);
+}
+
+/* Images */
+
+.card img{
+width:100%;
+max-width:480px;
+height:260px;
+object-fit:cover;
+display:block;
+margin:15px auto;
+border-radius:12px;
+}
+
+/* Video */
+
+.video-card iframe{
+width:100%;
+max-width:520px;
+height:300px;
+display:block;
+margin:auto;
+border-radius:12px;
+}
+
+/* Footer */
+
+footer{
+text-align:center;
+padding:30px;
+color:#94a3b8;
+margin-top:40px;
+}
\ No newline at end of file

From aec0f41f9344c4c47b083bfec154a7cfb48992c0 Mon Sep 17 00:00:00 2001
From: Atheer <utherr120@gmail.com>
Date: Tue, 31 Mar 2026 13:57:33 +0300
Subject: [PATCH 3/3] cv Atheer Alshahrani

---
 cv/index.html | 87 +++++++++++++++++++++++++++++++++++++++++++++++++
 cv/style.css  | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 176 insertions(+)
 create mode 100644 cv/index.html
 create mode 100644 cv/style.css

diff --git a/cv/index.html b/cv/index.html
new file mode 100644
index 0000000..d114c1c
--- /dev/null
+++ b/cv/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Atheer Al-Shahrani | AI Portfolio</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <div id="particles-js"></div>
+
+    <div class="main-wrapper">
+        <section class="container min-vh-100 d-flex flex-column justify-content-center">
+            <div class="row align-items-center">
+                <div class="col-lg-7 text-center text-lg-start">
+                    <div class="brand-box mb-3 d-flex align-items-center justify-content-center justify-content-lg-start">
+                        <div class="sky-logo-A me-3">A</div>
+                        <h2 class="text-sky-light mb-0">AI SPECIALIST</h2>
+                    </div>
+                    <h1 class="display-2 fw-bold text-white">I'M <span class="text-sky-neon">ATHEER</span></h1>
+                    <p class="lead text-white mb-2">AI Student at <span class="text-sky-neon">Bisha University</span></p>
+                    <p class="text-white-50 mb-4">Bridging the gap between <span id="typed" class="text-sky-neon fw-bold"></span></p>
+                    
+                    <div class="d-flex gap-3 justify-content-center justify-content-lg-start mb-5">
+                        <a href="https://linkedin.com/in/atheer-alshahrani-" target="_blank" class="cyber-icon"><i class="fab fa-linkedin-in"></i></a>
+                        <a href="https://github.com/atheer8252" target="_blank" class="cyber-icon"><i class="fab fa-github"></i></a>
+                        <a href="https://drive.google.com/uc?export=download&id=1wnO62zF-YtF9jP33DJWvaMKCB3oWD2mV" 
+   class="btn-download" target="_blank">
+   <i class="fas fa-download"></i> Download CV
+</a>
+                    </div>
+                </div>
+
+                <div class="col-lg-5 d-flex justify-content-center mt-5 mt-lg-0">
+                    <div class="ai-image-container">
+                        <img src="https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&q=80&w=1000" alt="Artificial Intelligence" class="img-fluid ai-hero-img shadow-lg">
+                        <div class="ai-glow-effect"></div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="container py-5">
+            <div class="glass-card">
+                <h2 class="text-sky-neon mb-3"><i class="fas fa-user-grad me-2"></i> About Me</h2>
+                <p class="text-white fs-5">
+                    An Artificial Intelligence student at <strong>Bisha University</strong>. I specialize in building intelligent algorithms and creating modern, responsive web interfaces that integrate AI functionalities.
+                </p>
+            </div>
+        </section>
+
+        <section class="container py-5">
+            <h2 class="text-sky-neon mb-4 fw-bold"><i class="fas fa-project-diagram me-2"></i> Featured Projects</h2>
+            <div class="row g-4">
+                <div class="col-md-6">
+                    <div class="glass-card h-100">
+                        <h4 class="text-sky-neon fw-bold">University Chatbot</h4>
+                        <p class="text-white">An NLP-based assistant for Bisha University students to streamline administrative inquiries.</p>
+                        <span class="badge badge-custom">Python</span> <span class="badge badge-custom">NLP</span>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="glass-card h-100">
+                        <h4 class="text-sky-neon fw-bold">Tuwaiq SkillTrack</h4>
+                        <p class="text-white">A skill-monitoring web app designed to keep students focused and track their daily progress.</p>
+                        <span class="badge badge-custom">HTML/CSS</span> <span class="badge badge-custom">JS</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="container py-5 mb-5">
+            <h2 class="text-sky-neon mb-4 fw-bold"><i class="fas fa-bolt me-2"></i> Core Skills</h2>
+            <div class="row g-3">
+                <div class="col-6 col-md-3"><div class="skill-tag">Machine Learning</div></div>
+                <div class="col-6 col-md-3"><div class="skill-tag">Web Development</div></div>
+                <div class="col-6 col-md-3"><div class="skill-tag">Python Coding</div></div>
+                <div class="col-6 col-md-3"><div class="skill-tag">Neural Networks</div></div>
+            </div>
+        </section>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
+    <script src="
\ No newline at end of file
diff --git a/cv/style.css b/cv/style.css
new file mode 100644
index 0000000..5fd6a31
--- /dev/null
+++ b/cv/style.css
@@ -0,0 +1,89 @@
+:root {
+    --sky-neon: #00d2ff;
+    --dark-bg: #050a18;
+}
+
+body {
+    margin: 0;
+    background-color: var(--dark-bg);
+    font-family: 'Inter', sans-serif;
+    color: white;
+    overflow-x: hidden;
+}
+
+#particles-js {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+}
+
+.main-wrapper {
+    position: relative;
+    z-index: 1;
+}
+
+/* تصميم صورة الذكاء الاصطناعي الجديدة */
+.ai-image-container {
+    position: relative;
+    width: 100%;
+    max-width: 450px;
+}
+
+.ai-hero-img {
+    border-radius: 20px;
+    border: 2px solid var(--sky-neon);
+    box-shadow: 0 0 30px rgba(0, 210, 255, 0.4);
+    animation: float 4s ease-in-out infinite;
+}
+
+.ai-glow-effect {
+    position: absolute;
+    top: -10px; left: -10px; right: -10px; bottom: -10px;
+    background: radial-gradient(circle, var(--sky-neon), transparent 70%);
+    opacity: 0.15;
+    z-index: -1;
+    filter: blur(20px);
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-15px); }
+}
+
+/* بقية التنسيقات */
+.text-sky-neon { color: var(--sky-neon) !important; text-shadow: 0 0 10px var(--sky-neon); }
+.text-sky-light { color: #87ceeb; letter-spacing: 3px; font-size: 0.8rem; }
+
+.sky-logo-A {
+    width: 45px; height: 45px;
+    display: flex; align-items: center; justify-content: center;
+    border: 2px solid var(--sky-neon);
+    color: var(--sky-neon);
+    font-weight: bold; border-radius: 10px;
+    box-shadow: 0 0 15px var(--sky-neon);
+}
+
+.glass-card {
+    background: rgba(255, 255, 255, 0.07);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    padding: 25px; border-radius: 15px;
+    transition: 0.3s;
+}
+
+.skill-tag {
+    background: rgba(0, 210, 255, 0.1);
+    border: 1px solid var(--sky-neon);
+    padding: 12px; border-radius: 8px;
+    color: var(--sky-neon); text-align: center;
+}
+
+.cyber-icon {
+    width: 45px; height: 45px;
+    border: 1px solid var(--sky-neon);
+    color: var(--sky-neon); border-radius: 50%;
+    display: inline-flex; align-items: center; justify-content: center;
+    text-decoration: none; transition: 0.3s;
+}
+.cyber-icon:hover { background: var(--sky-neon); color: #000; box-shadow: 0 0 20px var(--sky-neon); }

Technique	Description
Machine Learning	Algorithms that allow computers to learn from data
Neural Networks	Systems that mimic how the human brain works
Natural Language Processing	Enables computers to understand human language
Category	Technology	Impact Level
Language	NLP (Natural Language Processing)	High
Vision	Computer Vision	Extreme
Prediction	Machine Learning	Critical
Robotics	Neural Networks	Revolutionary