test separate pages draft

youssefhass · Sep 29, 2024 · 584e145 · 584e145
1 parent 9931cae
commit 584e145
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 139 deletions.
diff --git a/about.html b/about.html
@@ -1,37 +1,20 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Portfolio - About Me</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-    <!-- Header and Navigation -->
-    <header>
-        <h1>Welcome to My Portfolio</h1>
-    </header>
-    <nav>
-        <a href="index.html">Home 🏠</a>
-        <a href="about.html">About Me 🎓</a>
-        <a href="skills.html">Skills 💻</a>
-        <a href="projects.html">Projects 🚀</a>
-        <a href="blog.html">Blog ✍️</a>
-        <a href="contact.html">Contact ✉️</a>
-    </nav>
-
-    <main>
-        <section class="section">
-            <h2>About Me 🎓</h2>
-            <p>My journey into data engineering started with a fascination for data analysis and problem-solving. I enjoy turning raw data into actionable insights.</p>
-        </section>
-    </main>
-
-    <!-- Footer -->
-    <footer>
-        <p>Connect with me:</p>
-        <a href="https://github.com/youssefhass" target="_blank">GitHub</a>
-        <a href="https://www.linkedin.com/in/youssefhass" target="_blank">LinkedIn</a>
-    </footer>
-</body>
-</html>
+<section id="about" class="section">
+    <h2>About Me 🎓</h2>
+    <p>
+        I am Youssef Hassan, a dedicated Data Engineer with a passion for automating data solutions and building efficient data pipelines. 
+        With a strong foundation in Python, SQL, and Powershell, I specialise in leveraging cloud technologies like AWS, Azure, and Databricks 
+        to optimise data processing and storage solutions.
+    </p>
+    <p>
+        My professional journey includes significant experience in migrating to Databricks at the Department for Education and optimising cloud infrastructure 
+        at IDenteq Ltd using AWS services. I'm deeply involved in digital transformation initiatives, ensuring organisations can make data-driven decisions.
+    </p>
+    <p>
+        Holding an MSc in Data Analytics from Northumbria University, I continuously seek innovative ways to solve complex problems 
+        and improve the efficiency of data operations.
+    </p>
+    <p>
+        When I’m not working, I am exploring new trends in #BigData, #CloudComputing, and #DigitalTransformation. I love collaborating with teams and 
+        stakeholders to drive innovation.
+    </p>
+</section>
diff --git a/blog.html b/blog.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Portfolio - Blog</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <!-- Header and Navigation -->
+    <header>
+        <h1>Welcome to My Portfolio</h1>
+    </header>
+    <nav>
+        <a href="index.html">Home 🏠</a>
+        <a href="about.html">About Me
diff --git a/footer.html b/footer.html
@@ -0,0 +1,5 @@
+<footer>
+    <p>Connect with me:</p>
+    <a href="https://github.com/youssefhass" target="_blank">GitHub</a>
+    <a href="https://www.linkedin.com/in/youssefhass" target="_blank">LinkedIn</a>
+</footer>
diff --git a/header.html b/header.html
@@ -0,0 +1,11 @@
+<header>
+    <h1>Welcome to My Portfolio</h1>
+</header>
+<nav>
+    <a href="index.html">Home 🏠</a>
+    <a href="about.html">About Me 🎓</a>
+    <a href="skills.html">Skills 💻</a>
+    <a href="projects.html">Projects 🚀</a>
+    <a href="blog.html">Blog ✍️</a>
+    <a href="contact.html">Contact ✉️</a>
+</nav>
diff --git a/index.html b/index.html
@@ -3,120 +3,31 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Portfolio</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            background-color: #f4f4f4;
-        }
-        header {
-            background-color: #333;
-            color: #fff;
-            padding: 1rem 0;
-            text-align: center;
-        }
-        nav {
-            display: flex;
-            justify-content: center;
-            background-color: #444;
-        }
-        nav a {
-            color: #fff;
-            padding: 1rem;
-            text-decoration: none;
-        }
-        nav a:hover {
-            background-color: #555;
-        }
-        main {
-            padding: 2rem;
-        }
-        .section {
-            margin-bottom: 2rem;
-        }
-        .post, .project, .skill {
-            background-color: #fff;
-            margin: 1rem 0;
-            padding: 1rem;
-            border-radius: 5px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        }
-        footer {
-            text-align: center;
-            padding: 1rem 0;
-            background-color: #333;
-            color: #fff;
-        }
-        footer a {
-            color: #fff;
-            text-decoration: none;
-            margin: 0 1rem;
-        }
-        footer a:hover {
-            text-decoration: underline;
-        }
-    </style>
+    <title>My Portfolio - Home</title>
+    <link rel="stylesheet" href="style.css">
 </head>
 <body>
+    <!-- Include the header and navigation -->
     <header>
         <h1>Welcome to My Portfolio</h1>
     </header>
     <nav>
-        <a href="#home">Home 🏠</a>
-        <a href="#about">About Me</a>
-        <a href="#skills">Skills</a>
-        <a href="#projects">Projects</a>
-        <a href="#blog">Blog</a>
-        <a href="#contact">Contact</a>
+        <a href="index.html">Home 🏠</a>
+        <a href="about.html">About Me 🎓</a>
+        <a href="skills.html">Skills 💻</a>
+        <a href="projects.html">Projects 🚀</a>
+        <a href="blog.html">Blog ✍️</a>
+        <a href="contact.html">Contact ✉️</a>
     </nav>
