Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Himanshu - Developer Portfolio</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Modern CSS Variables and Reset */ | |
| :root { | |
| --primary-color: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --secondary-color: #10b981; | |
| --dark-color: #1f2937; | |
| --light-color: #f8fafc; | |
| --gray-color: #6b7280; | |
| --transition: all 0.3s ease; | |
| --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| --border-radius: 8px; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| line-height: 1.6; | |
| color: var(--dark-color); | |
| background-color: var(--light-color); | |
| overflow-x: hidden; | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Header Styles */ | |
| header { | |
| background-color: var(--dark-color); | |
| color: white; | |
| padding: 1rem 0; | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| z-index: 1000; | |
| box-shadow: var(--shadow); | |
| } | |
| .nav-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: white; | |
| text-decoration: none; | |
| } | |
| .logo span { | |
| color: var(--primary-color); | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| gap: 2rem; | |
| } | |
| .nav-links a { | |
| color: white; | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary-color); | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -5px; | |
| left: 0; | |
| background-color: var(--primary-color); | |
| transition: var(--transition); | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .hamburger { | |
| display: none; | |
| cursor: pointer; | |
| font-size: 1.5rem; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| padding: 8rem 0 5rem; | |
| background: linear-gradient(135deg, var(--dark-color) 0%, #374151 100%); | |
| color: white; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| width: 300px; | |
| height: 300px; | |
| border-radius: 50%; | |
| background: rgba(79, 70, 229, 0.1); | |
| top: -150px; | |
| right: -150px; | |
| } | |
| .hero::after { | |
| content: ''; | |
| position: absolute; | |
| width: 200px; | |
| height: 200px; | |
| border-radius: 50%; | |
| background: rgba(16, 185, 129, 0.1); | |
| bottom: -100px; | |
| left: -100px; | |
| } | |
| .hero-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 3rem; | |
| align-items: center; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hero-text h1 { | |
| font-size: 3.5rem; | |
| margin-bottom: 1rem; | |
| line-height: 1.2; | |
| } | |
| .hero-text h1 span { | |
| color: var(--primary-color); | |
| } | |
| .hero-text p { | |
| font-size: 1.2rem; | |
| margin-bottom: 2rem; | |
| color: #d1d5db; | |
| } | |
| .btn { | |
| display: inline-block; | |
| padding: 0.8rem 1.8rem; | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| border-radius: var(--border-radius); | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: var(--transition); | |
| cursor: pointer; | |
| box-shadow: var(--shadow); | |
| } | |
| .btn:hover { | |
| background-color: var(--primary-dark); | |
| transform: translateY(-3px); | |
| } | |
| .btn-outline { | |
| background-color: transparent; | |
| border: 2px solid var(--primary-color); | |
| margin-left: 1rem; | |
| } | |
| .btn-outline:hover { | |
| background-color: var(--primary-color); | |
| } | |
| .hero-image { | |
| position: relative; | |
| text-align: center; | |
| } | |
| .hero-image img { | |
| width: 100%; | |
| max-width: 400px; | |
| border-radius: 50%; | |
| border: 8px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: var(--shadow); | |
| } | |
| /* About Section */ | |
| .section { | |
| padding: 5rem 0; | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| } | |
| .section-title h2 { | |
| font-size: 2.5rem; | |
| position: relative; | |
| display: inline-block; | |
| margin-bottom: 1rem; | |
| } | |
| .section-title h2::after { | |
| content: ''; | |
| position: absolute; | |
| width: 70px; | |
| height: 4px; | |
| background-color: var(--primary-color); | |
| bottom: -10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| border-radius: 2px; | |
| } | |
| .section-title p { | |
| color: var(--gray-color); | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .about-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 3rem; | |
| align-items: center; | |
| } | |
| .about-text h3 { | |
| font-size: 1.8rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .about-text p { | |
| margin-bottom: 1.5rem; | |
| color: var(--gray-color); | |
| } | |
| .skills { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| margin-top: 2rem; | |
| } | |
| .skill { | |
| background-color: white; | |
| padding: 0.5rem 1rem; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| font-weight: 500; | |
| color: var(--dark-color); | |
| transition: var(--transition); | |
| } | |
| .skill:hover { | |
| transform: translateY(-5px); | |
| background-color: var(--primary-color); | |
| color: white; | |
| } | |
| /* Projects Section */ | |
| .projects { | |
| background-color: #f3f4f6; | |
| } | |
| .projects-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .project-card { | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .project-card:hover { | |
| transform: translateY(-10px); | |
| } | |
| .project-image { | |
| height: 200px; | |
| background-color: var(--primary-color); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| } | |
| .project-content { | |
| padding: 1.5rem; | |
| } | |
| .project-content h3 { | |
| margin-bottom: 0.5rem; | |
| } | |
| .project-content p { | |
| color: var(--gray-color); | |
| margin-bottom: 1rem; | |
| } | |
| .project-tech { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .tech { | |
| background-color: #e5e7eb; | |
| padding: 0.3rem 0.7rem; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| } | |
| /* Contact Section */ | |
| .contact-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 3rem; | |
| } | |
| .contact-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| .contact-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .contact-icon { | |
| width: 50px; | |
| height: 50px; | |
| background-color: var(--primary-color); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 1.2rem; | |
| } | |
| .contact-text h4 { | |
| margin-bottom: 0.3rem; | |
| } | |
| .contact-text p { | |
| color: var(--gray-color); | |
| } | |
| .contact-form { | |
| background-color: white; | |
| padding: 2rem; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| } | |
| .form-control { | |
| width: 100%; | |
| padding: 0.8rem; | |
| border: 1px solid #d1d5db; | |
| border-radius: var(--border-radius); | |
| font-size: 1rem; | |
| transition: var(--transition); | |
| } | |
| .form-control:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); | |
| } | |
| textarea.form-control { | |
| resize: vertical; | |
| min-height: 150px; | |
| } | |
| /* Footer */ | |
| footer { | |
| background-color: var(--dark-color); | |
| color: white; | |
| padding: 3rem 0; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: 2fr 1fr 1fr; | |
| gap: 3rem; | |
| } | |
| .footer-about h3 { | |
| margin-bottom: 1rem; | |
| font-size: 1.5rem; | |
| } | |
| .footer-about p { | |
| color: #d1d5db; | |
| margin-bottom: 1.5rem; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .social-link { | |
| width: 40px; | |
| height: 40px; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .social-link:hover { | |
| background-color: var(--primary-color); | |
| transform: translateY(-3px); | |
| } | |
| .footer-links h4 { | |
| margin-bottom: 1.5rem; | |
| position: relative; | |
| } | |
| .footer-links h4::after { | |
| content: ''; | |
| position: absolute; | |
| width: 30px; | |
| height: 3px; | |
| background-color: var(--primary-color); | |
| bottom: -8px; | |
| left: 0; | |
| } | |
| .footer-links ul { | |
| list-style: none; | |
| } | |
| .footer-links li { | |
| margin-bottom: 0.8rem; | |
| } | |
| .footer-links a { | |
| color: #d1d5db; | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .footer-links a:hover { | |
| color: var(--primary-color); | |
| padding-left: 5px; | |
| } | |
| .copyright { | |
| text-align: center; | |
| padding-top: 2rem; | |
| margin-top: 2rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| color: #9ca3af; | |
| font-size: 0.9rem; | |
| } | |
| .copyright a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 992px) { | |
| .hero-content, .about-content, .contact-content { | |
| grid-template-columns: 1fr; | |
| } | |
| .hero-text h1 { | |
| font-size: 2.8rem; | |
| } | |
| .footer-content { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| position: fixed; | |
| top: 70px; | |
| right: -100%; | |
| width: 70%; | |
| height: 100vh; | |
| background-color: var(--dark-color); | |
| flex-direction: column; | |
| align-items: center; | |
| padding-top: 2rem; | |
| transition: var(--transition); | |
| } | |
| .nav-links.active { | |
| right: 0; | |
| } | |
| .hamburger { | |
| display: block; | |
| } | |
| .hero-text h1 { | |
| font-size: 2.3rem; | |
| } | |
| .footer-content { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 576px) { | |
| .hero-text h1 { | |
| font-size: 2rem; | |
| } | |
| .section-title h2 { | |
| font-size: 2rem; | |
| } | |
| .btn { | |
| padding: 0.7rem 1.5rem; | |
| font-size: 0.9rem; | |
| } | |
| } | |
| /* Animation */ | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .fade-in { | |
| animation: fadeIn 1s ease forwards; | |
| } | |
| .delay-1 { | |
| animation-delay: 0.2s; | |
| } | |
| .delay-2 { | |
| animation-delay: 0.4s; | |
| } | |
| .delay-3 { | |
| animation-delay: 0.6s; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="container nav-container"> | |
| <a href="#" class="logo">Himanshu<span>.</span></a> | |
| <div class="hamburger" id="hamburger"> | |
| <i class="fas fa-bars"></i> | |
| </div> | |
| <ul class="nav-links" id="navLinks"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#projects">Projects</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <div class="container hero-content"> | |
| <div class="hero-text fade-in"> | |
| <h1>Hi, I'm <span>Himanshu</span><br>Full Stack Developer</h1> | |
| <p>I build exceptional and accessible digital experiences for the web.</p> | |
| <div> | |
| <a href="#projects" class="btn">View My Work</a> | |
| <a href="#contact" class="btn btn-outline">Get In Touch</a> | |
| </div> | |
| </div> | |
| <div class="hero-image fade-in delay-1"> | |
| <img src="https://via.placeholder.com/400x400/6366f1/FFFFFF?text=Himanshu" alt="Himanshu Developer"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="section" id="about"> | |
| <div class="container"> | |
| <div class="section-title fade-in"> | |
| <h2>About Me</h2> | |
| <p>I'm a passionate developer with a love for creating innovative web solutions</p> | |
| </div> | |
| <div class="about-content"> | |
| <div class="about-text fade-in"> | |
| <h3>Creating digital solutions that make a difference</h3> | |
| <p>I'm a full stack developer with expertise in modern web technologies. I enjoy building everything from small business sites to rich interactive web applications.</p> | |
| <p>When I'm not coding, you can find me exploring new technologies, contributing to open source projects, or sharing knowledge with the developer community.</p> | |
| <div class="skills"> | |
| <div class="skill">JavaScript</div> | |
| <div class="skill">React</div> | |
| <div class="skill">Node.js</div> | |
| <div class="skill">Python</div> | |
| <div class="skill">MongoDB</div> | |
| <div class="skill">CSS3</div> | |
| <div class="skill">HTML5</div> | |
| <div class="skill">Git</div> | |
| </div> | |
| </div> | |
| <div class="about-image fade-in delay-1"> | |
| <img src="https://via.placeholder.com/500x400/10b981/FFFFFF?text=About+Me" alt="About Himanshu"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section class="section projects" id="projects"> | |
| <div class="container"> | |
| <div class="section-title fade-in"> | |
| <h2>My Projects</h2> | |
| <p>Here are some of my recent projects that showcase my skills and experience</p> | |
| </div> | |
| <div class="projects-grid"> | |
| <div class="project-card fade-in"> | |
| <div class="project-image" style="background-color: #6366f1;"> | |
| E-Commerce Platform | |
| </div> | |
| <div class="project-content"> | |
| <h3>ShopEasy</h3> | |
| <p>A full-featured e-commerce platform with user authentication, payment integration, and admin dashboard.</p> | |
| <div class="project-tech"> | |
| <span class="tech">React</span> | |
| <span class="tech">Node.js</span> | |
| <span class="tech">MongoDB</span> | |
| <span class="tech">Stripe</span> | |
| </div> | |
| <a href="#" class="btn">View Project</a> | |
| </div> | |
| </div> | |
| <div class="project-card fade-in delay-1"> | |
| <div class="project-image" style="background-color: #10b981;"> | |
| Task Management | |
| </div> | |
| <div class="project-content"> | |
| <h3>TaskFlow</h3> | |
| <p>A collaborative task management application with real-time updates and team collaboration features.</p> | |
| <div class="project-tech"> | |
| <span class="tech">Vue.js</span> | |
| <span class="tech">Firebase</span> | |
| <span class="tech">Sass</span> | |
| </div> | |
| <a href="#" class="btn">View Project</a> | |
| </div> | |
| </div> | |
| <div class="project-card fade-in delay-2"> | |
| <div class="project-image" style="background-color: #f59e0b;"> | |
| Weather App | |
| </div> | |
| <div class="project-content"> | |
| <h3>Weatherly</h3> | |
| <p>A responsive weather application that provides detailed forecasts and weather alerts for any location.</p> | |
| <div class="project-tech"> | |
| <span class="tech">JavaScript</span> | |
| <span class="tech">API</span> | |
| <span class="tech">CSS Grid</span> | |
| </div> | |
| <a href="#" class="btn">View Project</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="section" id="contact"> | |
| <div class="container"> | |
| <div class="section-title fade-in"> | |
| <h2>Get In Touch</h2> | |
| <p>Feel free to reach out if you're looking for a developer, have a question, or just want to connect.</p> | |
| </div> | |
| <div class="contact-content"> | |
| <div class="contact-info fade-in"> | |
| <div class="contact-item"> | |
| <div class="contact-icon"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div class="contact-text"> | |
| <h4>Email</h4> | |
| <p>himanshu@example.com</p> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <div class="contact-icon"> | |
| <i class="fas fa-phone"></i> | |
| </div> | |
| <div class="contact-text"> | |
| <h4>Phone</h4> | |
| <p>+91 98765 43210</p> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <div class="contact-icon"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div class="contact-text"> | |
| <h4>Location</h4> | |
| <p>New Delhi, India</p> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <div class="contact-icon"> | |
| <i class="fas fa-globe"></i> | |
| </div> | |
| <div class="contact-text"> | |
| <h4>Website</h4> | |
| <p>www.himanshudev.com</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="contact-form fade-in delay-1"> | |
| <form id="contactForm"> | |
| <div class="form-group"> | |
| <label for="name">Your Name</label> | |
| <input type="text" id="name" class="form-control" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">Your Email</label> | |
| <input type="email" id="email" class="form-control" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="subject">Subject</label> | |
| <input type="text" id="subject" class="form-control" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="message">Your Message</label> | |
| <textarea id="message" class="form-control" required></textarea> | |
| </div> | |
| <button type="submit" class="btn">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-about"> | |
| <h3>Himanshu<span>.</span></h3> | |
| <p>Full stack developer creating beautiful, functional, and user-centered digital experiences.</p> | |
| <div class="social-links"> | |
| <a href="#" class="social-link"><i class="fab fa-github"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-instagram"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-links"> | |
| <h4>Quick Links</h4> | |
| <ul> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#projects">Projects</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-links"> | |
| <h4>Services</h4> | |
| <ul> | |
| <li><a href="#">Web Development</a></li> | |
| <li><a href="#">App Development</a></li> | |
| <li><a href="#">UI/UX Design</a></li> | |
| <li><a href="#">Consulting</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| <p>© 2023 Himanshu. All rights reserved. <a href="https://huggingface.co/spaces/akhaliq/anycoder">Built with anycoder</a></p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile Navigation Toggle | |
| const hamburger = document.getElementById('hamburger'); | |
| const navLinks = document.getElementById('navLinks'); | |
| hamburger.addEventListener('click', () => { | |
| navLinks.classList.toggle('active'); | |
| // Change hamburger icon | |
| if (navLinks.classList.contains('active')) { | |
| hamburger.innerHTML = '<i class="fas fa-times"></i>'; | |
| document.body.style.overflow = 'hidden'; | |
| document.addEventListener('click', closeMenuOnOutsideClick); | |
| }); | |
| function closeMenuOnOutsideClick(e) { | |
| if (!navLinks.contains(e.target) && !hamburger.contains(e.target)) { | |
| navLinks.classList.remove('active'); | |
| hamburger.innerHTML = '<i class="fas fa-bars"></i>'; | |
| document.body.style.overflow = 'auto'; | |
| document.removeEventListener('click', closeMenuOnOutsideClick); | |
| } | |
| } | |
| // Close mobile menu when clicking on a link | |
| document.querySelectorAll('.nav-links a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| navLinks.classList.remove('active'); | |
| hamburger.innerHTML = '<i class="fas fa-bars"></i>'; | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| }); | |
| // Form Submission | |
| document.getElementById('contactForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| alert('Thank you for your message! I will get back to you soon.'); | |
| this.reset(); | |
| }); | |
| // Scroll Animation | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('fade-in'); | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe elements for animation | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const elementsToAnimate = document.querySelectorAll('.section-title, .about-text, .about-image, .project-card, .contact-info, .contact-form'); | |
| elementsToAnimate.forEach(el => { | |
| observer.observe(el); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |