1<!doctype html> 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16<!-- `site.alt_lang` can specify a language different from the UI --> 17<html lang="en" > 18 <head> 19 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 20 <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7"> 21 <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e"> 22 <meta name="mobile-web-app-capable" content="yes"> 23 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 24 <meta 25 name="viewport" 26 content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover" 27 ><!-- Setup Open Graph image --> 28 29 30 31 <!-- Begin Jekyll SEO tag v2.8.0 --> 32<meta name="generator" content="Jekyll v4.4.1" /> 33<meta property="og:title" content="About" /> 34<meta property="og:locale" content="en" /> 35<meta name="description" content="Add Markdown syntax content to file _tabs/about.md and it will show up on this page." /> 36<meta property="og:description" content="Add Markdown syntax content to file _tabs/about.md and it will show up on this page." /> 37<link rel="canonical" href="https://imperialoctopus.com/about/" /> 38<meta property="og:url" content="https://imperialoctopus.com/about/" /> 39<meta property="og:site_name" content="Zoey Child" /> 40<meta property="og:type" content="article" /> 41<meta property="article:published_time" content="2025-08-16T12:07:47+01:00" /> 42<meta name="twitter:card" content="summary" /> 43<meta property="twitter:title" content="About" />
44<script type="application/ld+json"> 45{"@context":"https://schema.org","@type":"WebSite","dateModified":"2025-08-16T12:07:47+01:00","datePublished":"2025-08-16T12:07:47+01:00","description":"Add Markdown syntax content to file _tabs/about.md and it will show up on this page.","headline":"About","name":"Zoey Child","sameAs":["https://cupoftea.social/@imperialoctopus","https://codeberg.org/imperialoctopus"],"url":"https://imperialoctopus.com/about/"}</script>
45 46<!-- End Jekyll SEO tag --> 47 48 49 <title>About | Zoey Child 50 </title> 51 52 <!-- 53 The Favicons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps 54 Generated by: https://realfavicongenerator.net/ 55--> 56 57 58 59<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/apple-touch-icon.png"> 60<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicons/favicon-32x32.png"> 61<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicons/favicon-16x16.png"> 62 63 <link rel="manifest" href="/assets/img/favicons/site.webmanifest"> 64 65<link rel="shortcut icon" href="/assets/img/favicons/favicon.ico"> 66<meta name="apple-mobile-web-app-title" content="Zoey Child"> 67<meta name="application-name" content="Zoey Child"> 68<meta name="msapplication-TileColor" content="#da532c"> 69<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml"> 70<meta name="theme-color" content="#ffffff"> 71 72 73 <!-- Resource Hints --> 74 75 76 77 <link rel="preconnect" href="https://fonts.googleapis.com" > 78 79 <link rel="dns-prefetch" href="https://fonts.googleapis.com" > 80 81 82 83 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 84 85 <link rel="dns-prefetch" href="https://fonts.gstatic.com" > 86 87 88 89 <link rel="preconnect" href="https://cdn.jsdelivr.net" > 90 91 <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" > 92 93 94 95 96 <!-- Bootstrap --> 97 98 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> 99 100 101 <!-- Theme style --> 102 <link rel="stylesheet" href="/assets/css/jekyll-theme-chirpy.css"> 103 104 <!-- Web Font --> 105 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap"> 106 107 <!-- Font Awesome Icons --> 108 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css"> 109 110 <!-- 3rd-party Dependencies --> 111 112 113 114 115 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/loading-attribute-polyfill.min.css"> 116 117 118 119 <!-- Image Popup --> 120 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/glightbox.min.css"> 121 122 123 <!-- Scripts --> 124 125
125<script src="/assets/js/dist/theme.min.js"></script>
125 126 127 <!-- JS selector for site. --> 128 129<!-- commons --> 130 131 132 133<!-- layout specified --> 134 135 136 137 138 139 <!-- image lazy-loading & popup & clipboard --> 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
187<script defer src="https://cdn.jsdelivr.net/combine/npm/[email protected]/dest/simple-jekyll-search.min.js,npm/[email protected]/dist/loading-attribute-polyfill.umd.min.js,npm/[email protected]/dist/js/glightbox.min.js,npm/[email protected]/dist/clipboard.min.js"></script>
187 188 189 190 191 192 193 194
195<script defer src="/assets/js/dist/page.min.js"></script>
195 196 197 198 199<!-- Pageviews --> 200 201 202 203 204 205 <!-- A placeholder to allow defining custom metadata --> 206 207</head> 208 209 210 <body> 211 <!-- The Side Bar --> 212 213<aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end"> 214 <header class="profile-wrapper"> 215 <a href="/" id="avatar" class="rounded-circle"><img src="/assets/img/pyramid2.png" width="112" height="112" alt="avatar" onerror="this.style.display='none'"></a> 216 217 <a class="site-title d-block" href="/">Zoey Child</a> 218 <p class="site-subtitle fst-italic mb-0">imperialoctopus</p> 219 </header> 220 <!-- .profile-wrapper --> 221 222 <nav class="flex-column flex-grow-1 w-100 ps-0"> 223 <ul class="nav"> 224 <!-- home --> 225 <li class="nav-item"> 226 <a href="/" class="nav-link"> 227 <i class="fa-fw fas fa-home"></i> 228 <span>HOME</span> 229 </a> 230 </li> 231 <!-- the real tabs --> 232 233 <li class="nav-item"> 234 <a href="/categories/" class="nav-link"> 235 <i class="fa-fw fas fa-stream"></i> 236 237 238 <span>CATEGORIES</span> 239 </a> 240 </li> 241 <!-- .nav-item --> 242 243 <li class="nav-item"> 244 <a href="/tags/" class="nav-link"> 245 <i class="fa-fw fas fa-tags"></i> 246 247 248 <span>TAGS</span> 249 </a> 250 </li> 251 <!-- .nav-item --> 252 253 <li class="nav-item"> 254 <a href="/archives/" class="nav-link"> 255 <i class="fa-fw fas fa-archive"></i> 256 257 258 <span>ARCHIVES</span> 259 </a> 260 </li> 261 <!-- .nav-item --> 262 263 <li class="nav-item active"> 264 <a href="/about/" class="nav-link"> 265 <i class="fa-fw fas fa-info-circle"></i> 266 267 268 <span>
268ABOUT</span> 269 </a> 270 </li> 271 <!-- .nav-item --> 272 273 </ul> 274 </nav> 275 276 <div class="sidebar-bottom d-flex flex-wrap align-items-center w-100"> 277 278 <button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle"> 279 <i class="fas fa-adjust"></i> 280 </button> 281 282 283 <span class="icon-border"></span> 284 285 286 287 288 289 290 291 <a 292 href="https://github.com/" 293 aria-label="github" 294 295 296 297 target="_blank" 298 299 300 301 302 303 304 rel="noopener noreferrer" 305 306 > 307 <i class="fab fa-github"></i> 308 </a> 309 310 311 312 313 314 <a 315 href="https://twitter.com/" 316 aria-label="twitter" 317 318 319 320 target="_blank" 321 322 323 324 325 326 327 rel="noopener noreferrer" 328 329 > 330 <i class="fa-brands fa-x-twitter"></i> 331 </a> 332 333 334 335 336 337 <a 338 href="javascript:location.href = 'mailto:' + ['imperialoctopus','gmail.com'].join('@')" 339 aria-label="email" 340 341 342 343 344 345 346 347 > 348 <i class="fas fa-envelope"></i> 349 </a> 350 351 352 353 354 355 <a 356 href="/feed.xml" 357 aria-label="rss" 358 359 360 361 362 363 364 365 > 366 <i class="fas fa-rss"></i> 367 </a> 368 369 370 </div> 371 <!-- .sidebar-bottom --> 372</aside> 373<!-- #sidebar --> 374 375 376 <div id="main-wrapper" class="d-flex justify-content-center"> 377 <div class="container d-flex flex-column px-xxl-5"> 378 <!-- The Top Bar --> 379 380<header id="topbar-wrapper" aria-label="Top Bar"> 381 <div 382 id="topbar" 383 class="d-flex align-items-center justify-content-between px-lg-3 h-100" 384 > 385 <nav id="breadcrumb" aria-label="Breadcrumb"> 386 387 388 389 390 391 <span> 392 <a href="/">Home</a> 393 </span> 394 395 396 397 398 399 <span>About</span> 400 401 402 403 404 405 </nav> 406 <!-- endof #breadcrumb --> 407 408 <button type="button" id="sidebar-trigger" class="btn btn-link"> 409 <i class="fas fa-bars fa-fw"></i> 410 </button> 411 412 <div id="topbar-title"> 413 About 414 </div> 415 416 <button type="button" id="search-trigger" class="btn btn-link"> 417 <i class="fas fa-search fa-fw"></i> 418 </button> 419 420 <search id="search" class="align-items-center ms-3 ms-lg-0"> 421 <i class="fas fa-search fa-fw"></i> 422 <input 423 class="form-control" 424 id="search-input" 425 type="search" 426 aria-label="search" 427 autocomplete="off" 428 placeholder="Search..." 429 > 430 </search> 431 <button type="button" class="btn btn-link text-decoration-none" id="search-cancel">Cancel</button> 432 </div> 433</header> 434 435 436 <div class="row flex-grow-1"> 437 <main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4"> 438 439 <!-- Refactor the HTML structure --> 440 441 442 443<!-- 444 In order to allow a wide table to scroll horizontally, 445 we suround the markdown table with `<div class="table-wrapper">` and `</div>` 446--> 447 448 449 450<!-- 451 Fixed kramdown code highlight rendering: 452 https://github.com/penibelst/jekyll-compress-html/issues/101 453 https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901 454--> 455 456 457 458<!-- Change the icon of checkbox --> 459 460 461 462<!-- Handle images --> 463 464 465 466 467 468<!-- Add header for code snippets --> 469 470 471 472<!-- Create heading anchors --> 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501<!-- return --> 502 503 504 505 506<article class="px-1"> 507 508 509 510 <h1 class="dynamic-title"> 511 About 512 </h1> 513 <div class="content"> 514 <blockquote class="prompt-tip"> 515 <p>Add Markdown syntax content to file <code class="language-plaintext filepath highlighter-rouge">_tabs/about.md</code> and it will show up on this page.</p> 516</blockquote> 517 518 </div> 519 520</article> 521 522 523 524 </main> 525 526 <!-- panel --> 527 <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 text-muted"> 528 <div class="access"> 529 <!-- Get 5 last posted/updated posts --> 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 <section id="access-lastmod"> 545 <h2 class="panel-heading">Recently Updated</h2> 546 <ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2"> 547 548 549 550 551 <li class="text-truncate lh-lg"> 552 <a href="/posts/counter-panel/">People Counter</a> 553 </li> 554 555 556 557 558 <li class="text-truncate lh-lg"> 559 <a href="/posts/hexal/">Hexal</a> 560 </li> 561 562 563 564 565 <li class="text-truncate lh-lg"> 566 <a href="/posts/wriggle/">Wriggle</a> 567 </li> 568 569 570 571 572 <li class="text-truncate lh-lg"> 573 <a href="/posts/morning-princess/">Morning Princess</a> 574 </li> 575 576 577 578 579 <li class="text-truncate lh-lg"> 580 <a href="/posts/gcbgc-website/">GCBGC Website</a> 581 </li> 582 583 </ul> 584 </section> 585 <!-- #access-lastmod --> 586 587 588 <!-- The trending tags list --> 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 </div> 608 609 610 </aside> 611 </div> 612 613 <div class="row"> 614 <!-- tail --> 615 <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4"> 616 617 618 <!-- The Footer --> 619 620<footer 621 aria-label="Site Info" 622 class=" 623 d-flex flex-column justify-content-center text-muted 624 flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3 625 " 626> 627 <p>© 628 <time>2025</time> 629 630 631 <a href="https://cupoftea.social/@imperialoctopus">Zoey Child</a>. 632 633 634
635 <span 636 data-bs-toggle="tooltip" 637 data-bs-placement="top" 638 title="Except where otherwise noted, the blog posts on this site are licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author." 639 >Some rights reserved.</span> 640 641 </p> 642 643 <p>Using the <a 644 data-bs-toggle="tooltip" 645 data-bs-placement="top" 646 title="v7.3.1" 647 href="https://github.com/cotes2020/jekyll-theme-chirpy" 648 target="_blank" 649 rel="noopener" 650 >Chirpy</a> theme for <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>. 651 </p> 652</footer> 653 654 </div> 655 </div> 656 657 <!-- The Search results --> 658 659<div id="search-result-wrapper" class="d-flex justify-content-center d-none"> 660 <div class="col-11 content"> 661 <div id="search-hints"> 662 <!-- The trending tags list --> 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 </div> 682 <div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div> 683 </div> 684</div> 685 686 </div> 687 688 <aside aria-label="Scroll to Top"> 689 <button id="back-to-top" type="button" class="btn btn-lg btn-box-shadow"> 690 <i class="fas fa-angle-up"></i> 691 </button> 692 </aside> 693 </div> 694 695 <div id="mask" class="d-none position-fixed w-100 h-100 z-1"></div> 696 697 698 <aside 699 id="notification" 700 class="toast" 701 role="alert" 702 aria-live="assertive" 703 aria-atomic="true" 704 data-bs-animation="true" 705 data-bs-autohide="false" 706> 707 <div class="toast-header"> 708 <button 709 type="button" 710 class="btn-close ms-auto" 711 data-bs-dismiss="toast" 712 aria-label="Close" 713 ></button> 714 </div> 715 <div class="toast-body text-center pt-0"> 716 <p class="px-2 mb-3">A new version of content is available.</p> 717 <button type="button" class="btn btn-primary" aria-label="Update"> 718 Update 719 </button> 720 </div> 721</aside> 722 723 724 725 <!-- Embedded scripts --> 726 727 728 729 <!-- 730 Jekyll Simple Search loader 731 See: <https://github.com/christian-fei/Simple-Jekyll-Search> 732--> 733 734 735 736 737
738<script> 739 740 document.addEventListener('DOMContentLoaded', () => { 741 SimpleJekyllSearch({ 742 searchInput: document.getElementById('search-input'), 743 resultsContainer: document.getElementById('search-results'), 744 json: '/assets/js/data/search.json', 745 searchResultTemplate: ' <article class="px-1 px-sm-2 px-lg-4 px-xl-0"> <header> <h2><a href="{url}">{title}</a></h2> <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1"> {categories} {tags} </div> </header> <p>{snippet}</p> </article>', 746 noResultsText: '<p class="mt-5">Oops! No results found.</p>', 747 templateMiddleware: function(prop, value, template) { 748 if (prop === 'categories') { 749 if (value === '') { 750 return `${value}`; 751 } else { 752 return `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`; 753 } 754 } 755 756 if (prop === 'tags') { 757 if (value === '') { 758 return `${value}`; 759 } else { 760 return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`; 761 } 762 } 763 } 764 }); 765 }); 766</script>
766 767 768 </body> 769</html> 770
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.