| diff --git a/.gitignore b/.gitignore | |
| new file mode 100644 | |
| index 0000000..03c88fd | |
| --- /dev/null | |
| +++ b/.gitignore | |
| @@ -0,0 +1 @@ | |
| +.htaccess | |
| diff --git a/images/1.png b/images/1.png | |
| new file mode 100644 | |
| index 0000000..82da32f | |
| Binary files /dev/null and b/images/1.png differ | |
| diff --git a/images/2.png b/images/2.png | |
| new file mode 100644 | |
| index 0000000..edcedd8 | |
| Binary files /dev/null and b/images/2.png differ | |
| diff --git a/images/3.png b/images/3.png | |
| new file mode 100644 | |
| index 0000000..635e9fa | |
| Binary files /dev/null and b/images/3.png differ | |
| diff --git a/images/4.png b/images/4.png | |
| new file mode 100644 | |
| index 0000000..88664c9 | |
| Binary files /dev/null and b/images/4.png differ | |
| diff --git a/images/5.png b/images/5.png | |
| new file mode 100644 | |
| index 0000000..e56bf9d | |
| Binary files /dev/null and b/images/5.png differ | |
| diff --git a/images/6.png b/images/6.png | |
| new file mode 100644 | |
| index 0000000..5a63758 | |
| Binary files /dev/null and b/images/6.png differ | |
| diff --git a/images/7.png b/images/7.png | |
| new file mode 100644 | |
| index 0000000..2109011 | |
| Binary files /dev/null and b/images/7.png differ | |
| diff --git a/images/8.png b/images/8.png | |
| new file mode 100644 | |
| index 0000000..82ad5e9 | |
| Binary files /dev/null and b/images/8.png differ | |
| diff --git a/images/despbot.png b/images/despbot.png | |
| new file mode 100644 | |
| index 0000000..04a398d | |
| Binary files /dev/null and b/images/despbot.png differ | |
| diff --git a/images/discord.png b/images/discord.png | |
| new file mode 100644 | |
| index 0000000..d5346b7 | |
| Binary files /dev/null and b/images/discord.png differ | |
| diff --git a/images/github.png b/images/github.png | |
| new file mode 100644 | |
| index 0000000..192846a | |
| Binary files /dev/null and b/images/github.png differ | |
| diff --git a/images/mail.png b/images/mail.png | |
| new file mode 100644 | |
| index 0000000..be70f2d | |
| Binary files /dev/null and b/images/mail.png differ | |
| diff --git a/images/mal.png b/images/mal.png | |
| new file mode 100644 | |
| index 0000000..4ec06e9 | |
| Binary files /dev/null and b/images/mal.png differ | |
| diff --git a/images/osu.png b/images/osu.png | |
| new file mode 100644 | |
| index 0000000..7f5316a | |
| Binary files /dev/null and b/images/osu.png differ | |
| diff --git a/images/spigot.jpg b/images/spigot.jpg | |
| new file mode 100644 | |
| index 0000000..b85b4b2 | |
| Binary files /dev/null and b/images/spigot.jpg differ | |
| diff --git a/images/vortex.jpg b/images/vortex.jpg | |
| new file mode 100644 | |
| index 0000000..3dfaa7a | |
| Binary files /dev/null and b/images/vortex.jpg differ | |
| diff --git a/main.css b/main.css | |
| new file mode 100644 | |
| index 0000000..874217b | |
| --- /dev/null | |
| +++ b/main.css | |
| @@ -0,0 +1,123 @@ | |
| +html, body { | |
| + height: 145%; | |
| + font-family: 'Source Code Pro', monospace; | |
| +} | |
| + | |
| +.nav-link { | |
| + color: #dd7; | |
| +} | |
| + | |
| +.nav-link:hover { | |
| + color: #aa4; | |
| +} | |
| + | |
| +#cover { | |
| + top: -10%; | |
| + background-size: cover; | |
| + box-shadow: 100px; | |
| +} | |
| + | |
| +.tooltip { | |
| + left: 0px; | |
| +} | |
| + | |
| +.tooltip-inner { | |
| + background-color: #343a40; | |
| +} | |
| +.arrow::before { | |
| + border-bottom-color:#343a40 !important; | |
| + border-top-color:#343a40 !important; | |
| +} | |
| + | |
| +.col { | |
| + padding-left: 0.25em; | |
| + padding-right: 0.25em; | |
| +} | |
| + | |
| +#mainline { | |
| + font-weight: bold; | |
| + font-size: 1.25em; | |
| +} | |
| + | |
| +#links img { | |
| + max-width: 50px; | |
| + width:100%; | |
| +} | |
| + | |
| +.skills .card, #mainskill{ | |
| + background-color: rgba(20, 20, 20, 0.5); | |
| + box-shadow: 4px 4px 15px rgba(10, 10, 10, 0.8); | |
| + border-radius: 8px; | |
| +} | |
| + | |
| +.skills .card-body, #mainskill .card-body { | |
| + font-size: 0.8rem; | |
| +} | |
| + | |
| +#mainskill { | |
| + min-width:25%; | |
| + max-width:50%; | |
| +} | |
| + | |
| +footer { | |
| + background-color: rgba(20, 20, 20, 0.4); | |
| +} | |
| + | |
| +.nav-link.inline { /*reset for footer*/ | |
| + display: inline; | |
| + padding: 0; | |
| +} | |
| + | |
| +footer, .smaller { | |
| + font-size: 0.75em; | |
| +} | |
| + | |
| +.project { | |
| + font-weight: bold; | |
| +} | |
| + | |
| +.info-segment .large-content span { | |
| + margin-left: 2em; | |
| +} | |
| + | |
| +.splitview { | |
| + margin-right: 0px !important; | |
| + margin-left: 0px !important; | |
| +} | |
| + | |
| +@media (max-width: 767px) { | |
| + .skills { | |
| + width: 100%; | |
| + font-size: 0.75rem; | |
| + } | |
| + | |
| + .skills .card-body { | |
| + display:none; | |
| + } | |
| + | |
| + .headings { font-size: 1.25rem; } | |
| + .large-content { font-size: 0.75em; width: 100%; } | |
| + | |
| + .splitview { width: 100%; text-align: center !important; padding: 2rem !important;} | |
| + | |
| + .p-5-flex { padding: 2rem !important; } /*patch back padding since p-5 is too much*/ | |
| +} | |
| + | |
| +@media (min-width: 768px) { | |
| + .headings { font-size: 1.5rem; } | |
| + .large-content { font-size: 0.75em; width: 75%; } | |
| + .skills { width: 65%; } | |
| + | |
| + .splitview { width: 50%; } | |
| + .info-subsegment { display: flex; } | |
| + | |
| + .p-5-flex { padding: 5rem !important; } | |
| +} | |
| +@media (min-width: 992px) { | |
| + .headings { font-size: 1.75rem; } | |
| + .large-content { font-size: 1em; } | |
| +} | |
| +@media (min-width: 1200px) { | |
| + .headings { font-size: 2rem; } | |
| + .large-content { font-size: 1.25em; } | |
| +} | |
| \ No newline at end of file | |
| diff --git a/main.html b/main.html | |
| new file mode 100644 | |
| index 0000000..4fe82cd | |
| --- /dev/null | |
| +++ b/main.html | |
| @@ -0,0 +1,97 @@ | |
| +<!doctype html> | |
| +<html lang="en"> | |
| + <head> | |
| + <meta charset="utf-8"> | |
| + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| + | |
| + <script type="text/javascript"> | |
| + //randomize background and preload | |
| + const bgCount = 7; | |
| + var bg = new Image(); | |
| + bg.src = 'images/' + Math.ceil(Math.random() * bgCount) + '.png'; | |
| + </script> | |
| + | |
| + <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet"> | |
| + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> | |
| + <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> | |
| + <link rel="stylesheet" href="main.css"> | |
| + | |
| + <title>Hi! - despawningbone's portfolio</title> | |
| + </head> | |
| + | |
| + <body class="bg-dark text-center text-white"> | |
| + <div id="cover" class="d-flex w-100 h-50 p-3 mx-auto flex-column"> | |
| + <header> | |
| + <nav class="nav nav-mast head justify-content-center float-md-right"> | |
| + <a class="nav-link active" aria-current="page" href="#">Home</a> | |
| + <a class="nav-link" href="/projects.html">Projects</a> | |
| + <a class="nav-link" href="https://stash.despawningbone.me">Codestash</a> | |
| + </nav> | |
| + </header> | |
| + | |
| + <div class="headings justify-content-center my-auto container-fluid w-75"> | |
| + <div id="mainline">despawningbone<br></div> | |
| + <div>Just a weeb who loves tech.</div> | |
| + <div id="links" class="mx-auto row mt-4 w-75"> | |
| + <a href="mailto://[email protected]" class="col"><img alt="email" class="img-fluid" data-toggle="tooltip" data-placement="bottom" title="contact me!" src="images/mail.png"></img></a> | |
| + <a href="https://github.com/despawningbone" class="col"><img alt="github" class="img-fluid" data-toggle="tooltip" data-placement="bottom" title="public projects only; check codestash for more!" src="images/github.png"></img></a> | |
| + <a href="#" class="col"><img id="discord" alt="discord" class="img-fluid" data-toggle="tooltip" data-placement="bottom" title="despawningbone#4078" src="images/discord.png"></img></a> | |
| + <a href="https://myanimelist.net/profile/despawningbone" class="col"><img alt="MAL" class="img-fluid" data-toggle="tooltip" data-placement="bottom" title="my anime list! (literally)" src="images/mal.png"></img></a> | |
| + <a href="https://osu.ppy.sh/users/despawningbone" class="col"><img alt="osu!" class="img-fluid" data-toggle="tooltip" data-placement="bottom" title="click the circles!" src="images/osu.png"></img></a> | |
| + </div> | |
| + </div> | |
| + </div> | |
| + | |
| + <div id="info" class="d-flex flex-column container-fluid"> | |
| + <div class="info-segment" data-aos="fade-up"> | |
| + <p class="headings row pt-5 p-3">About me</p> | |
| + <p class="large-content pb-4 mx-auto">Heyo! I am an aspiring computer science major from Hong Kong who has been coding for fun since 2016. | |
| + <br>As one of my major hobbies, I try to explore a variety of different technical fields, from hardware development to UI design. | |
| + <br>However, my main focus has always been programming and system administration, with most of my time spent on doing projects such as despbot and vortex. | |
| + <br>Recently though, I've been spending more time on cybersecurity, and I hope to be able to work on this field in the future. | |
| + </p> | |
| + </div> | |
| + | |
| + <div class="info-segment" data-aos="fade-up"> | |
| + <p class="headings row pt-5 p-3">Technical Skills</p> | |
| + <div id="mainskill" class="card mb-4 mx-auto"><div class="card-header">Java</div><div class="card-body">Preferred language</div></div> | |
| + <div id="techskills" class="skills row h-50 mx-auto container-fluid justify-content-center"> | |
| + <div class="card m-2"><div class="card-header">C#</div><div class="card-body">Alternative to java</div></div> | |
| + <div class="card m-2"><div class="card-header">Python</div><div class="card-body">Prototyping/automation</div></div> | |
| + <div class="card m-2"><div class="card-header">git</div><div class="card-body">Adept at common workflows</div></div> | |
| + <div class="card m-2"><div class="card-header">SQL</div><div class="card-body">SQLite/MySQL integrations</div></div> | |
| + <div class="card m-2"><div class="card-header">Linux</div><div class="card-body">Sysadmin on debian-based</div></div> | |
| + <div class="card m-2"><div class="card-header">IDA</div><div class="card-body">Reversing Win32 PEs</div></div> | |
| + <div class="card m-2"><div class="card-header">Pentesting</div><div class="card-body">Metasploit; Known-CVE scripts</div></div> | |
| + <div class="card m-2"><div class="card-header">Win32API</div><div class="card-body">Formats and functions</div></div> | |
| + <div class="card m-2"><div class="card-header">C/C++</div><div class="card-body">Novice knowledge for low level interactions</div></div> | |
| + <div class="card m-2"><div class="card-header">Arduino/Pi</div><div class="card-body">Small projects e.g. cap. keypad</div></div> | |
| + <div class="card m-2"><div class="card-header">CSS</div><div class="card-body">Theming web apps</div></div> | |
| + <div class="card m-2"><div class="card-header">JavaScript</div><div class="card-body">Basic knowledge</div></div> | |
| + <div class="card m-2"><div class="card-header">HTML</div><div class="card-body">Basic knowledge</div></div> | |
| + </div> | |
| + </div> | |
| + | |
| + <div class="info-segment" data-aos="fade-up"> | |
| + <p class="headings row pt-5 p-3">Other Skills and Hobbies</p> | |
| + <div id="otherskills" class="skills row h-50 mx-auto container-fluid justify-content-center"> | |
| + <div class="card m-2"><div class="card-header">Cantonese</div><div class="card-body">Mother tongue</div></div> | |
| + <div class="card m-2"><div class="card-header">English</div><div class="card-body">Most fluent second language</div></div> | |
| + <div class="card m-2"><div class="card-header">Mandarin</div><div class="card-body">Can carry out daily conversations</div></div> | |
| + <div class="card m-2"><div class="card-header">Japanese</div><div class="card-body">(Work in progress)</div></div> | |
| + <div class="card m-2"><div class="card-header">Amateur Photography</div><div class="card-body">The backgrounds here are taken by me!</div></div> | |
| + </div> | |
| + </div> | |
| + </div> | |
| + | |
| + <footer class="d-flex flex-column w-100 mt-5"> | |
| + <p class="large-content mx-auto p-2 pt-3">Made from scratch by despawningbone with Bootstrap and AOS - view in <a href="https://stash.despawningbone.me/diffusion/WEB/" class="nav-link inline">codestash</a></p> | |
| + </footer> | |
| + | |
| + <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> | |
| + <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> | |
| + <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> | |
| + <script src="https://unpkg.com/aos@next/dist/aos.js"></script> | |
| + <script src="main.js"></script> | |
| + </body> | |
| +</html> | |
| diff --git a/main.js b/main.js | |
| new file mode 100644 | |
| index 0000000..8934c1d | |
| --- /dev/null | |
| +++ b/main.js | |
| @@ -0,0 +1,26 @@ | |
| +AOS.init(); | |
| + | |
| +if(typeof bg !== 'undefined') document.getElementById('cover').style.backgroundImage = 'linear-gradient(to bottom, rgba(52, 58, 64, 0) 94%, rgba(52, 58, 64, 1)), url(' + bg.src + ')'; | |
| + | |
| +//initialize tooltips | |
| +$('[data-toggle="tooltip"]').tooltip({ | |
| + offset: '0, 20%' | |
| +}); | |
| + | |
| + | |
| +/*$('[data-toggle="tooltip"]').mouseenter(function(){ //tooltip patch for browsers since its shifted somehow | |
| + if(!/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) { | |
| + document.styleSheets[2].cssRules[4].style.setProperty('left', (($(this).parent().index() + 1) * 2.5) + 'px', "important"); | |
| + } | |
| +});*/ //fixed by changing discord id from a to img wtf | |
| + | |
| +$('#discord').bind('click touchend', function() { | |
| + console.log(this); | |
| + if (navigator.clipboard.writeText("despawningbone#4078")) { | |
| + $(this).tooltip('hide'); | |
| + $('#discord').attr('data-original-title', "(copied!)"); | |
| + setTimeout(() => $('#discord').attr('data-original-title', "despawningbone#4078"), 400); | |
| + $(this).tooltip('show'); | |
| + | |
| + } | |
| +}); | |
| \ No newline at end of file | |
| diff --git a/projects.html b/projects.html | |
| new file mode 100644 | |
| index 0000000..3c6be78 | |
| --- /dev/null | |
| +++ b/projects.html | |
| @@ -0,0 +1,95 @@ | |
| +<!doctype html> | |
| +<html lang="en"> | |
| + <head> | |
| + <meta charset="utf-8"> | |
| + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| + | |
| + <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet"> | |
| + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> | |
| + <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> | |
| + <link rel="stylesheet" href="main.css"> | |
| + | |
| + <title>Hi! - despawningbone's portfolio</title> | |
| + </head> | |
| + | |
| + <body class="bg-dark text-center text-white"> | |
| + <div class="d-flex w-100 h-auto p-3 flex-column"> | |
| + <header> | |
| + <nav class="nav nav-mast head justify-content-center float-md-right"> | |
| + <a class="nav-link" href="/">Home</a> | |
| + <a class="nav-link active" aria-current="page" href="#">Projects</a> | |
| + <a class="nav-link" href="https://stash.despawningbone.me">Codestash</a> | |
| + </nav> | |
| + </header> | |
| + <div class="headings pt-5 my-auto mx-auto w-75"> | |
| + <div id="mainline">Project Highlights<br></div> | |
| + <div><i>More projects can be found on the codestash!</i></div> | |
| + </div> | |
| + </div> | |
| + | |
| + | |
| + | |
| + <div class="info-segment row"> | |
| + <div class="w-100 mx-auto p-5-flex divider"></div> | |
| + | |
| + <div class="text-right info-subsegment" data-aos="fade-up"> | |
| + <div class="splitview my-auto row"><img class="img-fluid mx-auto" src="images/vortex.jpg"></img></div> | |
| + <div class="m-auto pr-5 splitview"> | |
| + <p class="project headings"><a href="https://www.vortexnetwork.me" class="nav-link">Vortex Network</a></p> | |
| + <p class="large-content ml-auto"><span>Originally invited to be a plugin developer from the start of the server, I officially joined the development team not long after, | |
| + migrating it to a network. I have since maintained the Ubuntu-based infrastructure backend, the 3 websites and a discord bot along with plugin development.<br></span> | |
| + <span>From intrusion detection and prevention to general sysadmin work, I've gained a lot of real world insights into how actual system administration on a cloud might feel like, | |
| + and it taught me how to code as a team, use CD/CI technologies, and a lot more that I wouldn't have expected from developing a minecraft server.</span> | |
| + </p> | |
| + <p class="smaller">Project since July 2017</p> | |
| + </div> | |
| + </div> | |
| + | |
| + <div class="w-100 mx-auto m-5 p-5-flex divider"></div> | |
| + | |
| + <div class="text-left info-subsegment" data-aos="fade-up"> | |
| + <div class="m-auto pl-5 splitview"> | |
| + <p class="project headings"><a href="https://discordapp.com/oauth2/authorize?&client_id=311086271642599424&scope=bot&permissions=0" class="nav-link">despbot</a></p> | |
| + <p class="large-content mr-auto"><span>Ever since I started using Discord back in 2016, it has been my favorite communication platform; Everything just felt intuitive and simple yet customizable. | |
| + With this newfound favorite, I started digging into everything it has to offer, and I eventually stumbled upon the officially supported bots and their API.<br></span> | |
| + <span>Having only started programming by then, it proved to be a great opportunity for me to learn and test my skills while making helpful utilities for my daily use. | |
| + Throughout the years, it has evolved from a single 8ball to 50+ different commands, hardcoded values to per-guild configs, and from one giant class filled with if-elses to a multithreaded framework supporting nested subcommands.<br></span> | |
| + <span>It is currently semi-public as there are still a lot left to do; However, feel free to add it to any servers if you find it useful too 😊</span> | |
| + </p> | |
| + <p class="smaller">View in <a href="https://stash.despawningbone.me/diffusion/DESB/" class="nav-link inline">codestash</a> · Project since Jan 2017</p> | |
| + </div> | |
| + <div class="splitview my-auto row"><img class="img-fluid mx-auto" src="images/despbot.png"></img></div> | |
| + </div> | |
| + | |
| + <div class="w-100 mx-auto m-5 p-5-flex divider"></div> | |
| + | |
| + <div class="text-right info-subsegment" data-aos="fade-up"> | |
| + <div class="splitview my-auto row"><img class="img-fluid p-5-flex mx-auto" src="images/spigot.jpg"></img></div> | |
| + <div class="m-auto pr-5 splitview"> | |
| + <p class="project headings"><a href="https://www.spigotmc.org/resources/authors/despawningbone.256767/" class="nav-link">Spigot Plugins</a></p> | |
| + <p class="large-content ml-auto"><span>As one of the most fasinating games I've ever played, I've spent countless hours on the technical side of Minecraft, whether it was redstone or command blocks. | |
| + Eventually, with a private feature being heavily requested on a server I played frequently back then, I decided: why not try programming it myself and give it to the server instead?<br></span> | |
| + <span>With only basic C knowledge and having only created simple utilities, it proved to be a challenge, but it also was what really sparked my interest in computer science. | |
| + I created and published several more plugins in the coming years, before moving on to creating custom plugins for vortex network.</span> | |
| + </p> | |
| + <p class="smaller">Project since Dec 2016 · on hiatus</p> | |
| + </div> | |
| + </div> | |
| + | |
| + <div class="w-100 mx-auto mt-5 p-5-flex divider"></div> | |
| + | |
| + </div> | |
| + </div> | |
| + | |
| + | |
| + <footer class="d-flex flex-column w-100 mt-5"> | |
| + <p class="large-content mx-auto p-2 pt-3">Made from scratch by despawningbone with Bootstrap and AOS - view in <a href="https://stash.despawningbone.me/diffusion/WEB/" class="nav-link inline">codestash</a></p> | |
| + </footer> | |
| + | |
| + <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> | |
| + <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> | |
| + <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> | |
| + <script src="https://unpkg.com/aos@next/dist/aos.js"></script> | |
| + <script src="main.js"></script> | |
| + </body> | |
| +</html> |
File Metadata
File Metadata
- Mime Type
- text/x-diff
- Expires
- Tue, Apr 15, 6:05 PM (4 h, 23 m)
- Storage Engine
- local-disk
- Storage Format
- Raw Data
- Storage Handle
- 2f/73/9b4a6e3b3bbf73ccefe074562e35