Spaces:

gaur3009
/

dsd

Running

App Files Files Community

gaur3009 commited on 27 days ago

Commit

2d7bd6f

verified ·

1 Parent(s): c17f647

Update index.html

Browse files

Files changed (1) hide show

index.html +429 -29

index.html CHANGED Viewed

@@ -3,32 +3,38 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Aditya Singh Gaur - Portfolio</title>
     <!-- Load Font Awesome for icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
             --primary: #6c63ff;
             --secondary: #4a44b5;
-            --dark: #2a2a4a;
             --light: #f8f9fa;
         }
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         body {
-            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
             color: var(--light);
             min-height: 100vh;
         }
         .gradient-bg {
             background: linear-gradient(135deg, var(--primary), var(--secondary));
         }
         .container {
@@ -85,6 +91,7 @@
         .text-4xl {
             font-size: 2.25rem;
         }
         .md\:text-5xl {
@@ -174,18 +181,11 @@
             font-size: 2.5rem;
             margin-bottom: 40px;
             position: relative;
-        }
-        .section-title::after {
-            content: "";
-            position: absolute;
-            bottom: -10px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 80px;
-            height: 4px;
-            background: linear-gradient(to right, var(--primary), var(--secondary));
-            border-radius: 2px;
         }
         .skills-container {
@@ -196,32 +196,209 @@
         }
         .skill-card {
-            background: rgba(255, 255, 255, 0.1);
             border-radius: 15px;
             padding: 30px;
             text-align: center;
-            transition: transform 0.3s ease;
         }
         .skill-card:hover {
             transform: translateY(-10px);
-            background: rgba(255, 255, 255, 0.15);
         }
         .skill-icon {
             font-size: 3rem;
             margin-bottom: 20px;
-            color: var(--primary);
         }
         .skill-title {
             font-size: 1.5rem;
             margin-bottom: 15px;
         }
         .skill-desc {
             color: rgba(255, 255, 255, 0.8);
             line-height: 1.6;
         }
         @media (min-width: 768px) {
@@ -258,26 +435,67 @@
             animation-delay: 0.6s;
         }
         /* Footer */
         footer {
             text-align: center;
-            padding: 30px 0;
             color: rgba(255, 255, 255, 0.6);
             font-size: 0.9rem;
             border-top: 1px solid rgba(255, 255, 255, 0.1);
         }
     </style>
 </head>
 <body>
     <header class="gradient-bg text-white py-12">
         <div class="container mx-auto px-4">
             <div class="flex flex-col md:flex-row items-center justify-between">
                 <div class="mb-8 md:mb-0 animated">
                     <h1 class="text-4xl md:text-5xl font-bold mb-2">Aditya Singh Gaur</h1>
                     <p class="text-xl md:text-2xl opacity-90 delay-1 animated">AI/ML Engineer & Generative AI Specialist</p>
                 </div>
                 <div class="flex space-x-4">
-                        <a href="mailto:gaur3009@gmail.com" class="bg-white text-red-500 p-3 rounded-full hover:bg-red-100 transition delay-2 animated">
                         <i class="fas fa-envelope text-2xl"></i>
                     </a>
                 </div>
@@ -285,15 +503,16 @@
         </div>
     </header>
-    <main class="content">
-        <h2 class="section-title">My Skills</h2>
         <div class="skills-container">
             <div class="skill-card">
                 <div class="skill-icon">
                     <i class="fas fa-brain"></i>
                 </div>
                 <h3 class="skill-title">Machine Learning</h3>
-                <p class="skill-desc">Building predictive models and implementing ML algorithms for real-world applications.</p>
             </div>
             <div class="skill-card">
@@ -301,7 +520,7 @@
                     <i class="fas fa-robot"></i>
                 </div>
                 <h3 class="skill-title">Generative AI</h3>
-                <p class="skill-desc">Creating innovative solutions with GANs, transformers, and other generative models.</p>
             </div>
             <div class="skill-card">
@@ -309,7 +528,7 @@
                     <i class="fas fa-chart-line"></i>
                 </div>
                 <h3 class="skill-title">Data Science</h3>
-                <p class="skill-desc">Extracting insights from complex datasets and creating visualizations.</p>
             </div>
             <div class="skill-card">
@@ -317,16 +536,197 @@
                     <i class="fas fa-code"></i>
                 </div>
                 <h3 class="skill-title">Deep Learning</h3>
-                <p class="skill-desc">Developing neural network architectures for computer vision and NLP tasks.</p>
             </div>
         </div>
-    </main>
     <footer>
         <div class="container">
             <p>© 2023 Aditya Singh Gaur. All rights reserved.</p>
             <p class="mt-2">Designed with ❤️ and AI</p>
         </div>
     </footer>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aditya Singh Gaur - AI/ML Portfolio</title>
     <!-- Load Font Awesome for icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@700;800&display=swap" rel="stylesheet">
     <style>
         :root {
             --primary: #6c63ff;
             --secondary: #4a44b5;
+            --dark: #1a1a2e;
+            --darker: #0f0c29;
             --light: #f8f9fa;
+            --accent: #00dbde;
         }
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
         }
         body {
+            background: linear-gradient(135deg, var(--darker), #302b63, #24243e);
             color: var(--light);
             min-height: 100vh;
+            line-height: 1.6;
         }
         .gradient-bg {
             background: linear-gradient(135deg, var(--primary), var(--secondary));
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
         }
         .container {
         .text-4xl {
             font-size: 2.25rem;
+            font-family: 'Montserrat', sans-serif;
         }
         .md\:text-5xl {
             font-size: 2.5rem;
             margin-bottom: 40px;
             position: relative;
+            font-family: 'Montserrat', sans-serif;
+            font-weight: 700;
+            background: linear-gradient(to right, var(--accent), var(--primary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
         .skills-container {
         }
         .skill-card {
+            background: rgba(255, 255, 255, 0.08);
             border-radius: 15px;
             padding: 30px;
             text-align: center;
+            transition: all 0.4s ease;
+            border: 1px solid rgba(255, 255, 255, 0.1);
         }
         .skill-card:hover {
             transform: translateY(-10px);
+            background: rgba(108, 99, 255, 0.15);
+            box-shadow: 0 10px 25px rgba(108, 99, 255, 0.2);
         }
         .skill-icon {
             font-size: 3rem;
             margin-bottom: 20px;
+            background: linear-gradient(135deg, var(--primary), var(--accent));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
         .skill-title {
             font-size: 1.5rem;
             margin-bottom: 15px;
+            font-weight: 600;
         }
         .skill-desc {
             color: rgba(255, 255, 255, 0.8);
             line-height: 1.6;
+            font-size: 0.95rem;
+        }
+        /* Projects Section */
+        .projects {
+            padding: 60px 0;
+        }
+        .project-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 30px;
+            padding: 0 40px;
+        }
+        .project-card {
+            background: rgba(255, 255, 255, 0.08);
+            border-radius: 15px;
+            overflow: hidden;
+            transition: all 0.4s ease;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .project-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+        }
+        .project-img {
+            height: 200px;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 4rem;
+            color: white;
+        }
+        .project-content {
+            padding: 25px;
+        }
+        .project-title {
+            font-size: 1.4rem;
+            margin-bottom: 12px;
+            font-weight: 600;
+        }
+        .project-desc {
+            color: rgba(255, 255, 255, 0.8);
+            margin-bottom: 20px;
+            font-size: 0.95rem;
+        }
+        .project-tags {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin-bottom: 20px;
+        }
+        .tag {
+            background: rgba(108, 99, 255, 0.2);
+            color: var(--primary);
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+        }
+        .btn {
+            display: inline-block;
+            background: linear-gradient(135deg, var(--primary), var(--accent));
+            color: white;
+            padding: 10px 25px;
+            border-radius: 30px;
+            text-decoration: none;
+            font-weight: 500;
+            transition: all 0.3s ease;
+        }
+        .btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 5px 15px rgba(108, 99, 255, 0.4);
+        }
+        /* About Section */
+        .about {
+            padding: 60px 0;
+        }
+        .about-content {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: 40px;
+            padding: 0 40px;
+        }
+        .about-text {
+            flex: 1;
+            min-width: 300px;
+        }
+        .about-img {
+            flex: 1;
+            min-width: 300px;
+            height: 350px;
+            background: linear-gradient(135deg, var(--primary), var(--accent));
+            border-radius: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 5rem;
+            color: white;
+        }
+        .about-title {
+            font-size: 2rem;
+            margin-bottom: 20px;
+            font-family: 'Montserrat', sans-serif;
+            background: linear-gradient(to right, var(--accent), var(--primary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .about-desc {
+            color: rgba(255, 255, 255, 0.8);
+            margin-bottom: 25px;
+            line-height: 1.8;
+        }
+        /* Contact Section */
+        .contact {
+            padding: 60px 0;
+        }
+        .contact-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 40px;
+            padding: 0 40px;
+        }
+        .contact-info {
+            background: rgba(255, 255, 255, 0.08);
+            border-radius: 15px;
+            padding: 30px;
+            text-align: center;
+        }
+        .contact-icon {
+            font-size: 2.5rem;
+            margin-bottom: 20px;
+            color: var(--primary);
+        }
+        .contact-title {
+            font-size: 1.4rem;
+            margin-bottom: 15px;
+            font-weight: 600;
+        }
+        .contact-detail {
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 1.1rem;
+        }
+        .social-links {
+            display: flex;
+            justify-content: center;
+            gap: 15px;
+            margin-top: 20px;
         }
         @media (min-width: 768px) {
             animation-delay: 0.6s;
         }
+        /* Particles Background */
+        #particles-js {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            z-index: -1;
+        }
         /* Footer */
         footer {
             text-align: center;
+            padding: 40px 0;
             color: rgba(255, 255, 255, 0.6);
             font-size: 0.9rem;
             border-top: 1px solid rgba(255, 255, 255, 0.1);
+            margin-top: 60px;
+        }
+        .footer-links {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+        .footer-link {
+            color: rgba(255, 255, 255, 0.7);
+            text-decoration: none;
+            transition: all 0.3s ease;
+        }
+        .footer-link:hover {
+            color: var(--primary);
         }
     </style>
 </head>
 <body>
+    <!-- Particles Background -->
+    <div id="particles-js"></div>
+    <!-- Header Section -->
     <header class="gradient-bg text-white py-12">
         <div class="container mx-auto px-4">
             <div class="flex flex-col md:flex-row items-center justify-between">
                 <div class="mb-8 md:mb-0 animated">
                     <h1 class="text-4xl md:text-5xl font-bold mb-2">Aditya Singh Gaur</h1>
                     <p class="text-xl md:text-2xl opacity-90 delay-1 animated">AI/ML Engineer & Generative AI Specialist</p>
+                    <div class="mt-6">
+                        <a href="#contact" class="btn">Get In Touch</a>
+                    </div>
                 </div>
                 <div class="flex space-x-4">
+                    <a href="https://github.com/gaur3009-p" class="bg-white text-purple-700 p-3 rounded-full hover:bg-purple-100 transition delay-2 animated">
+                        <i class="fab fa-github text-2xl"></i>
+                    </a>
+                    <a href="https://www.linkedin.com/in/aditya-singh-gaur-8356ba229/" class="bg-white text-blue-600 p-3 rounded-full hover:bg-blue-100 transition delay-2 animated">
+                        <i class="fab fa-linkedin-in text-2xl"></i>
+                    </a>
+                    <a href="mailto:[email protected]" class="bg-white text-red-500 p-3 rounded-full hover:bg-red-100 transition delay-2 animated">
                         <i class="fas fa-envelope text-2xl"></i>
                     </a>
                 </div>
         </div>
     </header>
+    <!-- Skills Section -->
+    <section class="content">
+        <h2 class="section-title">My Expertise</h2>
         <div class="skills-container">
             <div class="skill-card">
                 <div class="skill-icon">
                     <i class="fas fa-brain"></i>
                 </div>
                 <h3 class="skill-title">Machine Learning</h3>
+                <p class="skill-desc">Building predictive models and implementing ML algorithms for real-world applications. Expertise in regression, classification, clustering, and recommendation systems.</p>
             </div>
             <div class="skill-card">
                     <i class="fas fa-robot"></i>
                 </div>
                 <h3 class="skill-title">Generative AI</h3>
+                <p class="skill-desc">Creating innovative solutions with GANs, transformers, and other generative models. Experience with Stable Diffusion, GPT models, and creative AI applications.</p>
             </div>
             <div class="skill-card">
                     <i class="fas fa-chart-line"></i>
                 </div>
                 <h3 class="skill-title">Data Science</h3>
+                <p class="skill-desc">Extracting insights from complex datasets using statistical analysis, data visualization, and predictive modeling. Proficient in Python, SQL, and data engineering.</p>
             </div>
             <div class="skill-card">
                     <i class="fas fa-code"></i>
                 </div>
                 <h3 class="skill-title">Deep Learning</h3>
+                <p class="skill-desc">Developing neural network architectures for computer vision, NLP, and time-series analysis. Experience with TensorFlow, PyTorch, and Keras frameworks.</p>
+            </div>
+        </div>
+    </section>
+    <!-- Projects Section -->
+    <section class="projects">
+        <div class="container">
+            <h2 class="section-title">Featured Projects</h2>
+            <div class="project-grid">
+                <div class="project-card">
+                    <div class="project-img">
+                        <i class="fas fa-robot"></i>
+                    </div>
+                    <div class="project-content">
+                        <h3 class="project-title">AI-Powered Content Generator</h3>
+                        <div class="project-tags">
+                            <span class="tag">Generative AI</span>
+                            <span class="tag">NLP</span>
+                            <span class="tag">GPT-4</span>
+                        </div>
+                        <p class="project-desc">Developed a content generation platform using transformer models that produces high-quality articles, social media posts, and marketing copy.</p>
+                        <a href="#" class="btn">View Project</a>
+                    </div>
+                </div>
+                <div class="project-card">
+                    <div class="project-img">
+                        <i class="fas fa-chart-bar"></i>
+                    </div>
+                    <div class="project-content">
+                        <h3 class="project-title">Predictive Analytics Dashboard</h3>
+                        <div class="project-tags">
+                            <span class="tag">Machine Learning</span>
+                            <span class="tag">Data Visualization</span>
+                            <span class="tag">Dashboard</span>
+                        </div>
+                        <p class="project-desc">Created a real-time analytics dashboard that predicts customer behavior and sales trends with 92% accuracy using ensemble learning techniques.</p>
+                        <a href="#" class="btn">View Project</a>
+                    </div>
+                </div>
+                <div class="project-card">
+                    <div class="project-img">
+                        <i class="fas fa-eye"></i>
+                    </div>
+                    <div class="project-content">
+                        <h3 class="project-title">Computer Vision for Medical Imaging</h3>
+                        <div class="project-tags">
+                            <span class="tag">Deep Learning</span>
+                            <span class="tag">Computer Vision</span>
+                            <span class="tag">Healthcare</span>
+                        </div>
+                        <p class="project-desc">Built a CNN model that detects anomalies in medical scans with 97% accuracy, reducing diagnosis time by 40% for healthcare professionals.</p>
+                        <a href="#" class="btn">View Project</a>
+                    </div>
+                </div>
             </div>
         </div>
+    </section>
+    <!-- About Section -->
+    <section class="about">
+        <div class="container">
+            <h2 class="section-title">About Me</h2>
+            <div class="about-content">
+                <div class="about-text">
+                    <h3 class="about-title">Innovating with Artificial Intelligence</h3>
+                    <p class="about-desc">I'm an AI/ML Engineer specializing in developing cutting-edge solutions that bridge the gap between theoretical research and practical applications. With a passion for generative AI, I create systems that not only solve complex problems but also inspire creativity.</p>
+                    <p class="about-desc">My approach combines deep technical expertise with a user-centered design philosophy, ensuring that AI solutions are both powerful and accessible. I stay at the forefront of AI advancements, continuously exploring new techniques and frameworks.</p>
+                    <div class="mt-6">
+                        <a href="#" class="btn">Download Resume</a>
+                    </div>
+                </div>
+                <div class="about-img">
+                    <i class="fas fa-user-astronaut"></i>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="contact">
+        <div class="container">
+            <h2 class="section-title">Get In Touch</h2>
+            <div class="contact-container">
+                <div class="contact-info">
+                    <div class="contact-icon">
+                        <i class="fas fa-envelope"></i>
+                    </div>
+                    <h3 class="contact-title">Email</h3>
+                    <p class="contact-detail">[email protected]</p>
+                    <div class="social-links">
+                        <a href="mailto:[email protected]" class="bg-white text-purple-700 p-3 rounded-full hover:bg-purple-100 transition">
+                            <i class="fas fa-paper-plane"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="contact-info">
+                    <div class="contact-icon">
+                        <i class="fab fa-github"></i>
+                    </div>
+                    <h3 class="contact-title">GitHub</h3>
+                    <p class="contact-detail">github.com/gaur3009-p</p>
+                    <div class="social-links">
+                        <a href="https://github.com/gaur3009-p" class="bg-white text-purple-700 p-3 rounded-full hover:bg-purple-100 transition">
+                            <i class="fab fa-github"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="contact-info">
+                    <div class="contact-icon">
+                        <i class="fab fa-linkedin"></i>
+                    </div>
+                    <h3 class="contact-title">LinkedIn</h3>
+                    <p class="contact-detail">linkedin.com/in/aditya-singh-gaur</p>
+                    <div class="social-links">
+                        <a href="https://www.linkedin.com/in/aditya-singh-gaur-8356ba229/" class="bg-white text-blue-600 p-3 rounded-full hover:bg-blue-100 transition">
+                            <i class="fab fa-linkedin-in"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
     <footer>
         <div class="container">
+            <div class="footer-links">
+                <a href="#" class="footer-link">Home</a>
+                <a href="#about" class="footer-link">About</a>
+                <a href="#projects" class="footer-link">Projects</a>
+                <a href="#contact" class="footer-link">Contact</a>
+            </div>
             <p>© 2023 Aditya Singh Gaur. All rights reserved.</p>
             <p class="mt-2">Designed with ❤️ and AI</p>
         </div>
     </footer>
+    <!-- Particles.js -->
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+    <script>
+        // Particles.js configuration
+        document.addEventListener('DOMContentLoaded', function() {
+            particlesJS('particles-js', {
+                particles: {
+                    number: { value: 80, density: { enable: true, value_area: 800 } },
+                    color: { value: "#6c63ff" },
+                    shape: { type: "circle" },
+                    opacity: { value: 0.5, random: true },
+                    size: { value: 3, random: true },
+                    line_linked: {
+                        enable: true,
+                        distance: 150,
+                        color: "#6c63ff",
+                        opacity: 0.3,
+                        width: 1
+                    },
+                    move: {
+                        enable: true,
+                        speed: 2,
+                        direction: "none",
+                        random: true,
+                        straight: false,
+                        out_mode: "out",
+                        bounce: false
+                    }
+                },
+                interactivity: {
+                    detect_on: "canvas",
+                    events: {
+                        onhover: { enable: true, mode: "repulse" },
+                        onclick: { enable: true, mode: "push" },
+                        resize: true
+                    }
+                },
+                retina_detect: true
+            });
+            // Add smooth scrolling
+            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+                anchor.addEventListener('click', function (e) {
+                    e.preventDefault();
+                    document.querySelector(this.getAttribute('href')).scrollIntoView({
+                        behavior: 'smooth'
+                    });
+                });
+            });
+        });
+    </script>
 </body>
 </html>