diff --git a/Vanilla-JS-Projects/Basic/Personal-Portfolio/README.md b/Vanilla-JS-Projects/Basic/Personal-Portfolio/README.md new file mode 100644 index 00000000..5d97c73a --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Personal-Portfolio/README.md @@ -0,0 +1,116 @@ +

💥 Personal-Portfolio 💥

+ + + +

Tech Stack Used 🎮

+ + +
+ + + + + + + + + + + + + + + + +
+ + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +## :zap: Description 📃 + +
+

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. +

+
+ + + + +## :zap: How to run it? 🕹️ + +

How to Run the Project

+
    +
  1. + Fork the Repository: Click the "Fork" button at the top right of this page to create a copy of this repository in your GitHub account. +
    2. +
  2. + Clone the Repository: Open your terminal or command prompt and run the following command to clone your forked repository: + 
    git clone https://github.com/your-username/your-repo-name.git
    +

    Replace your-username with your GitHub username and your-repo-name with the name of the forked repository.

    +
    3. +
  3. + Open in an IDE: Open your favorite Integrated Development Environment (IDE) such as Visual Studio Code, Atom, or any other IDE of your choice. +
    4. +
  4. + Open with Live Server: In your IDE, navigate to the cloned project folder. Right-click on the index.html file and select Open with Live Server to view your portfolio in the browser. +
    5. +
+ + + + + + +## :zap: Screenshots 📸 +
+ Portfolio Screenshot 1 +
+
+ Portfolio Screenshot 2 + Portfolio Screenshot 3 +
+
+ Portfolio Screenshot 4 +
+ + + +## :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) + + + +

Developed By Jomana Tantawy 👦

+

+ + + + + + +

+ +

Happy Coding 🧑‍💻

+ +

Show some  ❤️  by  🌟  this repository!

diff --git a/Vanilla-JS-Projects/Basic/Personal-Portfolio/index.html b/Vanilla-JS-Projects/Basic/Personal-Portfolio/index.html new file mode 100644 index 00000000..2302868d --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Personal-Portfolio/index.html @@ -0,0 +1,149 @@ + + + + + + Protolio + + + + +
+ + + +
+
+
+

Hi, It's Jomana Tantawy

+

I'm a Computer Science and Engineering undergraduate in GUC

+

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.

+ +
+ Contact me + Hire me +
+
+
+ Personal Image +
+
+ +
+
+ +
+
+

About Me

+

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. +

+ + Read More + +
+
+ +
+

Projects

+
+
+ +

Project 1

+

Project 1 description

+ +
View repository
+ +
+
+ +

Project 2

+

Project 2 description

+ +
View repository
+ +
+
+ +

Project 3

+

Project 3 description

+ +
View repository
+ +
+
+
+ +
+

Contact me

