Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Portfolio</title> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> | |
| <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <!-- Navbar --> | |
| <nav class="navbar navbar-expand-lg navbar-light bg-light"> | |
| <a class="navbar-brand" href="#"><img src="C:\Users\Jayasekhar\Desktop\logo.jpg" class="img1"/><span class="ml-3">Portfolio</span></a> | |
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> | |
| <span class="navbar-toggler-icon"></span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> | |
| <div class="navbar-nav ml-auto"> | |
| <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a> | |
| <a class="nav-link active" href="#about">About</a> | |
| <a class="nav-link active" href="#projects">Projects</a> | |
| <a class="nav-link active" href="#skills">Skills</a> | |
| <a class="nav-link active" href="#education">Education</a> | |
| <a class="nav-link active" href="#contact">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="bg-image"> | |
| <div class="hero-text"> | |
| <div class="container"> | |
| <div class="row"> | |
| <!-- Profile Picture Container (Right Side) --> | |
| <div class="col-md-6 order-md-2 text-center d-none d-md-block"> | |
| <img src="C:\Users\Jayasekhar\Desktop\jaya.jpg" alt="Profile Picture" class="profile-pic"> | |
| </div> | |
| <div class="col-md-6 order-md-2 text-center d-md-none"> | |
| <img src="C:\Users\Jayasekhar\Desktop\jaya.jpg" alt="Profile Picture" class="profile-pic1"> | |
| </div> | |
| <!-- Name & Description (Left Side) --> | |
| <div class="col-md-6 order-md-1"> | |
| <div style="margin-top: 68px;" class="d-none d-md-block"> | |
| <h1>D Jayaswaroop</h1> | |
| <p>An aspiring B.Tech student deeply engaged in tech exploration, adept in coding and software development. | |
| I blend creativity with technical skills to drive innovative solutions and eagerly embrace continuous growth in the ever-evolving tech sphere.</p> | |
| </div> | |
| <div class="d-md-none"> | |
| <h1>D Jayaswaroop</h1> | |
| <p>An aspiring B.Tech student deeply engaged in tech exploration, adept in coding and software development. | |
| I blend creativity with technical skills to drive innovative solutions and eagerly embrace continuous growth in the ever-evolving tech sphere.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="bg-light py-5"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-lg-6"> | |
| <div class="card p-4 mb-4"> | |
| <h2 class="card-title">About Me</h2> | |
| <div class="card-body"> | |
| <p class="card-text">Hey! I'm Jayaswaroop, a dedicated web designer passionate about creating impactful online experiences.</p> | |
| <p class="card-text">I specialize in:</p> | |
| <ul class="list-group"> | |
| <li class="list-group-item">Innovative UI/UX design</li> | |
| <li class="list-group-item">Responsive and accessible web development</li> | |
| <li class="list-group-item">Bringing creativity to every project</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-lg-6"> | |
| <div class="card p-4"> | |
| <h2 class="card-title">My Approach</h2> | |
| <div class="card-body"> | |
| <p class="card-text">My approach revolves around:</p> | |
| <ul class="list-group"> | |
| <li class="list-group-item">Understanding client goals</li> | |
| <li class="list-group-item">Adopting modern design trends</li> | |
| <li class="list-group-item">Constantly learning and evolving</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-5"> | |
| <div class="container"> | |
| <h2 class="text-center mb-5">Featured Projects</h2> | |
| <div class="row row-cols-2 row-cols-md-5 g-4"> | |
| <!-- Sample Project Cards --> | |
| <div class="col"> | |
| <div class="card mb-4"> | |
| <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="Project 1"> | |
| <div class="card-body"> | |
| <h5 class="card-title">Project 1</h5> | |
| <p class="card-text">Description of project 1 goes here.</p> | |
| <a href="#" class="btn btn-primary">View Project</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card mb-4"> | |
| <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="Project 1"> | |
| <div class="card-body"> | |
| <h5 class="card-title">Project 2</h5> | |
| <p class="card-text">Description of project 2 goes here.</p> | |
| <a href="#" class="btn btn-primary">View Project</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card mb-4"> | |
| <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="Project 1"> | |
| <div class="card-body"> | |
| <h5 class="card-title">Project 3</h5> | |
| <p class="card-text">Description of project 3 goes here.</p> | |
| <a href="#" class="btn btn-primary">View Project</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card mb-4"> | |
| <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="Project 1"> | |
| <div class="card-body"> | |
| <h5 class="card-title">Project 4</h5> | |
| <p class="card-text">Description of project 4 goes here.</p> | |
| <a href="#" class="btn btn-primary">View Project</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card mb-4"> | |
| <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="Project 1"> | |
| <div class="card-body"> | |
| <h5 class="card-title">Project 5</h5> | |
| <p class="card-text">Description of project 5 goes here.</p> | |
| <a href="#" class="btn btn-primary">View Project</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add more project cards here --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="bg-light py-5"> | |
| <div class="container"> | |
| <h2 class="text-center mb-5">Skills</h2> | |
| <div class="row row-cols-1 row-cols-md-3 g-4"> | |
| <div class="col"> | |
| <div class="card mb-4"> | |
| <div class="card-body"> | |
| <h5 class="card-title">HTML</h5> | |
| <p class="card-text">Proficient in creating semantic and accessible HTML structures.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card mb-4"> | |
| <div class="card-body"> | |
| <h5 class="card-title">CSS</h5> | |
| <p class="card-text">Skilled in crafting visually appealing and responsive designs with CSS.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card mb-4"> | |
| <div class="card-body"> | |
| <h5 class="card-title">JavaScript</h5> | |
| <p class="card-text">Knowledgeable in implementing interactive features using JavaScript.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card mb-4"> | |
| <div class="card-body"> | |
| <h5 class="card-title">Bootstrap</h5> | |
| <p class="card-text">Experience in utilizing Bootstrap for responsive web development.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card mb-4"> | |
| <div class="card-body"> | |
| <h5 class="card-title">C</h5> | |
| <p class="card-text">Proficiency in programming using the C language.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card mb-4"> | |
| <div class="card-body"> | |
| <h5 class="card-title">C++</h5> | |
| <p class="card-text">Knowledge and experience in C++ programming.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card mb-4"> | |
| <div class="card-body"> | |
| <h5 class="card-title">Python</h5> | |
| <p class="card-text">Proficient in Python programming language for various applications.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card mb-4"> | |
| <div class="card-body"> | |
| <h5 class="card-title">XPM 4.0</h5> | |
| <p class="card-text">Familiarity with XPM 4.0 for specific use cases.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Education Section --> | |
| <section id="education" class="py-5"> | |
| <div class="container"> | |
| <h2 class="text-center mb-5">Education</h2> | |
| <ul> | |
| <li>Bachelor of Science in Computer Science (Currently)</li> | |
| <li>Specialization: Web Design</li> | |
| <li>Graduated from ABC University, 2015 - 2019</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="contact" class="bg-light py-5"> | |
| <div class="container"> | |
| <h2 class="text-center mb-4">Contact Information</h2> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <h4>Mobile Number</h4> | |
| <p>+91 9393147214</p> | |
| <h4>Email</h4> | |
| <p>[email protected]</p> | |
| <h4>Address</h4> | |
| <p>SRKREC Association Boys Hostel Block-A,<br> Near Bhimavaram Hospitals,<br>JP Road, Chinnaamiram, <br>Bhimavaram, 534204.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="social-media" class="py-4"> | |
| <div class="container text-center"> | |
| <h2 class="mb-4">Follow Me</h2> | |
| <div class="social-icons"> | |
| <a href="https://www.facebook.com/yourprofile" class="social-icon bg-dark"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="https://www.twitter.com/yourprofile" class="social-icon bg-dark"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="https://www.linkedin.com/in/yourprofile" class="social-icon bg-dark"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="https://www.instagram.com/yourprofile" class="social-icon bg-dark"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="https://www.youtube.com/yourprofile" class="social-icon bg-dark"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <!-- Add more social icons as needed --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="bg-light py-5"> | |
| <div class="container"> | |
| <h2 class="text-center mb-5">Contact Me</h2> | |
| <form> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label for="name">Name</label> | |
| <input type="text" class="form-control" id="name" placeholder="Your name"> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label for="email">Email</label> | |
| <input type="email" class="form-control" id="email" placeholder="Your email"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="message">Message</label> | |
| <textarea class="form-control" id="message" rows="5" placeholder="Your message"></textarea> | |
| </div> | |
| <button type="submit" class="btn btn-primary mt-3">Submit</button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer Section --> | |
| <footer class="footer py-3"> | |
| <div class="container"> | |
| <p class="m-0 text-center text-white">© 2024 Web Designer Portfolio</p> | |
| </div> | |
| </footer> | |
| <!-- Bootstrap JS Bundle with Popper --> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| </body> | |
| </html> |