diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..12ab3f9 Binary files /dev/null and b/.DS_Store differ diff --git a/html/introduction/article/ai/index.html b/html/introduction/article/ai/index.html new file mode 100644 index 0000000..e7c045c --- /dev/null +++ b/html/introduction/article/ai/index.html @@ -0,0 +1,102 @@ + + + + + + AI Revolution + + + + +
+
+

AI Revolution

+

How artificial intelligence is transforming our world

+
+
+ + + +
+
+

Introduction

+

+ Artificial Intelligence, or AI, is one of the most important technological + developments in the modern world. It allows machines and computer systems + to perform tasks that usually require human intelligence, such as learning, + decision-making, understanding language, and recognizing patterns. +

+

+ Today, AI is no longer a distant idea from science fiction. It is part of + our daily lives, from search engines and smart assistants to recommendation + systems, chatbots, and image generation tools. +

+
+ +
+

Applications of AI

+

AI is used in many important fields, such as:

+ + Artificial Intelligence concept +
+ +
+

The Impact of AI

+

+ AI is changing how people work, learn, communicate, and solve problems. + It increases speed, improves accuracy, and makes many tasks more efficient. + In companies, AI can support automation and data analysis. In everyday life, + it can make technology more helpful and responsive. +

+

+ At the same time, AI also raises important questions about privacy, + ethics, fairness, and the future of jobs. This is why the AI revolution + is not only technical, but also social and human. +

+
+ +
+

The Future of AI

+

+ The future of AI is full of opportunity. AI may continue to improve healthcare, + education, research, and accessibility. It can help humans discover new ideas, + save time, and solve difficult problems. +

+

+ However, the future of AI depends on responsible development. People, companies, + and governments must work together to ensure that AI is used in safe, fair, + and meaningful ways. +

+
+ +
+

Video

+

This short video gives a visual introduction to the idea of artificial intelligence.

+
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/html/introduction/article/ai/style.css b/html/introduction/article/ai/style.css new file mode 100644 index 0000000..0811f9b --- /dev/null +++ b/html/introduction/article/ai/style.css @@ -0,0 +1,124 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + background: #0f172a; + color: #e5e7eb; + line-height: 1.7; +} + +.hero { + background: url("https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&w=1400&q=80") center/cover no-repeat; + height: 50vh; + position: relative; +} + +.overlay { + background: rgba(15, 23, 42, 0.7); + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: #fff; + text-align: center; + padding: 20px; +} + +.overlay h1 { + font-size: 52px; + margin-bottom: 10px; +} + +.overlay p { + font-size: 18px; +} + +.navbar { + display: flex; + justify-content: center; + gap: 20px; + background: #1e293b; + padding: 16px; + position: sticky; + top: 0; +} + +.navbar a { + color: #f8fafc; + text-decoration: none; + transition: 0.3s; +} + +.navbar a:hover { + color: #c084fc; +} + +.container { + width: 90%; + max-width: 1000px; + margin: 30px auto; +} + +.box { + background: #1e293b; + padding: 24px; + border-radius: 16px; + margin-bottom: 22px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); +} + +.box h2 { + color: #c4b5fd; + margin-bottom: 14px; +} + +.box ul { + padding-left: 22px; + margin-top: 10px; +} + +.box img { + width: 100%; + border-radius: 14px; + margin-top: 16px; +} + +.video-wrapper { + position: relative; + width: 100%; + padding-top: 56.25%; + margin-top: 15px; +} + +.video-wrapper iframe { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + border: none; + border-radius: 14px; +} + +footer { + text-align: center; + padding: 20px; + background: #020617; + color: #cbd5e1; + margin-top: 30px; +} + +@media (max-width: 768px) { + .overlay h1 { + font-size: 34px; + } + + .navbar { + flex-wrap: wrap; + } +} \ No newline at end of file diff --git a/html/introduction/careers/cv/index.html b/html/introduction/careers/cv/index.html new file mode 100644 index 0000000..7473402 --- /dev/null +++ b/html/introduction/careers/cv/index.html @@ -0,0 +1,382 @@ + + + + + + Razan Mohammed | Portfolio + + + + +
+ +

Loading Portfolio...

+
+ + +
+
+
+
+
+ + + + +
+ +
+
+
+

Computer Science & Engineering Graduate

+ +

+ Razan Mohammed + Creative web experiences with a modern professional edge. +

+ +

+ A Computer Science and Engineering graduate based in Riyadh, passionate about + building digital experiences that combine creativity, clarity, structure, + and strong visual identity. +

+ +
+ Explore Projects + Contact Info +
+ +
+
+

0

+

Training Experiences

+
+ +
+

0

+

Technical Skills

+
+ +
+

0

+

Graduation Project

+
+
+
+ +
+
+
+
+
+
+
+ +
+ RM +
+
+
+ +
Creative
+
Structured
+
Problem Solver
+
Web Learner
+
+
+
+
+ + +
+
+
+

About Me

+

A strong foundation with a modern direction.

+
+ +
+
+

Who I Am

+

+ My name is Razan Mohammed, a Computer Science and Engineering graduate from + the University of Hafr Al-Batin, currently based in Riyadh. +

+

+ I am passionate about web development, digital solutions, and creating interfaces + that feel clean, modern, and thoughtfully designed. I enjoy combining technical skills + with creativity to build projects that are both useful and visually refined. +

+
+ +
+

Quick Details

+
    +
  • Name: Razan Mohammed
    • +
  • Age: 24
    • +
  • Location: Riyadh, Saudi Arabia
    • +
  • Major: Computer Science & Engineering
    • +
  • University: University of Hafr Al-Batin
    • +
+
+
+
+
+ + +
+
+
+

Skills

+

Technical ability backed by a professional mindset.

+
+ +
+
+

Technical Skills

+
+ Python + HTML + CSS + JavaScript + C# + Java + C++ + SQL + Git & GitHub + Flask Basics + Django Basics + Agile / Scrum +
+
+ +
+

Professional Skills

+
+ Problem Solving + Communication + Teamwork + Organization + Analysis + Attention to Detail + Quality Control + Adaptability + Time Management +
+
+
+
+
+ + +
+
+
+

Experience

+

Training that strengthened both my technical and practical side.

+
+ +
+
+
+
+ Princess Nourah University +

Digital Transformation Department

+

+ Worked in analysis, programming, and quality control, while supporting + communication between technical and administrative work. +

+
+
+ +
+
+
+ King Fahad Medical City +

Administrative & Technical Training Department

+

+ Worked as a programmer trainee and gained practical exposure to technical tasks, + structured workflow, and software-related environments. +

+
+
+
+
+
+ + +
+
+
+

Projects

+

Selected work that reflects my direction and potential.

+
+ +
+
+
+
+
FD
+

Find Doctor Web

+

+ A graduation project focused on creating a clear and user-friendly platform + for finding doctors by specialty and experience. +

+
+ Graduation Project + Web App + UI +
+
+
+ +
+
+
+
CC
+

Career Compass

+

+ A smart concept designed to support CV analysis and interview preparation + with a career-focused digital experience. +

+
+ Python + Flask + Career Tool +
+
+
+ +
+
+
+
HC
+

HTML & CSS Portfolio Projects

+

+ A set of front-end practice projects built to strengthen layout design, + responsiveness, and visual styling skills. +

+
+ HTML + CSS + Responsive +
+
+
+
+
+
+ + +
+
+
+
+

Contact

+

Let’s Connect

+

+ You can reach me through the following platforms. +

