0xTask.github.io/index.html at main · task5555/0xTask.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Bio | Task</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="https://files.catbox.moe/4ka8f6.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .theme-icon {
            transition: transform 0.3s ease, color 0.3s ease;
        }
        .rotate {
            transform: rotate(360deg);
        }
    </style>
    <script>
        console.log('%cHello!', 'color: black; font-size: 20px; font-family: monospace;'); //wtf
        console.log('I hope you enjoy my little bio website. It took me a lot of learning tailwind for no reason to make. :)')
        console.log('If you care, im going to add a little blog soon as well. So keep an eye out for that.')
    </script>
</head>
<body class="bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 dark:bg-gradient-to-r dark:from-gray-100 dark:via-gray-200 dark:to-gray-100 flex items-center justify-center min-h-screen">
    <div class="bg-gray-800 dark:bg-gray-200 shadow-xl rounded-lg max-w-md border border-gray-700 dark:border-gray-300 relative">
        <div class="h-32 w-full bg-cover bg-center rounded-t-lg relative" style="background-image: url('https://media1.tenor.com/m/FdRx4ZJe0aoAAAAC/black-and-white-anime.gif');">
            <button onclick="toggleDarkMode()" class="absolute top-2 right-2 text-white dark:text-black">
                <i id="theme-icon" class="fas theme-icon"></i>
            </button>
        </div>
        <div class="p-6 text-center">
            <div class="-mt-20 relative">
                <img class="w-32 h-32 rounded-full border-4 border-gray-800 dark:border-gray-200 mx-auto shadow-lg" src="https://files.catbox.moe/mb4gns.webp" alt="Profile Picture">
            </div>
            <h2 class="text-xl font-semibold mt-4 text-white dark:text-gray-800">task5555</h2>
            <p class="text-gray-400 dark:text-gray-600">"i really dislike tailwind"</p>
            <p class="mt-4 text-gray-400 dark:text-gray-600">Hello, i'm Task5555. I'm a software developer + reverse engineer. I also like graphic design and art in general.</p>
            <div class="flex flex-wrap justify-center gap-2 mt-4">
                <a href="https://github.com/0xTask" class="bg-gradient-to-b from-gray-700 via-gray-800 to-gray-900 text-white dark:from-gray-200 dark:via-gray-300 dark:to-gray-200 dark:text-gray-800 px-2 py-1 rounded border border-gray-600 dark:border-gray-300 hover:from-gray-600 hover:via-gray-700 hover:to-gray-800 dark:hover:from-gray-300 dark:hover:via-gray-400 dark:hover:to-gray-300 hover:shadow-lg active:from-gray-800 active:via-gray-900 active:to-gray-800 dark:active:from-gray-400 dark:active:via-gray-500 dark:active:to-gray-400 active:shadow-inner transition-transform transform hover:scale-105 active:scale-95 flex items-center space-x-1">
                    <i class="fab fa-github"></i>
                    <span>GitHub</span>
                </a>
                <a href="https://www.youtube.com/@taskVEVO" title="TBA" class="bg-gradient-to-b from-red-600 via-red-700 to-red-800 text-white dark:from-red-200 dark:via-red-300 dark:to-red-200 dark:text-red-800 px-2 py-1 rounded border border-red-600 dark:border-red-300 hover:from-red-500 hover:via-red-600 hover:to-red-700 dark:hover:from-red-300 dark:hover:via-red-400 dark:hover:to-red-300 hover:shadow-lg active:from-red-700 active:via-red-800 active:to-red-700 dark:active:from-red-400 dark:active:via-red-500 dark:active:to-red-400 active:shadow-inner transition-transform transform hover:scale-105 active:scale-95 flex items-center space-x-1">
                    <i class="fab fa-youtube"></i>
                    <span>YouTube</span>
                </a>
                <a href="#" title="@task5555" class="bg-gradient-to-b from-indigo-600 via-indigo-700 to-indigo-800 text-white dark:from-indigo-200 dark:via-indigo-300 dark:to-indigo-200 dark:text-indigo-800 px-2 py-1 rounded border border-indigo-600 dark:border-indigo-300 hover:from-indigo-500 hover:via-indigo-600 hover:to-indigo-700 dark:hover:from-indigo-300 dark:hover:via-indigo-400 dark:hover:to-indigo-300 hover:shadow-lg active:from-indigo-700 active:via-indigo-800 active:to-indigo-700 dark:active:from-indigo-400 dark:active:via-indigo-500 dark:active:to-indigo-400 active:shadow-inner transition-transform transform hover:scale-105 active:scale-95 flex items-center space-x-1">
                    <i class="fab fa-discord"></i>
                    <span>Discord</span>
                </a>
                <a href="mailto:accacchooray@gmail.com" title="TBA" class="bg-gradient-to-b from-green-600 via-green-700 to-green-800 text-white dark:from-green-200 dark:via-green-300 dark:to-green-200 dark:text-green-800 px-2 py-1 rounded border border-green-600 dark:border-green-300 hover:from-green-500 hover:via-green-600 hover:to-green-700 dark:hover:from-green-300 dark:hover:via-green-400 dark:hover:to-green-300 hover:shadow-lg active:from-green-700 active:via-green-800 active:to-green-700 dark:active:from-green-400 dark:active:via-green-500 dark:active:to-green-400 active:shadow-inner transition-transform transform hover:scale-105 active:scale-95 flex items-center space-x-1">
                    <i class="fas fa-envelope"></i>
                    <span>Email</span>
                </a>
            </div>
        </div>
    </div>
</body>
</html>