|
30 | 30 | } |
31 | 31 | </style> |
32 | 32 | </head> |
33 | | -<body class="font-sans min-h-screen flex flex-col justify-center items-center text-center px-4 transition-colors duration-300"> |
| 33 | +<body class="font-sans min-h-screen flex flex-col justify-center items-center text-center px-4 transition-colors duration-300" style="margin: 20px;"> |
34 | 34 |
|
35 | 35 | <button onclick="toggleTheme()" class="absolute top-4 right-4 px-4 py-2 bg-black text-white rounded-lg shadow-md text-sm hover:bg-gray-800"> |
36 | 36 | Toggle Theme |
37 | 37 | </button> |
38 | 38 |
|
39 | | - <div class="flex flex-col items-center animate__animated animate__fadeIn"> |
| 39 | + <div class="flex flex-col items-center animate__animated animate__fadeIn" style="transform: scale(0.9);"> |
40 | 40 | <img src="dp2.jpg" alt="Gautham DP" class="w-40 h-40 rounded-full mb-4 shadow-lg border-4 border-white" /> |
41 | 41 | <h1 class="text-4xl md:text-5xl font-bold mb-2 fade-in-up">Gautham Vijayaraj</h1> |
42 | 42 | <p class="text-lg md:text-xl fade-in-up">Genius ⚡ | Developer 👨💻 | Musician 🎶 | Author 📚</p> |
43 | 43 | <p class="text-base md:text-lg mt-4 max-w-xl fade-in-up"> |
44 | | - Welcome to my little corner of the internet. I code for a living (to buy coffee), write sci-fi novels to escape reality, and make music in my free time so I don't lose my mind. Basically, I'm just a little desperate to be known for something. |
| 44 | + Welcome to my little corner of the internet. I plan to code for a living, write sci-fi novels to escape reality, and make music in my free time so I don't lose my mind. Basically, I'm just a little desperate to be known for something. |
45 | 45 | </p> |
46 | 46 | </div> |
47 | 47 |
|
48 | | - <div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 animate__animated animate__fadeInUp"> |
| 48 | + <div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 animate__animated animate__fadeInUp" style="transform: scale(0.9);margin-top: -10px;"> |
49 | 49 | <!-- Placeholder Cards --> |
50 | 50 | <div class="cursor-pointer transform transition hover:scale-105 hover:shadow-xl rounded-2xl p-6 bg-white/40 backdrop-blur-md w-60 border border-gray-300"> |
51 | | - <img src="assets/1.png" class="w-20 h-20 object-contain mx-auto mb-4" alt="Project Placeholder" /> |
52 | | - <p class="text-lg font-medium">Coming Soon</p> |
| 51 | + <img src="coding.png" class="w-20 h-20 object-contain mx-auto mb-4" alt="Project Placeholder" /> |
| 52 | + <p class="text-lg font-medium">Developer Mode</p> |
| 53 | + <p class="text-sm mt-2">If you want to see the part of me that stares at bugs for hours and calls it a career – click here.</p> |
53 | 54 | </div> |
54 | 55 |
|
55 | | - <div class="cursor-pointer transform transition hover:scale-105 hover:shadow-xl rounded-2xl p-6 bg-white/40 backdrop-blur-md w-60 border border-gray-300"> |
56 | | - <img src="assets/2.png" class="w-20 h-20 object-contain mx-auto mb-4" alt="Project Placeholder" /> |
57 | | - <p class="text-lg font-medium">Coming Soon</p> |
| 56 | + <div onclick="window.open('https://open.spotify.com/artist/4VA6qRwjB0lKfphoydXvyD?si=x7effTXCRK6GKVGdlttWLA', '_blank')" class="cursor-pointer transform transition hover:scale-105 hover:shadow-xl rounded-2xl p-6 bg-white/40 backdrop-blur-md w-60 border border-gray-300"> |
| 57 | + <img src="spotify.png" class="w-20 h-20 object-contain mx-auto mb-4" alt="Project Placeholder" /> |
| 58 | + <p class="text-lg font-medium">My Music</p> |
| 59 | + <p class="text-sm mt-2">If you're into sadboy synths and bedroom jams, my Spotify is your vibe. Click away.</p> |
58 | 60 | </div> |
59 | 61 |
|
60 | | - <div class="cursor-pointer transform transition hover:scale-105 hover:shadow-xl rounded-2xl p-6 bg-white/40 backdrop-blur-md w-60 border border-gray-300"> |
61 | | - <img src="assets/3.png" class="w-20 h-20 object-contain mx-auto mb-4" alt="Project Placeholder" /> |
62 | | - <p class="text-lg font-medium">Coming Soon</p> |
| 62 | + <div onclick="window.open('https://www.youtube.com/@gauthiiis_jukebox', '_blank')" class="cursor-pointer transform transition hover:scale-105 hover:shadow-xl rounded-2xl p-6 bg-white/40 backdrop-blur-md w-60 border border-gray-300"> |
| 63 | + <img src="youtube.png" class="w-20 h-20 object-contain mx-auto mb-4" alt="Project Placeholder" /> |
| 64 | + <p class="text-lg font-medium">YouTube Me</p> |
| 65 | + <p class="text-sm mt-2">Yes, I talk to a camera. Yes, I upload. Click to see me pretending to be a pro content creator.</p> |
63 | 66 | </div> |
64 | 67 |
|
65 | | - <div class="cursor-pointer transform transition hover:scale-105 hover:shadow-xl rounded-2xl p-6 bg-white/40 backdrop-blur-md w-60 border border-gray-300"> |
66 | | - <img src="assets/4.png" class="w-20 h-20 object-contain mx-auto mb-4" alt="Project Placeholder" /> |
67 | | - <p class="text-lg font-medium">Coming Soon</p> |
| 68 | + <div onclick="window.open('https://www.amazon.com/stores/author/B0DYN9XR8N', '_blank')" class="cursor-pointer transform transition hover:scale-105 hover:shadow-xl rounded-2xl p-6 bg-white/40 backdrop-blur-md w-60 border border-gray-300"> |
| 69 | + <img src="book.png" class="w-20 h-20 object-contain mx-auto mb-4" alt="Project Placeholder" /> |
| 70 | + <p class="text-lg font-medium">The Author Life</p> |
| 71 | + <p class="text-sm mt-2">If dystopian sci-fi meets existential crisis is your jam - my books are waiting. Tap in.</p> |
68 | 72 | </div> |
69 | 73 | </div> |
70 | 74 |
|
|
0 commit comments