-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
31 lines (27 loc) · 19.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html><html lang="en"><head><title>Nashid Shah | Portfolio</title><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Hi there! I'm a full stack website developer with over 4 years of industry experience working to bring out the best in websites."><meta name="google-site-verification" content="OVkn15lyVGCeK-dzF4K2RdxxIfSeek5NaU76_pcljlQ"><meta charset="utf-8"><base href="/"><link rel="preload" as="image" href="img/preloader-img.webp?t=1740092772684"><style type="text/css">@keyframes loader{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}:root{--header-height: 5rem}@media screen and (max-width:768px){:root{--header-height: 4rem}}body{margin:0;font-family:Arial,Helvetica,sans-serif;overflow:hidden;scrollbar-width:.4rem;scrollbar-color:rgba(0,0,0,.4) rgba(0,0,0,.2)}body.loaded{overflow-x:hidden;overflow-y:scroll}body::-webkit-scrollbar{width:.4rem}body::-webkit-scrollbar-track{background:rgba(0,0,0,.2);opacity:0}body::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.4);border-radius:.5rem}.font-weight-light{font-weight:lighter}.my-0{margin-top:0;margin-bottom:0}.brand-container{margin-left:2.5rem;display:flex;z-index:1000;position:fixed;top:0;left:0;height:var(--header-height);align-items:center;transition:background-color 1s;mix-blend-mode:exclusion;filter:invert(1)}.brand{display:flex}.logo{height:2.5rem}body.loaded .preloader{display:none}.preloader,.preloader-bg{position:fixed;height:100vh;width:100%}.preloader{top:0;color:#fff;z-index:1000;transition:transform 1s cubic-bezier(.3,0,.5,1)}.preloader-bg{background-color:#6f7b7f}.preloader-img{object-fit:cover;height:100%;width:100%}.preloader-content{height:100%;width:100%;backdrop-filter:blur(.25rem);background-color:rgba(0,0,0,.75)}.preloader-content .loader-text{font-size:3rem;position:absolute;bottom:2rem;left:2rem}.preloader.loaded{transform:translateY(-100vh)}.loader-text h5{margin-bottom:1rem}.loader{position:absolute;top:calc(50% - 2rem);left:calc(50% - 2rem);display:inline-block;width:5rem;height:5rem}.loader:after{content:" ";display:block;width:4rem;height:4rem;border-radius:50%;border:.5rem solid #fff;border-color:#fff transparent;animation:loader 1.2s linear infinite}@media only screen and (max-width:768px){.brand-container{margin-left:1rem}.loader-text h4{font-size:2rem}}</style><link rel="shortcut icon" href="img/N_lightning_logo_light.svg" type="image/x-icon" id="light-scheme-icon"><link rel="shortcut icon" href="img/N_lightning_logo_dark.svg" type="image/x-icon" id="dark-scheme-icon"></head><body><a href="#home" id="scrollToTop" class="scroll-to-top"><i class="fa fa-angle-up"></i></a><header data-include="header"><div id="nav-links" class="nav-links"><a id="nav-home" href="#home" class="nav-home fancy-link">HOME</a> <a id="nav-about" href="#about" class="nav-about fancy-link">ABOUT</a> <a id="nav-work" href="#work" class="nav-work fancy-link">WORK</a> <a id="nav-projects" href="#projects" class="nav-projects fancy-link">PROJECTS</a> <a id="nav-contact" href="#contact" class="nav-contact fancy-link">CONTACT</a></div><div id="nav-icon"><span></span> <span></span> <span></span> <span></span></div><div class="preloader"><div class="preloader-bg"><picture><source type="image/webp" srcset="img/preloader-img.webp"><source type="image/jpeg" srcset="img/preloader-img.jpg"><img class="preloader-img" src="img/preloader-img.jpg" width="764" height="1024" alt="People10 Office"></picture></div><div class="preloader-content"><div class="loader"></div><div class="loader-text"><h5 class="mb-0 font-weight-light">Welcome</h5><h4 class="font-weight-light my-0">Setting things up...</h4></div></div></div><div class="brand-container"><div class="brand"><img class="brand-designation" src="img/brand-designation.svg" width="180px" height="40px" alt="Name & designation"></div></div></header><section id="home" class="home"><div class="content"><div class="intro-wrapper"><h4 class="name">Nashid Shah</h4><div class="designation">Full Stack Developer</div><p class="brief-desc">Hello, I'm Nashid, a Full Stack Developer and Tech Innovator, passionate about crafting web applications and exploring blockchain technology.</p><div id="home-buttons"><a href="#about" class="fancy-button about-button">READ MORE </a><a href="#contact" class="fancy-button contact-button">CONTACT ME</a></div></div></div></section><section id="about" class="about"><div class="about-content"><div class="section-header animatable bounceInLeft"><h2 class="section-title">About Me</h2><h2 class="section-subtitle">WHO AM I?</h2></div><div class="about-me"><div class="about-text">Hello! I'm Nashid Shah, a Full Stack Developer with a deep love for technology and a penchant for problem-solving. When I'm not immersed in code, you can often find me exploring other facets of life. I'm an avid <a class="fancy-link" target="_blank" rel="noreferrer" href="https://www.chess.com/member/nash115">chess <i class="fas fa-external-link-alt"></i></a> player, a football enthusiast, and a table tennis ace. Whether I'm strategizing on the chessboard, enjoying a game of football, or engaging in an intense table tennis match, I'm always driven by the thrill of competition and the camaraderie of sports.<br>In addition to my hobbies, I'm also a passionate contributor to the developer community on Stack Overflow. If you have any queries or need assistance, please don't hesitate to direct them to my <a class="fancy-link" target="_blank" rel="noreferrer" href="https://stackoverflow.com/users/9739129/nash11">StackOverflow <i class="fas fa-external-link-alt"></i></a> profile.<br>For a more comprehensive view of my professional background and experiences, I encourage you to download my resume. It provides insights into my work, skills, and accomplishments. You can find my resume <a class="fancy-link" target="_blank" rel="noreferrer" href="pdf/Work_Resume.pdf">here <i class="fas fa-external-link-alt"></i></a>.<br>Thank you for taking the time to visit my portfolio. I look forward to connecting with you and exploring new opportunities in the world of technology.<br></div><a class="fancy-button" href="pdf/Work_Resume.pdf" download="Nashid Shah's resume"><i class="fas fa-file-download"></i> DOWNLOAD RESUME</a></div></div><div class="skills-content"><div class="section-header animatable bounceInLeft"><h2 class="section-title">Skills</h2><h2 class="section-subtitle">WHAT AM I GOOD AT?</h2></div><div id="skills" class="skills"></div></div></section><section id="work" class="work"><div class="section-header animatable bounceInLeft"><h2 class="section-title">Work Experience / Education</h2><h2 class="section-subtitle">A TIMELINE</h2></div><div id="timeline" class="container"></div></section><section id="projects" class="projects"><div class="section-header"><h2 class="section-title animatable bounceInLeft">My Projects</h2><h2 class="section-subtitle">SOME OF MY WORK</h2></div><div id="project-list" class="row"></div><div class="section-header"><h2 class="section-subtitle">SOME OF MY HACKATHON WORK</h2></div><div id="hackathon-list" class="row"></div></section><section id="contact" class="contact"><div class="contact-info"><div class="section-header"><h2 class="section-title animatable bounceInLeft">Contact Me</h2><h2 class="section-subtitle">GETTING IN TOUCH IS EASY!</h2><p class="section-desc animatable fadeInUp">Got questions or need to get in touch? Reach out via email, and I'll get back to you. You can also connect with me through the social media links below. Let's chat!</p></div><form id="contact-form" class="email-form"><label for="name">Name:</label> <input id="name" placeholder="Name" class="name animatable fadeInUp"> <label for="email">Email:</label> <input id="email" placeholder="Email" class="email animatable fadeInUp"> <label for="message">Message:</label> <textarea id="message" class="message animatable fadeInUp" placeholder="Message" rows="3"></textarea><div class="text-center"><button type="submit" id="send-message" class="fancy-button" disabled="disabled">SEND</button></div></form><div class="divider"><hr><span>or</span><hr></div><div class="text-center animatable fadeInUp">connect with me on</div><div class="social-media text-center animatable fadeInUp"><a target="_blank" rel="noreferrer" href="https://www.linkedin.com/in/nashid-shah/"><i title="LinkedIn" class="fab fa-linkedin"></i> </a><a target="_blank" rel="noreferrer" href="https://www.facebook.com/nashid.ahmed.5/"><i title="Facebook" class="fab fa-facebook"></i> </a><a target="_blank" rel="noreferrer" href="https://www.instagram.com/nashid115/"><i title="Instagram" class="fab fa-instagram"></i> </a><a target="_blank" rel="noreferrer" href="https://t.me/Nacho115"><i title="Telegram" class="fab fa-telegram-plane"></i> </a><a target="_blank" rel="noreferrer" href="https://www.twitter.com/lonewolf_115"><i title="Twitter" class="fab fa-x-twitter"></i> </a><a target="_blank" rel="noreferrer" href="https://discordapp.com/users/810534888842592266"><i title="Discord" class="fab fa-discord"></i></a></div></div><div class="contact-map animatable fadeInUp"><a id="map" target="_blank" rel="noreferrer" href="https://www.google.com/maps/search/?api=1&query=NJIT&query_id=ChIJlw3Wk68RrjsRamKYITs-OjY"><picture><source media="(min-width:993px)" data-srcset="https://maps.googleapis.com/maps/api/staticmap?size=640x640&zoom=14¢er=40.742,-74.181&style=element:geometry%7Ccolor:0x212121&style=element:labels.icon%7Cvisibility:off&style=element:labels.text.fill%7Ccolor:0x757575&style=element:labels.text.stroke%7Ccolor:0x212121&style=feature:administrative%7Celement:geometry%7Ccolor:0x757575&style=feature:administrative.country%7Celement:labels.text.fill%7Ccolor:0x9e9e9e&style=feature:administrative.locality%7Celement:labels.text.fill%7Ccolor:0xbdbdbd&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x757575&style=feature:poi.business%7Cvisibility:off&style=feature:poi.park%7Celement:geometry%7Ccolor:0x181818&style=feature:poi.park%7Celement:labels.text%7Cvisibility:off&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x616161&style=feature:poi.park%7Celement:labels.text.stroke%7Ccolor:0x1b1b1b&style=feature:road%7Celement:geometry.fill%7Ccolor:0x2c2c2c&style=feature:road%7Celement:labels.text.fill%7Ccolor:0x8a8a8a&style=feature:road.arterial%7Celement:geometry%7Ccolor:0x373737&style=feature:road.highway%7Celement:geometry%7Ccolor:0x3c3c3c&style=feature:road.highway.controlled_access%7Celement:geometry%7Ccolor:0x4e4e4e&style=feature:road.local%7Celement:labels.text.fill%7Ccolor:0x616161&style=feature:transit%7Celement:labels.text.fill%7Ccolor:0x757575&style=feature:water%7Celement:geometry%7Ccolor:0x000000&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x3d3d3d&markers=icon:https://nashidahmed.github.io/img/map-marker.png%7C40.742,-74.181&key=AIzaSyAgQMsw3pMzbpKZLlwf4AhmAVlL3xrf0rI"><source media="(min-width:769px)" data-srcset="https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=14¢er=40.742,-74.181&style=element:geometry%7Ccolor:0x212121&style=element:labels.icon%7Cvisibility:off&style=element:labels.text.fill%7Ccolor:0x757575&style=element:labels.text.stroke%7Ccolor:0x212121&style=feature:administrative%7Celement:geometry%7Ccolor:0x757575&style=feature:administrative.country%7Celement:labels.text.fill%7Ccolor:0x9e9e9e&style=feature:administrative.locality%7Celement:labels.text.fill%7Ccolor:0xbdbdbd&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x757575&style=feature:poi.business%7Cvisibility:off&style=feature:poi.park%7Celement:geometry%7Ccolor:0x181818&style=feature:poi.park%7Celement:labels.text%7Cvisibility:off&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x616161&style=feature:poi.park%7Celement:labels.text.stroke%7Ccolor:0x1b1b1b&style=feature:road%7Celement:geometry.fill%7Ccolor:0x2c2c2c&style=feature:road%7Celement:labels.text.fill%7Ccolor:0x8a8a8a&style=feature:road.arterial%7Celement:geometry%7Ccolor:0x373737&style=feature:road.highway%7Celement:geometry%7Ccolor:0x3c3c3c&style=feature:road.highway.controlled_access%7Celement:geometry%7Ccolor:0x4e4e4e&style=feature:road.local%7Celement:labels.text.fill%7Ccolor:0x616161&style=feature:transit%7Celement:labels.text.fill%7Ccolor:0x757575&style=feature:water%7Celement:geometry%7Ccolor:0x000000&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x3d3d3d&markers=icon:https://nashidahmed.github.io/img/map-marker.png%7C40.742,-74.181&key=AIzaSyAgQMsw3pMzbpKZLlwf4AhmAVlL3xrf0rI"><source media="(min-width:568px)" data-srcset="https://maps.googleapis.com/maps/api/staticmap?size=420x420&zoom=14¢er=40.742,-74.181&style=element:geometry%7Ccolor:0x212121&style=element:labels.icon%7Cvisibility:off&style=element:labels.text.fill%7Ccolor:0x757575&style=element:labels.text.stroke%7Ccolor:0x212121&style=feature:administrative%7Celement:geometry%7Ccolor:0x757575&style=feature:administrative.country%7Celement:labels.text.fill%7Ccolor:0x9e9e9e&style=feature:administrative.locality%7Celement:labels.text.fill%7Ccolor:0xbdbdbd&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x757575&style=feature:poi.business%7Cvisibility:off&style=feature:poi.park%7Celement:geometry%7Ccolor:0x181818&style=feature:poi.park%7Celement:labels.text%7Cvisibility:off&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x616161&style=feature:poi.park%7Celement:labels.text.stroke%7Ccolor:0x1b1b1b&style=feature:road%7Celement:geometry.fill%7Ccolor:0x2c2c2c&style=feature:road%7Celement:labels.text.fill%7Ccolor:0x8a8a8a&style=feature:road.arterial%7Celement:geometry%7Ccolor:0x373737&style=feature:road.highway%7Celement:geometry%7Ccolor:0x3c3c3c&style=feature:road.highway.controlled_access%7Celement:geometry%7Ccolor:0x4e4e4e&style=feature:road.local%7Celement:labels.text.fill%7Ccolor:0x616161&style=feature:transit%7Celement:labels.text.fill%7Ccolor:0x757575&style=feature:water%7Celement:geometry%7Ccolor:0x000000&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x3d3d3d&markers=icon:https://nashidahmed.github.io/img/map-marker.png%7C40.742,-74.181&key=AIzaSyAgQMsw3pMzbpKZLlwf4AhmAVlL3xrf0rI"><img alt="Location on Google Maps" width="360" height="360" class="lazyload" data-src="https://maps.googleapis.com/maps/api/staticmap?size=320x320&zoom=14¢er=40.742,-74.181&style=element:geometry%7Ccolor:0x212121&style=element:labels.icon%7Cvisibility:off&style=element:labels.text.fill%7Ccolor:0x757575&style=element:labels.text.stroke%7Ccolor:0x212121&style=feature:administrative%7Celement:geometry%7Ccolor:0x757575&style=feature:administrative.country%7Celement:labels.text.fill%7Ccolor:0x9e9e9e&style=feature:administrative.locality%7Celement:labels.text.fill%7Ccolor:0xbdbdbd&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x757575&style=feature:poi.business%7Cvisibility:off&style=feature:poi.park%7Celement:geometry%7Ccolor:0x181818&style=feature:poi.park%7Celement:labels.text%7Cvisibility:off&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x616161&style=feature:poi.park%7Celement:labels.text.stroke%7Ccolor:0x1b1b1b&style=feature:road%7Celement:geometry.fill%7Ccolor:0x2c2c2c&style=feature:road%7Celement:labels.text.fill%7Ccolor:0x8a8a8a&style=feature:road.arterial%7Celement:geometry%7Ccolor:0x373737&style=feature:road.highway%7Celement:geometry%7Ccolor:0x3c3c3c&style=feature:road.highway.controlled_access%7Celement:geometry%7Ccolor:0x4e4e4e&style=feature:road.local%7Celement:labels.text.fill%7Ccolor:0x616161&style=feature:transit%7Celement:labels.text.fill%7Ccolor:0x757575&style=feature:water%7Celement:geometry%7Ccolor:0x000000&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x3d3d3d&markers=icon:https://nashidahmed.github.io/img/map-marker.png%7C40.742,-74.181&key=AIzaSyAgQMsw3pMzbpKZLlwf4AhmAVlL3xrf0rI"></picture></a></div></section><hr><footer class="footer text-center"><div class="footer-info container"><div class="my-clients"><div class="footer-title">Previous clients —</div><div class="client-websites"><a target="_blank" rel="noreferrer" href="https://www.allegiantair.com/">Allegiant Airlines</a><br><a target="_blank" rel="noreferrer" href="https://www.littlechapel.com/">Chapel of the Flowers</a><br><a target="_blank" rel="noreferrer" href="https://www.pnwboces.org/">PNW BOCES</a></div></div><div class="my-work"><div class="footer-title">Check out my work —</div><div class="work-websites"><a target="_blank" rel="noreferrer" href="https://stackblitz.com/@nashidahmed">StackBlitz</a><br><a target="_blank" rel="noreferrer" href="https://stackoverflow.com/users/9739129/nash11">StackOverflow</a><br><a target="_blank" rel="noreferrer" href="https://github.com/nashidahmed">Github</a></div></div><div class="social-media"><div class="footer-title">Follow me on —</div><div class="social-websites"><a target="_blank" rel="noreferrer" href="https://www.linkedin.com/in/nashid-shah/">LinkedIn</a><br><a target="_blank" rel="noreferrer" href="https://www.facebook.com/nashid.ahmed.5/">Facebook</a><br><a target="_blank" rel="noreferrer" href="https://www.instagram.com/nashid115/">Instagram</a><br><a target="_blank" rel="noreferrer" href="https://t.me/Nashid115">Telegram</a><br><a target="_blank" rel="noreferrer" href="https://www.twitter.com/lonewolf_115">Twitter</a><br><a target="_blank" rel="noreferrer" href="https://discordapp.com/users/810534888842592266">Discord</a></div></div></div><div class="footer-copyright"><small>© 2024 Nashid Shah</small></div></footer><link rel="preconnect" href="https://code.jquery.com"><link rel="dns-prefetch" href="https://code.jquery.com"><script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script><script>!window.jQuery && document.write('<script src="js/jquery-3.5.1.min.js"><\/script>')</script><script type="module" src="js/app.min.js?t=1740092772684" async></script><script type="text/javascript" src="https://polyfill.io/v3/polyfill.min.js?features=default"></script><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="dns-prefetch" href="https://fonts.gstatic.com"><link rel="preconnect" href="https://fonts.googleapis.com" crossorigin><link rel="dns-prefetch" href="https://fonts.googleapis.com"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Pathway+Gothic+One&display=swap" media="print" onload="this.onload=null;this.removeAttribute('media');"><noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Pathway+Gothic+One&display=swap"></noscript><link rel="preload" href="css/styles.min.css?t=1740092772684?t=1740092772684" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="css/styles.min.css" type="text/css"></noscript><script src="js/lazysizes.min.js?t=1740092772684" async></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script><script>(function(){
emailjs.init({
publicKey: "xWchz163jHbioqUbq",
});
})();
document.getElementById('contact-form').addEventListener('submit', function (e) {
e.preventDefault();
const button = document.getElementById('send-message');
button.textContent = "SENDING..."
button.disabled = true;
const templateParams = {
name: document.getElementById('name').value,
email: document.getElementById('email').value,
message: document.getElementById('message').value,
};
emailjs.send('service_k0xwl3o', 'template_ik01a6j', templateParams)
.then(function (response) {
alert('Email sent successfully!');
}, function (error) {
console.error('Failed to send email:', error);
alert('Failed to send email.');
})
.finally(() => {
button.textContent = "SEND"
button.disabled = false;
})
});</script></body></html>