T-Python-16-Feb-26 · MansourM134 · Mar 22, 2026 · Mar 22, 2026 · Mar 26, 2026 · Mar 26, 2026
diff --git a/article/ai/WhatIsAi.png b/article/ai/WhatIsAi.png
diff --git a/article/ai/anthropic.svg b/article/ai/anthropic.svg
diff --git a/article/ai/can AI take my job.jpg b/article/ai/can AI take my job.jpg
diff --git a/article/ai/index.html b/article/ai/index.html
diff --git a/article/ai/style.css b/article/ai/style.css
@@ -0,0 +1,75 @@
+body {
+    font-family: serif;
+    background-color: #fcfcfc;
+}
+
+.navbar {
+    background-color: white;
+    border-bottom: 1px solid black;
+}
+
+.navbar-brand {
+    font-weight: bold;
+    font-size: small;
+    letter-spacing: 1px;
+}
+
+.nav-link {
+    color: #333;
+    margin-right: 15px;
+    font-weight: 500;
+}
+
+.nav-link:hover {
+    color: #0d6efd;
+}
+
+.search-box {
+    max-width: 200px;
+}
+
+.search-box input {
+    border-radius: 20px;
+    padding-left: 15px;
+}
+
+.article-header {
+    margin-top: 40px;
+}
+
+.article-title {
+    font-size: 2.55rem;
+    font-weight: bold;
+}
+
+.article-note {
+    color: gray;
+    margin-top: 20px;
+}
+
+ .article-img {
+    display: block;
+    width: 80%;
+    border-radius: 10px;
+    margin: 20px auto;
+ }
+ @keyframes fadeIn {
+    from { opacity: 0;}
+    to { opacity: 1;}
+ }
+
+ .article-content {
+    font-size: 1rem;
+    line-height: 1.8;
+    margin-bottom: 20px;
+    animation: fadeIn 2s ease-in;
+ }
+
+ .article-content h3 {
+    margin-top: 40px;
+    margin-bottom: 20px;
+ }
+
+ .video-container {
+    margin: 40px 0;
+ }
diff --git a/careers/cv/cv.html b/careers/cv/cv.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Portfolio</title>
+
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="main container-fluid d-flex align-items-center">
+        <div class="corner top-left"></div>
+        <div class="corner bottom-right"></div>
+
+        <div class="container">
+            <div class="row align-item-center">
+
+                <!--left side-->
+                <div class="col-lg-7 text-light">
+                    <h1 class="display-3 fw-light">Welcome.</h1>
+
+                    <div class="intro mt-4 ps-3">
+                        <p> 
+                            My name is Mansour Masoud, I'm An enthusiastic Computer Science graduate with hands-on 
+                            experience in full-stack web development, IT support, and hardware maintenance. 
+                            Skilled in designing and maintaining complex systems and troubleshooting electronic 
+                            and network issues.
+                        </p>
+
+                        <p> 
+                            I'm Eager to apply a broad engineering and technical skill set to system design, 
+                            automation, and process optimization.
+                        </p>
+                    </div>
+                </div>
+
+                <!--right side-->
+                <div class="col-lg-5 text-light mt-5 mt-lg-0">
+                    <div class="info-box mb-5">
+
+                        <h5 class="mb-4">Projects</h5>
+
+                        <div class="projects">
+                            <a href="https://github.com/MansourM134/DSAR">DSAR</a>
+                            <a href="https://github.com/MansourM134/UNIT-PROJECT-1">Adventure Quiz Game</a>
+                        </div>
+
+                    </div>
+
+                    <div class="info-box timeline">
+                        <h5 class="mb-5">Experience</h5>
+
+                        <div class="timeline-item">
+                            <span class="timeline-date">April 2025 - August 2025</span>
+                            <h6>Full-stack Developer</h6>
+                            <p>Worked on platform that automates requests and approvels.</p>
+                        </div>
+
+                        <div class="timeline-item">
+                            <span class="timeline-date">January 2025 - April 2025</span>
+                            <h6>IT Specialist</h6>
+                            <p>Provided IT support, troubleshooting hardware, software, and network issues.</p>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+
+            <!--icons-->
+        <div class="icons">
+            <a href="mailto:mansourmasood@gmail.com" target="_blank" class="icon"> <i class="bi bi-envelope"></i></a>
+            <a href="https://github.com/MansourM134" target="_blank" class="icon"><i class="bi bi-github"></i></a>
+        </div>
+
+    </div>
+
+
+
+</body>
+</html>
diff --git a/careers/cv/style.css b/careers/cv/style.css
@@ -0,0 +1,138 @@
+body {
+    margin: 0;
+    font-family: 'inter', sans-serif;
+    background: #0f1117;
+}
+
+.main {
+    min-height: 100vh;
+    position: relative;
+    padding: 60px;
+}
+
+.corner {
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    border: 6px solid #c9b46b;
+}
+
+.top-left {
+    top: 20px;
+    left: 20px;
+    border-right: none;
+    border-bottom: none;
+}
+
+.bottom-right {
+    bottom: 20px;
+    right: 20px;
+    border-left: none;
+    border-top: none;
+}
+
+.intro{
+    border-left: 3px solid #c9b46b;
+    color: #bcbcbc;
+    max-width: 500px;
+}
+
+.intro p {
+    font-size: 14px;
+    line-height: 1.6;
+}
+
+.info-box {
+    padding-left: 15px;
+    border-left: 3px solid #c9b46b;
+}
+
+.projects {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.projects a {
+    text-decoration: none;
+    font-size: 13px;
+    color: #bcbcbc;
+    border: 1px solid #2a2d36;
+    padding: 6px 12px;
+    border-radius: 20px;
+    transition: all 0.25s ease;
+}
+
+.projects a:hover {
+    color: #0f1117;
+    background: #c9b46b;
+    border-color: #c9b46b;
+    transform: translateX(-2px);
+}
+
+.timeline {
+    position: relative;
+}
+
+.timeline::before {
+    content: "";
+    position: absolute;
+    left: -3px;
+    top: 0;
+    width: 3px;
+    height: 100%;
+    background: #c9b46b;
+}
+
+.timeline-item  {
+    position: relative;
+    padding-left: 20px;
+    margin-bottom: 25px;
+}
+
+.timeline-item::before {
+    content: "";
+    position: absolute;
+    left: -9px;
+    top: 5px;
+    width: 10px;
+    height: 10px;
+    background: #c9b46b;
+    border-radius: 50%;
+}
+
+.timeline-date {
+    font-size: 12px;
+    color: #888;
+    display: block;
+    margin-bottom: 5px;
+}
+
+.timeline-item h6 {
+    margin: 0;
+    font-weight: 500;
+}
+
+.timeline-item p {
+    font-size: 13px;
+    color: #bcbcbc;
+    margin: 5px 0 0;
+}
+
+.icons {
+    position: absolute;
+    top: 20px;
+    right: 30px;
+}
+ .icons .icon {
+    color: #888;
+    margin-left: 18px;
+    font-size: 18px;
+    transition: all 0.25s ease;
+}
+
+.icons .icon:hover {
+    color: #c9b46b;
+    transform: translateY(-2px);
+}
+
diff --git a/css/introduction/AlUla.jpg b/css/introduction/AlUla.jpg
diff --git a/css/introduction/Mecca1.jpg b/css/introduction/Mecca1.jpg
diff --git a/css/introduction/Riyadh-The-Dead-Center-of-the-Saudi-Arabia-Kingdom1[1].jpg b/css/introduction/Riyadh-The-Dead-Center-of-the-Saudi-Arabia-Kingdom1[1].jpg
diff --git a/css/introduction/Riyadh.jpg b/css/introduction/Riyadh.jpg
diff --git a/css/introduction/destinations.html b/css/introduction/destinations.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Destinations</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <div class="navbar">
+
+                <div><b><a href="travel_guide.html">Travel guide</a></b></div>
+                <div>
+                    <a href="destinations.html">Destinations</a>
+                    <a href="travel_tips.html">Tips</a>
+                    <a href="feedback.html">Contact us</a>
+
+                </div>
+    </div>
+
+    <div class="section">
+        <h1 align="center">Top Destination in Saudi Arabia</h1>
+
+        <div class="cards">
+
+            <div class="card">
+                <h3>Riyadh</h3>
+                <p>The capital city, known for modern architecture, and business centers.</p>
+                <img src="Riyadh.jpg" alt="" width="100%">
+            </div>
+
+            <div class="card">
+                <h3>Jeddah</h3>
+                <p>A coastal city on the Red Sea, famous for beaches and historic districts.</p>
+                <img src="jeddah1.jpeg" alt="" width="100%"> 
+            </div>
+
+            <div class="card">
+                <h3>Mecca</h3>
+                <p>The holiest city in Islam, visited by millions of pilgrims each year.</p>
+                <img src="Mecca1.jpg" alt="" width="100%">
+            </div>
+
+            <div class="card">
+                <h3>Al-Ula</h3>
+                <p>A historic desert region with ancient rock formations and heritage sites</p>
+                <img src="AlUla.jpg" alt="" width="100%">
+            </div>
+
+
+
+
+        </div>
+    </div>
+
+</body>
+</html>