home_page/index.html at master · ImNoName3138/home_page · 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
139
140
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Name3138 - Home</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>
<body class="bg-gradient-animated">
  <div id="door-animation" class="fixed inset-0 z-50">
    <div class="door door-left"></div>
    <div class="door door-right"></div>
  </div>

  <div id="particles-js"></div>

  <audio id="background-music" loop>
    <source src="backgroundmusic.mp3" type="audio/mpeg">
    Your browser doesn't support audio lmao
  </audio>
  <div class="fixed bottom-4 right-4 volume-control-bar z-50">
    <div class="flex items-center space-x-4">
      <button id="pause-button" class="text-white hover:text-pink-300 transition duration-300">
        <svg xmlns="http://www.w3.org/2000/svg" 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="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </button>
      <button id="continue-button" class="text-white hover:text-pink-300 transition duration-300 hidden">
        <svg xmlns="http://www.w3.org/2000/svg" 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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </button>
      <input type="range" id="volume-control" min="0" max="1" step="0.1" value="0.5" class="w-24">
    </div>
  </div>

  <nav class="fixed top-0 left-0 w-full navbar z-50">
    <div class="max-w-6xl mx-auto px-4">
      <div class="flex justify-between items-center py-4">
        <div class="flex items-center space-x-2">
          <a href="index.html" class="text-xl font-bold text-white">Noname</a>
        </div>
        <div class="flex space-x-6">
          <a href="portfolio.html" class="text-white hover:text-pink-300">Portfolio</a>
          <a href="artworks.html" class="text-white hover:text-pink-300">Artworks</a>
          <a href="#social-media" id="social-button" class="text-white hover:text-pink-300">Social</a>
        </div>
      </div>
    </div>
  </nav>

  <section class="h-screen flex items-center justify-center text-white section-content" data-aos="fade-down">
    <div class="container mx-auto flex flex-col md:flex-row items-center justify-between px-6">
      <div class="text-center md:text-left mb-8 md:mb-0">
        <h1 class="text-5xl font-bold mb-4 typing-animation" data-aos="fade-right" data-aos-delay="100">Welcome to my website ig</h1>
        <p class="text-lg mb-8" data-aos="fade-right" data-aos-delay="200">There's barely anything here but okay.</p>
        <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="button" data-aos="fade-right" data-aos-delay="300">A button?!?</a>
      </div>
      <div class="flex flex-col items-center">
        <div id="discord-profile" class="w-64 h-64 rounded-lg shadow-lg overflow-hidden relative" data-aos="fade-left" data-aos-delay="400">
          <img id="discord-avatar" src="https://cdn.discordapp.com/embed/avatars/0.png" alt="Discord Avatar" class="w-full h-full object-cover">
          <div id="status-indicator" class="absolute bottom-2 right-2 w-6 h-6 rounded-full border-4 border-dark"></div>
        </div>
        <div id="discord-status-box" class="mt-4 p-4 bg-dark-secondary rounded-lg shadow-lg text-center w-64">
          <p id="status-text" class="text-lg font-bold">Status: <span id="status">Online</span></p>
        </div>
        <div id="activity-container" class="mt-4 text-center"></div>
      </div>
    </div>
  </section>

  <section id="about" class="py-20 bg-dark-secondary bg-opacity-90 section-content">
    <div class="container mx-auto text-center">
      <h2 class="text-3xl font-bold mb-8" data-aos="fade-up">About me</h2>
      <p class="text-gray-300 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
        An idiot who plays in a band and sits in front of his laptop all day lol.
        I'm currently a student, still deciding between music or programming.
        I like animes, mangas (some), and light novels.
        Also, idk why I quit gaming.
      </p>
    </div>
  </section>

  <section id="portfolio" class="py-20 bg-dark bg-opacity-90 section-content">
    <div class="container mx-auto text-center">
      <h2 class="text-3xl font-bold mb-8" data-aos="fade-up">Hobbies</h2>
      <p class="text-gray-300 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
        I play several instruments, mostly piano & electric guitar. I also do digital art, sometimes apparently. I love
        sitting in front of my computer listening to music and am addicted to custom keyboards (wasting money).
      </p>
    </div>
  </section>

  <section id="social-media" class="py-20 bg-dark-secondary bg-opacity-90 section-content">
    <div class="container mx-auto text-center">
      <h2 class="text-3xl font-bold mb-8" data-aos="fade-up">Social Media Profiles</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 px-4">
        <div class="social-card" data-aos="fade-up" data-aos-delay="100">
          <a href="https://x.com/Im_NoName3138" target="_blank" class="block">
            <img src="https://cdn-icons-png.flaticon.com/512/733/733579.png" alt="Twitter">
            <h3 class="text-xl font-bold mb-2 text-white">Twitter</h3>
          </a>
        </div>
        <div class="social-card" data-aos="fade-up" data-aos-delay="200">
          <a href="https://discord.com/users/905428271733301268" target="_blank" class="block">
            <img src="https://cdn-icons-png.flaticon.com/512/3670/3670157.png" alt="Discord">
            <h3 class="text-xl font-bold mb-2 text-white">Discord</h3>
          </a>
        </div>
        <div class="social-card" data-aos="fade-up" data-aos-delay="300">
          <a href="https://open.spotify.com/user/315pqfbeqbgklww4ekh5baey524a" target="_blank" class="block">
            <img src="https://upload.wikimedia.org/wikipedia/commons/1/19/Spotify_logo_without_text.svg" alt="Spotify">
            <h3 class="text-xl font-bold mb-2 text-white">Spotify</h3>
          </a>
        </div>
        <div class="social-card" data-aos="fade-up" data-aos-delay="400">
          <a href="mailto:imnoname3138@gmail.com" target="_blank" class="block">
            <img src="https://cdn-icons-png.flaticon.com/512/281/281769.png" alt="Gmail">
            <h3 class="text-xl font-bold mb-2 text-white">Gmail</h3>
          </a>
        </div>
      </div>
    </div>
  </section>

  <footer class="bg-dark bg-opacity-90 py-8 section-content">
    <div class="container mx-auto text-center">
      <p class="text-gray-300">Thanks for passing by!</p>
    </div>
  </footer>

  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script src="script.js"></script>
</body>
</html>