+
     <main>
-        <section id="home" class="section">
+        <section class="section">
             <h2>Hello World 👋</h2>
             <p>I am a passionate data engineer with experience in building scalable data pipelines and working with big data technologies. Stay tuned for more!</p>
         </section>
-        <section id="about" class="section">
-            <h2>About Me</h2>
-            <p>My journey into data engineering started with a fascination for data analysis and problem-solving. I enjoy turning raw data into actionable insights.</p>
-        </section>
-        <section id="skills" class="section">
-            <h2>Skills</h2>
-            <div class="skill"><strong>Programming Languages:</strong> Python, SQL, Java</div>
-            <div class="skill"><strong>Data Technologies:</strong> Hadoop, Spark, Kafka, Airflow</div>
-            <div class="skill"><strong>Cloud Platforms:</strong> AWS, Azure</div>
-            <div class="skill"><strong>Tools:</strong> Git, Docker, Jupyter</div>
-        </section>
-        <section id="projects" class="section">
-            <h2>Projects</h2>
-            <div class="project">
-                <h3><a href="https://github.com/youssefhass/project1">Project 1</a></h3>
-                <p>Short description of Project 1, technologies used, and its purpose.</p>
-            </div>
-            <div class="project">
-                <h3><a href="https://github.com/youssefhass/project2">Project 2</a></h3>
-                <p>Short description of Project 2, technologies used, and its purpose.</p>
-            </div>
-            <!-- Add more projects as needed -->
-        </section>
-        <section id="blog" class="section">
-            <h2>Blog</h2>
-            <p>Coming soon! Stay tuned for my thoughts on data engineering, tutorials, and insights.</p>
-        </section>
-        <section id="contact" class="section">
-            <h2>Contact</h2>
-            <p>If you'd like to get in touch, feel free to reach out!</p>
-            <form action="#" method="post">
-                <label for="name">Name:</label><br>
-                <input type="text" id="name" name="name" required><br>
-                <label for="email">Email:</label><br>
-                <input type="email" id="email" name="email" required><br>
-                <label for="message">Message:</label><br>
-                <textarea id="message" name="message" required></textarea><br>
-                <input type="submit" value="Send">
-            </form>
-        </section>
     </main>
+
+    <!-- Include the footer -->
     <footer>
         <p>Connect with me:</p>
         <a href="https://github.com/youssefhass" target="_blank">GitHub</a>

diff --git a/projects.html b/projects.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Portfolio - Projects</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <!-- Header and Navigation -->
+    <header>
+        <h1>Welcome to My Portfolio</h1>
+    </header>
+    <nav>
+        <a href="index.html">Home 🏠</a>
+        <a href="about.html">About Me 🎓</a>
+        <a href="skills.html">Skills 💻</a>
+        <a href="projects.html">Projects 🚀</a>
+        <a href="blog.html">Blog ✍️</a>
+        <a href="contact.html">Contact ✉️</a>
+    </nav>
+
+    <main>
+        <section class="section">
+            <h2>Projects 🚀</h2>
+            <div class="project">
+                <h3><a href="https://github.com/youssefhass/project1">Project 1</a></h3>
+                <p>Short description of Project 1, technologies used, and its purpose.</p>
+            </div>
+            <div class="project">
+                <h3><a href="https://github.com/youssefhass/project2">Project 2</a></h3>
+                <p>Short description of Project 2, technologies used, and its purpose.</p>
+            </div>
+        </section>
+    </main>
+
+    <!-- Footer -->
+    <footer>
+        <p>Connect with me:</p>
+        <a href="https://github.com/youssefhass" target="_blank">GitHub</a>
+        <a href="https://www.linkedin.com/in/youssefhass" target="_blank">LinkedIn</a>
+    </footer>
+</body>
+</html>
diff --git a/skills.html b/skills.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Portfolio - Skills</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <!-- Header and Navigation -->
+    <header>
+        <h1>Welcome to My Portfolio</h1>
+    </header>
+    <nav>
+        <a href="index.html">Home 🏠</a>
+        <a href="about.html">About Me 🎓</a>
+        <a href="skills.html">Skills 💻</a>
+        <a href="projects.html">Projects 🚀</a>
+        <a href="blog.html">Blog ✍️</a>
+        <a href="contact.html">Contact ✉️</a>
+    </nav>
+
+    <main>
+        <section class="section">
+            <h2>Skills 💻</h2>
+            <div class="skill"><strong>Programming Languages:</strong> Python, SQL, Java</div>
+            <div class="skill"><strong>Data Technologies:</strong> Hadoop, Spark, Kafka, Airflow 📊</div>
+            <div class="skill"><strong>Cloud Platforms:</strong> AWS, Azure ☁️</div>
+            <div class="skill"><strong>Tools:</strong> Git, Docker, Jupyter 🛠️</div>
+        </section>
+    </main>
+
+    <!-- Footer -->
+    <footer>
+        <p>Connect with me:</p>
+        <a href="https://github.com/youssefhass" target="_blank">GitHub</a>
+        <a href="https://www.linkedin.com/in/youssefhass" target="_blank">LinkedIn</a>
+    </footer>
+</body>
+</html>