Portfolio Landing Page - Copy this Html, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <link rel="icon" href="https://blogger.googleusercontent.com/img/a/AVvXsEjQ1DVWSS_mH_B6X4 3CJ8L RZMuBnCoAdV3rXfHF3bAF0NS9rwoIz5e6Df8685zv NIKiZHBSAfHxSfw1eATZ6u_wGla__ASYzDk KYugm0 3JMhQsOjcNmcFuyP I6RD5uEIo6ynDnbHB_kobidZgHDOjcQ1WRN E8 nGfZZZuGV5GaYPANNB2f_caQT"> <title>Mohamed Waleed</title> <script> document.addEventListener('contextmenu', function(e) { e.preventDefault(); }); </script> <style> /* Style the page */ body { font family: 'Arial', sans serif; margin: 0; padding: 0; background color: #f4f4f4; webkit user select: none; moz user select: none; ms user select: none; user select: none; } /* Style the header */ header { background color: #333; color: #fff; text align: center; padding: 1em; } /* Style the navigation bar */ nav { background color: #444; overflow: hidden; } nav a { float: left; display: block; color: white; text align: center; padding: 14px 16px; text decoration: none; } /* Style the sections */ section { padding: 20px; } /* Style the footer */ footer { background color: #333; color: #fff; text align: center; padding: 0.1em; position: fixed; bottom: 0; width: 100%; height: 40px; display: none; } /* Style the form */ contactme { margin top: 20px; text align: center; width: 80%; margin left: auto; margin right: auto; } /* Style the input container */ .input container { display: flex; flex direction: column; width: 80%; margin bottom: 16px; border radius: 10px; } /* Style the form elements */ label { display: block; margin bottom: 8px; text align: left; border radius: 10px; } input, textarea { width: 100%; padding: 8px; box sizing: border box; margin bottom: 8px; resize: vertical; border radius: 10px; } input[type="submit"] { background color: #444; color: white; cursor: pointer; border: none; padding: 10px; border radius: 5px; } input[type="submit"]:hover { background color: #333; } button { width: 100%; padding: 10px; margin: 12px 0; box sizing: border box; border radius: 5px; } button { background color: #444; color: white; border: none; cursor: pointer; } button:hover { background color: #333; } /* Style for social media icons */ .social icons { position: fixed; top: 50%; right: 20px; transform: translateY( 50%); display: flex; flex direction: column; } .social icons a { margin bottom: 10px; } .social icons img { width: 25px; height: auto; } /* Updated Experiences section */ #Experiences { display: flex; flex wrap: wrap; justify content: space around; } .experience { width: 30%; margin bottom: 20px; padding: 20px; background color: #fff; border radius: 10px; box shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .company logo { max width: 40%; border radius: 50%; overflow: hidden; } .company logo img { width: 40%; height: auto; border radius: 50%; } /* Media query for small screens */ @media only screen and (max width: 600px) { #Experiences { flex direction: column; } .experience { width: 90%; } } #loading { display: none; text align: center; } #loading img { width: 50px; height: auto; margin right: 10px; } #confirmationMessage { text align: center; } </style> </head> <body> <! Header > <header> <h1>Mohamed Waleed Kamel Mohamed</h1> <div class="social icons"> <a href="https://www.facebook.com/mohamedwaleed2017" target="_blank"><img src="https://creazilla store.fra1.digitaloceanspaces.com/icons/3233129/square facebook icon md.png" alt="Facebook"></a> <a href="https://twitter.com/NassanW" target="_blank"><img src="https://vectorseek.com/wp content/uploads/2023/07/Twitter X Logo Vector 01 2.jpg" alt="Twitter"></a> <a href="https://www.linkedin.com/in/mohamed waleed 7b8957181" target="_blank"><img src="https://www.svgrepo.com/show/144030/linkedin square logo.svg" alt="LinkedIn"></a> <a href="https://www.instagram.com/mohamed_w_nassan/" target="_blank"><img src="https://i.pinimg.com/736x/9b/a0/08/9ba0087ea405e0405cc1298338c085bb.jpg" alt="Instagram"></a> <a href="https://wa.me/+201016163211" target="_blank"><img src="https://admin.aliqtisadi.ps//public/files/image/2018/9/8%209%202018/untitled%20folder/hqdefault002211454511211.jpg" alt="Whatsapp"></a> </div> </header> <! Navigation bar > <nav> <a href="#home">Home</a> <a href="#about">About</a> <a href="#Experiences">Experiences</a> <a href="#contact">Contact</a> <a href="https://blogger.googleusercontent.com/img/a/AVvXsEh1JilXvDvhCzpHiZ oSFBAvSa843qVdUi HxpQ LXWShM_qTVxglgpHclEcaNG3hnJpO45mJaSwRqqU9lmtnhULKbfYUqeBZ9CIxCYLbOF1Klt6v9ZEF0PCKHm jjFXoelr qsIIOcrH_FKhOX3ks1IaJojnrXIjVzX77kxzeWA_Fv2SR_or2MNKt9gKYM">CV</a> </nav> <! Sections > <section id="home"> <h2>Home</h2> <p>Welcome to my personal portfolio website.</p> </section> <section id="about"> <h2>About Me</h2> <p>I am Mohamed Waleed Kamel Mohamed, a third year student in the Mechanical Power Engineering program. I have a profound passion for engineering, particularly in the field of mechanical engineering.<br> I constantly strive to learn new technologies and enhance my skills in the design and maintenance of mechanical systems. My studies encompass a wide range of subjects, enabling me to effectively engage in diverse engineering projects.<br> Aside from my academic pursuits, I enjoy participating in student activities and social projects. I believe in the importance of personal development and effective communication in building a successful professional future.<br> My goal is to become a professional mechanical engineer contributing to innovative and sustainable engineering solutions. I am dedicated to making a positive impact in the field and continuously expanding my knowledge and expertise.</p> </section> <! Updated Experiences section > <section id="about"> <h2>My Experience</h2> </section> <section id="Experiences"> <div class="experience"> <img src="https://blogger.googleusercontent.com/img/a/AVvXsEjSWOf4qeFIWxrBXilPpGoU u7QSxkal 1NMvUwaK_W3vu80BdfOJFH7s0vhvxUI63xf0V3sW_TemV6Ft9UN33sV_V6CZC_KADqGdKKMuSZKQKeh7BBue6zXJJZGayXofi TsVMjvvGJZ2vU2cSOj4J6L5cg9hH qLNwpwSDABLsQUN5OXaftTeYQHNVw9b" alt="Delta El Nile Company Logo" class="company logo"> <h3>Delta El Nile Company</h3> <p><strong>Maintenance Engineer</strong></p> <p>Jul 2023 Aug 2023 · 1 mos</p> <p>New Salhia City, Sharqia Governorate, Egypt · On site</p> <p>Skills: Maintenance and Repair</p> </div> <div class="experience"> <img src="https://blogger.googleusercontent.com/img/a/AVvXsEh oSN7kIC PpyjCvaAMiizFmNnU_Jn6CvuxZzjIw57_SSrxk7t8Xh oRv4UkFhXQJHrv Jp0uUOep206K9e GD4fZ6ZxwTHwSYSqjCbqYXRULLmPELXLC0QbAzB9bb4NNfQcouGiQK8oOte531s2tIP42dpPrH5NWjN_6VbQe19F66H2pEP2BUOq_a3mx" alt="East Delta Electricity Production Company Logo" class="company logo"> <h3>East Delta Electricity Production Company</h3> <p><strong>Engineer</strong></p> <p>Jul 2023 Aug 2023 · 1 mos</p> <p> Ismailia, Egypt · On site</p> <p>Al Shabab Compound Power Station</p> <p>Skills: Power generating stations</p> </div> <div class="experience"> <img src="https://blogger.googleusercontent.com/img/a/AVvXsEjPqNfjROipFx UI8jASvmVCcBdIEN6nCPmImVwwOJoOT J3R1MsSD5nq2zHR2vt27kDeYj8OJ425fizLBZVpT07BOhykZ6wZBgfTk3rEC82VZYP6Uii7RpN7DV9Rsqi02ymJFEB_oLOTDVaqTJa9uwxWNm0oRqdjI tBfmWoRqe2D7uO11fC54NNqztaMM" alt="El Wastani Petroleum Company(WASCO) Logo" class="company logo"> <h3>El Wastani Petroleum Company(WASCO)</h3> <p><strong>Mechanical Engineer</strong></p> <p>Jul 2024 Jul 2024 · 1 week</p> <p>Egypt · On site</p> </div> <div class="experience"> <img src="https://blogger.googleusercontent.com/img/a/AVvXsEjSWOf4qeFIWxrBXilPpGoU u7QSxkal 1NMvUwaK_W3vu80BdfOJFH7s0vhvxUI63xf0V3sW_TemV6Ft9UN33sV_V6CZC_KADqGdKKMuSZKQKeh7BBue6zXJJZGayXofi TsVMjvvGJZ2vU2cSOj4J6L5cg9hH qLNwpwSDABLsQUN5OXaftTeYQHNVw9b" alt="Delta El Nile Company Logo" class="company logo"> <h3>Delta El Nile Company</h3> <p><strong>Maintenance Engineer</strong></p> <p>Jul 2024 Jul 2024 · 1 mos</p> <p>New Salhia City, Sharqia Governorate, Egypt · On site</p> <p>Skills: Maintenance and Repair</p> </div> <div class="experience"> <img src="https://blogger.googleusercontent.com/img/a/AVvXsEiKBW0S5JXHtA2ENs16a4GM0L ETLqyuGRM0TGKry22Eo9kXT0LjmFcQyvjmpTM9rC9RVm6IzAWZvQhtKzGuyHK1UPdaNKpAuFS2X 2HDlzN3E1INZhiN2aZieN7qNmc0XexsFIEFt1901 zOf8qRSC_ LEN 7s2UkGykRd35lYkBtgAB6j4Q GbQIcuG9C" alt="Delta El Nile Company Logo" class="company logo"> <h3>Egyptian Engineers Syndicate</h3> <p><strong>Plumbing, Fire fighting and HVAC designer (MEP)</strong></p> <p>Apr 2024 Aug 2024 · 5 mos</p> <p>Alexandria Egypt · Remotee</p> <p>Skills: AutoCAD HAP Elite Pipe&Duct sizer</p> </div> </section> <! Contact Me > <section id="contact"> <h2>Contact Me</h2> <p>E mail: mohamednassan2002@gmail.com <br> Tel: +201016163211</p> <div id="loading"><img src="https://i.gifer.com/origin/34/34338d26023e5515f6cc8969aa027bca.gif" alt="Loading..." /></div> <p id="confirmationMessage"></p> <div class="contactme"> <div class="input container"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> </div> <div class="input container"> <label for="email">Email:</label> <input type="email" id="email" name="email" required> </div> <div class="input container"> <label for="message">Message:</label> <textarea id="message" name="message" rows="4" required></textarea> </div> <div class="input container"> <button type="submit" onclick="contactme()" style="font size: 16px;">Send Message</button> </div> </div> </section> <br><br><br> <! Footer > <footer id="sticky footer"> <p>© 2023 Mohamed Waleed. All rights reserved.</p> </footer> <! JavaScript > <script> function contactme() { var name = document.getElementById("name").value; var email = document.getElementById("email").value; var message = document.getElementById("message").value; if (name === "" || email === "" || message === "") { alert("Please enter the required data!"); return; } if (!email.includes("@")) { alert("Please enter a valid email address !"); return; } var loadingElement = document.getElementById("loading"); loadingElement.style.display = "block"; var postData = { name: name, email: email, message: message, }; fetch('https://script.google.com/macros/s/AKfycbxlC20wMRr9nwPfdAo5f9Vqmhohncxs0VhvXIxng_UOITMOKzk6FmUvDGjQZ UhAoEj/exec', { method: 'POST', headers: { 'Content Type': 'application/json', }, body: JSON.stringify(postData), mode: 'no cors' }) .then(response => response.text()) .then(data => { loadingElement.style.display = "none"; var messageElement = document.getElementById("confirmationMessage"); messageElement.innerHTML = "> Sending has been completed <"; document.getElementById("name").value = ""; document.getElementById("email").value = ""; document.getElementById("message").value = ""; }) .catch((error) => { loadingElement.style.display = "none"; console.error('Error:', error); }); } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js"></script> <script> window.onscroll = function () { var socialIcons = document.querySelector('.social icons'); var footer = document.querySelector('footer'); if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { socialIcons.style.opacity = '1'; footer.style.display = 'block'; } else { socialIcons.style.opacity = '1'; footer.style.display = 'none'; } }; </script> </body> </html> improve my code