+ +
+ + Email + Razzzan1422@gmail.com + + + + GitHub + github.com/Razan2001a + + + + LinkedIn + linkedin.com/in/razan-aljubail-aa1157265 + + +
+ Location + Riyadh, Saudi Arabia +
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/html/introduction/careers/cv/script.js b/html/introduction/careers/cv/script.js new file mode 100644 index 0000000..2f9c94e --- /dev/null +++ b/html/introduction/careers/cv/script.js @@ -0,0 +1,191 @@ +const loader = document.getElementById("loader"); +const reveals = document.querySelectorAll(".reveal"); +const navLinks = document.querySelectorAll(".nav-link"); +const sections = document.querySelectorAll("section[id]"); +const scrollTopBtn = document.getElementById("scrollTop"); +const menuBtn = document.getElementById("menuBtn"); +const nav = document.getElementById("nav"); +const header = document.getElementById("header"); +const counters = document.querySelectorAll(".counter"); +const typingText = document.getElementById("typingText"); +const cursorGlow = document.getElementById("cursorGlow"); +const projectCards = document.querySelectorAll(".project-card"); +const modals = document.querySelectorAll(".modal"); +const closeButtons = document.querySelectorAll(".modal-close"); + +window.addEventListener("load", () => { + setTimeout(() => { + loader.classList.add("hidden"); + }, 1200); +}); + +/* typing effect */ +const textToType = "Creative web experiences with a modern professional edge."; +let typeIndex = 0; + +function typeEffect() { + if (!typingText) return; + typingText.textContent = ""; + const interval = setInterval(() => { + typingText.textContent += textToType.charAt(typeIndex); + typeIndex++; + + if (typeIndex >= textToType.length) { + clearInterval(interval); + } + }, 45); +} + +setTimeout(typeEffect, 1400); + +/* reveal on scroll */ +const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add("visible"); + } + }); + }, + { threshold: 0.18 } +); + +reveals.forEach((item) => observer.observe(item)); + +/* active nav */ +function activeSection() { + let current = ""; + + sections.forEach((section) => { + const sectionTop = section.offsetTop - 140; + const sectionHeight = section.offsetHeight; + + if (window.scrollY >= sectionTop && window.scrollY < sectionTop + sectionHeight) { + current = section.getAttribute("id"); + } + }); + + navLinks.forEach((link) => { + link.classList.remove("active"); + if (link.getAttribute("href") === `#${current}`) { + link.classList.add("active"); + } + }); +} + +/* scroll top */ +function toggleScrollTop() { + if (window.scrollY > 420) { + scrollTopBtn.classList.add("show"); + } else { + scrollTopBtn.classList.remove("show"); + } +} + +if (scrollTopBtn) { + scrollTopBtn.addEventListener("click", () => { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + }); +} + +/* header style */ +function toggleHeaderStyle() { + if (window.scrollY > 20) { + header.classList.add("scrolled"); + } else { + header.classList.remove("scrolled"); + } +} + +/* mobile menu */ +if (menuBtn) { + menuBtn.addEventListener("click", () => { + nav.classList.toggle("show"); + }); +} + +navLinks.forEach((link) => { + link.addEventListener("click", () => { + nav.classList.remove("show"); + }); +}); + +/* counters */ +let countersStarted = false; + +function animateCounters() { + if (countersStarted) return; + + const triggerPoint = window.innerHeight * 0.85; + const homeSection = document.getElementById("home"); + + if (homeSection.getBoundingClientRect().top < triggerPoint) { + countersStarted = true; + + counters.forEach((counter) => { + const target = +counter.getAttribute("data-target"); + let current = 0; + const increment = Math.max(1, Math.ceil(target / 40)); + + const updateCounter = () => { + current += increment; + if (current > target) current = target; + counter.textContent = current + (target > 1 ? "+" : ""); + + if (current < target) { + requestAnimationFrame(updateCounter); + } + }; + + updateCounter(); + }); + } +} + +/* cursor glow */ +document.addEventListener("mousemove", (e) => { + if (!cursorGlow) return; + cursorGlow.style.left = `${e.clientX}px`; + cursorGlow.style.top = `${e.clientY}px`; +}); + +/* modals */ +projectCards.forEach((card) => { + card.addEventListener("click", () => { + const modalId = card.getAttribute("data-modal"); + const modal = document.getElementById(modalId); + if (modal) modal.classList.add("show"); + }); +}); + +closeButtons.forEach((btn) => { + btn.addEventListener("click", () => { + btn.closest(".modal").classList.remove("show"); + }); +}); + +modals.forEach((modal) => { + modal.addEventListener("click", (e) => { + if (e.target === modal) { + modal.classList.remove("show"); + } + }); +}); + +/* scroll events */ +window.addEventListener("scroll", () => { + activeSection(); + toggleScrollTop(); + toggleHeaderStyle(); + animateCounters(); +}); + +window.addEventListener("load", () => { + activeSection(); + toggleScrollTop(); + toggleHeaderStyle(); + animateCounters(); +}); \ No newline at end of file diff --git a/html/introduction/careers/cv/style.css b/html/introduction/careers/cv/style.css new file mode 100644 index 0000000..68f9622 --- /dev/null +++ b/html/introduction/careers/cv/style.css @@ -0,0 +1,965 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --bg-1: #030712; + --bg-2: #07101f; + --bg-3: #0b1730; + --text: #eef4ff; + --muted: #c9d7ea; + --line: rgba(255, 255, 255, 0.08); + --blue: #2563eb; + --blue-soft: #8cb8ff; + --purple: #7c3aed; + --purple-soft: #d2a7ff; + --shadow: 0 24px 70px rgba(0, 0, 0, 0.28); +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: Arial, sans-serif; + background: + radial-gradient(circle at top left, rgba(37, 99, 235, 0.14), transparent 28%), + radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.16), transparent 30%), + linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 55%, #050b16 100%); + color: var(--text); + line-height: 1.7; + overflow-x: hidden; + cursor: default; +} + +a { + text-decoration: none; + color: inherit; +} + +.container { + width: min(1180px, 90%); + margin: auto; +} + +.section { + padding: 110px 0 40px; +} + +/* loader */ +.loader { + position: fixed; + inset: 0; + z-index: 3000; + background: linear-gradient(180deg, #030712, #07101f); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 18px; + transition: opacity 0.6s ease, visibility 0.6s ease; +} + +.loader.hidden { + opacity: 0; + visibility: hidden; +} + +.loader-logo { + width: 90px; + height: 90px; + border-radius: 24px; + display: grid; + place-items: center; + font-size: 32px; + font-weight: 800; + background: linear-gradient(135deg, var(--blue), var(--purple)); + box-shadow: 0 24px 55px rgba(101, 95, 255, 0.35); + animation: pulseLogo 1.8s infinite ease-in-out; +} + +.loader p { + color: #d8e2f2; + letter-spacing: 1px; +} + +@keyframes pulseLogo { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.08); } +} + +/* background */ +.bg-orb { + position: fixed; + border-radius: 50%; + filter: blur(110px); + z-index: -4; + opacity: 0.35; +} + +.orb-1 { + width: 280px; + height: 280px; + background: var(--blue); + top: 20px; + left: -40px; +} + +.orb-2 { + width: 340px; + height: 340px; + background: var(--purple); + right: -90px; + bottom: 20px; +} + +.orb-3 { + width: 220px; + height: 220px; + background: #4f8cff; + left: 50%; + top: 35%; + transform: translateX(-50%); + opacity: 0.18; +} + +.bg-grid { + position: fixed; + inset: 0; + background-image: + linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); + background-size: 44px 44px; + mask-image: radial-gradient(circle at center, black 40%, transparent 85%); + z-index: -5; + opacity: 0.35; +} + +.cursor-glow { + position: fixed; + width: 260px; + height: 260px; + border-radius: 50%; + background: radial-gradient(circle, rgba(124, 58, 237, 0.16), transparent 60%); + pointer-events: none; + z-index: -1; + transform: translate(-50%, -50%); + filter: blur(30px); +} + +/* header */ +.header { + position: sticky; + top: 0; + z-index: 2000; + background: rgba(3, 7, 18, 0.7); + backdrop-filter: blur(18px); + border-bottom: 1px solid var(--line); + transition: 0.3s ease; +} + +.header.scrolled { + background: rgba(3, 7, 18, 0.9); + box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22); +} + +.nav-container { + min-height: 82px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 18px; +} + +.brand { + display: flex; + align-items: center; + gap: 14px; +} + +.brand-mark { + width: 58px; + height: 58px; + border-radius: 18px; + display: grid; + place-items: center; + font-weight: 800; + letter-spacing: 1px; + position: relative; + overflow: hidden; + background: linear-gradient(135deg, var(--blue), var(--purple)); + box-shadow: 0 20px 38px rgba(70, 99, 255, 0.3); +} + +.brand-mark span { + position: relative; + z-index: 2; + font-size: 18px; +} + +.brand-mark-glow { + position: absolute; + inset: -30%; + background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%); + animation: spinGlow 5s linear infinite; +} + +@keyframes spinGlow { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.brand-text { + display: flex; + flex-direction: column; + line-height: 1.1; +} + +.brand-text strong { + font-size: 15px; +} + +.brand-text span { + font-size: 12px; + color: #b7c6da; +} + +.nav { + display: flex; + align-items: center; + gap: 10px; +} + +.nav-link { + color: #dde8f7; + padding: 10px 14px; + border-radius: 14px; + transition: 0.3s ease; +} + +.nav-link:hover, +.nav-link.active { + color: white; + background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(124, 58, 237, 0.18)); + box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); +} + +.nav-cta { + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.menu-btn { + display: none; + width: 48px; + height: 48px; + border-radius: 14px; + border: 1px solid var(--line); + background: rgba(255,255,255,0.04); + cursor: pointer; +} + +.menu-btn span { + display: block; + width: 20px; + height: 2px; + margin: 5px auto; + background: white; + border-radius: 2px; +} + +/* hero */ +.hero { + padding-top: 70px; +} + +.hero-layout { + min-height: 86vh; + display: grid; + grid-template-columns: 1.15fr 0.85fr; + align-items: center; + gap: 36px; +} + +.eyebrow, +.section-label { + color: #9fc0ff; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 12px; + margin-bottom: 14px; +} + +.hero-left h1 { + font-size: 62px; + line-height: 1.07; + margin-bottom: 20px; + max-width: 780px; +} + +.hero-left h1 span { + display: block; + margin-top: 8px; + min-height: 72px; + background: linear-gradient(90deg, var(--blue-soft), var(--purple-soft)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.hero-description { + color: var(--muted); + font-size: 18px; + max-width: 680px; + margin-bottom: 30px; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 14px; + margin-bottom: 34px; +} + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 14px 24px; + border-radius: 16px; + font-weight: 700; + transition: 0.3s ease; + cursor: pointer; + border: none; +} + +.btn-primary { + color: white; + background: linear-gradient(135deg, var(--blue), var(--purple)); + box-shadow: 0 18px 38px rgba(89, 99, 255, 0.28); +} + +.btn-primary:hover { + transform: translateY(-3px); +} + +.btn-ghost { + color: white; + background: rgba(255,255,255,0.04); + border: 1px solid rgba(255,255,255,0.1); +} + +.btn-ghost:hover { + background: rgba(255,255,255,0.08); +} + +.hero-stats { + display: flex; + flex-wrap: wrap; + gap: 16px; +} + +.stat-card { + min-width: 150px; + padding: 16px 18px; + border-radius: 20px; + background: rgba(255,255,255,0.04); + border: 1px solid var(--line); + box-shadow: 0 14px 35px rgba(0,0,0,0.16); +} + +.stat-card h3 { + font-size: 26px; + color: var(--purple-soft); + margin-bottom: 4px; +} + +.stat-card p { + color: #d4deec; + font-size: 14px; +} + +/* hero art */ +.hero-right { + display: flex; + justify-content: center; +} + +.hero-art { + position: relative; + width: 430px; + height: 430px; + border-radius: 34px; + display: grid; + place-items: center; + background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); + border: 1px solid rgba(255,255,255,0.08); + box-shadow: var(--shadow); + overflow: visible; +} + +.logo-stage { + position: relative; + width: 260px; + height: 260px; + display: grid; + place-items: center; +} + +.logo-glow { + position: absolute; + width: 320px; + height: 320px; + background: radial-gradient(circle, rgba(124,58,237,0.26), transparent 60%); + filter: blur(60px); + z-index: -1; +} + +.logo-ring { + position: absolute; + border-radius: 50%; + border: 1px solid rgba(255,255,255,0.08); +} + +.ring-outer { + width: 260px; + height: 260px; + animation: rotateSlow 20s linear infinite; +} + +.ring-middle { + width: 210px; + height: 210px; + border-color: rgba(124,58,237,0.28); + animation: rotateReverse 16s linear infinite; +} + +.ring-inner { + width: 160px; + height: 160px; + border-color: rgba(37,99,235,0.3); +} + +.logo-core { + width: 122px; + height: 122px; + border-radius: 30px; + display: grid; + place-items: center; + font-size: 36px; + font-weight: 800; + letter-spacing: 1px; + background: linear-gradient(135deg, var(--blue), var(--purple)); + box-shadow: 0 24px 60px rgba(124,58,237,0.36); + position: relative; + overflow: hidden; +} + +.logo-core span { + position: relative; + z-index: 2; +} + +.logo-shine { + position: absolute; + width: 220%; + height: 40px; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); + top: 50%; + left: -130%; + transform: rotate(25deg); + animation: shineMove 4s ease-in-out infinite; +} + +.floating-tag { + position: absolute; + padding: 12px 16px; + border-radius: 16px; + font-size: 14px; + color: white; + background: rgba(13, 22, 48, 0.82); + border: 1px solid rgba(255,255,255,0.08); + box-shadow: 0 18px 35px rgba(0,0,0,0.2); + animation: floatTag 4s ease-in-out infinite; +} + +.tag-1 { top: 36px; left: -26px; } +.tag-2 { top: 70px; right: -28px; animation-delay: 0.7s; } +.tag-3 { bottom: 42px; left: -20px; animation-delay: 1.1s; } +.tag-4 { bottom: 24px; right: -30px; animation-delay: 1.6s; } + +@keyframes rotateSlow { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +@keyframes rotateReverse { + 0% { transform: rotate(360deg); } + 100% { transform: rotate(0deg); } +} + +@keyframes shineMove { + 0% { left: -130%; } + 100% { left: 130%; } +} + +@keyframes floatTag { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-8px); } +} + +/* shared */ +.section-head { + text-align: center; + margin-bottom: 34px; +} + +.section-head h2 { + font-size: 40px; + max-width: 850px; + margin: auto; +} + +.glass, +.project-card, +.contact-wrap, +.modal-box { + background: rgba(255,255,255,0.05); + border: 1px solid var(--line); + border-radius: 28px; + box-shadow: 0 18px 55px rgba(0,0,0,0.22); +} + +/* about skills */ +.about-grid, +.skills-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; +} + +.glass { + padding: 30px; +} + +.glass h3 { + font-size: 24px; + margin-bottom: 16px; +} + +.glass p { + color: var(--muted); + margin-bottom: 12px; +} + +.info-list { + list-style: none; +} + +.info-list li { + padding: 11px 0; + border-bottom: 1px solid rgba(255,255,255,0.06); + color: #dbe6f4; +} + +.info-list li:last-child { + border-bottom: none; +} + +.tags, +.project-tags { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.tags span, +.project-tags span { + padding: 10px 14px; + border-radius: 999px; + font-size: 14px; + color: white; + background: linear-gradient(135deg, rgba(37, 99, 235, 0.92), rgba(124, 58, 237, 0.92)); +} + +.soft span { + background: linear-gradient(135deg, rgba(20, 28, 48, 0.95), rgba(124, 58, 237, 0.8)); +} + +/* timeline */ +.timeline { + position: relative; + max-width: 920px; + margin: auto; +} + +.timeline::before { + content: ""; + position: absolute; + left: 28px; + top: 0; + width: 2px; + height: 100%; + background: linear-gradient(var(--blue), var(--purple)); +} + +.timeline-item { + position: relative; + padding-left: 78px; + margin-bottom: 28px; +} + +.timeline-dot { + position: absolute; + left: 20px; + top: 26px; + width: 18px; + height: 18px; + border-radius: 50%; + background: var(--purple-soft); + box-shadow: 0 0 0 7px rgba(192, 132, 252, 0.12); +} + +.timeline-card { + padding: 28px; +} + +.timeline-place { + display: inline-block; + margin-bottom: 10px; + font-size: 14px; + color: #99bdff; +} + +.timeline-card h3 { + font-size: 24px; + margin-bottom: 10px; +} + +.timeline-card p { + color: #d6e0ee; +} + +/* projects */ +.projects-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +.project-card { + overflow: hidden; + transition: transform 0.35s ease, box-shadow 0.35s ease; + cursor: pointer; +} + +.project-card:hover { + transform: translateY(-10px); + box-shadow: 0 26px 75px rgba(0,0,0,0.32); +} + +.project-top { + height: 8px; + background: linear-gradient(90deg, var(--blue), var(--purple)); +} + +.project-content { + padding: 24px; +} + +.project-icon { + width: 56px; + height: 56px; + border-radius: 18px; + display: grid; + place-items: center; + font-weight: 800; + margin-bottom: 16px; + background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(124, 58, 237, 0.22)); + border: 1px solid rgba(255,255,255,0.08); +} + +.project-content h3 { + font-size: 23px; + margin-bottom: 12px; +} + +.project-content p { + color: var(--muted); + margin-bottom: 18px; +} + +/* contact */ +.single-contact { + display: grid; + grid-template-columns: 1fr; +} + +.full-width { + width: 100%; +} + +.contact-wrap { + padding: 30px; +} + +.contact-left h2 { + font-size: 40px; + margin-bottom: 14px; +} + +.contact-intro { + color: var(--muted); + margin-bottom: 20px; +} + +.contact-cards { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 18px; + margin-top: 26px; +} + +.contact-card { + display: flex; + flex-direction: column; + gap: 8px; + padding: 22px; + border-radius: 22px; + background: rgba(255,255,255,0.04); + border: 1px solid rgba(255,255,255,0.08); + transition: 0.3s ease; + box-shadow: 0 14px 35px rgba(0,0,0,0.16); +} + +.contact-card:hover { + transform: translateY(-6px); + background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(124,58,237,0.14)); +} + +.static-card:hover { + transform: none; +} + +.contact-title { + font-size: 13px; + text-transform: uppercase; + letter-spacing: 1.5px; + color: #9fc0ff; +} + +.contact-value { + font-size: 17px; + color: #eef4ff; + word-break: break-word; +} + +/* footer */ +.footer { + padding: 28px 0 36px; + text-align: center; + color: #c9d6e8; +} + +/* scroll top */ +.scroll-top { + position: fixed; + right: 22px; + bottom: 22px; + width: 50px; + height: 50px; + border-radius: 18px; + border: none; + display: none; + cursor: pointer; + color: white; + font-size: 22px; + background: linear-gradient(135deg, var(--blue), var(--purple)); + box-shadow: 0 16px 34px rgba(0,0,0,0.28); + z-index: 2200; +} + +.scroll-top.show { + display: block; +} + +/* reveal */ +.reveal { + opacity: 0; + transform: translateY(48px) scale(0.98); + transition: opacity 0.85s ease, transform 0.85s ease; +} + +.reveal.visible { + opacity: 1; + transform: translateY(0) scale(1); +} + +.delay-1 { + transition-delay: 0.12s; +} + +.delay-2 { + transition-delay: 0.24s; +} + +/* modal */ +.modal { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.58); + display: none; + align-items: center; + justify-content: center; + padding: 20px; + z-index: 2600; +} + +.modal.show { + display: flex; +} + +.modal-box { + max-width: 560px; + width: 100%; + padding: 28px; + position: relative; + background: rgba(8, 14, 28, 0.92); + backdrop-filter: blur(18px); +} + +.modal-box h3 { + font-size: 28px; + margin-bottom: 12px; +} + +.modal-box p { + color: var(--muted); +} + +.modal-close { + position: absolute; + top: 14px; + right: 16px; + width: 38px; + height: 38px; + border: none; + border-radius: 12px; + font-size: 24px; + color: white; + background: rgba(255,255,255,0.08); + cursor: pointer; +} + +/* responsive */ +@media (max-width: 1050px) { + .hero-layout, + .about-grid, + .skills-grid, + .projects-grid { + grid-template-columns: 1fr; + } + + .hero-left h1 { + font-size: 48px; + } + + .hero-art { + width: 360px; + height: 360px; + } +} + +@media (max-width: 768px) { + .nav { + position: absolute; + top: 86px; + right: 5%; + width: 230px; + padding: 14px; + border-radius: 20px; + background: rgba(4, 8, 20, 0.96); + border: 1px solid var(--line); + display: none; + flex-direction: column; + align-items: stretch; + } + + .nav.show { + display: flex; + } + + .menu-btn { + display: block; + } + + .hero-left h1 { + font-size: 38px; + } + + .hero-left h1 span { + min-height: 90px; + } + + .section-head h2, + .contact-left h2 { + font-size: 30px; + } + + .timeline::before { + left: 16px; + } + + .timeline-dot { + left: 8px; + } + + .timeline-item { + padding-left: 50px; + } + + .hero-art { + width: 300px; + height: 300px; + } + + .logo-stage { + width: 190px; + height: 190px; + } + + .ring-outer { + width: 190px; + height: 190px; + } + + .ring-middle { + width: 150px; + height: 150px; + } + + .ring-inner { + width: 115px; + height: 115px; + } + + .logo-core { + width: 92px; + height: 92px; + font-size: 28px; + border-radius: 24px; + } + + .floating-tag { + font-size: 12px; + padding: 10px 12px; + } + + .contact-cards { + grid-template-columns: 1fr; + } + + .cursor-glow { + display: none; + } +} \ No newline at end of file diff --git a/html/introduction/css/introduction/index.html b/html/introduction/css/introduction/index.html new file mode 100644 index 0000000..000fd09 --- /dev/null +++ b/html/introduction/css/introduction/index.html @@ -0,0 +1,83 @@ + + + + + + Sci-Fi Universe + + + + +
+

