Simple-Portfolio/index.html at main · Aashutosh31/Simple-Portfolio · GitHub

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en" class=""> <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aashutosh Bairagi | Portfolio</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
        }
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.comcom/css2?family=Poppins:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <style>
        /* Apply the Poppins font and a subtle animated background */
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }

        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
    </style>
</head>
<body class="bg-white/60 dark:bg-gray-900/60">

    <header class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-xl shadow-lg sticky top-0 z-50">
        <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
            <a href="#" class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-500">
                Aashutosh Bairagi
            </a>
            <ul class="hidden md:flex items-center space-x-8 text-gray-700 dark:text-gray-300">
                <li><a href="#about" class="hover:text-blue-500 transition-colors duration-300">About</a></li>
                <li><a href="#projects" class="hover:text-blue-500 transition-colors duration-300">Projects</a></li>
                <li><a href="#contact" class="hover:text-blue-500 transition-colors duration-300">Contact</a></li>
                <li>
                    <button id="theme-toggle" class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
                        <svg id="theme-icon-light" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
                        <svg id="theme-icon-dark" class="h-6 w-6 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>
                    </button>
                </li>
            </ul>
            <div class="md:hidden">
                 <button id="mobile-theme-toggle" class="p-2 rounded-full"><svg id="mobile-theme-icon-light" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /></svg><svg id="mobile-theme-icon-dark" class="h-6 w-6 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg></button>
            </div>
        </nav>
    </header>

    <main class="container mx-auto px-6">
        <section id="hero" class="min-h-screen flex flex-col justify-center items-center text-center">
            <div class="bg-white/50 dark:bg-gray-800/50 backdrop-blur-lg p-8 md:p-12 rounded-2xl shadow-2xl">
                <h1 class="text-5xl md:text-7xl font-extrabold mb-4 text-gray-800 dark:text-gray-100">Hi, I'm <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-600">Aashutosh</span></h1>
                <p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8">A budding Web Developer ready to build amazing things.</p>
                <div class="flex justify-center space-x-4 mb-8">
                    <a href="https://github.com/Aashutosh31/" target="_blank"
                    class="text-gray-600 dark:text-gray-400 hover:text-blue-500 transition-colors"><svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg></a>
                    <a href="https://www.linkedin.com/in/aashutosh-bairagi-559aa530b?miniProfileUrn=urn%3Ali%3Afsd_profile%3AACoAAE8BdtUBYfnSlxx5fJvRfkqnZUvrIeq2les&lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base%3Bsp8dB4u1TY2AzvAxwK5Qaw%3D%3D/" target="_blank" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 transition-colors"><svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.713c-.966 0-1.75-.784-1.75-1.75s.784-1.75 1.75-1.75 1.75.784 1.75 1.75-.784 1.75-1.75 1.75zm13.5 12.713h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg></a>
                </div>
                <a href="#projects" class="inline-flex items-center gap-2 bg-blue-600 text-white font-bold py-3 px-8 rounded-full hover:bg-blue-700 transform hover:scale-105 transition-all duration-300">
                    View My Work <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                </a>
            </div>
        </section>

        <section id="about" class="py-24">
            <div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-12 items-center">
                <div class="bg-white/50 dark:bg-gray-800/50 backdrop-blur-lg p-8 rounded-2xl shadow-xl">
                    <h2 class="text-3xl font-bold text-center mb-6">About Me</h2>
                    <p class="text-lg text-center text-gray-700 dark:text-gray-300">
                        Hello! I'm a passionate developer learning to create beautiful and functional websites. This is my journey into the world of web development.
                    </p>
                </div>
                <div class="bg-white/50 dark:bg-gray-800/50 backdrop-blur-lg p-8 rounded-2xl shadow-xl">
                    <h3 class="text-2xl font-bold text-center mb-6">My Tech Stack</h3>
                    <div class="flex justify-center flex-wrap gap-6">
                        <div class="text-center p-3 rounded-lg bg-gray-200/50 dark:bg-gray-700/50"> <img src="https://www.vectorlogo.zone/logos/w3_html5/w3_html5-icon.svg" alt="HTML5" class="w-12 h-12 mx-auto"><span class="text-sm">HTML5</span></div>
                        <div class="text-center p-3 rounded-lg bg-gray-200/50 dark:bg-gray-700/50"> <img src="https://www.vectorlogo.zone/logos/w3_css/w3_css-icon.svg" alt="CSS3" class="w-12 h-12 mx-auto"><span class="text-sm">CSS3</span></div>
                        <div class="text-center p-3 rounded-lg bg-gray-200/50 dark:bg-gray-700/50"> <img src="https://www.vectorlogo.zone/logos/javascript/javascript-icon.svg" alt="JavaScript" class="w-12 h-12 mx-auto"><span class="text-sm">JavaScript</span></div>
                        <div class="text-center p-3 rounded-lg bg-gray-200/50 dark:bg-gray-700/50"> <img src="https://www.vectorlogo.zone/logos/tailwindcss/tailwindcss-icon.svg" alt="Tailwind CSS" class="w-12 h-12 mx-auto"><span class="text-sm">Tailwind</span></div>
                    </div>
                </div>
            </div>
        </section>

        <section id="projects" class="py-24">
            <h2 class="text-4xl font-bold text-center mb-16">My Projects</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                <div class="project-card bg-white/50 dark:bg-gray-800/50 backdrop-blur-lg rounded-2xl shadow-xl overflow-hidden transform hover:-translate-y-2 transition-transform duration-300">
                    <div class="bg-gray-300 dark:bg-gray-700 h-48 flex items-center justify-center text-gray-500">
                        <img src="Screenshot (3).png" alt="" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <h3 class="text-2xl font-bold mb-3 text-blue-500 dark:text-blue-400">Rock Paper Scissors Game</h3>
                        <div class="flex flex-wrap gap-2 mb-4"><span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800">HTML</span><span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-900">CSS</span><span class="bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-yellow-200 dark:text-yellow-900">JavaScript</span></div>
                        <p class="mb-4 text-gray-600 dark:text-gray-300">This is an interactive RCP game built with HTML,CSS,JS.</p>
                        <button class="btn-1 w-full font-semibold py-2 px-4 rounded-lg bg-gray-700 dark:bg-gray-600 text-white hover:bg-gray-600 dark:hover:bg-gray-500 transition-colors flex items-center justify-center gap-2">Live Demo <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg></button>
                    </div>
                </div>
                <div class="project-card bg-white/50 dark:bg-gray-800/50 backdrop-blur-lg rounded-2xl shadow-xl overflow-hidden transform hover:-translate-y-2 transition-transform duration-300">
                    <div class="bg-gray-300 dark:bg-gray-700 h-48 flex items-center justify-center text-gray-500">
                        <img src="Screenshot (20).png" alt="" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <h3 class="text-2xl font-bold mb-3 text-blue-500 dark:text-blue-400">Calculator</h3>
                        <div class="flex flex-wrap gap-2 mb-4"><span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800">HTML</span><span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-900">CSS</span><span class="bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-yellow-200 dark:text-yellow-900">JavaScript</span></div>
                        <p class="mb-4 text-gray-600 dark:text-gray-300">A Calculator with modern UI and Proper Functioning.</p>
                        <button class="btn-2 w-full font-semibold py-2 px-4 rounded-lg bg-gray-700 dark:bg-gray-600 text-white hover:bg-gray-600 dark:hover:bg-gray-500 transition-colors flex items-center justify-center gap-2">Live Demo <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg></button>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact" class="text-center py-24">
            <div class="max-w-2xl mx-auto">
                <h2 class="text-4xl font-bold mb-4 text-gray-800 dark:text-gray-100">Let's Connect!</h2>
                <p class="text-lg text-gray-600 dark:text-gray-400 mb-8">Have a question or want to work together? I'd love to hear from you!</p>
                <a href="mailto:aashutosh.bairagi05.com" class="inline-flex items-center gap-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-bold py-4 px-10 rounded-full hover:opacity-90 transform hover:scale-105 transition-all duration-300 text-lg">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                    Email Me
                </a>
            </div>
        </section>
    </main>

    <footer class="bg-gray-800/80 dark:bg-black/80 backdrop-blur-lg text-gray-300 text-center py-6">
        <p>&copy; 2025 Aashutosh Bairagi. All rights reserved.</p>
    </footer>

    <script src="portfolio.js"></script>
</body>

</html>