Spaces:

JAYASWAROOP
/

portfolio1

Running

File size: 9,502 Bytes

<!DOCTYPE html>
<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" />
  <link rel="stylesheet" href="style.css"> </head>
  <style>
    body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.header {
  background-color: #fff;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

.navbar {
  padding: 1rem 2rem;
}

.hero {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("images/background.jpg"); /* Replace with your background image */
  background-size: cover;
  background-attachment: fixed;
  color: #fff;
}

.about, .skills, .portfolio, .contact {
  padding: 5rem 0;
}

.skill-card {
  background-color: #f5f5f5;
  padding: 2rem;
  border-radius: 5px;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.skill-card:hover {
  transform: scale(1.05);
}

.portfolio-item {
  margin-bottom: 2rem;
}

.footer {
  background-color: #f2f2f2;
  padding: 1rem 0;
}

.social-link {
  margin-right: 1rem;
  font-size: 1.2
}

.nav-link {
  color: #333;
  transition: all 0.3s ease-in-out;
}

.nav-link:hover {
  color: #007bff;
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .col-md-6 {
    width: 100%;
  }
}


.social-link i {
  font-size: 1.5rem;
  color: #333;
  transition: all 0.3s ease-in-out;
}

.social-link:hover i {
  color: #007bff;
}

.footer {
  padding: 20px;
  background-color: #f5f5f5;
}

  </style>
<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 mb-2 mb-lg-0">
            <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="images/profile.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">
              <i class="fas fa-code"></i>
              <h3>Technical Skills</h3>
              <ul class="skills-list">
                <li>HTML & CSS</li>
                <li>JavaScript</li>
                <li>Bootstrap</li>
                <li>Python (Basic)</li>
              </ul>
            </div>
          </div>
          <div class="col">
            <div class="skill-card">
              <i class="fas fa-handshake"></i>
              <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">
          <div class="col-md-6 portfolio-item">
            <div class="card h-100">
              <img src="images/project-1.jpg" class="card-img-top" alt="Project 1">
              <div class="card-body">
                <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">View Details</a>
              </div>
            </div>
          </div>
          <div class="col-md-6 portfolio-item">
            <div class="card h-100">
              <img src="images/project-2.jpg" class="card-img-top" alt="Project 2">
              <div class="card-body">
                <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">View Details</a>
              </div>
            </div>
          </div>
        </div>
      </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">Send Message</button>
        </form>

        <div class="social-media mt-5">
          <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
          <a href="#" class="social-link"><i class="fab fa-github"></i></a>
          <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
        </div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="container text-center">
      <p>&copy; 2024 John Doe. All rights reserved.</p>
    </div>
  </footer>

  <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>
  <script>
      $(document).ready(function() {

  // Smooth scroll to sections on click
  $("a[href^='#']").on('click', function(e) {
    var target = $(this).attr('href');
    $( 'html, body' ).animate({
      scrollTop: $(target).offset().top
    }, 1000, 'swing');
    return false;
  });

});
  </script>
</body>
</html>