Added Personal portfolio to Vanilla-Js

Vanilla-JS-Projects/Basic/Personal-Portfolio/README.md

@@ -0,0 +1,116 @@
+<h1 align='center'><b>💥 Personal-Portfolio 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<ul>
+    <li><strong>HTML</strong>: Structure and content of the web pages.</li>
+    <li><strong>CSS</strong>: Styling and layout of the web pages.</li>
+    <li><strong>Vanilla JavaScript</strong>: Interactive functionalities and DOM manipulation.</li>
+</ul>
+
+<div align='center'>
+
+  <!-- ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) -->
+  <!-- ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) -->
+  <!-- ![Bootstrap](https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge&logo=bootstrap&logoColor=white) -->
+  <!-- ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) -->
+  <!-- ![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) -->
+  <!-- ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) -->
+  <!-- ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) -->
+  <!-- ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) -->
+  <!-- ![Web3.js](https://img.shields.io/badge/web3.js-F16822?style=for-the-badge&logo=web3.js&logoColor=white) -->
+  <!-- ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB) -->
+  <!-- ![Angular.js](https://img.shields.io/badge/angular.js-%23E23237.svg?style=for-the-badge&logo=angularjs&logoColor=white) -->
+  <!-- ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) -->
+  <!-- ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) -->
+  <!-- ![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D) -->
+  <!-- ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white) -->
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+    <p>Welcome to my Personal Portfolio! This project showcases a beautifully designed and fully responsive portfolio template that anyone can utilize to display their work, skills, and experiences. Built with clean HTML, CSS, and Vanilla JavaScript, this portfolio provides a solid foundation for individuals looking to present themselves professionally online.
+    <ul>
+      <li>Responsive Design: The layout automatically adjusts to different screen sizes, ensuring a seamless experience on desktops, tablets, and smartphones. This makes it easy for users to navigate through the portfolio regardless of their device.</li>
+      <li>Aesthetic Styling: The portfolio is styled with a modern and elegant aesthetic, utilizing gradients, animations, and hover effects to create an engaging user experience. Users can easily customize colors, fonts, and styles to match their personal brand.</li>
+      <li>Customizable Content: Users can easily edit the text content throughout the portfolio to reflect their personal information, experiences, and skills. This project is designed to be user-friendly, allowing individuals to make adjustments without needing extensive coding knowledge.</li>
+      <li>Hyperlinks and Demos: The project includes sample hyperlinks to various sections such as "Projects," and "Social media". Users can replace these links with their own projects, social media profiles, or any other relevant websites. This flexibility allows each user to tailor the portfolio to their unique journey.</li>
+    </ul></p>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<h2>How to Run the Project</h2>
+<ol>
+    <li>
+        <strong>Fork the Repository:</strong> Click the "Fork" button at the top right of this page to create a copy of this repository in your GitHub account.
+    </li>
+    <li>
+        <strong>Clone the Repository:</strong> Open your terminal or command prompt and run the following command to clone your forked repository:
+        <pre><code>git clone https://github.com/your-username/your-repo-name.git</code></pre>
+        <p>Replace <code>your-username</code> with your GitHub username and <code>your-repo-name</code> with the name of the forked repository.</p>
+    </li>
+    <li>
+        <strong>Open in an IDE:</strong> Open your favorite Integrated Development Environment (IDE) such as Visual Studio Code, Atom, or any other IDE of your choice.
+    </li>
+    <li>
+        <strong>Open with Live Server:</strong> In your IDE, navigate to the cloned project folder. Right-click on the <code>index.html</code> file and select <strong>Open with Live Server</strong> to view your portfolio in the browser.
+    </li>
+</ol>
+
+
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<div style="text-align: center;">
+    <img src="https://github.com/user-attachments/assets/a915b3cb-26f5-443f-99de-3fee2f6fc9da" alt="Portfolio Screenshot 1" width="70%"> 
+</div>
+<div style="text-align: center;">
+  <img src="https://github.com/user-attachments/assets/f8d3a0ed-d09e-4831-91bf-46c57615c503" alt="Portfolio Screenshot 2" width="35%">
+    <img src="https://github.com/user-attachments/assets/12fabdc8-967a-418b-bc11-518cfbf59da3" alt="Portfolio Screenshot 3" width="35%">
+</div>
+<div style="text-align: center;">
+   <img src="https://github.com/user-attachments/assets/3ac7ea96-f764-494f-bfd3-dfd882766c09" alt="Portfolio Screenshot 4" width="70%">
+</div>
+
+
+
+## :zap: Working Video 📹
+https://github.com/user-attachments/assets/cd85b1fc-2664-4c62-812f-3fc427a7027f
+
+
+
+
+
+
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Jomana Tantawy</i></b> 👦</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/jomana-tantawy-b516b0315'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/JomanaMahmoud'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>

