<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="s.css">
<link rel="icon" type="image/png" href="4.jpg" />
<title>Siddhant| Portfolio</title>
</head>
<body>
<div id="header">
<div class="container">
<nav>
<!-- <img src="images/logo.png" alt="logo" class="logo"> -->
<h1><span>S</span>IDDHANT.</h1>
<ul id="sidemenu">
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
<i class="fas fa-times" onclick="closemenu()"></i>
</ul>
<i class="fas fa-bars" onclick="openmenu()"></i>
</nav>
<div class="h1">
<div class="header-text">
<p>Mern Developer |</p>
<p>Competitive Programmer</p>
<h1>Hello, I'm <span>Siddhant</span><br>Shukla from India</h1>
<a href="#contact">Hire Me</a>
</div>
<div class="logo">
<img src="images/Logo.jpg" alt="">
</div>
</div>
</div>
</div>
<!-- ----------------------About--------------- -->
<div id="about">
<div class="container">
<div class="row">
<div class="about-col-1">
<img src="images/two.png" alt="userImage">
</div>
<div class="about-col-2">
<h1 class="sub-title">About Me</h1>
<p>
Ambitious B.Tech CSE student passionate about crafting innovative solutions through technology.
Proficient in the MERN stack,Competitive Programming,Java, Python, and DSA, with a flair for building
impactful, user-centric applications. Thrives in hackathons, coding challenges, and creating
transformative digital experiences.
</p>
<div class="tab-titles">
<p class="tab-links active-link" onclick="openTab('skills')">Skills</p>
<p class="tab-links" onclick="openTab('experience')">Experience</p>
<p class="tab-links" onclick="openTab('education')">Education</p>
</div>
<div class="tab-contents active-tab" id="skills">
<ul>
<li><span>Mern Developer</span><br>Designing a websites using Full-stack</li>
<li><span>Competitive Programmer</span><br>Proficient in solving Problems</li>
<li><span>DSA</span><br>Proficient in core DSA concepts</li>
<li><span>UI/UX</span><br>Designing Web Interfaces</li>
</ul>
</div>
<div class="tab-contents" id="experience">
<ul>
<li><span>2024</span><br>Participated in U-Hack 3.0</li>
<li><span>2024</span><br>Attended a 1-month Full-stack Development workshop </li>
<li><span>2023-Now...</span><br>Solving a lot of questions on different competitive programming platforms</li>
<li><span>2023-Now...</span><br>I have developed a wide range of web-related projects</li>
</ul>
</div>
<div class="tab-contents" id="education">
<ul>
<li><span>B.TECH</span><br>Currently, I'm persuing B.tech from AKTU university</li>
<li><span>Intermediate/High-School </span><br>I complete my schooling at Bishop George School and College</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- --------------services----------------- -->
<div id="services">
<div class="container">
<h1 class="sub-title">My Services</h1>
<div class="services-list">
<div>
<i class="fa-solid fa-code"></i>
<h2>Web Design</h2>
<p>
"As a full-stack developer, I design and develop responsive, user-friendly websites with a focus on both front-end aesthetics and back-end functionality. I create seamless web applications that deliver a smooth user experience, utilizing modern technologies for optimal performance across all devices."
</p>
<a href="#">Learn More</a>
</div>
<div>
<i class="fa-brands fa-app-store"></i>
<h2>Competitive programming</h2>
<p>
"Experienced in data structures and algorithms, I specialize in solving complex problems with optimized solutions. Actively participating in competitive programming, I focus on enhancing efficiency and problem-solving speed across multiple platforms."
</p>
<a href="#">Learn More</a>
</div>
<div>
<i class="fa-solid fa-crop-simple"></i>
<h2>UI Design</h2>
<p>"As a UI designer, I create intuitive, aesthetically pleasing interfaces that enhance user experience. I focus on clean layouts, smooth interactions, and responsive design. With expertise in modern design tools, I ensure every interface is both functional and visually engaging. My goal is to craft designs that align with user needs while maintaining brand consistency."</p>
<a href="#">Learn More</a>
</div>
</div>
</div>
</div>
<!-- -------------portfolio------------- -->
<div id="portfolio">
<div class="container">
<h1 class="sub-title">My Work</h1>
<div class="work-list">
<div class="work">
<img src="images/bookStore.avif" alt="work-1">
<div class="layer">
<h3>Online Book Store</h3>
<p>I developed an Online bookstore using Mern-stack</p>
<a href="#"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
<div class="work">
<img src="images/foodStore.png" alt="work-1">
<div class="layer">
<h3>Food Store</h3>
<p> I developed a Food Store using HTML,CSS and JS</p>
<a href="#"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
<div class="work">
<img src="images/Travel.png" alt="work-1">
<div class="layer">
<h3>Travelling Website</h3>
<p>I developed a travelling website using HTML,CSS and JS</p>
<a href="#"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
</div>
<a href="#" class="btn"> See More</a>
</div>
</div>
<!-- -------------------contact------------ -->
<div id="contact">
<div class="container">
<div class="row">
<div class="contact-left">
<h1 class="sub-title">Contact Me</h1>
<p><i class="fa-solid fa-paper-plane"></i>siddhantshukla365@gmail.com</p>
<p><i class="fa-solid fa-phone"></i>+91 7570054274</p>
<div class="social-icons">
<a href=""><i class="fa-brands fa-facebook"></i></a>
<a href=""><i class="fa-brands fa-square-instagram"></i></a>
<a href="https://www.linkedin.com/in/siddhant-shukla-182420298/"><i class="fa-brands fa-linkedin"></i></a>
<a href="https://github.com/siddhantshukla108"><i class="fa-brands fa-github"></i></a>
</div>
<a href="images/SiddhantShuklaResume.pdf" download class="btn btn2">download CV</a>
</div>
<div class="contact-right">
<form name="submit-to-google-sheet">
<input type="text" name="Name" placeholder="Your Name">
<input type="email" name="Email" placeholder="Your email">
<textarea name="Message" rows="6" placeholder="Your Message" id=""></textarea>
<button type="submit" class="btn btn2">submit</button>
</form>
<span id="msg"></span>
</div>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d225.18111440259602!2d81.8461986319277!3d25.441679094325195!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1738518017883!5m2!1sen!2sin" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
<div class="copyright">
<p>
Copyright <span>©</span> [2024] Siddhant Shukla. All rights are reserved by DeVyne Group
</p>
</div>
</div>
<script src="script.js"></script>
<script src="mobile.js"></script>
<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbyMIZngdtvXIB6fGoZ0AjB90CdbHyevM3_-acHUd4-SBn51iyWV58efun8_W0-slJ_d/exec'
const form = document.forms['submit-to-google-sheet']
const msg = document.getElementById("msg")
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form) })
.then(response => {
msg.innerHTML = "Message Sent successfully"
setTimeout(function () {
msg.innerHTML = ""
}, 5000)
form.reset()
})
.catch(error => console.error('Error!', error.message))
})
</script>
</body>
</html>