KitchenEngineer1332.github.io/index.html at main · KitchenEngineer1332/KitchenEngineer1332.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
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en" translate="no">
<head>
  <meta charset="UTF-8" />
  <title>Kitchen Engineer's Profile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="google" content="notranslate">
  <link rel="shortcut icon" href="cc.png" type="image/x-icon">
  <meta name="description" content="Kitchen Engineer is a personal portfolio and profile website exploring curiosity, learning through experiments, and building with kindness and intention." />
  <meta name="author" content="Kitchen Engineer" />
  <link rel="canonical" href="https://kitchenengineer1332.github.io/" />
  <meta property="og:title" content="Kitchen Engineer" />
  <meta property="og:description" content="A quiet corner of the web exploring curiosity, learning, and kindness." />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://kitchenengineer1332.github.io/" />
  <meta property="og:image" content="https://kitchenengineer1332.github.io/profile.png" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Kitchen Engineer" />
  <meta name="twitter:description" content="Exploring curiosity, learning through experiments, and kindness." />
  <meta name="twitter:image" content="https://kitchenengineer1332.github.io/profile.png" />

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@300;400;600;700&family=Playfair+Display:wght@400;600;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&display=swap" rel="stylesheet">

  <!-- Font Awesome -->
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
  />

  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <!-- Floating particles background -->
  <div class="particles">
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
  </div>

  <main class="layout">
    <div class="overlay"></div>

    <!-- LEFT / PROFILE -->
    <section class="box left">
      <div class="profile-wrapper">
        <div class="profile-glow"></div>
        <img src="cc.png" alt="Profile" class="profile-img" />
      </div>

      <div class="content-wrapper">
        <h1 class="title-main" translate="no">𝓚𝓲𝓽𝓬𝓱𝓮𝓷 𝓔𝓷𝓰𝓲𝓷𝓮𝓮𝓻</h1>
        <h2 class="subtitle" translate="no">𝓐𝓭𝓸𝓹𝓽𝓮𝓭 𝓽𝓸 𝓛𝓸𝓿𝓮 𝓪𝓷𝓭 𝓚𝓲𝓷𝓭𝓷𝓮𝓼𝓼</h2>
        <h3 class="tagline">𝓢𝓱𝓪𝓻𝓪𝓯𝓪𝓽 𝓶𝓮 𝓢𝓱𝓪𝓻𝓪𝓻𝓪𝓽 𝓒𝓱𝓾𝓹𝓲 𝓱𝓪𝓲 🤭🌸</h3>

        <div class="divider"></div>

        <p class="bio">
          A simple human being who is exploring the world by stupid actions and being curious
        </p>
      </div>
    </section>

    <!-- RIGHT -->
    <section class="right">
      <!-- INFO -->
      <div class="box right-top">
        <div class="card-header">
          <h3>About Me</h3>
          <div class="header-accent"></div>
        </div>
        <p>
          I'm a simple human exploring the world with curiosity, experiments, and the occasional bad decision.
          I like learning how things work, breaking them, fixing them, and repeating the process with kindness and intention.
          Nevermind, you can assume me another creation of Almighty in love with the nature he created.
        </p>
      </div>

      <!-- CONTACT -->
      <div class="box right-bottom">
        <div class="card-header">
          <h3>Contact</h3>
          <div class="header-accent"></div>
        </div>

        <div class="contact-icons">
          <a href="https://github.com/KitchenEngineer1332" class="contact-icon github" aria-label="GitHub">
            <div class="icon-bg"></div>
            <i class="fa-brands fa-github"></i>
            <span>GitHub</span>
          </a>

          <a href="https://in.pinterest.com/kitchen_engineer1332/" class="contact-icon pinterest" aria-label="Pinterest">
            <div class="icon-bg"></div>
            <i class="fa-brands fa-pinterest"></i>
            <span>Pinterest</span>
          </a>

          <a href="https://www.instagram.com/kitchen_engineer1332/" class="contact-icon instagram" aria-label="Instagram">
            <div class="icon-bg"></div>
            <i class="fa-brands fa-instagram"></i>
            <span>Instagram</span>
          </a>

          <a href="https://www.reddit.com/user/Kitchen_Engineer1332" class="contact-icon reddit" aria-label="Reddit">
            <div class="icon-bg"></div>
            <i class="fa-brands fa-reddit"></i>
            <span>Reddit</span>
          </a>

          <a href="https://discord.com/users/1388401123811004537" class="contact-icon discord" aria-label="Discord">
            <div class="icon-bg"></div>
            <i class="fa-brands fa-discord"></i>
            <span>Discord</span>
          </a>

          <a href="https://x.com/KitchenEng43268" class="contact-icon x" aria-label="X">
            <div class="icon-bg"></div>
            <i class="fa-brands fa-x-twitter"></i>
            <span>X</span>
          </a>
        </div>
      </div>
    </section>
  </main>

  <!-- Interaction Script -->
  <script>
    const layout = document.querySelector(".layout");
    const boxes = document.querySelectorAll(".box");
    let locked = null;

    boxes.forEach(box => {
      box.addEventListener("mouseenter", () => {
        if (locked) return;
        layout.classList.add("active");
        box.classList.add("active");
      });

      box.addEventListener("mouseleave", () => {
        if (locked) return;
        layout.classList.remove("active");
        box.classList.remove("active");
      });

      box.addEventListener("click", e => {
        e.stopPropagation();
        if (locked === box) {
          unlock();
        } else {
          lock(box);
        }
      });
    });

    document.addEventListener("click", unlock);

    function lock(box) {
      unlock();
      locked = box;
      layout.classList.add("active");
      box.classList.add("active");
    }

    function unlock() {
      layout.classList.remove("active");
      boxes.forEach(b => b.classList.remove("active"));
      locked = null;
    }

    // Disable right click
    document.addEventListener("contextmenu", e => e.preventDefault());

    // Page load animations
    window.addEventListener('load', () => {
      document.body.classList.add('loaded');
    });
  </script>
</body>
</html>