diff --git a/article/ai/image/AI header1.jpg b/article/ai/image/AI header1.jpg
new file mode 100644
index 0000000..2755aaf
Binary files /dev/null and b/article/ai/image/AI header1.jpg differ
diff --git a/article/ai/image/Ai.avif b/article/ai/image/Ai.avif
new file mode 100644
index 0000000..f350d27
Binary files /dev/null and b/article/ai/image/Ai.avif differ
diff --git a/article/ai/image/E-commerce.png b/article/ai/image/E-commerce.png
new file mode 100644
index 0000000..cbd564f
Binary files /dev/null and b/article/ai/image/E-commerce.png differ
diff --git a/article/ai/image/education.png b/article/ai/image/education.png
new file mode 100644
index 0000000..2e72113
Binary files /dev/null and b/article/ai/image/education.png differ
diff --git a/article/ai/image/gaming.png b/article/ai/image/gaming.png
new file mode 100644
index 0000000..08e1a8e
Binary files /dev/null and b/article/ai/image/gaming.png differ
diff --git a/article/ai/image/health.png b/article/ai/image/health.png
new file mode 100644
index 0000000..888c4e8
Binary files /dev/null and b/article/ai/image/health.png differ
diff --git a/article/ai/image/logo_Ai.png b/article/ai/image/logo_Ai.png
new file mode 100644
index 0000000..2b73755
Binary files /dev/null and b/article/ai/image/logo_Ai.png differ
diff --git a/article/ai/image/robot.png b/article/ai/image/robot.png
new file mode 100644
index 0000000..4c4326c
Binary files /dev/null and b/article/ai/image/robot.png differ
diff --git a/article/ai/image/transportation.png b/article/ai/image/transportation.png
new file mode 100644
index 0000000..47354c1
Binary files /dev/null and b/article/ai/image/transportation.png differ
diff --git a/article/ai/index.html b/article/ai/index.html
new file mode 100644
index 0000000..6a01d9e
--- /dev/null
+++ b/article/ai/index.html
@@ -0,0 +1,174 @@
+
+
+
+
+ AI Revolution
+
+
+
+
+ About AI
+
+
+
What is AI?
+
Artificial Intelligence (AI) is the ability of machines to think and learn like humans.
+
+
Why is AI Important?
+
AI helps improve efficiency, save time, and solve complex problems in many fields.
+
+
How is AI Used?
+
AI is used in healthcare, education, transportation, and many daily applications.
+
+
+ Applications
+
+
+
+
+
+
Healthcare
+
AI helps doctors diagnose diseases and improve patient care.
+
+
+
+
+
Education
+
AI helps students learn faster with smart tools.
+
+
+
+
+
Robots
+
AI is used in robots to perform tasks automatically.
+
+
+
+
+
+
Transportation
+
AI helps in self-driving cars and smart traffic management.
+
+
+
+
+
Gaming
+
AI improves game characters and creates smarter gameplay.
+
+
+
+
+
E-commerce
+
AI suggests products and improves online shopping experience.
+
+
+
+
+
+ AI in Daily Life
+
+
+
+
+
π±
+
Smartphones
+
AI powers voice assistants and camera features.
+
+
+
+
ποΈ
+
Shopping
+
AI suggests products based on your interests.
+
+
+
+
πΊοΈ
+
Maps
+
AI finds the fastest routes and avoids traffic.
+
+
+
+
π¬
+
Entertainment
+
AI recommends movies and music based on your interests.
+
+
+
+
π
+
Security
+
AI helps detect threats and protect personal data.
+
+
+
+
π
+
Smart Homes
+
AI controls lights, temperature, and home devices automatically.
+
+
+
+
+ The Future of AI
+
+
+
+
+
π€ Advanced Robots
+
Robots will become more intelligent and help in daily tasks.
+
+
+
+
π Smart Cities
+
AI will manage traffic, energy, and public services efficiently.
+
+
+
+
π§ Human-AI Interaction
+
AI will understand humans better and improve communication.
+
+
+
+
+
+
+
+ Β© 2026 AI Revolution
+
+
+
+
\ No newline at end of file
diff --git a/article/ai/style-Ai.css b/article/ai/style-Ai.css
new file mode 100644
index 0000000..405c959
--- /dev/null
+++ b/article/ai/style-Ai.css
@@ -0,0 +1,244 @@
+html {
+ scroll-behavior: smooth;
+}
+
+header {
+ background-image: url(image/AI\ header1.jpg);
+ background-size: cover;
+ background-repeat: no-repeat ;
+ border-bottom-left-radius: 20px;
+ border-bottom-right-radius: 20px;
+ color: white;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 650px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 20px;
+ position: relative;
+
+}
+
+
+.top-bar {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.top-bar h2{
+ font-size: 20px;
+ white-space: nowrap;
+ font-weight: bold;
+}
+
+.hero-text{
+ position: absolute;
+ bottom: 110px;
+}
+.hero-text h1 {
+ font-size: 52px;
+ margin: 0;
+}
+
+.hero-text p {
+ margin: 20px 0 0;
+ max-width: 400px;
+}
+
+
+
+nav a {
+ color: white;
+ margin-left: 15px;
+ transition: 0.3s;
+}
+nav a:hover {
+ color: whitesmoke;
+ border-bottom: 2px solid whitesmoke;
+ padding-bottom: 3px;
+}
+
+body {
+ margin: 0;
+ background: #f5f7fa;
+ font-family: 'Inter', sans-serif;
+}
+h1, h2, h3 {
+ font-family: 'Poppins', sans-serif;
+ font-weight: 700;
+}
+h2 {
+ color: #333;
+}
+.about {
+ text-align: center;
+ padding: 80px 20px;
+}
+
+.about-box {
+ background: white;
+ margin: 20px auto;
+ padding: 25px;
+ width: 60%;
+ border-radius: 15px;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+ transition: 0.3s;
+}
+
+.about-box:hover {
+ transform: translateY(-5px);
+}
+
+.about-box h3 {
+ margin-bottom: 10px;
+}
+
+.about-box p {
+ color: #555;
+}
+.apps {
+ text-align: center;
+ padding: 80px 20px;
+}
+
+.cards {
+ display: flex;
+ justify-content: center;
+ gap: 25px;
+ flex-wrap: wrap;
+ margin-top: 40px;
+}
+
+.card {
+ width: 260px;
+ background: white;
+ border-radius: 20px;
+ overflow: hidden;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+ transition: 0.3s;
+ text-align: center;
+}
+
+.card:hover {
+ transform: translateY(-10px);
+ box-shadow: 0 15px 30px rgba(0,0,0,0.15);
+}
+
+.card img {
+ width: 100%;
+ height: 300px;
+ object-fit: cover;
+}
+
+.card h3 {
+ margin: 15px 0 10px;
+}
+
+.card p {
+ padding: 0 15px 20px;
+ color: #555;
+ font-size: 14px;
+}
+
+.daily {
+ text-align: center;
+ padding: 80px 20px;
+}
+
+
+.daily-cards {
+ display: flex;
+ justify-content: center;
+ gap: 25px;
+ flex-wrap: wrap;
+ margin-top: 40px;
+}
+
+.daily-card {
+ width: 250px;
+ background: white;
+ padding: 30px 20px;
+ border-radius: 20px;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.08);
+ transition: 0.3s;
+}
+
+.daily-card:hover {
+ transform: translateY(-8px);
+ box-shadow: 0 15px 25px rgba(0,0,0,0.12);
+}
+
+.icon {
+ font-size: 40px;
+ margin-bottom: 15px;
+}
+
+.daily-card h3 {
+ margin-bottom: 10px;
+}
+
+.daily-card p {
+ color: #555;
+ font-size: 14px;
+}
+.daily-card:nth-child(1) {
+ background: #eef6ff;
+}
+
+.daily-card:nth-child(2) {
+ background: #f0fdf4;
+}
+
+.daily-card:nth-child(3) {
+ background: #fff7ed;
+}
+
+.daily-card:nth-child(4) {
+ background: #eef6ff;
+}
+
+.daily-card:nth-child(5) {
+ background: #f0fdf4;
+}
+
+.daily-card:nth-child(6) {
+ background: #fff7ed;
+}
+
+.future {
+ text-align: center;
+ padding: 80px 20px;
+
+}
+
+.future-container {
+ display: flex;
+ justify-content: center;
+ gap: 25px;
+ margin-top: 40px;
+ flex-wrap: wrap;
+}
+
+.future-box {
+ width: 260px;
+ padding: 25px;
+ border-radius: 20px;
+ background: white;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+ transition: 0.3s;
+}
+
+.future-box:hover {
+ transform: translateY(-8px);
+ box-shadow: 0 15px 25px rgba(0,0,0,0.15);
+}
+
+footer {
+ padding: 15px;
+ background: #e0f2fe;
+ text-align: center;
+ font-size: 14px;
+}
\ No newline at end of file
diff --git a/careers/cv/NORAH-CV.pdf b/careers/cv/NORAH-CV.pdf
new file mode 100644
index 0000000..7c718ac
Binary files /dev/null and b/careers/cv/NORAH-CV.pdf differ
diff --git a/careers/cv/image/Ai Certificate.pdf b/careers/cv/image/Ai Certificate.pdf
new file mode 100644
index 0000000..2816d4c
Binary files /dev/null and b/careers/cv/image/Ai Certificate.pdf differ
diff --git a/careers/cv/image/Apple developer academy .pdf b/careers/cv/image/Apple developer academy .pdf
new file mode 100644
index 0000000..6a40895
Binary files /dev/null and b/careers/cv/image/Apple developer academy .pdf differ
diff --git a/careers/cv/image/Css-cert.jpeg b/careers/cv/image/Css-cert.jpeg
new file mode 100644
index 0000000..f872a08
Binary files /dev/null and b/careers/cv/image/Css-cert.jpeg differ
diff --git a/careers/cv/image/Florimood.jpg b/careers/cv/image/Florimood.jpg
new file mode 100644
index 0000000..cbe3842
Binary files /dev/null and b/careers/cv/image/Florimood.jpg differ
diff --git a/careers/cv/image/IBM.jpg b/careers/cv/image/IBM.jpg
new file mode 100644
index 0000000..e4a4752
Binary files /dev/null and b/careers/cv/image/IBM.jpg differ
diff --git a/careers/cv/image/N-logo.png b/careers/cv/image/N-logo.png
new file mode 100644
index 0000000..6134990
Binary files /dev/null and b/careers/cv/image/N-logo.png differ
diff --git a/careers/cv/image/Ui.svg b/careers/cv/image/Ui.svg
new file mode 100644
index 0000000..eb8de30
--- /dev/null
+++ b/careers/cv/image/Ui.svg
@@ -0,0 +1 @@
+HeroUI CSS Figma GitHub HTML5 iOS Python Swift htmx Xcode Norah Saeed
+
+
+
+
+
+ Hello, I'm
+ Norah Saeed
+
+
+ A creative
+ web developer passionate about building modern, user-friendly interfaces using
+ HTML, CSS, and Python
+
+
+
+
+
+
+
+ My Projects
+
+ Here are some of the projects I have worked on.
+
+
+
+
+
+
+
+
+
Florimood
+
+A mood tracking application that allows users to log their daily emotions and visualize them through an interactive calendar, helping them understand emotional patterns over time.
+
+ Swift
+ Xcode
+ SwiftUI
+
+
+
+
+
+
+
+
+
+
+
Apple Website Clone
+
+A front-end web project that replicates the design of the Apple website, focusing on layout accuracy, visual styling, and user experience using core web technologies.
+
+ HTML
+ CSS
+ JavaScript
+
+
+
+
+
+
+
+
+
StuZone
+
+StuZone is a student-focused application designed to support academic needs through three main features: finding reliable learning resources, discovering internship opportunities, and connecting with private tutors. It was built using Dart and integrated with Firebase for dynamic data handling.
+
+ Flutter
+ Dart
+ Firebase
+
+
+
+
+
+
+ Skills & Tools
+ Technologies and tools I use across development, design, and problem-solving.
+
+
+
+
+
+
+
+
Python
+
Programming Fundamentals
+
+
+
+
+
+
+
UI/UX fundamentals
+
User Experience
+
+
+
+
+
+
+
Swift
+
iOS Development
+
+
+
+
+
+
+
SQL
+
Database Management & Queries
+
+
+
+
+
+
+
Java
+
Object-Oriented Programming
+
+
+
+
+
+
+
HTML
+
Front-End Web Development
+
+
+
+
+
+
+
CSS
+
Front-End Web Development
+
+
+
+
+
+
+
Power BI
+
Data Visualization & Dashboard Creation
+
+
+
+
+
+
+
Visual Studio
+
Application Development Environment
+
+
+
+
+
+
+
Xcode
+
iOS App Development Environment
+
+
+
+
+
+
+
Figma
+
UI Design & Prototyping
+
+
+
+
+ Experience
+ Places where I've put my skills to work
+
+
+
+
+
π
+
+
+
+
+
Council of Health Insurance
+
+
+ Gathered and analyzed business requirements to build automated dashboards using Power BI and SQL.
+ Used DAX and Power Query (M) for data modeling and calculations.
+ Designed and implemented open data dashboards to enhance accessibility and transparency.
+ Collaborated with team members to ensure data accuracy and consistency.
+
+
+
+
+
+
+ Education
+ My academic journey and the knowledge I've built in computer science.
+
+
+
+
π
+
+
+
+
+
Prince Sattam bin Abdulaziz university
+
+
+ Studied Computer Science with a focus on programming and software development.
+ Worked with Java during coursework.
+ Graduation project: Developed a mobile application using Flutter and Firebase.
+
+
+
+
+
+
+
+ Certifications
+ certifications and achievements
+
+
+
+
+
+ Get In Touch
+ Feel free to reach out anytime.
+
+
+
+
+
+
Let's Connect
+
+ I'm always open to discussing new projects, creative ideas.
+
+
+
+
+
+
+
+ Email
+
norahseedw@gmail.com
+
+
+
+
+
+
+
+
+ Phone
+
+966 536321275
+
+
+
+
+
+
+
+
+ Location
+
Saudi Arabia - Riyadh
+
+
+
+
+
+
+
Send a Message
+
+ Name
+ Email
+ Phone
+ Message
+
+
+ Send Message
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/careers/cv/style-cv.css b/careers/cv/style-cv.css
new file mode 100644
index 0000000..28bf6e3
--- /dev/null
+++ b/careers/cv/style-cv.css
@@ -0,0 +1,810 @@
+html{
+ scroll-behavior: smooth;
+}
+body{
+ font-family: 'IBM Plex Sans', sans-serif;
+ margin: 0;
+ padding: 0;
+}
+/*style nav bar*/
+
+.main-nav{
+ position: sticky;
+ top: 0;
+ z-index: 1000;
+
+ background: rgba(255, 255, 255, 0.6);
+ backdrop-filter: blur(12px);
+ font-family: 'Poppins', sans-serif;
+}
+
+
+.sub-nav{
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 24px;
+
+ height: 68px;
+
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+
+.sub-nav h2{
+ font-size: 20px;
+ font-weight: 600;
+}
+
+
+.links{
+ display: flex;
+ align-items: center;
+ gap: 20px;
+
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+
+.links li{
+ padding: 0;
+}
+
+
+.link{
+ color: #1f2937;
+ text-decoration: none;
+ font-weight: 500;
+ transition: 0.3s;
+}
+
+.link:hover{
+ color: #3b82f6;
+}
+
+
+.btn-cv{
+ display: flex;
+ align-items: center;
+ gap: 6px;
+
+ background: linear-gradient(135deg, #6367FF, #8494FF);
+ color: white;
+
+ border-radius: 999px;
+ padding: 8px 16px;
+
+ text-decoration: none;
+ font-size: 14px;
+ font-weight: 500;
+
+ transition: 0.3s;
+}
+
+.btn-cv svg{
+ width: 18px;
+ height: 18px;
+}
+
+.btn-cv:hover{
+ transform: translateY(-2px);
+ box-shadow: 0 6px 15px rgba(99,103,255,0.4);
+}
+/* end of style nav bar*/
+
+header{
+ background-color: #021A54;
+ color: white;
+ text-align: center;
+ height: 500px;
+ align-items: center;
+}
+header h1{
+font-weight: 10px;
+padding-top: 100px;
+font-size: 50px;
+}
+.name-color{
+ color: yellow;
+}
+header p{
+ font-size: 25px;
+ font-weight: 500px;
+ max-width: 800px;
+ margin: 30px auto;
+}
+.span-p{
+ color: #3b82f6;
+}
+.header-content{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 20px;
+
+}
+.box-btn{
+ margin-top: 10px;
+ display: flex;
+ gap: 40px;
+ justify-content: center;
+
+}
+.btn-header{
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ background-color: white;
+ color: black;
+ border-radius: 20px;
+ text-decoration: none;
+ padding: 10px 10px;
+ width: auto;
+ font-size: 18px;
+ white-space: nowrap;
+ transition: all 0.3s ease
+}
+.btn-header svg{
+ height: 18px;
+ width: 18px;
+ margin-right: auto;
+}
+.btn-header:hover{
+ background: #3b82f6;
+ color: white;
+ transform: translateY(-3px);
+ box-shadow: 0 8px 20px rgba(0,0,0,0.15);
+}
+.box-social{
+ display: flex;
+ justify-content: center;
+ margin-left:20px ;
+ gap: 10px;
+}
+.icons{
+ width: 45px;
+ height: 45px;
+ background: #F7F0F0;
+ color: #3b82f6;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-decoration: none;
+ font-weight: bold;
+ font-size: 16px;
+ white-space: nowrap;
+ transition: all 0.3s ease
+}
+.icons:hover{
+ background: #3b82f6;
+ color: white;
+ transform: translateY(-3px);
+ box-shadow: 0 8px 20px rgba(0,0,0,0.15);
+}
+
+/*section projects*/
+.projects-container{
+ max-width: 1000px;
+ margin: 0 auto;
+ text-align: center;
+ padding: 40px 20px;
+}
+
+.projects-container h2{
+ font-size: 40px;
+ font-weight: bold;
+ color: #1f2937;
+}
+
+.projects-container p{
+ color: #6b7280;
+ margin-top: 10px;
+ margin-bottom: 40px;
+}
+
+
+.cards{
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 20px;
+ margin-top: 30px;
+ justify-items: center;
+}
+
+/* card */
+.card{
+ width: 300px;
+ border-radius: 20px;
+ overflow: hidden;
+ background: white;
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+ transition: 0.3s;
+}
+
+.card:hover{
+ transform: translateY(-5px);
+}
+
+
+.card-img{
+ width: 100%;
+ height: 280px;
+ object-fit: cover;
+}
+
+.fake-img{
+ height: 280px;
+ width: 150px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ margin: auto;
+}
+.img-svg{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+
+.img-svg svg{
+ width: 100px;
+ height: 100px;
+ stroke: black;
+}
+
+
+.card-content{
+ padding: 20px;
+}
+
+.card-content h3{
+ margin: 0;
+ font-size: 20px;
+}
+
+.card-content p{
+ color: #666;
+ font-size: 14px;
+ margin: 10px 0 15px;
+}
+
+/* Ψ§ΩΨͺΩΩΩΨ§Ψͺ */
+.tech{
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.tech span{
+ background: #f1f1f1;
+ padding: 5px 10px;
+ border-radius: 10px;
+ font-size: 12px;
+}
+
+/* skill section*/
+
+.skills {
+ text-align: center;
+ padding: 80px 20px;
+ background: #f7f9fc;
+}
+
+.title {
+ text-align: center;
+ font-size: 40px;
+ font-weight: bold;
+ color: #1f2937;
+}
+
+.subtitle {
+ text-align: center;
+ color: #6b7280;
+ margin-top: 10px;
+ margin-bottom: 40px;
+}
+
+
+.skills-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 25px;
+ max-width: 1100px;
+ margin: auto;
+}
+
+
+.skill-card {
+ background: white;
+ padding: 25px;
+ border-radius: 20px;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+ transition: 0.3s;
+}
+
+.skill-card:hover {
+ transform: translateY(-8px);
+}
+
+.icon-skill {
+ width: 50px;
+ height: 50px;
+ margin: auto;
+ border-radius: 15px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 28px;
+ margin-bottom: 15px;
+}
+
+.icon-skill img{
+ width: 150px;
+ height: 30px;
+}
+
+
+.python { background: #F9F6C4; }
+.ui{background: #FFDBFD;}
+.swift{background:#89D4FF ;}
+.sql{background:#FFF57E;}
+.java{background:#FF5656 ;}
+.html{background:#647FBC ;}
+.css{background:#8CE4FF ;}
+.powerbi{background:#CBF3BB ;}
+.vs{background:#6D94C5 ;}
+.xcode{background:#BADFDB ;}
+.figma{background:#C9BEFF ;}
+
+
+
+.skill-card h3 {
+ margin: 10px 0 5px;
+ color: #1f2937;
+}
+
+.skill-card p {
+ color: #6b7280;
+ font-size: 14px;
+}
+
+/*experience section*/
+
+.experience {
+ padding: 80px 20px;
+ text-align: center;
+}
+
+.experience .title {
+ font-size: 40px;
+ font-weight: bold;
+ color: #1f2937;
+}
+
+.experience .subtitle {
+ color: #6b7280;
+ margin-top: 10px;
+ margin-bottom: 50px;
+}
+
+
+.exp-container {
+ max-width: 1000px;
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ gap: 25px;
+}
+
+/* Card */
+.exp-card {
+ display: flex;
+ gap: 20px;
+ background: #eef2f7;
+ padding: 25px;
+ border-radius: 25px;
+ align-items: flex-start;
+ text-align: left;
+ transition: 0.3s;
+}
+
+.exp-card:hover {
+ transform: translateY(-5px);
+}
+
+
+.exp-icon {
+ width: 65px;
+ height: 65px;
+ background: linear-gradient(135deg, #3b82f6, #2563eb);
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 18px;
+ font-size: 26px;
+ flex-shrink: 0;
+}
+
+
+.exp-content {
+ flex: 1;
+}
+
+.exp-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.exp-header h3 {
+ margin: 0;
+ font-size: 20px;
+ color: #1f2937;
+}
+
+
+.exp-year {
+ background: #dbeafe;
+ color: #2563eb;
+ padding: 6px 14px;
+ border-radius: 20px;
+ font-size: 14px;
+}
+
+
+.company {
+ color: #3b82f6;
+ margin: 8px 0 12px;
+ font-weight: 500;
+}
+
+.exp-content ul {
+ padding-left: 20px;
+ margin: 0;
+}
+
+.exp-content li {
+ margin-bottom: 10px;
+ color: #4b5563;
+ position: relative;
+}
+
+
+.exp-content li::marker {
+ color: #3b82f6;
+}
+
+/* .education section*/
+.education{
+ max-width: 1000px;
+ margin: 0 auto;
+ padding: 40px 20px;
+}
+
+.edu-card{
+ display: flex;
+ gap: 20px;
+ background: #eef2f7;
+ padding: 25px;
+ border-radius: 25px;
+ align-items: flex-start;
+ text-align: left;
+ transition: 0.3s;
+}
+.edu-card:hover{
+ transform: translateY(-5px);
+}
+
+.edu-icon{
+ width: 60px;
+ height: 60px;
+ background: linear-gradient(135deg, #6367FF, #8494FF);
+ border-radius: 15px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-size: 24px;
+}
+
+.edu-header{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.edu-date{
+ background: #e0e7ff;
+ padding: 5px 12px;
+ border-radius: 20px;
+ font-size: 14px;
+}
+
+.edu-content h4{
+ color: #3b82f6;
+ margin: 5px 0 10px;
+}
+
+.edu-content ul{
+ padding-left: 20px;
+}
+
+.edu-content li{
+ margin-bottom: 8px;
+}
+/*certifications section*/
+
+.certifications{
+ padding: 80px 20px;
+ background: #f7f9fc;
+}
+
+
+.cert-container{
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 25px;
+ margin-top: 40px;
+ justify-items: center;
+}
+
+
+.cert-card {
+ background: white;
+ padding: 25px;
+ border-radius: 20px;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+ transition: 0.3s;
+ text-align: left;
+ position: relative;
+ border-top: 4px solid #6367FF;
+ width: 100%;
+ max-width: 300px;
+
+}
+
+
+.cert-card:hover {
+ transform: translateY(-10px);
+ box-shadow: 0 15px 30px rgba(0,0,0,0.12);
+}
+
+
+
+
+.cert-card h3{
+ margin-top: 0;
+ font-size: 18px;
+ font-weight: bold;
+}
+
+
+.cert-card p{
+ color: #6b7280;
+ font-size: 14px;
+ margin: 10px 0 20px;
+}
+
+
+.cert-card a{
+ color: #2563eb;
+ text-decoration: none;
+ font-weight: 500;
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ transition: 0.3s;
+}
+
+.cert-card a:hover{
+ gap: 10px;
+ color: #1d4ed8;
+}
+
+
+.cert-card svg{
+ width: 16px;
+ height: 16px;
+}
+
+
+
+/*Get In Touch section */
+
+.connection{
+ padding: 80px 20px;
+}
+
+/* layout */
+.container-connection{
+ max-width: 1100px;
+ margin: 0 auto;
+ display: flex;
+ gap: 40px;
+ align-items: flex-start;
+}
+
+/* LEFT */
+.connect{
+ flex: 1;
+}
+
+.connect h2{
+ font-size: 28px;
+ margin-bottom: 10px;
+}
+
+.connect p{
+ color: #6b7280;
+ margin-bottom: 25px;
+}
+
+
+.list-container{
+ display: flex;
+ align-items: center;
+ gap: 15px;
+
+ background: #eef2f7;
+ padding: 20px;
+ border-radius: 20px;
+
+ margin-bottom: 15px;
+}
+
+
+.icon-connect{
+ width: 50px;
+ height: 50px;
+ background: linear-gradient(to right, #3b82f6, #2563eb);
+ color: white;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ border-radius: 15px;
+ font-size: 20px;
+}
+
+.icon-connect img{
+ height: 30px;
+ width: 30px;
+}
+
+
+.list-container span{
+ color: #6b7280;
+ font-size: 14px;
+}
+
+.list-container h4{
+ margin: 3px 0 0;
+}
+
+.contact-form{
+ flex: 1;
+ background: #eef2f7;
+ padding: 30px;
+ border-radius: 20px;
+
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.contact-form h2{
+ margin-bottom: 10px;
+}
+
+.contact-form label{
+ font-size: 14px;
+ color: #374151;
+}
+
+
+.contact-form input,
+.contact-form textarea{
+ padding: 12px;
+ border-radius: 10px;
+ border: 1px solid #ddd;
+ outline: none;
+}
+
+.contact-form textarea{
+ height: 120px;
+ resize: none;
+}
+
+/* button */
+.contact-form button{
+ margin-top: 10px;
+ padding: 14px;
+ border: none;
+ border-radius: 12px;
+
+ background: linear-gradient(to right, #3b82f6, #2563eb);
+ color: white;
+ font-size: 16px;
+ cursor: pointer;
+
+ transition: 0.3s;
+}
+
+.contact-form button:hover{
+ transform: translateY(-2px);
+ box-shadow: 0 8px 20px rgba(0,0,0,0.15);
+}
+
+.footer{
+ margin-top: 80px;
+ background:#021A54;
+ color: white;
+ padding: 40px 20px;
+ text-align: center;
+}
+
+.footer-container{
+ max-width: 1000px;
+ margin: 0 auto;
+}
+
+.footer h2{
+ margin: 0;
+ font-size: 24px;
+}
+
+.footer p{
+ margin: 10px 0 20px;
+ opacity: 0.9;
+}
+
+/* links */
+.footer-links{
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+ margin-bottom: 15px;
+}
+
+.footer-links a{
+ color: white;
+ text-decoration: none;
+ transition: 0.3s;
+}
+
+.footer-links a:hover{
+ opacity: 0.7;
+}
+
+/* social */
+.footer-social{
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+ margin-bottom: 20px;
+}
+
+.footer-social a{
+ color: white;
+ text-decoration: none;
+ transition: 0.3s;
+}
+
+.footer-social a:hover{
+ opacity: 0.7;
+}
+
+/* copy */
+.copy{
+ font-size: 12px;
+ opacity: 0.7;
+}
\ No newline at end of file
diff --git a/css/introduction/Buried Hearts.webp b/css/introduction/Buried Hearts.webp
new file mode 100644
index 0000000..91397d2
Binary files /dev/null and b/css/introduction/Buried Hearts.webp differ
diff --git a/css/introduction/Detective Conan.jpg b/css/introduction/Detective Conan.jpg
new file mode 100644
index 0000000..7c341e0
Binary files /dev/null and b/css/introduction/Detective Conan.jpg differ
diff --git a/css/introduction/My Hero Academia.jpg b/css/introduction/My Hero Academia.jpg
new file mode 100644
index 0000000..e8e7d80
Binary files /dev/null and b/css/introduction/My Hero Academia.jpg differ
diff --git a/css/introduction/Naruto.jpg b/css/introduction/Naruto.jpg
new file mode 100644
index 0000000..ae1d98e
Binary files /dev/null and b/css/introduction/Naruto.jpg differ
diff --git a/css/introduction/The Four Seasons.jpg b/css/introduction/The Four Seasons.jpg
new file mode 100644
index 0000000..30ba73f
Binary files /dev/null and b/css/introduction/The Four Seasons.jpg differ
diff --git a/css/introduction/Tunnel.jpg b/css/introduction/Tunnel.jpg
new file mode 100644
index 0000000..63a5218
Binary files /dev/null and b/css/introduction/Tunnel.jpg differ
diff --git a/css/introduction/Vagabond.jpg b/css/introduction/Vagabond.jpg
new file mode 100644
index 0000000..e349e25
Binary files /dev/null and b/css/introduction/Vagabond.jpg differ
diff --git a/css/introduction/friends.jpg b/css/introduction/friends.jpg
new file mode 100644
index 0000000..11f3fd5
Binary files /dev/null and b/css/introduction/friends.jpg differ
diff --git a/css/introduction/index.html b/css/introduction/index.html
new file mode 100644
index 0000000..b5aa92a
--- /dev/null
+++ b/css/introduction/index.html
@@ -0,0 +1,183 @@
+
+
+
+ My Favorite Series
+
+
My Favorite Series
+
This page shows some of my favorite series and my ratings.
+
+
+
One Piece
+
+ One Piece follows the story of Monkey D. Luffy, a young boy who dreams of becoming the King of the Pirates.
+ After eating a Devil Fruit that gives him rubber-like abilities, he sets out on a journey across the seas to find the legendary treasure known as "One Piece."
+ Along the way, he builds a unique crew called the Straw Hat Pirates and faces powerful enemies while experiencing adventures filled with friendship, freedom, and determination.
+
+
+
+
+
Friends
+
+ Friends is a sitcom that follows the lives of six friends living in New York City as they navigate everyday life together.
+ The show explores their relationships, funny situations, and challenges in work and love, all presented in a light and humorous way.
+ It highlights the strength of friendship and support despite their different personalities and life struggles.
+
+
+
+
+
Buried Hearts
+
Buried Hearts is a Korean drama that blends romance and mystery, focusing on characters who carry painful secrets from their past that shape their present lives.
+ The series explores complex relationships, emotional struggles, and how past decisions can deeply affect the future.
+ It highlights themes of love, loss, and sacrifice in a touching and dramatic way.
+
+
+
+
+
Naruto
+
Naruto follows the story of Naruto Uzumaki, a young ninja who dreams of becoming the Hokage, the strongest leader of his village.
+ Rejected by others because of a powerful beast sealed inside him, Naruto strives to earn respect through hard work and determination.
+ Along his journey, he forms strong friendships, faces dangerous enemies, and learns the true meaning of strength and bonds.
+
+
+
+
+
+
Vagabond
+
Vagabond is a Korean action-thriller that follows an ordinary man who uncovers a massive conspiracy after a mysterious plane crash.
+ As he searches for the truth, he becomes entangled in a dangerous world of corruption, with the help of a secret agent.
+ The series blends action, mystery, and political intrigue, showing how one person can challenge a powerful system in pursuit of justice.
+
+
+
+
+
My Hero Academia
+
My Hero Academia takes place in a world where most people have superpowers known as "Quirks."
+ The story follows Izuku Midoriya, a boy born without powers who dreams of becoming a great hero.
+ After a life-changing encounter with the greatest hero, he gets a chance to achieve his dream and enrolls in a hero academy, where he faces challenges and learns what it truly means to be a hero.
+
+
+
+
+
+
Tunnel
+
Tunnel is a Korean drama that blends crime, mystery, and time travel, following a detective chasing a serial killer who suddenly travels from the past to the present through a mysterious tunnel.
+ As he adapts to the modern world, he continues his investigation while facing major differences in technology and methods.
+ The series delivers a suspenseful story full of twists, focusing on justice, time, and how the past influences the present.
+
+
+
+
+
Detective Conan
+
Detective Conan follows Shinichi Kudo, a brilliant teenage detective who is turned into a child after a mysterious incident.
+ Under the identity of Conan Edogawa, he continues solving complex cases in secret while trying to uncover the organization behind his transformation.
+ The series combines mystery, suspense, and intelligence through a wide range of intriguing cases.
+
+
+
+
+
The Four Seasons
+
The Four Seasons is a Syrian social drama that follows the life of a Damascene family and their intertwined relationships over time.
+ The series portrays everyday life, family conflicts, and human relationships in a realistic and relatable way.
+ It highlights themes of family bonding, love, and the challenges that arise between family members in a simple yet emotional narrative.
+
+
+
My Favorite Series
+ My Favorite Series
+ This page shows some of my favorite series and my ratings.
+
+
+ One Piece
+
+ One Piece follows the story of Monkey D. Luffy, a young boy who dreams of becoming the King of the Pirates.
+ After eating a Devil Fruit that gives him rubber-like abilities, he sets out on a journey across the seas to find the legendary treasure known as "One Piece."
+ Along the way, he builds a unique crew called the Straw Hat Pirates and faces powerful enemies while experiencing adventures filled with friendship, freedom, and determination.
+ Friends
+ Friends is a sitcom that follows the lives of six friends living in New York City as they navigate everyday life together.
+ The show explores their relationships, funny situations, and challenges in work and love, all presented in a light and humorous way.
+ It highlights the strength of friendship and support despite their different personalities and life struggles.
+ Buried Hearts
+ Buried Hearts is a Korean drama that blends romance and mystery, focusing on characters who carry painful secrets from their past that shape their present lives.
+ The series explores complex relationships, emotional struggles, and how past decisions can deeply affect the future.
+ It highlights themes of love, loss, and sacrifice in a touching and dramatic way.
+ Naruto
+ Naruto follows the story of Naruto Uzumaki, a young ninja who dreams of becoming the Hokage, the strongest leader of his village.
+ Rejected by others because of a powerful beast sealed inside him, Naruto strives to earn respect through hard work and determination.
+ Along his journey, he forms strong friendships, faces dangerous enemies, and learns the true meaning of strength and bonds.
+ Vagabond
+ Vagabond is a Korean action-thriller that follows an ordinary man who uncovers a massive conspiracy after a mysterious plane crash.
+ As he searches for the truth, he becomes entangled in a dangerous world of corruption, with the help of a secret agent.
+ The series blends action, mystery, and political intrigue, showing how one person can challenge a powerful system in pursuit of justice.
+ My Hero Academia
+ My Hero Academia takes place in a world where most people have superpowers known as "Quirks."
+ The story follows Izuku Midoriya, a boy born without powers who dreams of becoming a great hero.
+ After a life-changing encounter with the greatest hero, he gets a chance to achieve his dream and enrolls in a hero academy, where he faces challenges and learns what it truly means to be a hero.
+ Tunnel
+ Tunnel is a Korean drama that blends crime, mystery, and time travel, following a detective chasing a serial killer who suddenly travels from the past to the present through a mysterious tunnel.
+ As he adapts to the modern world, he continues his investigation while facing major differences in technology and methods.
+ The series delivers a suspenseful story full of twists, focusing on justice, time, and how the past influences the present.
+ Detective Conan
+ Detective Conan follows Shinichi Kudo, a brilliant teenage detective who is turned into a child after a mysterious incident.
+ Under the identity of Conan Edogawa, he continues solving complex cases in secret while trying to uncover the organization behind his transformation.
+ The series combines mystery, suspense, and intelligence through a wide range of intriguing cases.
+ The Four Seasons
+ The Four Seasons is a Syrian social drama that follows the life of a Damascene family and their intertwined relationships over time.
+ The series portrays everyday life, family conflicts, and human relationships in a realistic and relatable way.
+ It highlights themes of family bonding, love, and the challenges that arise between family members in a simple yet emotional narrative.
+
+
\ No newline at end of file
diff --git a/html/introduction/one-piece.webp b/html/introduction/one-piece.webp
new file mode 100644
index 0000000..161670f
Binary files /dev/null and b/html/introduction/one-piece.webp differ
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+