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"> | |
| <link rel="stylesheet" href="style.css"> | |
| <style> | |
| .project{ | |
| border-top-left-radius: 8px; | |
| border-top-right-radius: 8px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navbar --> | |
| <nav class="navbar navbar-expand-lg navbar-light bg-light"> | |
| <a class="navbar-brand" href="#"><img src="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" data-aos="fade-up"> | |
| <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" data-aos="zoom-in"> | |
| <img src="jaya.jpg" alt="Profile Picture" class="profile-pic"> | |
| </div> | |
| <div class="col-md-6 order-md-2 text-center d-md-none" data-aos="zoom-in"> | |
| <img src="jaya.jpg" alt="Profile Picture" class="profile-pic1"> | |
| </div> | |
| <!-- Name & Description (Left Side) --> | |
| <div class="col-md-6 order-md-1" data-aos="fade-right"> | |
| <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 mt-3" data-aos="fade-left"> | |
| <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" data-aos="fade-up"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-lg-6" data-aos="fade-right"> | |
| <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" data-aos="fade-left"> | |
| <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" data-aos="fade-up"> | |
| <div class="container"> | |
| <h2 class="text-center mb-5">Featured Projects</h2> | |
| <div class="row row-cols-1 row-cols-md-5 g-4"> | |
| <!-- Sample Project Cards --> | |
| <div class="col" data-aos="zoom-in"> | |
| <div class="card mb-4"> | |
| <img src="https://codingartistweb.com/wp-content/uploads/2021/02/To-Do-list-small-01-1024x576.png" class="card-img-top project" alt="Project 1"> | |
| <div class="card-body"> | |
| <h5 class="card-title">ToDo Webpage</h5> | |
| <p class="card-text">Personalised Todo page for daily works</p> | |
| <a href="https://jayaswaroop-todo.static.hf.space/index.html" class="btn btn-primary">View Project</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col" data-aos="zoom-in"> | |
| <div class="card mb-4"> | |
| <img src="https://www.knoplaw.newcastle.sch.uk/i/curric/music2.jpg" class="card-img-top project" alt="Project 2"> | |
| <div class="card-body"> | |
| <h5 class="card-title">Music Webpage</h5> | |
| <p class="card-text">Explore Most Popular and Trending Songs</p> | |
| <a href="https://jayaswaroop-music1.static.hf.space" class="btn btn-primary">View Project</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col" data-aos="zoom-in"> | |
| <div class="card mb-4"> | |
| <img src="https://www.itsitio.com/wp-content/uploads/2022/01/portada_Chatbots-780x470.png" class="card-img-top project" alt="Project 2"> | |
| <div class="card-body"> | |
| <h5 class="card-title">Chatbot</h5> | |
| <p class="card-text">Interactive AI: Your Friendly Chat Buddy</p> | |
| <a href="https://jayaswaroop-mygenaispeech.static.hf.space" class="btn btn-primary">View Project</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col" data-aos="zoom-in"> | |
| <div class="card mb-4"> | |
| <img src="https://codingartistweb.com/wp-content/uploads/2023/05/Number-Guessing-Game-01.png" class="card-img-top project" alt="Project 2"> | |
| <div class="card-body"> | |
| <h5 class="card-title">Cow & Bull</h5> | |
| <p class="card-text">A Logical number guessing game</p> | |
| <a href="https://jayaswaroop-game1.static.hf.space" class="btn btn-primary">View Project</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col" data-aos="zoom-in"> | |
| <div class="card mb-4"> | |
| <img src="https://techcresendo.com/wp-content/uploads/2016/02/Wikipedia.jpg" class="card-img-top project" alt="Project 2"> | |
| <div class="card-body"> | |
| <h5 class="card-title">Wikipedia Search</h5> | |
| <p class="card-text">Effortlessly explore knowledge with Wikipedia Search.</p> | |
| <a href="https://jayaswaroop-wikipedia.static.hf.space" class="btn btn-primary">View Project</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="bg-light py-5" data-aos="fade-up"> | |
| <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" data-aos="zoom-in"> | |
| <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" data-aos="zoom-in"> | |
| <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> | |
| <!-- Add similar structures for other skills with the same data-aos="zoom-in" attribute --> | |
| <div class="col" data-aos="zoom-in"> | |
| <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" data-aos="zoom-in"> | |
| <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" data-aos="zoom-in"> | |
| <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" data-aos="zoom-in"> | |
| <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" data-aos="zoom-in"> | |
| <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" data-aos="zoom-in"> | |
| <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 class="col" data-aos="zoom-in"> | |
| <div class="card mb-4"> | |
| <div class="card-body"> | |
| <h5 class="card-title">SQL</h5> | |
| <p class="card-text">SQL is used for managing and querying relational databases💡📊</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> | |
| <h5>Educational Details :</h5> | |
| <ul class="list-group"> | |
| <li class="list-group-item">Computer Science and Engineering (Currently pursuing B.Tech at SRKR Engineering College)</li> | |
| <li class="list-group-item">Intermediate: Tirumala Junior College</li> | |
| <li class="list-group-item">10th: Tirumala E.M High School</li> | |
| </ul> | |
| </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/dandamudi.veerevenkatarao?mibextid=ZbWKwL" class="social-icon bg-dark"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="https://x.com/JayaswaroopD?t=iYgNf0nUXS8W82mOvQ-dcg&s=08" 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/jaya_triumph?igsh=aTJobnIwbXlsaGdk" class="social-icon bg-dark"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="https://youtube.com/@jayaswaroopdandamudi1394?si=EaxEhXw-OH-E8hk9" 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> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script> | |
| <script> | |
| AOS.init({ | |
| duration: 800, // Duration of the animation | |
| easing: 'ease', // Easing option | |
| once: true // Only animate elements once | |
| }); | |
| const form = document.querySelector('form'); | |
| form.addEventListener('submit', (event) => { | |
| event.preventDefault(); // Prevent default form submission | |
| const name = document.getElementById('name').value; | |
| const email = document.getElementById('email').value; | |
| const message = document.getElementById('message').value; | |
| // Construct email content | |
| const body = ` | |
| Name: ${name}\n | |
| Email: ${email}\n | |
| Message:\n | |
| ${message} | |
| `; | |
| // Optional: Add validation for name, email, and message | |
| // Send email using a dedicated library or service | |
| // Example using a hypothetical library: | |
| sendEmail({ | |
| to: '[email protected]', | |
| subject: 'New Contact Form Submission', | |
| body: body, | |
| }) | |
| .then(() => { | |
| // Clear form fields and display a success message | |
| form.reset(); | |
| alert('Message sent successfully!'); | |
| }) | |
| .catch((error) => { | |
| console.error('Error sending email:', error); | |
| alert('An error occurred while sending the message. Please try again.'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |