pigamer37.github.io/index.html at main · Pigamer37/pigamer37.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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="google-site-verification" content="1BqcThKRdECr3YThd9hAaeQrExOUhcR6VEtBBrWlIBc" />
    <meta charset="utf-8" />
    <title>KB's Lair</title>
    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="A personal website made from scratch" />
<!-- Social media stuff -->
    <meta property="og:title" content="KB's Lair" />
    <meta property="og:description" content="A personal website made from scratch" />
    <meta property="og:image" content="/images/twitter_preview.png" />
    <meta property="og:image:alt" content="Preview image" />

    <meta name="twitter:title" content="KB's Lair" />
    <meta name="twitter:description" content="A personal website made from scratch" />
    <meta name="twitter:url" content="/?src=twitter" />
    <meta name="twitter:image:src" content="/images/twitter_preview.png" />
    <meta name="twitter:image:alt" content="27 different home appliances" />
    <meta name="twitter:creator" content="@KBs__Lucas" />
    <meta name="twitter:site" content="@KBs__Lucas" />
    <meta name="google-site-verification" content="THCwtcz4fV_j6lNR9aneELTE4iwPhXLnE7vAxJv08ms" />
<!-- Social media end -->
    <link href="/window.css" rel="stylesheet" type="text/css" media="all">
    <meta name="theme-color" content="#ff9933">
    <link rel="icon" type="image/png" href="/images/favicon.png" />
    <link rel="alternate" href="/es/" hreflang="es-ES" />
    <link rel="canonical" href="https://pigamer37.github.io" />
    <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/RSS.xml">
    <link rel="preload" as="font" href="/fonts/CascadiaCode.woff2" crossorigin>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/github-dark-dimmed.min.css" type="text/css" media="(prefers-color-scheme: dark)">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/github.min.css" type="text/css" media="(prefers-color-scheme: light)">
    <link href="/styles/homepage.css" rel="stylesheet" type="text/css" media="all">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
<!--<script type="text/javascript">(function(d, t){
var g=d.createElement(t),
s=d.getElementsByTagName(t)[0];
g.src="https://cdn.pushalert.co/integrate_f0df67d9af2412eae8ae200d88d84941.js";
s.parentNode.insertBefore(g, s);
}(document, "script"));
</script>-->
  </head>
  <body>
    <header>
      <nav class="window" id="navigation" role="menubar" tabindex="0">
        <div class="title-bar">
          <span class="title" role="heading">Site Content Navigation</span>
          <div class="buttons">
            <button tabindex="-1">_</button>
            <button tabindex="-1">&#x26F6;</button>
            <button tabindex="-1">✕</button>
          </div>
        </div>
        <div class="content">
          <ul role="list">
            <li><a aria-current="page" href="#main" role="menuitem" tabindex="0" style="margin: 1ch">Home</a></li>
            <li><a href="/es" hreflang="es-ES" lang="es-ES" role="menuitem" tabindex="0" style="margin: 1ch">Página en Español</a>
            <li><a href="/posts" role="menuitem" tabindex="0" style="margin: 1ch">Posts</a></li>
            <li><a href="/socials" role="menuitem" tabindex="0" style="margin: 1ch">Socials/Contact</a></li>
            <li><a href="/about" role="menuitem" tabindex="0" style="margin: 1ch">About</a></li>
            <li><a href="#footer" role="menuitem" tabindex="0" style="margin: 1ch">More Info</a></li>
          </ul>
        </div>
      </nav>
    </header>
    <main>
    <h1 style="display:flex; justify-content:center;">KB's Home Page!</h1>
     <article class="window" id="main">
        <div class="title-bar">
          <span class="title">Main Content</span>
          <div class="buttons">
            <button tabindex="-1">_</button>
            <button tabindex="-1">&#x26F6;</button>
            <button tabindex="-1">✕</button>
          </div>
          </div>
        <div class="content">
          <p>This website is WIP, but here's a list of topics that you might expect:</p>
          <ul id="vidlist">
            <li>Music<br><a id="b-a" tabindex="-1" href="/socials#bands" aria-label="Read more about my music"><video aria-describedby="b-a" tabindex="0" preload="" playsinline class="hoverVid" muted loop><source width="960" src="https://files.catbox.moe/95ly3s.webm" type="video/webm">Video not supported</video></a></li>
            <li>Electronics/robotics. <a id="r-a" href="https://blogs.upm.es/robogait/" class="no-external" target="_blank">See the University Robotics project I worked in!<br><img aria-describedby="r-a" tabindex="0" alt="Mobile robot prototype I worked in" class="hoverImg" src="https://blogs.upm.es/robogait/wp-content/uploads/sites/853/2022/07/exteriores-1-288x300.jpg" srcset="https://blogs.upm.es/robogait/wp-content/uploads/sites/853/2022/07/exteriores-1-288x300.jpg 288w, https://blogs.upm.es/robogait/wp-content/uploads/sites/853/2022/07/exteriores-1-732x763.jpg 732w, https://blogs.upm.es/robogait/wp-content/uploads/sites/853/2022/07/exteriores-1-768x801.jpg 768w, https://blogs.upm.es/robogait/wp-content/uploads/sites/853/2022/07/exteriores-1-982x1024.jpg 982w, https://blogs.upm.es/robogait/wp-content/uploads/sites/853/2022/07/exteriores-1-1474x1536.jpg 1474w, https://blogs.upm.es/robogait/wp-content/uploads/sites/853/2022/07/exteriores-1-1965x2048.jpg 1965w, https://blogs.upm.es/robogait/wp-content/uploads/sites/853/2022/07/exteriores-1-1140x1188.jpg 1140w" sizes="(max-height: 500px) 288px, 25vw" width="288" height="300" fetchpriority="high"></a></li>
            <li>Programming. <a id="g-a" href="https://github.com/Pigamer37" class="no-external" target="_blank">Check out my GitHub!<br><div aria-describedby="g-a" tabindex="0" style="text-decoration:none" class="hoverEl"><pre><code class="js-html">const FPS=30;
const prog_bar=document.getElementsByTagName('progress')[0];

function updateProgBar(val=0, vidEl=undefined, outEl=undefined){
  if((val===null)||(val===undefined)){
    prog_bar.removeAttribute('aria-valuenow');
    prog_bar.removeAttribute('value');
    return;
  }
  prog_bar.value=val;
  prog_bar.setAttribute('aria-valuenow', prog_bar.value+"%");
  prog_bar.textContent=prog_bar.value+"%";

  if((vidEl!==undefined)&&(outEl!==undefined)){
    vidEl.setAttribute('aria-busy', val<100);
    outEl.setAttribute('aria-busy', val<100);
  }

  if(prog_bar.value===100){
    const progLabel=prog_bar.parentNode;
    for(const ch of progLabel.childNodes){
      if(ch.tagName==="SPAN"){ch.innerHTML="Completed Loading&nbsp;"; break;}
    }
    setTimeout(function(){progLabel.parentNode.removeChild(progLabel);}, 5000);
  }
}
function errorProgBar(vidEl, outEl){
  const progLabel=prog_bar.parentNode;
  progLabel.parentNode.removeChild(progLabel);
  vidEl.setAttribute('aria-busy', false);
  outEl.setAttribute('aria-busy', false);
}</code></pre></div></a></li>
            <li>Videogames</li>
            <script>const stop=function(event){this.pause();this.currentTime=0;};const vids=document.getElementsByClassName("hoverVid");for(const vid of vids){vid.addEventListener('pointerenter', () => {vid.play();});
            vid.addEventListener('mouseleave', stop.bind(vid));vid.addEventListener('pointerup', stop.bind(vid));vid.addEventListener('touchend', stop.bind(vid));}</script>
          </ul>
          <label>Define accent color via picker: <input type="color" value="#ff9933" class="color-pickerr"/></label> <button style="font-weight:bold;background-color:blue;border-radius:1em;color:white" id="res">Reset</button>
          <script src="/scripts/user-color.js"></script>
          <p>Privacy notice: This color is stored in your browser. No information is sent to me.</p>
          <h1>Online Tools I've built:</h1>
          <h3>Lane Detector</h3>
          <p>You now can <a href="/TFG_Gomez_Velayos_Lucas.pdf" download="KBs_TFG.pdf">
          <button>download my final project's article</button></a>, or just <a href="/TFG_Gomez_Velayos_Lucas.pdf" target="_blank">preview it</a>). Also, <strong>my</strong> code made for the project is on <a href="https://github.com/Pigamer37/Trabajo-Fin-de-Grado" target="_blank">my GitHub</a>. Thanks to <a href="https://docs.opencv.org/4.10.0/df/d0a/tutorial_js_intro.html" target="_blank">OpenCV.js</a>, I'm able to host my <a href="/tools/Lane-Detector">Final Project's lane detection algorithm in this site</a> using your own webcam!<br>
          I translated all my <code>C++</code> codebase to <code><abbr title="JavaScript">JS</abbr></code>. The use of OpenCV is a bit different between languages, and JS is garbage collected, which I'm not used to, but OpenCV.js makes you delete some of its objects explicitly.
          </p>
          <h3>RSS Feed Generators, for standard RSS and podcast feeds</h3>
          <p>You can <a href="/tools/RSS-Generator.html">access them directly</a> or read <a href="/posts/RSS_Explanation">my article about RSS and how it works</a> before using it.</p>
          <p>I will build this site little by little, as I learn (I used <a href="https://web.dev/learn" target="_blank">Google Dev's web developement courses</a>), but I hope to keep sharing cool things like this with you in the near future! Trying to make this site responsive, performant and accessible. I must say that the <span class="OctupleMax">cannonical form </span>of this page is in dark mode, I don't usually look at it in light mode and it's uglier to me. I need to improve this homepage still. Feel free to contact me in the Socials tab or Neocities for anything, like suggestions about this page, questions about the posts, to have a little chat...</p>
          <h3>Stremio Addons</h3>
          <p><a href="/stremio/manifest.json" target="_blank">A catalog of the addons I've made/contributed to as a Stremio addon catalog</a>. You can learn what Stremio and its addons are by reading <a href="/posts/I_made_a_Stremio_Addon" target="_blank">my article about it</a>.</p>
          <ol>
            <li><a href="/stremio/manifest.json" target="_blank">My Stremio Addon Catalog</a> - A catalog of the addons I've made/contributed to.</li>
            <li><a href="https://github.com/Pigamer37/buta-no-subs-stremio-addon" target="_blank"><i lang="ja">Buta no Subs</i></a> - Japanse subtitle provider</li>
            <li><a href="https://github.com/Pigamer37/animeflv-stremio-addon" target="_blank">AnimeFLV</a> - Adds AnimeFLV integration</li>
            <li><a href="https://github.com/Pigamer37/rtve-stremio-addon" target="_blank">RTVE</a> - Adds RTVE (spanish radio and TV) integration</li>
          </ol>
        </div>
      </article>
      <!--<div class="window" id="cusdis_win">
        <div class="title-bar">
          <span class="title">Comment Section</span>
          <div class="buttons">
            <button tabindex="-1">_</button>
            <button tabindex="-1">&#x26F6;</button>
            <button tabindex="-1">✕</button>
          </div>
        </div>
        <div class="content">
        <div id="cusdis_thread" data-host="https://cusdis.com" data-app-id="791fa915-b4a6-4068-98ed-56457204d588" data-page-id="homepage" data-page-url="https://pigamer37.github.io/" data-page-title="KB's Lair"></div>
        <script async defer src="https://cusdis.com/js/cusdis.es.js"></script>
        </div>
      </div>-->
    </main>
    <footer id="footer">
      <span style="display: flex; flex-direction:column; align-items:center; gap:1em;">
      <!--<iframe height="300" width="640" src="https://webring.htmlhobbyist.com/site/kbs-lucas.neocities.org/" title="The HTML Hobbyist Webring"></iframe>-->
      <div id="miscri2">
        <a href='https://miscri.netlify.app/webring?action=prev'class="no-external"> ← prev </a>
        I am part of the
        <a href='https://miscri.netlify.app/webring?action=home'>~misc-ring~</a>
        <a href='https://miscri.netlify.app/webring?action=rand' class="no-external"> random ?</a>
        <a href='https://miscri.netlify.app/webring?action=next' class="no-external"> next → </a>
      </div>

      </span>
      <p>This webpage's HTML is licensed under a MIT license, CSS and site contents are protected by copyright&copy; law.<br></p>
      <p><a href="/RSS.xml" id="RSS"><img src="https://www.w3schools.com/xml/pic_rss.gif" width="41" height="16" alt="RSS"></a></p>
      <p><a href="#">Back to top</a></p>
    </footer>
    <script defer src="/scripts/window.js"></script>
  </body>
</html>