mirror of
https://github.com/emmabostian/developer-portfolios.git
synced 2025-04-19 04:37:59 +00:00
237 lines
11 KiB
HTML
237 lines
11 KiB
HTML
<!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>
|