Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tariq Ahmed - Portfolio</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #4a6fa5; | |
| --secondary-color: #166088; | |
| --accent-color: #4fc3f7; | |
| --dark-color: #1a1a2e; | |
| --light-color: #f8f9fa; | |
| --success-color: #4caf50; | |
| --warning-color: #ff9800; | |
| --danger-color: #f44336; | |
| --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s ease; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| background-color: var(--light-color); | |
| overflow-x: hidden; | |
| } | |
| /* Header */ | |
| header { | |
| background-color: var(--dark-color); | |
| color: white; | |
| padding: 1rem 0; | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| z-index: 1000; | |
| box-shadow: var(--shadow); | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--accent-color); | |
| text-decoration: none; | |
| } | |
| .logo span { | |
| color: white; | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| } | |
| nav ul li { | |
| margin-left: 1.5rem; | |
| } | |
| nav ul li a { | |
| color: white; | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| position: relative; | |
| padding: 0.5rem 0; | |
| } | |
| nav ul li a:hover { | |
| color: var(--accent-color); | |
| } | |
| nav ul li a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background-color: var(--accent-color); | |
| transition: var(--transition); | |
| } | |
| nav ul li a:hover::after { | |
| width: 100%; | |
| } | |
| .mobile-menu-btn { | |
| display: none; | |
| background: none; | |
| border: none; | |
| color: white; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| background: linear-gradient(135deg, rgba(22, 96, 136, 0.8), rgba(74, 111, 165, 0.8)), | |
| url('https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| color: white; | |
| text-align: center; | |
| padding-top: 60px; | |
| } | |
| .hero-content h1 { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| animation: fadeInDown 1s ease; | |
| } | |
| .hero-content p { | |
| font-size: 1.2rem; | |
| margin-bottom: 2rem; | |
| max-width: 700px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| animation: fadeInUp 1s ease; | |
| } | |
| .btn { | |
| display: inline-block; | |
| background-color: var(--accent-color); | |
| color: white; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 5px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: var(--transition); | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .btn:hover { | |
| background-color: var(--primary-color); | |
| transform: translateY(-3px); | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-color); | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--secondary-color); | |
| } | |
| /* About Section */ | |
| .section { | |
| padding: 5rem 0; | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| position: relative; | |
| } | |
| .section-title h2 { | |
| font-size: 2.5rem; | |
| color: var(--dark-color); | |
| margin-bottom: 1rem; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 80px; | |
| height: 4px; | |
| background-color: var(--accent-color); | |
| border-radius: 2px; | |
| } | |
| .about-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| align-items: center; | |
| } | |
| .about-img { | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .about-img:hover { | |
| transform: scale(1.03); | |
| } | |
| .about-img img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| .about-text { | |
| padding: 1rem; | |
| } | |
| .about-text h3 { | |
| font-size: 1.8rem; | |
| margin-bottom: 1rem; | |
| color: var(--primary-color); | |
| } | |
| .skills { | |
| margin-top: 2rem; | |
| } | |
| .skills-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); | |
| gap: 1rem; | |
| } | |
| .skill { | |
| background-color: white; | |
| padding: 1rem; | |
| border-radius: 5px; | |
| text-align: center; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .skill:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); | |
| } | |
| .skill i { | |
| font-size: 2rem; | |
| color: var(--accent-color); | |
| margin-bottom: 0.5rem; | |
| } | |
| /* Projects Section */ | |
| .projects-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 2rem; | |
| } | |
| .project-card { | |
| background-color: white; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .project-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .project-img { | |
| height: 200px; | |
| overflow: hidden; | |
| } | |
| .project-img img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: var(--transition); | |
| } | |
| .project-card:hover .project-img img { | |
| transform: scale(1.05); | |
| } | |
| .project-info { | |
| padding: 1.5rem; | |
| flex-grow: 1; | |
| } | |
| .project-info h3 { | |
| margin-bottom: 0.5rem; | |
| color: var(--primary-color); | |
| } | |
| .project-info p { | |
| color: #666; | |
| margin-bottom: 1rem; | |
| flex-grow: 1; | |
| } | |
| .project-links { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .project-links a { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| background-color: var(--accent-color); | |
| color: white; | |
| transition: var(--transition); | |
| } | |
| .project-links a:hover { | |
| background-color: var(--primary-color); | |
| transform: scale(1.1); | |
| } | |
| /* Contact Section */ | |
| .contact-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .contact-info { | |
| background-color: white; | |
| padding: 2rem; | |
| border-radius: 10px; | |
| box-shadow: var(--shadow); | |
| } | |
| .contact-info h3 { | |
| margin-bottom: 1.5rem; | |
| color: var(--primary-color); | |
| font-size: 1.8rem; | |
| } | |
| .contact-item { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .contact-item i { | |
| font-size: 1.5rem; | |
| color: var(--accent-color); | |
| margin-right: 1rem; | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: rgba(79, 195, 247, 0.1); | |
| border-radius: 50%; | |
| } | |
| .contact-form { | |
| background-color: white; | |
| padding: 2rem; | |
| border-radius: 10px; | |
| box-shadow: var(--shadow); | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| } | |
| .form-group input, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 0.8rem; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| font-family: inherit; | |
| transition: var(--transition); | |
| } | |
| .form-group input:focus, | |
| .form-group textarea:focus { | |
| outline: none; | |
| border-color: var(--accent-color); | |
| box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.2); | |
| } | |
| .form-group textarea { | |
| height: 150px; | |
| resize: vertical; | |
| } | |
| /* Footer */ | |
| footer { | |
| background-color: var(--dark-color); | |
| color: white; | |
| padding: 3rem 0 1rem; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-column h3 { | |
| font-size: 1.2rem; | |
| margin-bottom: 1rem; | |
| color: var(--accent-color); | |
| } | |
| .footer-column ul { | |
| list-style: none; | |
| } | |
| .footer-column ul li { | |
| margin-bottom: 0.5rem; | |
| } | |
| .footer-column ul li a { | |
| color: #ccc; | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .footer-column ul li a:hover { | |
| color: var(--accent-color); | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .social-links a { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| color: white; | |
| transition: var(--transition); | |
| } | |
| .social-links a:hover { | |
| background-color: var(--accent-color); | |
| transform: translateY(-3px); | |
| } | |
| .footer-bottom { | |
| text-align: center; | |
| padding-top: 2rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| color: #ccc; | |
| font-size: 0.9rem; | |
| } | |
| .footer-bottom a { | |
| color: var(--accent-color); | |
| text-decoration: none; | |
| } | |
| /* Animations */ | |
| @keyframes fadeInDown { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .header-content { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| nav ul { | |
| margin-top: 1rem; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| nav ul li { | |
| margin: 0 0.5rem; | |
| } | |
| .hero-content h1 { | |
| font-size: 2.5rem; | |
| } | |
| .hero-content p { | |
| font-size: 1rem; | |
| } | |
| .about-content { | |
| grid-template-columns: 1fr; | |
| } | |
| .mobile-menu-btn { | |
| display: block; | |
| } | |
| .nav-menu { | |
| display: none; | |
| } | |
| .nav-menu.active { | |
| display: flex; | |
| flex-direction: column; | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| width: 100%; | |
| background-color: var(--dark-color); | |
| padding: 1rem 0; | |
| } | |
| } | |
| /* Built with anycoder */ | |
| .built-with { | |
| position: fixed; | |
| bottom: 10px; | |
| right: 10px; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| color: white; | |
| padding: 0.5rem 1rem; | |
| border-radius: 5px; | |
| font-size: 0.8rem; | |
| z-index: 1000; | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .built-with:hover { | |
| background-color: rgba(0, 0, 0, 0.9); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="container header-content"> | |
| <a href="#" class="logo">Tariq <span>Ahmed</span></a> | |
| <button class="mobile-menu-btn" aria-label="Toggle menu"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <nav class="nav-menu"> | |
| <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="#skills">Skills</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <div class="container hero-content"> | |
| <h1>Hi, I'm Tariq Ahmed</h1> | |
| <p>Full Stack Developer | Open Source Enthusiast | Problem Solver</p> | |
| <a href="#projects" class="btn">View My Work</a> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="section" id="about"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>About Me</h2> | |
| </div> | |
| <div class="about-content"> | |
| <div class="about-img"> | |
| <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Tariq Ahmed"> | |
| </div> | |
| <div class="about-text"> | |
| <h3>Passionate Developer</h3> | |
| <p>I'm a full stack developer with expertise in building modern web applications. With over 5 years of experience in the industry, I've worked with various technologies and frameworks to create scalable and efficient solutions.</p> | |
| <p>My journey in programming started when I was in high school, and since then, I've been continuously learning and improving my skills. I love solving complex problems and turning ideas into reality through code.</p> | |
| <p>When I'm not coding, you can find me contributing to open source projects, writing technical articles, or exploring new technologies.</p> | |
| <a href="#contact" class="btn btn-primary">Get In Touch</a> | |
| </div> | |
| </div> | |
| <!-- Skills Section --> | |
| <div class="section-title" id="skills"> | |
| <h2>My Skills</h2> | |
| </div> | |
| <div class="skills"> | |
| <div class="skills-container"> | |
| <div class="skill"> | |
| <i class="fab fa-html5"></i> | |
| <h4>HTML5</h4> | |
| </div> | |
| <div class="skill"> | |
| <i class="fab fa-css3-alt"></i> | |
| <h4>CSS3</h4> | |
| </div> | |
| <div class="skill"> | |
| <i class="fab fa-js"></i> | |
| <h4>JavaScript</h4> | |
| </div> | |
| <div class="skill"> | |
| <i class="fab fa-react"></i> | |
| <h4>React</h4> | |
| </div> | |
| <div class="skill"> | |
| <i class="fab fa-node-js"></i> | |
| <h4>Node.js</h4> | |
| </div> | |
| <div class="skill"> | |
| <i class="fas fa-database"></i> | |
| <h4>MongoDB</h4> | |
| </div> | |
| <div class="skill"> | |
| <i class="fab fa-git-alt"></i> | |
| <h4>Git</h4> | |
| </div> | |
| <div class="skill"> | |
| <i class="fab fa-python"></i> | |
| <h4>Python</h4> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section class="section" id="projects"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>My Projects</h2> | |
| </div> | |
| <div class="projects-grid"> | |
| <div class="project-card"> | |
| <div class="project-img"> | |
| <img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="E-commerce Platform"> | |
| </div> | |
| <div class="project-info"> | |
| <h3>E-commerce Platform</h3> | |
| <p>A full-featured e-commerce solution with product management, shopping cart, and secure checkout.</p> | |
| <div class="project-links"> | |
| <a href="#" aria-label="View project"><i class="fas fa-eye"></i></a> | |
| <a href="#" aria-label="GitHub repository"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="project-card"> | |
| <div class="project-img"> | |
| <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Task Management App"> | |
| </div> | |
| <div class="project-info"> | |
| <h3>Task Management App</h3> | |
| <p>A productivity application for managing tasks, projects, and team collaboration with real-time updates.</p> | |
| <div class="project-links"> | |
| <a href="#" aria-label="View project"><i class="fas fa-eye"></i></a> | |
| <a href="#" aria-label="GitHub repository"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="project-card"> | |
| <div class="project-img"> | |
| <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Weather Dashboard"> | |
| </div> | |
| <div class="project-info"> | |
| <h3>Weather Dashboard</h3> | |
| <p>An interactive weather application that provides real-time weather data and forecasts using API integration.</p> | |
| <div class="project-links"> | |
| <a href="#" aria-label="View project"><i class="fas fa-eye"></i></a> | |
| <a href="#" aria-label="GitHub repository"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="project-card"> | |
| <div class="project-img"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Portfolio Generator"> | |
| </div> | |
| <div class="project-info"> | |
| <h3>Portfolio Generator</h3> | |
| <p>A tool that helps developers create professional portfolios quickly with customizable templates.</p> | |
| <div class="project-links"> | |
| <a href="#" aria-label="View project"><i class="fas fa-eye"></i></a> | |
| <a href="#" aria-label="GitHub repository"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="project-card"> | |
| <div class="project-img"> | |
| <img src="https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Chat Application"> | |
| </div> | |
| <div class="project-info"> | |
| <h3>Real-time Chat App</h3> | |
| <p>A modern chat application with real-time messaging, user authentication, and message history.</p> | |
| <div class="project-links"> | |
| <a href="#" aria-label="View project"><i class="fas fa-eye"></i></a> | |
| <a href="#" aria-label="GitHub repository"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="project-card"> | |
| <div class="project-img"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Blog Platform"> | |
| </div> | |
| <div class="project-info"> | |
| <h3>Blog Platform</h3> | |
| <p>A content management system for creating and managing blog posts with user comments and categories.</p> | |
| <div class="project-links"> | |
| <a href="#" aria-label="View project"><i class="fas fa-eye"></i></a> | |
| <a href="#" aria-label="GitHub repository"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="section" id="contact"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Get In Touch</h2> | |
| </div> | |
| <div class="contact-container"> | |
| <div class="contact-info"> | |
| <h3>Contact Information</h3> | |
| <div class="contact-item"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| <div> | |
| <h4>Location</h4> | |
| <p>New York, USA</p> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <i class="fas fa-envelope"></i> | |
| <div> | |
| <h4>Email</h4> | |
| <p>tariq@example.com</p> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <i class="fas fa-phone"></i> | |
| <div> | |
| <h4>Phone</h4> | |
| <p>+1 (555) 123-4567</p> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <i class="fas fa-globe"></i> | |
| <div> | |
| <h4>Website</h4> | |
| <p>tariqahmed.dev</p> | |
| </div> | |
| </div> | |
| <div class="social-links"> | |
| <a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a> | |
| <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a> | |
| <a href="#" aria-label="Codepen"><i class="fab fa-codepen"></i></a> | |
| </div> | |
| </div> | |
| <div class="contact-form"> | |
| <h3>Send Message</h3> | |
| <form id="contactForm"> | |
| <div class="form-group"> | |
| <label for="name">Name</label> | |
| <input type="text" id="name" name="name" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">Email</label> | |
| <input type="email" id="email" name="email" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="subject">Subject</label> | |
| <input type="text" id="subject" name="subject" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="message">Message</label> | |
| <textarea id="message" name="message" required></textarea> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-column"> | |
| <h3>Quick Links</h3> | |
| <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="#skills">Skills</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Services</h3> | |
| <ul> | |
| <li><a href="#">Web Development</a></li> | |
| <li><a href="#">UI/UX Design</a></li> | |
| <li><a href="#">Mobile Apps</a></li> | |
| <li><a href="#">Consulting</a></li> | |
| <li><a href="#">SEO Optimization</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Connect</h3> | |
| <div class="social-links"> | |
| <a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a> | |
| <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a> | |
| <a href="#" aria-label="Codepen"><i class="fab fa-codepen"></i></a> | |
| <a href="#" aria-label="Stack Overflow"><i class="fab fa-stack-overflow"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2023 Tariq Ahmed. All rights reserved. | Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to top button --> | |
| <button id="backToTop" class="btn" aria-label="Back to top"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <!-- Built with anycoder --> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">Built with anycoder</a> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); | |
| const navMenu = document.querySelector('.nav-menu'); | |
| mobileMenuBtn.addEventListener('click', () => { | |
| navMenu.classList.toggle('active'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| // Close mobile menu if open | |
| navMenu.classList.remove('active'); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Back to top button | |
| const backToTopBtn = document.getElementById('backToTop'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopBtn.style.display = 'block'; | |
| } else { | |
| backToTopBtn.style.display = 'none'; | |
| } | |
| }); | |
| backToTopBtn.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Form submission | |
| const contactForm = document.getElementById('contactForm'); | |
| contactForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // Get form values | |
| const name = document.getElementById('name').value; | |
| const email = document.getElementById('email').value; | |
| const subject = document.getElementById('subject').value; | |
| const message = document.getElementById('message').value; | |
| // Simple validation | |
| if (!name || !email || !subject || !message) { | |
| alert('Please fill in all fields'); | |
| return; | |
| } | |
| // In a real application, you would send this data to a server | |
| console.log('Form submitted:', { name, email, subject, message }); | |
| // Show success message | |
| alert('Thank you for your message! I will get back to you soon.'); | |
| // Reset form | |
| contactForm.reset(); | |
| }); | |
| // Animate elements on scroll | |
| const animateOnScroll = () => { | |
| const elements = document.querySelectorAll('.project-card, .skill, .contact-item'); | |
| elements.forEach(element => { | |
| const elementPosition = element.getBoundingClientRect().top; | |
| const windowHeight = window.innerHeight; | |
| if (elementPosition < windowHeight - 100) { | |
| element.style.opacity = '1'; | |
| element.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }; | |
| // Set initial state for animated elements | |
| document.querySelectorAll('.project-card, .skill, .contact-item').forEach(element => { | |
| element.style.opacity = '0'; | |
| element.style.transform = 'translateY(20px)'; | |
| element.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; | |
| }); | |
| // Run animation check on scroll and page load | |
| window.addEventListener('scroll', animateOnScroll); | |
| window.addEventListener('load', animateOnScroll); | |
| // Add scroll animation to sections | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe all sections | |
| document.querySelectorAll('section').forEach(section => { | |
| section.style.opacity = '0'; | |
| section.style.transform = 'translateY(30px)'; | |
| section.style.transition = 'opacity 0.8s ease, transform 0.8s ease'; | |
| observer.observe(section); | |
| }); | |
| </script> | |
| </body> | |
| </html> |