1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>seegood â Portfolio</title> 7 <meta name="description" content="Portfolio of seegood. Main works in web design, brand identity and digital experiences."> 8 <link rel="preconnect" href="https://fonts.googleapis.com"> 9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 10 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet"> 11 <link rel="canonical" href="https://imwjh.github.io/"> 12 <link rel="alternate" hreflang="en" href="https://imwjh.github.io/"> 13 <link rel="alternate" hreflang="zh-CN" href="https://explore.seegood.top/"> 14 <link rel="alternate" hreflang="x-default" href="https://imwjh.github.io/"> 15 <meta name="robots" content="index, follow"> 16 17 <meta property="og:type" content="website"> 18 <meta property="og:url" content="https://imwjh.github.io/"> 19 <meta property="og:title" content="seegood â Portfolio"> 20 <meta property="og:description" content="Portfolio of seegood. Main works in web design, brand identity and digital experiences."> 21 <meta property="og:image" content="https://imwjh.github.io/images/seegood.webp"> 22 23 <meta name="twitter:card" content="summary_large_image"> 24 <meta name="twitter:title" content="seegood â Portfolio"> 25 <meta name="twitter:description" content="Portfolio of seegood. Main works in web design, brand identity and digital experiences."> 26 <meta name="twitter:image" content="https://imwjh.github.io/images/seegood.webp"> 27 28 <link rel="icon" type="image/x-icon" href="favicon.ico"> 29 <link rel="stylesheet" href="css/style.css"> 30 <link rel="preload" as="image" href="images/seegood.webp"> 31 32
32<script defer src="https://events.vercount.one/js"></script>
32 33
33<script> 34 var _hmt = _hmt || []; 35 (function() { 36 var hm = document.createElement("script"); 37 hm.src = "https://hm.baidu.com/hm.js?c91a0de7400afdc5c9fa5cf64b93dd72"; 38 var s = document.getElementsByTagName("script")[0]; 39 s.parentNode.insertBefore(hm, s); 40 })(); 41 </script>
41 42 43
43<script type="application/ld+json"> 44 { 45 "@context": "https://schema.org", 46 "@type": "Person", 47 "name": "seegood", 48 "url": "https://imwjh.github.io/", 49 "sameAs": [ 50 "https://github.com/imwjh", 51 "https://www.instagram.com/wuuu__mnothing", 52 "https://imwjh.com/", 53 "https://b23.tv/bsoC3Xn" 54 ], 55 "jobTitle": "Creative Developer & Explorer", 56 "description": "Portfolio of seegood. Main works in web design, brand identity and digital experiences." 57 } 58 </script>
58 59</head> 60<body> 61 <!-- Loading Screen --> 62 <div class="loader" id="loader"> 63 <div class="loader-inner"> 64 <div class="loader-text"> 65 <span>s</span><span>e</span><span>e</span><span>g</span><span>o</span><span>o</span><span>d</span> 66 </div> 67 <div class="loader-bar"><div class="loader-progress" id="loaderProgress"></div></div> 68 </div> 69 </div> 70 71 <div class="cursor" id="cursor"></div> 72 <div class="cursor-trail" id="cursorTrail"></div> 73 74 <header class="site-header"> 75 <a href="#" class="logo" data-cursor="hover">seegood</a> 76 <nav class="main-nav"> 77 <a href="#works" data-cursor="hover">Works</a> 78 <a href="#about" data-cursor="hover">About</a> 79 <a href="#contact" data-cursor="hover">Contact</a> 80 </nav> 81 <a href="https://explore.seegood.top" class="lang-switch" data-cursor="hover">ZH</a> 82 </header> 83 84 <main> 85 <!-- Hero --> 86 <section class="hero" id="hero"> 87 <div class="hero-bg-text" aria-hidden="true">SELECTED</div> 88 <div class="hero-bg-text-outline" aria-hidden="true">WORKS</div> 89 90 <div class="hero-content"> 91 <h1 class="hero-title"> 92 <span class="line reveal-line">Creative</span> 93 <span class="line reveal-line">Developer</span> 94 <span class="line reveal-line accent">& Explorer</span> 95 </h1> 96 <p class="hero-desc reveal-fade"> 97 "Beauty is the most valuable side of things; 98 the experience of beauty is the most valuable side of life." 99 </p> 100 </div> 101 102 <div class="hero-sidebar"> 103 <span class="vertical-text">SCROLL TO EXPLORE</span> 104 </div> 105 106 <div class="hero-meta"> 107 <div class="meta-item reveal-fade"> 108 <span class="meta-label">Location</span> 109 <span class="meta-value">China</span> 110 </div> 111 <div class="meta-item reveal-fade"> 112 <span class="meta-label">Status</span> 113 <span class="meta-value">Building new projects</span> 114 </div> 115 </div> 116 </section> 117 118 <!-- Works --> 119 <section class="works" id="works"> 120 <header class="section-header"> 121 <span class="section-number reveal-fade">01</span> 122 <h2 class="section-title reveal-line">Main<br>Works</h2> 123 </header> 124 125 <div class="projects-list"> 126 <!-- Project 1 --> 127 <article class="project project-left" data-cursor="hover"> 128 <div class="project-number-bg" aria-hidden="true">01</div> 129 <div class="project-visual"> 130 <div class="project-image-wrap"> 131 <img src="images/cgood.seegood.top.avif" alt="CGooD Start Page" loading="lazy"> 132 </div> 133 </div> 134 <div class="project-info"> 135 <span class="project-tags">Web</span> 136 <h3 class="project-name">CGooD Start Page</h3> 137 <p class="project-desc">A clean, beautiful, and efficient browser start page.</p> 138 <div class="project-footer"> 139 <span class="project-year">cgood.seegood.top</span> 140 <a href="https://cgood.seegood.top" class="project-link" data-cursor="hover" target="_blank" rel="noopener">Visit Site â</a> 141 </div> 142 </div> 143 </article> 144 145 <!-- Project 2 --> 146 <article class="project project-right" data-cursor="hover"> 147 <div class="project-number-bg" aria-hidden="true">02</div> 148 <div class="project-info"> 149 <span class="project-tags">Web</span> 150 <h3 class="project-name">MemCull</h3> 151 <p class="project-desc">MemCull is a tool focused on efficiently cleaning up your phone's photo album in a memory-evoking way. Intuitive swipe interactions make every organizing session a pleasure.</p> 152 <div class="project-footer"> 153 <span class="project-year">memcull.seegood.top</span> 154 <a href="https://memcull.seegood.top" class="project-link" data-cursor="hover" target="_blank" rel="noopener">Visit Site â</a> 155 </div> 156 </div> 157 <div class="project-visual"> 158 <div class="project-image-wrap"> 159 <img src="images/memcull.seegood.top.avif" alt="MemCull" loading="lazy"> 160 </div> 161 </div> 162 </article> 163 164 <!-- Project 3 --> 165 <article class="project project-left" data-cursor="hover"> 166 <div class="project-number-bg" aria-hidden="true">03</div> 167 <div class="project-visual"> 168 <div class="project-image-wrap"> 169 <img src="images/toapp.seegood.top.avif" alt="ToApp" loading="lazy"> 170 </div> 171 </div> 172 <div class="project-info">
173 <span class="project-tags">Web</span> 174 <h3 class="project-name">ToApp</h3> 175 <p class="project-desc">ToApp â Website to App. Convert any website link or web file into a native Android app. Simple, fast, and elegant.</p> 176 <div class="project-footer"> 177 <span class="project-year">toapp.seegood.top</span> 178 <a href="https://toapp.seegood.top" class="project-link" data-cursor="hover" target="_blank" rel="noopener">Visit Site â</a> 179 </div> 180 </div> 181 </article> 182 183 <!-- Project 4 --> 184 <article class="project project-right" data-cursor="hover"> 185 <div class="project-number-bg" aria-hidden="true">04</div> 186 <div class="project-info"> 187 <span class="project-tags">Web</span> 188 <h3 class="project-name">CaiBookkeeping</h3> 189 <p class="project-desc">In development. Elegance and utility, combined. We've stripped away the clutter and coldness of traditional budgeting apps, keeping only what matters most â your financial peace of mind.</p> 190 <div class="project-footer"> 191 <span class="project-year">www.caibookkeeping.cyou</span> 192 <a href="https://www.caibookkeeping.cyou" class="project-link" data-cursor="hover" target="_blank" rel="noopener">Visit Site â</a> 193 </div> 194 </div> 195 <div class="project-visual"> 196 <div class="project-image-wrap"> 197 <img src="images/www.caibookkeeping.cyou.avif" alt="CaiBookkeeping" loading="lazy"> 198 </div> 199 </div> 200 </article> 201 202 <!-- Project 5 --> 203 <article class="project project-left" data-cursor="hover"> 204 <div class="project-number-bg" aria-hidden="true">05</div> 205 <div class="project-visual"> 206 <div class="project-image-wrap"> 207 <img src="images/wabitab.seegood.top.avif" alt="WabiTab" loading="lazy"> 208 </div> 209 </div> 210 <div class="project-info"> 211 <span class="project-tags">Web</span> 212 <h3 class="project-name">WabiTab</h3> 213 <p class="project-desc">Wabi Tab is a minimalist wabi-sabi browser extension designed to bring a moment of tranquility to your busy digital life. Return to essentials. Focus on beginning.</p> 214 <div class="project-footer"> 215 <span class="project-year">wabitab.seegood.top</span> 216 <a href="https://wabitab.seegood.top" class="project-link" data-cursor="hover" target="_blank" rel="noopener">Visit Site â</a> 217 </div> 218 </div> 219 </article> 220 221 <!-- Project 6 --> 222 <article class="project project-right" data-cursor="hover"> 223 <div class="project-number-bg" aria-hidden="true">06</div> 224 <div class="project-info"> 225 <span class="project-tags">Web</span> 226 <h3 class="project-name">Toolbox</h3> 227 <p class="project-desc">Free access to various practical tools to boost your productivity.</p> 228 <div class="project-footer"> 229 <span class="project-year">toolbox.seegood.top</span> 230 <a href="https://toolbox.seegood.top" class="project-link" data-cursor="hover" target="_blank" rel="noopener">Visit Site â</a> 231 </div> 232 </div> 233 <div class="project-visual"> 234 <div class="project-image-wrap"> 235 <img src="images/toolbox.seegood.top.avif" alt="Toolbox" loading="lazy"> 236 </div> 237 </div> 238 </article> 239 240 <!-- Project 7 --> 241 <article class="project project-left" data-cursor="hover"> 242 <div class="project-number-bg" aria-hidden="true">07</div> 243 <div class="project-visual"> 244 <div class="project-image-wrap"> 245 <img src="images/dwd.seegood.top.avif" alt="Merge Big Belly" loading="lazy"> 246 </div> 247 </div> 248 <div class="project-info"> 249 <span class="project-tags">Web</span> 250 <h3 class="project-name">Merge Big Belly</h3> 251 <p class="project-desc">A bizarre giant-merging game.</p> 252 <div class="project-footer">
253 <span class="project-year">dwd.seegood.top</span> 254 <a href="https://dwd.seegood.top" class="project-link" data-cursor="hover" target="_blank" rel="noopener">Visit Site â</a> 255 </div> 256 </div> 257 </article> 258 259 <!-- Project 8 --> 260 <article class="project project-right" data-cursor="hover"> 261 <div class="project-number-bg" aria-hidden="true">08</div> 262 <div class="project-info"> 263 <span class="project-tags">Web</span> 264 <h3 class="project-name">CGooD Game</h3> 265 <p class="project-desc">Just play.</p> 266 <div class="project-footer"> 267 <span class="project-year">onlinegames.seegood.top</span> 268 <a href="https://onlinegames.seegood.top" class="project-link" data-cursor="hover" target="_blank" rel="noopener">Visit Site â</a> 269 </div> 270 </div> 271 <div class="project-visual"> 272 <div class="project-image-wrap"> 273 <img src="images/onlinegames.seegood.top.avif" alt="CGooD Game" loading="lazy"> 274 </div> 275 </div> 276 </article> 277 278 <!-- Project 9 --> 279 <article class="project project-left" data-cursor="hover"> 280 <div class="project-number-bg" aria-hidden="true">09</div> 281 <div class="project-visual"> 282 <div class="project-image-wrap"> 283 <img src="images/have-fun.imwjh.com.webp" alt="What to Eat Today" loading="lazy"> 284 </div> 285 </div> 286 <div class="project-info"> 287 <span class="project-tags">Web</span> 288 <h3 class="project-name">What to Eat Today</h3> 289 <p class="project-desc">Can't decide what to eat? Let us help! We recommend the perfect food based on your mood and the weather.</p> 290 <div class="project-footer"> 291 <span class="project-year">have-fun.imwjh.com</span> 292 <a href="https://have-fun.imwjh.com/en/" class="project-link" data-cursor="hover" target="_blank" rel="noopener">Visit Site â</a> 293 </div> 294 </div> 295 </article> 296 297 <!-- Project 10 --> 298 <article class="project project-right" data-cursor="hover"> 299 <div class="project-number-bg" aria-hidden="true">10</div> 300 <div class="project-info"> 301 <span class="project-tags">Web</span> 302 <h3 class="project-name">Blog</h3> 303 <p class="project-desc">Learn more about SEEGooD. A fun experiment â here, expression, about me. Publishing content I create.</p> 304 <div class="project-footer"> 305 <span class="project-year">imwjh.com</span> 306 <a href="https://imwjh.com" class="project-link" data-cursor="hover" target="_blank" rel="noopener">Visit Site â</a> 307 </div> 308 </div> 309 <div class="project-visual"> 310 <div class="project-image-wrap"> 311 <img src="images/blog.seegood.top.avif" alt="Blog" loading="lazy"> 312 </div> 313 </div> 314 </article> 315 </div> 316 </section> 317 318 <!-- About --> 319 <section class="about" id="about"> 320 <div class="about-grid"> 321 <div class="about-visual"> 322 <img src="images/seegood.webp" alt="Portrait" loading="lazy"> 323 </div> 324 <div class="about-content"> 325 <span class="section-number reveal-fade">02</span> 326 <h2 class="section-title reveal-line">About</h2> 327 <div class="about-text reveal-fade"> 328 <p> 329 A curious doer and restless generalist. I touch many things without 330 claiming mastery. 331 </p> 332 <p> 333 Everything I build is in service of a richer life. When I'm not designing, 334 you'll find me chasing emerging tech trends or savoring the calm of 335 a quiet cup of coffee. 336 </p> 337 </div> 338 <div class="about-stats reveal-fade"> 339 <div class="stat"> 340 <span class="stat-value">23</span> 341 <span class="stat-label">Age</span> 342 </div> 343 <div class="stat">
344 <span class="stat-value">5+</span> 345 <span class="stat-label">Projects</span> 346 </div> 347 </div> 348 </div> 349 </div> 350 </section> 351 352 <!-- Footer / Contact --> 353 <footer class="site-footer" id="contact"> 354 <div class="footer-cta"> 355 <span class="footer-label reveal-fade">Let's create something together</span> 356 <h2 class="footer-title reveal-line"> 357 <a href="mailto:[email protected]" data-cursor="hover">[email protected]</a> 358 </h2> 359 </div> 360 <div class="footer-bottom"> 361 <span>© 2025-2026 seegood · Views <span id="vercount_value_site_pv">Loading</span> · Visitors <span id="vercount_value_site_uv">Loading</span></span> 362 <div class="footer-links"> 363 <a href="https://github.com/imwjh" data-cursor="hover" target="_blank" rel="noopener">GitHub</a> 364 <a href="https://www.instagram.com/wuuu__mnothing?igsh=MXFncmFoc2dtMnZvZQ==" data-cursor="hover" target="_blank" rel="noopener">Instagram</a> 365 <a href="https://b23.tv/bsoC3Xn" data-cursor="hover" target="_blank" rel="noopener">Bilibili</a> 366 <a href="https://imwjh.com/" data-cursor="hover" target="_blank" rel="noopener">Blog</a> 367 <a href="https://imwjh.com/support-me" data-cursor="hover" target="_blank" rel="noopener">Support me</a> 368 </div> 369 </div> 370 </footer> 371 </main> 372 373
373<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
373 374
374<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
374 375
375<script src="js/app.js"></script>
375 376</body> 377</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.