Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>John Doe | Portfolio</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6OPTAhW3z8h6sEHuJIW+jozS3dBmVvzqJlL/t49giMAe7qT8yWHH2ePywxAwGnU1zZz8wEjWvmhsQ05O3Q8w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> | |
| <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0vznvYBk4//SYzxbv4RDs09cLt7qVCJStxv4b89lZcW" crossorigin="anonymous"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <nav class="navbar navbar-expand-lg navbar-light bg-transparent fixed-top"> | |
| <div class="container-fluid"> | |
| <a class="navbar-brand" href="#home">John Doe</a> | |
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | |
| <span class="navbar-toggler-icon"></span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="navbarSupportedContent"> | |
| <ul class="navbar-nav ms-auto"> <li class="nav-item"> | |
| <a class="nav-link active" aria-current="page" href="#home">Home</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#about">About</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#skills">Skills</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#portfolio">Portfolio</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#contact">Contact</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="hero d-flex flex-column justify-content-center align-items-center" id="home"> | |
| <img src="https://thumbs.dreamstime.com/b/default-avatar-profile-image-vector-social-media-user-icon-potrait-182347582.jpg" alt="Profile Photo" class="rounded-circle profile-img mb-3"> | |
| <h1>John Doe</h1> | |
| <p>Web Developer & Designer</p> | |
| <a href="#about" class="btn btn-primary mt-3">Learn More</a> | |
| </div> | |
| </header> | |
| <main class="content"> | |
| <section class="about" id="about"> | |
| <div class="container"> | |
| <h2>About Me</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed urna leo. In id leo in risus ullamcorper porta. Vivamus vel nisl ac augue tincidunt laoreet nec eget massa. Donec vitae leo at nibh rutrum faucibus. Nam sed vestibulum elit. Nulla eget mauris eu libero rhoncus aliquam. Fusce vitae magna eu elit placerat aliquam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Aenean eu | |
| <p>I am a passionate and creative individual with a strong background in web development and design. I have 5 years of experience in building user-friendly and responsive websites, and I am proficient in various technologies including HTML, CSS, JavaScript, and Bootstrap. I am always eager to learn new things and expand my skillset, and I am highly motivated to contribute my knowledge and abilities to challenging and rewarding projects.</p> | |
| <p>In my free time, I enjoy playing basketball and learning new programming languages. These activities allow me to stay active, challenge myself, and enhance my problem-solving skills.</p> | |
| </div> | |
| </section> | |
| <section class="skills" id="skills"> | |
| <div class="container"> | |
| <h2>Skills</h2> | |
| <div class="row row-cols-1 row-cols-md-2 g-4"> | |
| <div class="col"> | |
| <div class="skill-card"> | |
| <svg class="custom-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> | |
| </svg> | |
| <h3>Technical Skills</h3> | |
| <ul class="skills-list"> | |
| <li>HTML & CSS: <div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div></li> | |
| <li>JavaScript: <div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div></li> | |
| <li>Bootstrap</li> | |
| <li>Python (Basic)</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="skill-card"> | |
| <svg class="custom-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> | |
| </svg> | |
| <h3>Soft Skills</h3> | |
| <ul class="skills-list"> | |
| <li>Teamwork</li> | |
| <li>Time Management</li> | |
| <li>Communication</li> | |
| <li>Problem Solving</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="portfolio" id="portfolio"> | |
| <div class="container"> | |
| <h2>Portfolio</h2> | |
| <div class="row g-4 portfolio-grid"> <div class="col-md-6 portfolio-item"> | |
| <div class="card h-100 shadow-sm overflow-hidden"> <img src="images/project-1.jpg" class="card-img-top" alt="Project 1"> | |
| <div class="card-body d-flex flex-column justify-content-between"> <h5 class="card-title">E-commerce Website</h5> | |
| <p class="card-text">A user-friendly e-commerce website built with HTML, CSS, JavaScript, and Bootstrap.</p> | |
| <a href="#" class="btn btn-primary mt-auto">View Details</a> </div> | |
| </div> | |
| </div> | |
| <div class="col-md-6 portfolio-item"> | |
| <div class="card h-100 shadow-sm overflow-hidden"> | |
| <img src="images/project-2.jpg" class="card-img-top" alt="Project 2"> | |
| <div class="card-body d-flex flex-column justify-content-between"> | |
| <h5 class="card-title">Personal Portfolio Website</h5> | |
| <p class="card-text">A responsive personal portfolio website showcasing my skills and experience.</p> | |
| <a href="#" class="btn btn-primary mt-auto">View Details</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="education" id="education"> | |
| <div class="container"> | |
| <h2>Education</h2> | |
| <div class="timeline"> | |
| <div class="timeline-item"> | |
| <div class="timeline-badge"><i class="fas fa-graduation-cap"></i></div> | |
| <div class="timeline-content"> | |
| <h3>Bachelor of Science in Computer Science</h3> | |
| <p>University Name, City, State - Graduation Year</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="contact-details" id="contact-details"> | |
| <div class="container"> | |
| <h2>Contact Details</h2> | |
| <p>Get in touch with me using the following information:</p> | |
| <ul class="list-unstyled"> | |
| <li><i class="fas fa-envelope me-2"></i><a href="mailto:[email protected]">[email protected]</a></li> | |
| </ul> | |
| </div> | |
| </section> | |
| <section class="contact" id="contact"> | |
| <div class="container"> | |
| <h2>Contact Me</h2> | |
| <p>I am always open to new opportunities and collaborations. Feel free to reach out to me using the form below or by any of the methods listed.</p> | |
| <form id="contact-form"> | |
| <div class="mb-3"> | |
| <label for="name" class="form-label">Your Name</label> | |
| <input type="text" class="form-control" id="name" required> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="email" class="form-label">Email Address</label> | |
| <input type="email" class="form-control" id="email" required> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="message" class="form-label">Message</label> | |
| <textarea class="form-control" id="message" rows="3" required></textarea> | |
| </div> | |
| <button type="submit" class="btn btn-primary rounded-pill">Send Message</button> | |
| </form> | |
| <div class="social-media d-flex justify-content-center mt-5"> | |
| <a href="#" class="social-link mx-3 text-secondary"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="social-link mx-3 text-secondary"><i class="fab fa-github"></i></a> | |
| <a href="#" class="social-link mx-3 text-secondary"><i class="fab fa-twitter"></i></a> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="footer"> | |
| <div class="container text-center"> | |
| <p>© 2024 John Doe. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> | |