Sci-Fi Universe

+

My favorite science fiction movies and series

+
+ +
+ +
+

Why I Love This Genre

+

+ Science fiction is one of my favorite genres because it combines imagination, + technology, mystery, and emotion. I enjoy stories that explore space, the future, + artificial intelligence, time, and survival. +

+
+ +
+

Favorite Movies

+
+
+ Interstellar Poster +

Interstellar

+

A powerful film about space, time, love, and survival.

+
+ +
+ Inception Poster +

Inception

+

An intelligent story about dreams, memory, and layered reality.

+
+ +
+ The Martian Poster +

The Martian

+

A survival story that shows science, hope, and problem solving.

+
+
+
+ +
+

Favorite Series

+
+
+

Sherlock

+

Smart, detailed, and full of investigation and mystery.

+
+ +
+

Black Mirror

+

A unique series that explores technology and human choices.

+
+ +
+

Dark

+

A mysterious and complex story about time and secrets.

+
+
+
+ +
+

Where I Watch

+ +
+ +
+ + + \ No newline at end of file diff --git a/html/introduction/css/introduction/style.css b/html/introduction/css/introduction/style.css new file mode 100644 index 0000000..3f2e3af --- /dev/null +++ b/html/introduction/css/introduction/style.css @@ -0,0 +1,107 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + background: #0b1020; + color: #f3f4f6; + line-height: 1.6; +} + +.hero { + text-align: center; + padding: 60px 20px; + background: linear-gradient(135deg, #1d4ed8, #7c3aed); +} + +.hero h1 { + font-size: 48px; + margin-bottom: 10px; +} + +.hero p { + font-size: 18px; +} + +.container { + width: 90%; + max-width: 1100px; + margin: 30px auto; +} + +section { + margin-bottom: 35px; +} + +section h2 { + margin-bottom: 16px; + color: #c4b5fd; +} + +.intro, +.platforms, +.card { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 18px; + padding: 20px; +} + +.cards { + display: flex; + gap: 20px; + flex-wrap: wrap; +} + +.card { + flex: 1 1 280px; + transition: transform 0.3s ease, box-shadow 0.3s ease; + box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); +} + +.card:hover { + transform: translateY(-6px); + box-shadow: 0 16px 32px rgba(0, 0, 0, 0.26); +} + +.card img { + width: 100%; + height: 360px; + object-fit: cover; + border-radius: 12px; + margin-bottom: 15px; +} + +.card h3 { + margin-bottom: 10px; + color: #93c5fd; +} + +.small-card { + min-height: 180px; +} + +.platforms ul { + padding-left: 20px; +} + +.platforms li { + margin-bottom: 8px; +} + +@media (max-width: 768px) { + .hero h1 { + font-size: 34px; + } + + .cards { + flex-direction: column; + } + + .card img { + height: auto; + } +} \ No newline at end of file diff --git a/html/introduction/index.html b/html/introduction/index.html new file mode 100644 index 0000000..b43fce9 --- /dev/null +++ b/html/introduction/index.html @@ -0,0 +1,234 @@ + + + + + + My Interests - Sci-Fi & Mystery World + + + +

Welcome to My Sci-Fi & Mystery World

+ +

+ Hi, my name is Razan. One of my biggest interests is watching movies and series, + especially science fiction and mystery. I enjoy stories that make me think deeply, + imagine the future, and explore big ideas like space, time, technology, psychology, + and human survival. +

+ +

+ Science fiction inspires me because it shows how imagination can become reality. + It makes me think about innovation, artificial intelligence, space exploration, + and the future of humanity. I also enjoy mystery and detective stories because + they are full of analysis, details, intelligence, and unexpected twists. +

+ +
+ +

Why I Love Science Fiction Movies

+

+ Science fiction movies are more than entertainment for me. They are creative worlds + full of ideas, emotions, and possibilities. I love how they mix science, philosophy, + and imagination in one story. Some movies focus on space and survival, some explore + dreams and the mind, and others make us question technology and the future. +

+ +

+ These movies inspire curiosity and make me excited about technology. They also connect + with my personal interest in computers, innovation, and digital experiences. +

+ +
+ +

My Favorite Science Fiction Movies

+ + +

Why These Movies Inspire Me

+
    +
  1. Interstellar inspires me with its emotional story, space travel, and the idea of time.
    2. +
  2. Inception fascinates me because of dreams, layers of reality, and intelligent storytelling.
    3. +
  3. The Martian shows problem-solving, survival, and using science in a practical way.
    4. +
  4. Arrival is thoughtful, emotional, and unique in how it explores communication and time.
    5. +
  5. Blade Runner 2049 has a beautiful visual style and deep questions about identity and humanity.
    6. +
+ +
+ +

Movie Posters

+ +

Interstellar

+ Interstellar Poster + +

Inception

+ Inception Poster + +

The Martian

+ The Martian Poster + +

Arrival

+ Arrival Poster + +

Blade Runner 2049

+ Blade Runner 2049 Poster + +

Dune

+ Dune Poster + +
+ +

My Favorite Mystery & Detective Series

+ + +

+ I enjoy Sherlock because it is smart, analytical, and full of details. + I also enjoy series like Black Mirror because they combine technology + with psychological and futuristic ideas. This mix of mystery, intelligence, and imagination + is exactly what makes these shows special to me. +

+ +
+ +

Platforms I Watch On

+ + + + + + + + + + + + + + + + + + + + + +
PlatformWhy I Like It
NetflixIt has many popular series, mystery shows, and science fiction content.
Prime VideoI use it to watch interesting movies and discover different genres.
OSNIt offers a variety of movies and international entertainment.
EgyBestI sometimes use it to explore titles and find different movie options.
+ +
+ +

Useful Links

+

These are some links related to movies and series that I like:

+ + +
+ +

Video Section

+

+ This video is related to science fiction movie content and gives a cinematic feeling + that matches my interest in this genre. +

+ + + +
+ +

Quick Comparison

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TitleCategoryMain Theme
InterstellarMovieSpace, Time, Survival
InceptionMovieDreams, Mind, Reality
The MartianMovieScience, Survival, Mars
SherlockSeriesInvestigation, Mystery, Intelligence
Black MirrorSeriesTechnology, Society, Future
+ +
+ +

My Opinion

+

+ If I had to describe my taste in one sentence, I would say that I love stories + that challenge the mind and open the imagination. Whether it is a movie about space, + a story about dreams, or a detective series full of clever details, I always enjoy + content that feels intelligent, creative, and unforgettable. +

+ +
+ +

Contact Form

+
+
+

+ +
+

+ +
+

+ +
+

+ + +
+ + + \ No newline at end of file