Vanilla-JS-Projects/Basic/Personal-Portfolio/index.html

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport content="width=device-width,initial-scale=1.0">
+    <title>Protolio</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet">
+  </head>
+  <body>
+    <header class="header">
+      <a href="index.html" class="logo"><span>P</span>ortfolio</a>
+      <i class="bx bx-menu" id="menu-icon"></i>
+      <nav class="navbar">
+         <a href="#home">Home</a>
+         <a href="#about">About</a>
+         <a href="#projects">Projects</a>
+         <a href="#contact">Contact</a>
+       </nav>
+    </header>
+    <section class="home" id="home">
+        <div class="home-content">
+            <h1>Hi, It's <span>Jomana</span> Tantawy</h1>
+            <h3>I'm a <span>Computer Science and Engineering</span> undergraduate in <span>GUC</span></h3>
+            <p>I am a Computer Science and Engineering student at The German University in Cairo, focused on software development and programming. I have a strong background in Java, Python, SQL, and various frameworks. I enjoy creating innovative solutions and have experience building dynamic applications and contributing to open-source projects. I love taking on challenges and want to use my skills to create software that makes a difference.</p>
+            <div class="social-icons">
+                <a href="https://www.linkedin.com">
+                    <i class="bx bxl-linkedin-square"></i>
+                </a>
+                <a href="https://github.com/JomanaMahmoud">
+                    <i class="bx bxl-github"></i>
+                </a>
+                <a href="https://x.com">
+                    <i class="bx bxl-twitter"></i>
+                </a>
+                <a href="https://www.instagram.com">
+                    <i class="bx bxl-instagram-alt"></i>
+                </a>
+            </div>
+            <div class="buttons">
+                <a href="#contact" class="button">Contact me</a>
+                <a href="#contact" class="button">Hire me</a>
+            </div>
+        </div>
+        <div class="img">
+            <img src="picture.jpg" alt="Personal Image">
+        </div>
+    </section>
+
+    <section class="about" id="about">
+        <div class="about-image">
+            <img src="picture.jpg" alt="">
+        </div>
+        <div class="about-content">
+            <h2>About <span>Me</span></h2>
+            <p>I’m currently a 5th-semester Computer Science and Engineering student at The German University in Cairo, with a deep passion for problem-solving and innovative software development. Over the past few years, I've honed my skills in Java, Python, and SQL, among other languages and frameworks, through various projects and coursework.
+
+                I’ve built dynamic applications, contributed to open-source projects, and explored different areas of software engineering, such as mobile app development, game design, and system simulations. These experiences have not only strengthened my technical skills but also fueled my curiosity and passion for creating impactful software.
+
+                Beyond coding, I enjoy collaborating with others, learning new technologies, and taking on challenges that push me to grow as a developer. My goal is to continue expanding my knowledge and contribute to projects that bring real-world solutions to everyday problems.
+            </p>
+            <p id="more-content" style="display: none;">Outside of work, I enjoy watching Harry Potter movies, getting lost in the magical world of Hogwarts. I also like watching Turkish series, appreciating the rich storytelling and cultural nuances. When I'm not on screen, I find peace in crocheting, creating handmade items and experimenting with different patterns.
+            </p>
+            <a href="javascript:void(0);" onclick="showMore();" class="button">Read More</a>
+
+        </div>
+    </section>
+
+    <section class="projects" id="projects">
+        <h2 class="heading">Projects</h2>
+        <div class="projects-box">
+            <div class="card">
+            <img src="project1.png" alt="">
+            <h3>Project 1</h3>
+            <p>Project 1 description</p>
+            <a href="https://github.com/JomanaMahmoud/">
+                 <div class="button">View repository</div>
+            </a>
+            </div>
+            <div class="card">
+                <img src="project2.avif" alt="">
+                <h3>Project 2</h3>
+                <p>Project 2 description</p>
+                <a href="https://github.com/JomanaMahmoud/">
+                    <div class="button">View repository</div>
+                </a>
+            </div> 
+            <div class="card">
+                <img src="project3.jpg" alt="">
+                <h3>Project 3</h3>
+                <p>Project 3 description</p>
+                <a href="https://github.com/JomanaMahmoud/">
+                   <div class="button">View repository</div>
+                </a>
+            </div> 
+        </div> 
+    </section>
+
+    <section class="contact" id="contact">
+        <h2 class="heading">Contact <span>me</span> </h2>
+        <form action="">
+            <div class="input-box">
+                <div class="input">
+                    <input type="text" placeholder="First Name">
+                    <input type="text" placeholder="Last Name">
+                    <input type="text" placeholder="Email">
+                    <input type="text" placeholder="Subject"> 
+                </div>
+                <div class="input">
+                    <textarea name="" id="" cols="30" rows="10" placeholder="Your Message"></textarea>
+                    <input type="submit" value="Send Message" class="button">
+                </div>
+            </div>
+        </form>
+    </section>
+
+    <footer class="footer">
+        <div class="social-icons">
+            <a href="https://www.linkedin.com">
+                <i class="bx bxl-linkedin-square"></i>
+            </a>
+            <a href="https://github.com/JomanaMahmoud">
+                <i class="bx bxl-github"></i>
+            </a>
+            <a href="https://x.com">
+                <i class="bx bxl-twitter"></i>
+            </a>
+            <a href="https://www.instagram.com">
+                <i class="bx bxl-instagram-alt"></i>
+            </a>
+        </div>
+        <ul class="list">
+            <li>
+                <a href="#projects">Projects</a>
+            </li>
+            <li>
+                <a href="#about">About</a>
+            </li>
+            <li>
+                <a href="#contact">Contact me</a>
+            </li>
+        </ul>
+        <p class="copyright">
+            &copy; 2024 Jomana Tantawy. All rights reserved.
+        </p>
+    </footer>
+    <script src="script.js"></script>
+  </body>
+</html>

Vanilla-JS-Projects/Basic/Personal-Portfolio/script.js

@@ -0,0 +1,16 @@
+const menuIcon = document.querySelector('#menu-icon');
+const navbar = document.querySelector('.navbar');
+
+menuIcon.onclick = () =>{
+    menuIcon.classList.toggle('bx-x');
+    navbar.classList.toggle('active');
+}
+
+function showMore() {
+    var moreContent = document.getElementById("more-content");
+    if (moreContent.style.display === "none") {
+        moreContent.style.display = "block";
+    } else {
+        moreContent.style.display = "none";
+    }
+}