+
+
+
+ + + + +
+
+ + +
+
+
+
+ + + + + \ No newline at end of file diff --git a/Vanilla-JS-Projects/Basic/Personal-Portfolio/picture.jpg b/Vanilla-JS-Projects/Basic/Personal-Portfolio/picture.jpg new file mode 100644 index 00000000..b64a0205 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Personal-Portfolio/picture.jpg differ diff --git a/Vanilla-JS-Projects/Basic/Personal-Portfolio/project1.png b/Vanilla-JS-Projects/Basic/Personal-Portfolio/project1.png new file mode 100644 index 00000000..bf3d668a Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Personal-Portfolio/project1.png differ diff --git a/Vanilla-JS-Projects/Basic/Personal-Portfolio/project2.avif b/Vanilla-JS-Projects/Basic/Personal-Portfolio/project2.avif new file mode 100644 index 00000000..483ccca8 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Personal-Portfolio/project2.avif differ diff --git a/Vanilla-JS-Projects/Basic/Personal-Portfolio/project3.jpg b/Vanilla-JS-Projects/Basic/Personal-Portfolio/project3.jpg new file mode 100644 index 00000000..3935318e Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Personal-Portfolio/project3.jpg differ diff --git a/Vanilla-JS-Projects/Basic/Personal-Portfolio/screenshot.webp b/Vanilla-JS-Projects/Basic/Personal-Portfolio/screenshot.webp new file mode 100644 index 00000000..4a948a61 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Personal-Portfolio/screenshot.webp differ diff --git a/Vanilla-JS-Projects/Basic/Personal-Portfolio/script.js b/Vanilla-JS-Projects/Basic/Personal-Portfolio/script.js new file mode 100644 index 00000000..c587021c --- /dev/null +++ b/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"; + } +} diff --git a/Vanilla-JS-Projects/Basic/Personal-Portfolio/style.css b/Vanilla-JS-Projects/Basic/Personal-Portfolio/style.css new file mode 100644 index 00000000..000614cd --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Personal-Portfolio/style.css @@ -0,0 +1,407 @@ +html{ + scroll-behavior: smooth; + +} +body { + overflow-x: hidden; + margin: 0; + height:100%; + background-color:black; + font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-weight: bold; + +} + +.header { + position: fixed; + top: 0; + left:0; + width: 100%; + z-index: 1000; + display: flex; + align-items: center; + justify-content: center; + padding: 20px 5%; + background: rgb(0, 0, 0); + +} + +.logo { + position: absolute; + left: 5%; + top: 15px; + color: rgb(255, 255, 255); + font-size: 40px; + font-weight: bold; + font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + text-decoration: none; + cursor: pointer; + transition: 0.3s ease; +} + +.logo:hover{ + transform: scale(1.1); +} +#menu-icon{ + position: absolute; + top: 10px; + right: 12%; + font-size:3.5rem; + color:rgb(188, 4, 4); + display: none; + +} +span{ + color: rgb(203, 0, 0); +} + +.navbar { + display: flex; + gap: 4rem; +} + +::-webkit-scrollbar{ + width: 10px; + border-radius: 50%; +} +::-webkit-scrollbar-thumb{ + background-color: #d71c32; + border-radius: 20px; +} +::-webkit-scrollbar-track{ + background-color:black; +} +.navbar a { + color: rgb(255, 255, 255); + text-decoration: none; + font-size: 22px; + font-weight: 500; + font-weight: bold; + font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} + +.navbar a:hover { + color: #d71c32; + border-bottom: 2px solid #d71c32; +} + +section{ + min-height: 90vh; + padding: 4rem 10% +} +.home{ + padding-top: 10rem; + display: flex; + align-items: center; + justify-content: center; + gap:8rem; +} +.home-content{ + display: flex; + flex-direction: column; + align-items: flex-end; + text-align: left; + margin-top: -10rem; +} + +.home-content h1{ + font-size: 32px; + color: white; + margin-top: 1.5rem; + line-height:1; +} + +.home-content h3{ + font-size:25px; + margin: 1rem 0; + color: white; +} +.home-content p { + font-size: 15px; + color: white; + line-height: 1.6; +} + +.home img{ + width: 30vw; + border-radius: 50%; + box-shadow: 0 0 30px red; + transition: 0.5 ease-in-out; + margin-top: -15rem; +} +.home img:hover{ + box-shadow: 0 0 40px rgb(130, 5, 5), + 0 20px 60px rgb(130, 5, 5), + 20px 0 100px rgb(130, 5, 5); +} + +.social-icons a{ + display: inline-flex; + color: #ffffff; + justify-content: center; + margin: 3rem 0.5rem; + align-items: center; + font-size: 20px; + padding: 13px; + background: transparent; + border: 2px solid rgb(130, 5, 5); + border-radius: 50%; + transition: 0.3s ease; + text-decoration: none; +} + +.social-icons a:hover{ + color: red; + transform: scale(1.1)translateY(-3px); + box-shadow: 0 0 30px rgb(130, 5, 5); +} + +.buttons{ + display: flex; + gap: 1.5rem; + justify-content: center; + width: 100%; +} + +.button{ + display: inline-block; + background: black ; + box-shadow: 0 0 10px rgb(188, 4, 4); + border-radius: 4rem; + padding: 0.5rem 2rem; + font-size: 18px; + color: white; + border: 2px solid rgb(167, 1, 21); + transition: 0.3s ease; + text-decoration: none; +} + +.button:hover{ + transform: scale(1.03); + background:#2e0005; + box-shadow: 0 0 30px rgb(130, 5, 5); +} + +.about{ + color:white; + display: flex; + justify-content: flex-start; + gap: 10rem 5%; + align-items: center; + background-color:rgb(24, 0, 0); +} + +.about-image img{ + width: 25vw; + border-radius: 50%; + box-shadow: 0 0 25px rgb(130, 5, 5); + transition: 0.3 ease-in-out; +} +.about-image img:hover{ + box-shadow: -10px 0 30px rgb(130, 5, 5), + -15px 0 35px rgb(130, 5, 5), + -20px 0 40px rgb(130, 5, 5); +} + +.about-content h2{ + font-size: 32px; + text-align: left; +} +.about-content p{ + font-size: 15px; + color: white; + line-height: 1.4; +} + +.about-content button{ + margin: 3rem 0; +} + +.projects{ + background-color:rgb(0, 0, 0); +} + +.projects-box{ + display: grid; + grid-template-rows: repeat(auto-fit,minmax(200,1fr)); + place-items:center; + gap: 3rem; + row-gap: 5rem +} +.card{ + display: flex; + flex-direction: column; + align-items: center; + background-color: black; + border: 2px solid rgb(130, 5, 5); + border-radius: 4rem; + gap: 1rem; + padding: 3rem 2rem; + overflow: hidden; +} +.projects p{ + color: white; + font-size: 15px; + text-align: center; +} +.projects img{ + width: 100%; + max-width: 1000px; + height: auto; + +} +.projects h2{ + color: white; + font-size: 32px; + width: 100%; + text-align: center; + padding-block: 30px; +} +.projects h3{ + color: white; + font-size: 25px; +} + +.projects p{ + font-size: 18px; +} + +.contact{ + background-color:rgb(24, 0, 0); + margin-bottom: -50px; +} +.contact h2{ + text-align: center; + margin-bottom: 2rem; + color: white; + font-size: 32px; +} +.contact form{ + + display: flex; + gap:1rem; + margin:2rem 0; + text-align: center; + align-items: center; + justify-content: center; +} +.contact form button{ + width: auto; +} +.contact form .input-box input, +.contact form textarea { + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + width: 50%; + padding: 1rem; + font-size: 18px; + color: rgb(255, 255, 255); + background-color: rgb(24, 0, 0); + border-radius: 2rem; + border: 2px solid rgb(130, 5, 5); + margin: 1rem 0; + resize: none; +} + +.footer{ + background-color: black; + padding: 50px 0; + margin-top: auto; +} + +.footer .social-icons{ + text-align: center; +} +.footer ul{ + + text-align: center; + font-size: 20px; + margin-left: -40px; +} +.footer ul li{ + display: inline-block; + margin-left: 10px; + +} +.footer ul li a{ + border-bottom: 2px solid transparent; + transition: 0.3s ease-in-out; + text-decoration: none; + color: white; +} + +.footer ul li a:hover{ + border-bottom: 2px solid #d71c32; +} + +.footer .copyright{ + text-align: center; + margin-top:4px; + font-size: 10px; + color: #a7a7a7; + font-family:'Times New Roman', Times, serif; + font-weight: 200; +} + +@media(max-width:1024px){ + #menu-icon{ + display: block; + } + .header{ + height: 20px + } + .navbar{ + border-bottom: 2px solid rgb(130, 5, 5); + border-bottom-left-radius: 2rem; + position: absolute; + top:100%; + right:0; + width:50%; + padding: 1rem 1rem; + background-color: rgb(130, 5, 5); + border-left: 2px solid rgb(130, 5, 5); + display: none; + } + .navbar a{ + display: block; + font-size: 1.5rem; + margin: 3rem 0; + color: white; + + } + .navbar a:hover{ + border-bottom: transparent; + } + .navbar.active{ + display: block; + } + .home{ + flex-direction: column-reverse; + margin: 14rem 0; + gap: 10rem; + } + .home-content{ + align-items: center; + text-align: center; + } + .home img{ + width: 50vw; + } + .about{ + flex-direction: column-reverse; + text-align: center; + } + .about h2{ + text-align: center; + margin: 2rem 0; + + } + .about img{ + width:52vw; + } + .projects{ + + } + .contact form{ + flex-direction: column; + } +} \ No newline at end of file diff --git a/Vanilla-JS-Projects/README.md b/Vanilla-JS-Projects/README.md index cd6106c8..096252e2 100644 --- a/Vanilla-JS-Projects/README.md +++ b/Vanilla-JS-Projects/README.md @@ -121,9 +121,11 @@ | 94 | [Movie-App](./Intermediate/Movie-App/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | | 95 | [Meme-Creator](./Intermediate/Meme-Creator/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | | 96 | [Github-Profile-Viewer](./Intermediate/Github-Profile-Viewer/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | -| 97 | [Qr-Code-Generator](./Basic/Qr-Code-Generator/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | -| 98 | [Amazon-Clone](./Intermediate/Amazon-Clone/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | -| 99 | [Travel-App](./Basic/Travel-App/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | +| 97 | [Qr-Code-Generator](./Basic/Qr-Code-Generator/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | +| 98 | [Amazon-Clone](./Intermediate/Amazon-Clone/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | +| 99 | [Travel-App](./Basic/Travel-App/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | +| 100 | [Personal Portfolio](./Basic/Personal-Portfolio/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | +