vendor: 4,778 bytes, lines 1-53
1(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))a(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const s of t.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&a(s)}).observe(document,{childList:!0,subtree:!0});function r(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function a(e){if(e.ep)return;e.ep=!0;const t=r(e);fetch(e.href,t)}})();const o="/assets/background-CXt_8IGu.webp";document.getElementById("app").innerHTML=` 2 <div class="flex flex-col md:flex-row min-h-screen"> 3 <div id="bg" class="relative md:w-3/5 w-full h-screen md:fixed dark:bg-gray-900"> 4 <div id="loading" class="absolute inset-0 flex items-center justify-center"> 5 <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-blue-500"></div> 6 </div> 7 <div id="bg-image" class="absolute top-4 left-0 w-full h-full z-1 bg-cover bg-no-repeat opacity-0 transition-opacity duration-500"></div> 8 </div> 9 <div class="md:ml-[60%] w-full md:w-2/5 bg-white dark:bg-gray-900 min-h-screen"> 10 <header class="relative w-full max-w-3xl mx-auto text-center mb-8 pt-24 md:h-screen md:flex md:flex-col md:justify-center md:items-center"> 11 <h1 class="text-4xl font-bold text-gray-800 dark:text-white">Cheng Jincheng's Homepage</h1> 12 <p class="text-lg text-gray-600 dark:text-gray-400 italic mt-2" translate="no">Per Aspera Ad Astra.</p> 13 <a href="#intro" class="mt-6 inline-block bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 dark:bg-gray-400 dark:hover:bg-gray-500" aria-label="Scroll to Introduction Section">Learn More</a> 14 </header> 15 16 <main class="relative left-0 z-20 max-w-3xl p-4"> 17 18 <section id="intro" class="mb-8 p-6 bg-white dark:bg-gray-800 rounded-lg"> 19 <h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-white">Self Introduction</h2> 20 <div class="space-y-4 text-gray-700 dark:text-gray-300"> 21 <p> 22 Hello! I'm Cheng Jincheng (Real Name Redacted for Privacy), a ${new Date().getFullYear()-2006}-year-old undergraduate student at Beijing University of Chemical Technology, majoring in Information Management and Information Systems. 23 </p> 24 <p> 25 I describe myself as a "chaotic neutral" tech enthusiast.I am a student/musician/writer/restaurant waiting staff, etc., and also an amateur network engineer who loves to break things to see how they work. 26 </p> 27 <p> 28 Now I am a member of the System Maintenance Department of Student Network Center (where I touch servers) and the Media Department of Microwater Comics Club (where I manage the Danmaku system). 29 </p> 30 <p> 31 I produce many things, varies from meals to codes, from music to novels. I love to create things and share them with others. I believe that sharing is the most beautiful thing in the world. 32 </p> 33 <p> 34 It is unimagineable that such a fat guy like me is also a cosplayer. I have cosplayed Dan Heng from Honkai: Star Rail and the Doctor from Arknights. Planning to lose weight and cosplay Man Sui from The Hungry Lamb. 35 </p> 36 </div> 37 </section> 38 39 <section id="stack" class="mb-8 p-6 bg-white dark:bg-gray-800 rounded-lg"> 40 <h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-white">Tech Stack</h2> 41 <ul class="list-disc list-inside space-y-2 text-gray-700 dark:text-gray-300"> 42 <li>Frontend: HTML, CSS (Tailwind CSS), JavaScript (Vanilla JS)</li> 43 <li>Backend: Node.js, Python, C</li> 44 <li>Infrastructure: Linux (Debian-like), Cloudflare Pages & Workers, Docker, Nginx</li> 45 <li>Tools: Git & GitHub, VS Code, GitHub Copilot (Yes, I do vibe coding, but I am able to fix the issues)</li> 46 </ul> 47 </section> 48 49 <section id="outputs" class="p-6 bg-white dark:bg-gray-800 rounded-lg"> 50 <h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-white">Outputs from Me</h2> 51 <ul class="list-disc list-inside space-y-2 text-gray-700 dark:text-gray-300"> 52 <li><a href="https://auth.i-am-cjc.tech" class="text-blue-500 hover:underline dark:text-blue-400" target="_blank" rel="noopener noreferrer">J-Auth</a> - My personal TOTP system.</li> 53 <li><a href="https://addr2zip.i-am-cjc.tech/" class="text-blue-500 hover:underline dark:text-blue-400" target="_blank" rel="noopener noreferrer">Addr2Zip</a>
53 - Query address's ZIP code from China Post Official Site.</li> 54 <li><a href="https://cybermatsu.i-am-cjc.tech" class="text-blue-500 hover:underline dark:text-blue-400" target="_blank" rel="noopener noreferrer">CyberMatsu</a> - Try your fortune.</li> 55 <li><a href="https://eching.i-am-cjc.tech" class="text-gray-500 hover:underline dark:text-gray-400" target="_blank" rel="noopener noreferrer" disabled>E-Ching</a> - Another fortune-telling tool, retired.</li> 56 <li><a href="https://start.i-am-cjc.tech/" class="text-gray-500 hover:underline dark:text-gray-400" target="_blank" rel="noopener noreferrer">JC Start</a> - A start page inspired by both LimeStart & traditional ones, died.</li> 57 <li><a href="https://sds.i-am-cjc.tech" class="text-blue-500 hover:underline dark:text-blue-400" target="_blank" rel="noopener noreferrer">SDS Chart</a> The Zung Self-Rating Depression Scale.</li> 58 <li><a href="https://phone-rope.i-am-cjc.tech" class="text-blue-500 hover:underline dark:text-blue-400" target="_blank" rel="noopener noreferrer">Phone-Rope</a> - Treat your phone as a jumping rope.</li> 59 <li><a href="https://www.bilibili.com/opus/1080533885326983170" class="text-blue-500 hover:underline dark:text-blue-400" target="_blank" rel="noopener noreferrer">The Poisonous Sakura</a> - My Novel.</li> 60 <li><a href="https://music.163.com/artist?id=99026774" class="text-blue-500 hover:underline dark:text-blue-400" target="_blank" rel="noopener noreferrer">My Music</a> - My Music on NetEase Cloud Music.</li> 61 </ul> 62 </section> 63 64 <section id="experiments" class="my-8 p-6 bg-white dark:bg-gray-800 rounded-lg"> 65 <h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-white">Experiments</h2> 66 <div class="space-y-4 text-gray-700 dark:text-gray-300"> 67 <p> 68 <h3 class="text-xl font-semibold mb-2">Steam Relay Chat (Research Demo)</h3> 69 An experimental P2P chat tool leveraging the Steamworks SDK. Achieved stable UDP connectivity and NAT traversal (Hole Punching) in restrictive network environments. 70 </p> 71 <p> 72 <h3 class="text-xl font-semibold mb-2">Microwater Danmaku System (Maintainer)</h3> 73 A high-concurrency desktop danmaku rendering system built with PyQt5. Optimized for large-scale university events, handling 1000+ concurrent users with zero frame drops. (Assisted by AI, validated by humans). 74 </p> 75 </div> 76 </section> 77 78 79 <section id="contact" class="mt-8 p-6 bg-white dark:bg-gray-800 rounded-lg"> 80 <h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-white">Contact Me</h2> 81 <p class="text-gray-700 dark:text-gray-300 mb-4"> 82 Feel free to reach out to me: 83 </p> 84 <ul class="list-disc list-inside space-y-2 text-gray-700 dark:text-gray-300"> 85 <li>Email: <a href="mailto:[email protected]" class="text-blue-500 hover:underline dark:text-blue-400">[email protected]</a></li> 86 <li>Bilibili: <a href="https://space.bilibili.com/3546554910640781" class="text-blue-500 hover:underline dark:text-blue-400" target="_blank" rel="noopener noreferrer">å¾ä¹ç¨ç¾åç个人空é´</a></li> 87 </ul> 88 </section> 89 </main> 90 <footer class="relative left-0 z-20 w-full text-center p-4 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400"> 91 <p>© ${new Date().getFullYear()} Cheng Jincheng. All rights reserved.</p> 92 <img src="https://app.greenweb.org/api/v3/greencheckimage/i-am-cjc.tech?nocache=true" alt="This website runs on green hosting - verified by thegreenwebfoundation.org" width="100px" height="47.5px" class="inline"> 93 </footer> 94 </div> 95 </div> 96 `;function l(){const i=document.getElementById("bg-image"),n=document.getElementById("loading"),r=new Image;r.src=o,r.onload=function(){i.style.backgroundImage=`url(${o})`,i.classList.remove("opacity-0"),i.classList.add("opacity-100"),n.classList.add("hidden")},r.onerror=function(a){console.error(a),n.innerHTML='<p class="text-red-500">å¾çå 载失败</p>'}}document.addEventListener("DOMContentLoaded",l);document.addEventListener("DOMContentLoaded",()=>{const i=new IntersectionObserver(r=>{r.forEach(a=>{a.isIntersecting&&(a.target.classList.add("visible"),i.unobserve(a.target))})},{threshold:.1});document.querySelectorAll("p, h1, h2, li, a").forEach(r=>{i.observe(r)})});
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.