`).
- - Resources: MDN Web Docs - [HTML Lists](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul), [HTML Tables](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)
-
-5. **Forms and Input**
- - Learn about forms (`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/careers/cv/script.js b/careers/cv/script.js
new file mode 100644
index 0000000..dd7ec0c
--- /dev/null
+++ b/careers/cv/script.js
@@ -0,0 +1,212 @@
+// ===============================
+// SEARCH CLICK
+// ===============================
+const search = document.querySelector(".search");
+if (search) {
+ search.addEventListener("click", () => {
+ alert("Search feature coming soon");
+ });
+}
+
+// ===============================
+// LANGUAGE TOGGLE
+// ===============================
+const langBtn = document.querySelector(".lang-toggle");
+
+if (langBtn) {
+ langBtn.addEventListener("click", () => {
+ if (langBtn.textContent === "AR") {
+ langBtn.textContent = "EN";
+ document.body.style.direction = "rtl";
+ } else {
+ langBtn.textContent = "AR";
+ document.body.style.direction = "ltr";
+ }
+ });
+}
+
+// ===============================
+// AUDIO BUTTON
+// ===============================
+const audioBtn = document.querySelector('[title="Play audio"]');
+
+if (audioBtn) {
+ audioBtn.addEventListener("click", () => {
+ alert("Audio feature will be added later");
+ });
+}
+
+// ===============================
+// FAVORITE BUTTON
+// ===============================
+const starBtn = document.querySelector(".fa-star");
+
+if (starBtn && starBtn.parentElement) {
+ starBtn.parentElement.addEventListener("click", () => {
+ starBtn.classList.toggle("active");
+
+ if (starBtn.classList.contains("active")) {
+ starBtn.style.color = "#facc15";
+ } else {
+ starBtn.style.color = "white";
+ }
+ });
+}
+
+// ===============================
+// REFRESH BUTTON
+// ===============================
+const refreshBtn = document.querySelector(".fa-sync");
+
+if (refreshBtn && refreshBtn.parentElement) {
+ refreshBtn.parentElement.addEventListener("click", () => {
+ location.reload();
+ });
+}
+
+// ===============================
+// FILE BUTTON
+// ===============================
+const fileBtn = document.querySelector(".fa-file-alt");
+
+if (fileBtn && fileBtn.parentElement) {
+ fileBtn.parentElement.addEventListener("click", () => {
+ alert("Opening full article...");
+ });
+}
+
+// ===============================
+// PLUS BUTTON
+// ===============================
+const plusBtn = document.querySelector(".fa-plus");
+
+if (plusBtn && plusBtn.parentElement) {
+ plusBtn.parentElement.addEventListener("click", () => {
+ alert("Feature coming soon");
+ });
+}
+
+// ===============================
+// CARDS NAVIGATION
+// ===============================
+const cards = document.querySelectorAll(".cards .card");
+
+if (cards.length > 0) {
+ cards.forEach((card, index) => {
+ card.addEventListener("click", () => {
+ const sections = document.querySelectorAll("main section");
+
+ if (sections[index]) {
+ sections[index].scrollIntoView({
+ behavior: "smooth"
+ });
+ }
+ });
+ });
+}
+
+// ===============================
+// SIDEBAR BUTTONS
+// ===============================
+const sidebarBtns = document.querySelectorAll(".sidebar button");
+
+if (sidebarBtns.length > 0) {
+ sidebarBtns.forEach((btn, i) => {
+ const actions = ["Audio", "Copy link", "Settings", "Help"];
+
+ btn.addEventListener("click", () => {
+ alert(actions[i]);
+ });
+ });
+}
+
+// ===============================
+// FORM (Formspree FIX)
+// ===============================
+const form = document.getElementById("contact-form");
+const status = document.getElementById("form-status");
+
+if (form) {
+ form.addEventListener("submit", async (e) => {
+ e.preventDefault();
+
+ const data = new FormData(form);
+
+ const response = await fetch(form.action, {
+ method: "POST",
+ body: data,
+ headers: { Accept: "application/json" }
+ });
+
+ if (response.ok) {
+ status.innerHTML = " Message sent successfully!";
+ form.reset();
+ } else {
+ status.innerHTML = " Something went wrong.";
+ }
+ });
+}
+
+// ===============================
+// GITHUB SLIDER
+// ===============================
+document.addEventListener("DOMContentLoaded", () => {
+
+ const username = "Atheer-Abdullah";
+ const container = document.getElementById("projectsContainer");
+
+ if (container) {
+ fetch(`https://api.github.com/users/${username}/repos`)
+ .then(res => res.json())
+ .then(data => {
+
+ data.slice(0,6).forEach(repo => {
+ const card = document.createElement("div");
+ card.className = "project-card";
+
+ card.innerHTML = `
+ ${repo.name}
+ ${repo.description || "No description"}
+ View Project
+ `;
+
+ container.appendChild(card);
+ });
+
+
+ container.innerHTML += container.innerHTML;
+
+ startSlider();
+ });
+ }
+
+ function startSlider() {
+ function animate() {
+ container.scrollLeft += 1;
+
+ if (container.scrollLeft >= container.scrollWidth / 2) {
+ container.scrollLeft = 0;
+ }
+
+ requestAnimationFrame(animate);
+ }
+
+ animate();
+ }
+
+});
+const magnetic = document.querySelector(".magnetic-text");
+
+magnetic.addEventListener("mousemove", (e) => {
+ const rect = magnetic.getBoundingClientRect();
+
+ const x = e.clientX - rect.left - rect.width / 2;
+ const y = e.clientY - rect.top - rect.height / 2;
+
+ magnetic.style.transform = `translate(${x * 0.2}px, ${y * 0.2}px) scale(1.05)`;
+});
+
+magnetic.addEventListener("mouseleave", () => {
+ magnetic.style.transform = "translate(0,0) scale(1)";
+});
\ No newline at end of file
diff --git a/careers/cv/style.css b/careers/cv/style.css
new file mode 100644
index 0000000..82fb253
--- /dev/null
+++ b/careers/cv/style.css
@@ -0,0 +1,504 @@
+/* General */
+body {
+ font-family: 'Poppins', sans-serif;
+ background-color: #0A0A0A;
+ color: #FFFFFF;
+ margin: 0;
+ padding: 0;
+ cursor: none;
+}
+body::after {
+ content: "";
+ position: fixed;
+ width: 300px;
+ height: 300px;
+ background: #198754;
+ filter: blur(120px);
+ top: 20%;
+ left: 10%;
+ opacity: 0.15;
+ z-index: -1;
+}
+
+/* Smooth scroll */
+html {
+ scroll-behavior: smooth;
+}
+
+/* Navbar */
+.navbar {
+ background-color: rgba(26, 28, 31, 0.7) !important;
+ backdrop-filter: blur(10px);
+}
+
+.navbar .nav-link {
+ color: #FFFFFF !important;
+ transition: 0.3s;
+}
+
+.navbar .nav-link:hover {
+ color: #198754 !important;
+}
+
+/* Hero */
+.hero {
+ height: 100vh;
+ background-color: #0A0A0A;
+ padding-top: 80px;
+}
+
+.hero p {
+ color: #A0A0A0;
+}
+
+.hero img {
+ border: 2px solid #2A2A2A;
+}
+
+/* Sections */
+section {
+ padding: 50px 0;
+}
+
+/* Titles */
+h2 {
+ font-weight: bold;
+ margin-bottom: 20px;
+}
+
+/* Skills Section */
+.bg-dark {
+ background-color: #111111 !important;
+}
+
+/* Education fix */
+.bg-light {
+ background-color: #F5F5F5 !important;
+ color: #000000 !important;
+}
+
+/* Cards */
+.card {
+ background-color: #1A1A1A;
+ border: 1px solid #2A2A2A;
+ color: white;
+ transition: 0.3s;
+ border-radius: 15px;
+}
+
+.card:hover {
+ transform: translateY(-5px);
+ border-color: #0F5132;
+}
+
+/* Text secondary */
+.text-secondary {
+ color: #A0A0A0 !important;
+}
+
+/* Buttons */
+.btn {
+ transition: 0.3s;
+}
+
+.btn:hover {
+ transform: scale(1.05);
+}
+
+.btn-light {
+ background-color: #0F5132;
+ color: white;
+ border-radius: 30px;
+ padding: 10px 25px;
+ border: none;
+}
+
+.btn-light:hover {
+ background-color: #198754;
+}
+
+.btn-outline-light {
+ border-radius: 30px;
+ padding: 10px 25px;
+ border: 1px solid white;
+}
+
+.btn-outline-light:hover {
+ background-color: white;
+ color: black;
+}
+
+/* Links */
+a {
+ text-decoration: none;
+ color: #198754;
+}
+
+a:hover {
+ color: #0F5132;
+}
+
+/* Fix spacing */
+.container {
+ position: relative;
+ z-index: 2;
+}
+
+/* Timeline */
+.timeline-section {
+ background-color: #0A0A0A;
+}
+
+.timeline {
+ position: relative;
+ max-width: 900px;
+ margin: auto;
+}
+
+.timeline::after {
+ content: '';
+ position: absolute;
+ width: 3px;
+ background-color: #0F5132;
+ top: 0;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.timeline-item {
+ padding: 20px 40px;
+ position: relative;
+ width: 50%;
+}
+
+.timeline-item::after {
+ content: '';
+ position: absolute;
+ width: 15px;
+ height: 15px;
+ right: -8px;
+ background-color: #0F5132;
+ border-radius: 50%;
+ top: 30px;
+ z-index: 1;
+}
+
+.left {
+ left: 0;
+}
+
+.right {
+ left: 50%;
+}
+
+.right::after {
+ left: -8px;
+}
+
+.content {
+ padding: 20px;
+ background-color: #1A1A1A;
+ border-radius: 10px;
+ border: 1px solid #2A2A2A;
+ color: white;
+}
+
+@media screen and (max-width: 768px) {
+ .timeline::after {
+ left: 20px;
+ }
+
+ .timeline-item {
+ width: 100%;
+ padding-left: 50px;
+ padding-right: 25px;
+ }
+
+ .timeline-item::after {
+ left: 10px;
+ }
+
+ .right {
+ left: 0;
+ }
+}
+
+.timeline-item:first-child .content {
+ border-color: #198754;
+}
+/* PROJECTS SLIDER */
+.projects-slider {
+ display: flex;
+ gap: 20px;
+ overflow-x: auto;
+ overflow-y: hidden;
+ padding: 20px;
+ position: relative;
+}
+
+.projects-slider::-webkit-scrollbar {
+ height: 6px;
+}
+
+.projects-slider::-webkit-scrollbar-thumb {
+ background: #198754;
+ border-radius: 10px;
+}
+
+.project-card {
+ min-width: 280px;
+ background: #1A1A1A;
+ border-radius: 16px;
+ padding: 15px;
+ flex-shrink: 0;
+ transition: 0.3s;
+ border: 1px solid #2A2A2A;
+}
+
+.project-card:hover {
+ transform: translateY(-8px);
+ border-color: #198754;
+ box-shadow: 0 0 15px rgba(25, 135, 84, 0.3);
+}
+
+.project-card img {
+ width: 100%;
+ height: 160px;
+ object-fit: cover;
+ border-radius: 10px;
+ margin-bottom: 10px;
+}
+.project-card h3 {
+ font-size: 18px;
+ color: #FFFFFF;
+}
+
+.project-card p {
+ font-size: 14px;
+ color: #A0A0A0;
+}
+
+.project-card a {
+ color: #198754;
+ font-weight: bold;
+}
+/* social links */
+.social-icon {
+ color: #198754;
+ text-decoration: none;
+ font-weight: bold;
+ transition: 0.3s;
+}
+
+.social-icon:hover {
+ color: #0F5132;
+ text-shadow: 0 0 10px #198754;
+}
+
+/* About box */
+.about-box {
+ background: #111;
+ border: 1px solid #2A2A2A;
+ padding: 30px;
+ border-radius: 15px;
+ max-width: 700px;
+}
+
+/* شكل الكود */
+.code-tag {
+ color: #198754;
+ font-family: monospace;
+}
+
+/* النص */
+.about-box p {
+ color: #ccc;
+ margin-bottom: 15px;
+}
+
+/* Service card */
+.service-card {
+ background: #111;
+ border: 1px solid #2A2A2A;
+ border-radius: 15px;
+ transition: 0.3s;
+}
+
+/* Hover */
+.service-card:hover {
+ transform: translateY(-8px);
+ border-color: #198754;
+ box-shadow: 0 0 15px rgba(25, 135, 84, 0.3);
+}
+
+/* Text */
+.service-card h4 {
+ color: white;
+}
+
+.service-card p {
+ color: #aaa;
+}
+
+/* Project card */
+.project-box {
+ background: #111;
+ border-radius: 15px;
+ overflow: hidden;
+ border: 1px solid #2A2A2A;
+ transition: 0.3s;
+}
+
+/* Hover */
+.project-box:hover {
+ transform: translateY(-10px);
+ border-color: #198754;
+ box-shadow: 0 0 20px rgba(25, 135, 84, 0.3);
+}
+
+/* Image */
+.project-box img {
+ width: 100%;
+ height: 180px;
+ object-fit: cover;
+}
+
+/* Text */
+.project-box h4 {
+ color: white;
+}
+
+.project-box p {
+ font-size: 14px;
+}
+
+/* Form */
+.contact-form input,
+.contact-form textarea {
+ width: 100%;
+ padding: 12px;
+ margin-bottom: 15px;
+ border-radius: 8px;
+ border: none;
+ outline: none;
+ background: #1A1A1A;
+ color: white;
+}
+
+/* Focus */
+.contact-form input:focus,
+.contact-form textarea:focus {
+ border: 1px solid #198754;
+}
+
+/* Button */
+.contact-form button {
+ border-radius: 30px;
+}
+
+/* Placeholder */
+.contact-form input::placeholder,
+.contact-form textarea::placeholder {
+ color: #888;
+}
+.custom-cursor {
+ width: 25px;
+ height: 25px;
+ border: 2px solid #198754;
+ border-radius: 50%;
+ position: fixed;
+ pointer-events: none;
+
+ transform: translate(-50%, -50%);
+
+ transition: transform 0.15s ease-out;
+
+ box-shadow: 0 0 20px rgba(25, 135, 84, 0.6);
+
+ z-index: 9999;
+}
+/* كل الروابط */
+a:hover {
+ text-shadow: 0 0 10px #198754;
+}
+
+/* الكروت */
+.project-box:hover,
+.service-card:hover {
+ transform: translateY(-10px) scale(1.02);
+ box-shadow: 0 0 25px rgba(25, 135, 84, 0.4);
+}
+
+/* الأزرار */
+.btn:hover {
+ transform: scale(1.07);
+}
+.education-box {
+ max-width: 600px;
+ margin: auto;
+ text-align: left;
+}
+
+.edu-item h4 {
+ font-weight: bold;
+ margin-bottom: 5px;
+}
+
+.edu-item p {
+ margin: 0;
+}
+
+.edu-item ul {
+ padding-left: 20px;
+ margin-top: 10px;
+}
+
+.edu-item ul li {
+ margin-bottom: 5px;
+}
+.education-card {
+ background: #1A1A1A;
+ border: 1px solid #2A2A2A;
+ border-radius: 15px;
+ color: white;
+ transition: 0.3s;
+}
+
+.education-card:hover {
+ transform: translateY(-5px);
+ border-color: #198754;
+}
+
+.education-card h4 {
+ margin-bottom: 10px;
+}
+
+.education-card ul {
+ padding-left: 20px;
+ margin: 0;
+}
+
+.education-card ul li {
+ margin-bottom: 5px;
+}
+.navbar-nav {
+ display: flex;
+ flex-direction: row !important;
+ gap: 20px;
+}
+.magnetic-text {
+ display: inline-block;
+ transition: transform 0.2s ease;
+ will-change: transform;
+}
+.code-style {
+ color: #ccc;
+ font-family: monospace;
+ line-height: 1.6;
+}
+
+.code-tag {
+ color: #198754;
+ font-family: monospace;
+}
\ No newline at end of file
diff --git a/css/introduction/images/Atheer-profile.jpg b/css/introduction/images/Atheer-profile.jpg
new file mode 100644
index 0000000..d719a59
Binary files /dev/null and b/css/introduction/images/Atheer-profile.jpg differ
diff --git a/css/introduction/images/career-vision.jpg b/css/introduction/images/career-vision.jpg
new file mode 100644
index 0000000..5b95d16
Binary files /dev/null and b/css/introduction/images/career-vision.jpg differ
diff --git a/css/introduction/images/tuwaiq-banner.png b/css/introduction/images/tuwaiq-banner.png
new file mode 100644
index 0000000..421c923
Binary files /dev/null and b/css/introduction/images/tuwaiq-banner.png differ
diff --git a/css/introduction/index.html b/css/introduction/index.html
new file mode 100644
index 0000000..d8f2f14
--- /dev/null
+++ b/css/introduction/index.html
@@ -0,0 +1,208 @@
+
+
+
+
+
+Atheer - Web Development Journey
+
+
+ Atheer
+
+
+
+My Learning Journey
+Web Development Bootcamp – Tuwaiq Academy
+
+
+
Hello! My name is Atheer Alharthi .
+
+
+I am currently participating in the
+Web Development with Python Bootcamp at Tuwaiq Academy .
+
+
+
+This page documents my learning journey and the skills I am developing throughout the bootcamp.
+
+
+
About the Bootcamp
+
+The bootcamp focuses on building modern web applications using Python and web technologies.
+Students learn programming fundamentals, backend development with Django, and how to build real projects.
+
+
You can learn more about the academy here:
+
+Visit Tuwaiq Academy
+
+
+
Topics I Am Learning
+
+Python programming fundamentals
+Git and GitHub version control
+Web development basics (HTML & CSS)
+Django framework
+Databases and ORM
+User authentication and permissions
+
+
+
Bootcamp Learning Path
+
+Python Fundamentals
+Functions and Data Structures
+CLI Project
+Introduction to Web Development
+Django Framework
+Django ORM and Databases
+Authentication and Authorization
+Final Capstone Project
+
+
+
Bootcamp Schedule Overview
+
+
+
+Week
+Topic
+Description
+
+
+
+1
+Python 101
+Introduction to programming concepts and Python basics.
+
+
+
+2
+Python 102
+Functions, data structures, and object-oriented programming.
+
+
+
+4
+Web Introduction
+How the internet works and introduction to HTML & CSS.
+
+
+
+5
+Django Introduction
+Building web applications using Django.
+
+
+
+7
+Django ORM
+Working with databases and models.
+
+
+
+9
+Authentication
+User login systems and permissions.
+
+
+
My Career Vision
+
+
+
+As a Tuwaiq Academy trainee, this image reflects my aspiration to grow in the world of technology.
+It represents my journey into tech and my ambition to build a meaningful career in Saudi Arabia’s rapidly growing tech industry.
+
+
+
+${repo.name}
+ ${repo.description || "No description"}
+ View Project
+ `;
+
+ const img = card.querySelector(".project-img");
+
+ const testImg = new Image();
+ testImg.src = `https://opengraph.githubassets.com/1/${username}/${repo.name}`;
+
+ testImg.onload = () => {
+ img.src = testImg.src;
+ };
+
+ container.appendChild(card);
+ });
+
+ });
+
+// AUTO SCROLL
+setInterval(() => {
+ container.scrollLeft += 1;
+
+ if (container.scrollLeft >= container.scrollWidth - container.clientWidth) {
+ container.scrollLeft = 0;
+ }
+}, 20);
\ No newline at end of file
diff --git a/css/introduction/style.css b/css/introduction/style.css
new file mode 100644
index 0000000..11843ab
--- /dev/null
+++ b/css/introduction/style.css
@@ -0,0 +1,322 @@
+/*GENERAL*/
+
+body{
+ margin:0;
+ font-family:'Inter',sans-serif;
+ background: linear-gradient(135deg,#0f0326,#1b0640,#2c0a63);
+ color:#f5f3ff;
+ padding-top:70px;
+ overflow-x:hidden;
+}
+
+/*BACKGROUND*/
+
+body::before{
+ content:"";
+ position:fixed;
+ top:50%;
+ left:10%;
+ transform:translateY(-50%);
+ width:100%;
+ height:550px;
+ background:url("images/tuwaiq-banner.png") no-repeat center/100% auto;
+ opacity:0.12;
+ pointer-events:none;
+ filter: drop-shadow(0 0 20px #8b5cf6);
+ z-index:-1;
+}
+
+/*NAVBAR*/
+
+.navbar{
+ position:fixed;
+ top:0;
+ left:0;
+ width:100%;
+ display:flex;
+ justify-content:space-between;
+ align-items:center;
+ padding:10px 16px;
+ background:rgba(15,3,38,0.7);
+ backdrop-filter:blur(12px);
+ z-index:1000;
+}
+
+.navbar h3{
+ color:#c4b5fd;
+ margin:0;
+}
+
+.nav-links{
+ display:flex;
+ gap:16px;
+ margin-right:30px;
+}
+
+.nav-links a{
+ text-decoration:none;
+ color:#c4b5fd;
+ font-size:13px;
+ transition:0.3s;
+}
+
+.nav-links a:hover{
+ color:white;
+ text-shadow:0 0 10px #8b5cf6;
+}
+
+
+/*TITLES*/
+
+
+h1{
+ text-align:center;
+ font-size:42px;
+ color:#c4b5fd;
+ margin-bottom:8px;
+ font-family:'Poppins', sans-serif;
+}
+
+h2{
+ text-align:center;
+ font-size:26px;
+ color:#8b5cf6;
+ margin-bottom:30px;
+ font-family:'Poppins', sans-serif;
+}
+
+
+/*TEXT*/
+
+
+p{
+ max-width:700px;
+ margin:0 auto 14px;
+ line-height:1.7;
+ color:#ddd6fe;
+}
+
+/*NAVIGATION*/
+
+
+ul{
+ list-style:none;
+ padding:0;
+ display:flex;
+ justify-content:center;
+ gap:20px;
+ flex-wrap:wrap;
+ max-width:700px;
+ margin:auto;
+}
+
+ul li a{
+ color:#c4b5fd;
+ text-decoration:none;
+ padding:8px 14px;
+ border-radius:8px;
+ transition:0.3s;
+}
+
+ul li a:hover{
+ color:white;
+ background:rgba(255, 255, 255, 0.2);
+ box-shadow:0 0 10px #8b5cf6;
+}
+ul li{
+ background:rgba(139,92,246,0.15);
+ padding:8px 14px;
+ border-radius:8px;
+}
+
+/*IMAGE*/
+
+img{
+ display:block;
+ margin:40px auto;
+ width:420px;
+ border-radius:12px;
+}
+
+
+/*TABLE*/
+
+
+table{
+ width:100%;
+ max-width:800px;
+ margin:30px auto;
+ border-collapse:collapse;
+}
+
+/*الخلايا*/
+
+th, td{
+ border:1px solid #3b2b6d;
+ padding:14px;
+ text-align:left;
+}
+
+/*الهيدر*/
+
+th{
+ background:#1e1248;
+ color:#c4b5fd;
+}
+
+/*صفوف الجدول*/
+
+tr{
+ background:transparent;
+}
+
+
+/*DIVIDER*/
+
+hr{
+ border:1px solid #3b2b6d;
+ margin:40px auto;
+ width:80%;
+}
+
+
+/*BUTTON*/
+
+
+button{
+ background:#6d28d9;
+ color:white;
+ padding:12px 24px;
+ border:none;
+ border-radius:6px;
+ cursor:pointer;
+}
+
+button:hover{
+ background:#8b5cf6;
+}
+
+
+/*CONTACT*/
+
+#contact{
+ width:100%;
+ max-width:1100px;
+ margin:auto;
+ padding:60px 40px;
+}
+
+#contact form{
+ width:100%;
+}
+
+/*الحقول البيضاء*/
+
+#contact input,
+#contact textarea,
+#contact select{
+ width:100%;
+ display:block;
+ padding:12px;
+ margin-top:6px;
+ margin-bottom:18px;
+ border-radius:6px;
+ border:none;
+ background:#e5e5e5;
+ color:#333;
+ box-sizing:border-box;
+}
+
+/*textarea*/
+
+#contact textarea{
+ min-height:140px;
+}
+
+/*labels*/
+
+#contact label{
+ display:block;
+ margin-bottom:6px;
+ color:#c4b5fd;
+}
+h1, h2{
+ transition: 0.3s;
+}
+
+h1:hover{
+ text-shadow: 0 0 15px #a78bfa;
+}
+
+h2:hover{
+ text-shadow: 0 0 10px #8b5cf6;
+}
+
+/*CENTER LEARNING PATH*/
+
+
+ol{
+ max-width:300px;
+ margin:0 auto;
+ text-align:left;
+}
+
+
+/*PROJECTS SLIDER*/
+
+
+.projects-slider{
+ display:flex;
+ gap:20px;
+ overflow-x:auto;
+ padding:20px 0;
+ scroll-behavior:smooth;
+}
+
+/*شكل السكرول*/
+
+.projects-slider::-webkit-scrollbar{
+ height:6px;
+}
+
+.projects-slider::-webkit-scrollbar-thumb{
+ background:#8b5cf6;
+ border-radius:10px;
+}
+
+/*الكارد*/
+
+.project-card{
+ min-width:280px;
+ background:#14073a;
+ border-radius:16px;
+ padding:20px;
+ flex-shrink:0;
+ transition:0.3s;
+}
+
+.project-card:hover{
+ transform:translateY(-10px);
+ box-shadow:0 0 20px #8b5cf6;
+}
+
+.project-card h3{
+ margin-bottom:10px;
+}
+
+.project-card p{
+ font-size:13px;
+}
+
+.project-card a{
+ color:#c4b5fd;
+ font-size:13px;
+ text-decoration:none;
+}
+.project-card img{
+ width:100%;
+ height:160px;
+ object-fit:cover;
+ border-radius:10px;
+ margin-bottom:10px;
+}
diff --git a/dashboard/index.html b/dashboard/index.html
new file mode 100644
index 0000000..ebb68a3
--- /dev/null
+++ b/dashboard/index.html
@@ -0,0 +1,189 @@
+
+
+
+Developer Dashboard
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Projects
+
12 Active Projects
+
+
+
Deployments
+
5 Running
+
+
+
+
Systems
+
8 Connected
+
+
+
+
+
+
+
+
Projects Activity
+
+
+
+
+
+
+
+
+
+
+
Active Projects
+
+
+
+
Portfolio Website
+
+
+
View Project
+
+
+
+
E-commerce API
+
+
+
View Project
+
+
+
+
Dashboard App
+
+
+
View Project
+
+
+
+
+
+
+
Connected Systems
+
+
+
+ System
+ Description
+ Type
+ Status
+
+
+
+ GitHub
+ Code hosting
+ Dev Tool
+ Connected
+
+
+
+ Vercel
+ Deployment
+ Hosting
+ Running
+
+
+
+ MongoDB
+ Database
+ DB
+ Connected
+
+
+
+ Firebase
+ Backend
+ BaaS
+ Error
+
+
+
+
+
+
+
+
+
Atheer - Web Development Journey
+
+
+
+
+My Learning Journey
+Web Development Bootcamp – Tuwaiq Academy
+
+Hello! My name is Atheer .
+
+
+I am currently participating in the
+Web Development with Python Bootcamp at Tuwaiq Academy.
+
+
+
+This page documents my learning journey and the skills I am developing.
+
+
+Navigation
+
+
+
+About the Bootcamp
+
+
+The bootcamp focuses on building modern web applications using Python and web technologies.
+Students learn programming fundamentals, backend development with Django, and how to build real projects.
+
+
+You can learn more about the academy here:
+
+Visit Tuwaiq Academy
+
+Topics I Am Learning
+
+
+Python programming fundamentals
+Git and GitHub version control
+Web development basics (HTML & CSS)
+Django framework
+Databases and ORM
+User authentication and permissions
+
+
+Bootcamp Learning Path
+
+
+Python Fundamentals
+Functions and Data Structures
+CLI Project
+Introduction to Web Development
+Django Framework
+Django ORM and Databases
+Authentication and Authorization
+Final Capstone Project
+
+
+Bootcamp Schedule Overview
+
+
+
+
+Week
+Topic
+Description
+
+
+
+1
+Python 101
+Introduction to programming concepts and Python basics.
+
+
+
+2
+Python 102
+Functions, data structures, and object-oriented programming.
+
+
+
+4
+Web Introduction
+How the internet works and introduction to HTML & CSS.
+
+
+
+5
+Django Introduction
+Building web applications using Django.
+
+
+
+7
+Django ORM
+Working with databases and models.
+
+
+
+9
+Authentication
+User login systems and permissions.
+
+
+
+
+My Career Vision
+
+
+
+As a Tuwaiq Academy trainee, this image reflects my aspiration to grow in the world of technology.
+It represents my journey into tech and my ambition to build a meaningful career in Saudi Arabia’s rapidly growing tech industry.
+
+
+
+Learning Resources
+
+
+
+ 
+
+
+ 
+
+