You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
mysite/index.html

329 lines
16 KiB

<!-- LAST UPDATED -- Mon Mar 21 01:24:34 PM IST 2022 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Neo Void's Site</title>
<meta name="description" content="Neo Void's Site">
<!-- Recommended minimum -->
<meta property="og:title" content="Neo Void">
<meta property="og:description" content="Neo Void' Site">
<meta property="og:image" content="img/summary_large_image.png">
<meta name="twitter:card" content="summary">
<!-- favicon for site -->
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<!-- You could also inline the stylesheet -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jetbrains.css">
<!-- special font for special quotes-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora&family=Marck+Script&family=Rye&display=swap">
<!-- Twemoji Font Support -->
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<neon>
<span class="box">
<a href="#home">NE0xV0iD ></a>
</span>
</neon>
<edges>
<nav>
<a href="#links">Links</a>
<a href="#blog">Blog</a>
<a href="#photos">Photos</a>
<a href="#portfolio">Portfolio</a>
</nav>
</edges>
</header>
<main>
<!-- ----------
---- Home -----
----------- -->
<section id="home">
<blockquote style="opacity: 100">
<p style="color:var(--highlight)" font-family="Twemoji">💭👋🕺💃🏡🌼🌟</p>
</blockquote>
<aside style="border: 1px solid var(--highlight);">
<figure>
<img loading="lazy" alt="🍍" src="img/pitr.png" width="299" height="230">
</figure>
</aside>
<article>
<div>
<h2 style="color:var(--highlight)">Hi there!</h2>
<code> I am Neo Void. </code>
<h2 style="color:var(--highlight)" font-family="Twemoji">I Love Linux. 🐧</h2>
<code>Artix | DWM | ST | EMACS+VIM </code>
<h2 style="color:var(--highlight)"> Likes.. </h2>
<code> Reads | Flix | Thinks <br>
Philosophy | Psychology | Computers <br>
Privacy | CopyLeft | OpenSource </code>
</div>
</article>
<aside style="border:1px solid var(--extralightcolor); position: relative" >
<special-quote>
❝ Life main tante ho rakhe hai....! ❞
</special-quote>
</aside>
<p style="color:var(--highlight)"> ---xoxo--- </p>
<article>
<div style="border:1px solid var(--greencolor); padding: 15px; position: static">
<p> VISITS </p>
<script type="text/javascript" src="//counter.websiteout.net/js/2/10/0/1"></script>
</div>
</article>
</section>
<!-- ----------
---- Links -----
----------- -->
<section id="links">
<article>
<h2>🦉 Personal Links: </h2>
<div>
<ul>
<li>Mail: <a href="mailto:neovoid@hi2.in" target="_blank" rel="noopener noreferrer"> neovoid@hi2.in </a> </li>
<li>IRC: <a href="irc://irc.libera.chat/neovoid" target="_blank" rel="noopener noreferrer">#neovoid@libera.chat</a> </li>
<li>MATRIX: <a href="https://matrix.to/#/@void00r:matrix.org" target="_blank" rel="noopener noreferrer">#void00r:matrix.org</a> </li>
<li>Telegram: <a href="https://telegram.me/void00r" target="_blank" rel="noopener noreferrer">@void00r</a> </li>
<li>Gits: <a href="https://github.com/void00r" target="_blank" rel="noopener noreferrer"> void00r</a></li>
</ul>
</div>
</article>
<article>
<h2> 🕸 WebRing: The Websites of friends I follow. </h2>
<div>
<p> We are connected by sites of similar nature ==> Personal blogs and by common Enthusiasm in <abbr title="Its GNU/Linux Actually!😜">Linux</abbr>.</p>
<ul>
<li><a href="https://harshith.xyz/" target="_blank" rel="noopener">Pystardust </a> Harshith <label for="abouthim">^</label><input type="checkbox" id="abouthim"><small>
Pystar is the genius, shell master, and creator of <a href="https://github.com/pystardust/ytfzf" target="_blank" rel="noopener noreferrer"> ytfzf</a>, <a href="https://github.com/pystardust/waldl" target="_blank" rel="noopener noreferrer"> waldl </a> and <a href="https://github.com/pystardust/ani-cli" target="_blank" rel="noopener noreferrer"> ani-cli </a>.
</small></li>
<li><a href="https://hitarththummar.xyz/" target="_blank" rel="noopener">gtlsgamr</a> Hitarth Thummar</li>
<li><a href="https://bugswriter.com" target="_blank" rel="noopener">bugswriter</a> Suraj Kushwah <label for="youtube">^</label><input type="checkbox" id="youtube"><small>
A Linux Youtuber among us who inspired us (and keep doing so) to learn more about Linux, especially CLI way and scripting. He is a creater of legendary <a href="https://github.com/bugswriter/tuxi" target="_blank" rel="noopener noreferrer">tuxi</a> and <a href="https://github.com/bugswriter/notflix" target="_blank" rel="noopener noreferrer">notflix</a>. Also Check out his <a href="https://www.youtube.com/c/BugsWriter0x1337" target="_blank" rel="noopener">youtube </a> channel for linux goodies.
</small></li>
<li><a href="https://aryak.codeberg.page" target="_blank" rel="noopener">aryak</a> Aryak</li>
<li><a href="https://abhishrijoshi.xyz" target="_blank" rel="noopener">Abhi</a> Abhishri</li>
<li><a href="https://relejek.ml" target="_blank" rel="noopener">Relejek</a> Relejek</li>
<li><a href="https://jumpher.github.io/gotakhor" target="_blank" rel="noopener">Ramram</a> gotakhor</li>
</ul>
<p> Be the part of <a href="https://gnulinuxindia.org/" target="_blank" rel="noopener">https://gnulinuxindia.org</a> Join our Telegram Group <a href="https://telegram.me/GnuLinuxIndia" target="_blank" rel="noopener">GnuLinuxIndia</a> or <a href="https://matrix.to/#/#gnulinuxindia:matrix.org" target="_blank" rel="noopener">Matrix room </a> or <a href="irc://irc.libera.chat/gnulinuxindia" target="_blank" rel="noopener">IRC</a> to be the part of the community.</p>
</div>
</article>
</section>
<!-- ----------
---- BLOG -----
----------- -->
<section id="blog">
<article>
<h2><time>28-03-2022</time> 🏊 And I started Swimming again... </h2>
<div>
<p> After a very long time I have started going to swim at the nearest river dam of my village. </p>
<p> I was bored and this is summer which makes things more boring for me. but hey plus thing we have water solution here. </p>
<p>It was a sunny day, I was bored, trying online CTFs and making website and suddenly I picked this vibe of "sporting".... </p>
<a href="blogs/swimming.html">...Read More </a>
</div>
</article>
<article>
<h2><time>17-03-2022</time> 💡 Interesting things about this Site. </h2>
<div>
<ul>
<li> You'd be surprised but Yes, Its a Single HTML File.<label for="also">read more</label><input type="checkbox" id="also"><small> <p>This website is a single <abbr title="Hypertext Markup Language">HTML</abbr> file. It simply uses the <code>#anchor</code> suffix (from <a href="http://info.cern.ch/hypertext/WWW/Addressing/Addressing.html" target="_blank" rel="noopener noreferer">1992</a>) and the <code>:target</code> <abbr title="Cascading Style Sheets">CSS</abbr> selector to show and hide pages/content.</p></small> </li>
<li> The site inspired by minimal yet responsive layout of John Does's Site from <a href="https://john-doe.neocities.org" target="_blank" rel="noopener noreferrer">Neocities</a>.<label for="based">expand</label><input type="checkbox" id="based"> <small> <p> This website is databaseless, javascriptless, and builds#$t-free, so you can edit your website with a text editor and upload it somewhere like a normal person.</p></small> </li>
<li> Every Link on this site opens in new tab. <label for="tabs">but why</label><input type="checkbox" id="tabs"><small>You can always opens links on any site with SHIFT+CLICKS but in this site you dont have to. <textarea readonly rows="2"> <a href="<link>" target="_blank" rel="noopener noreferrer">link</a></textarea> To avoid Security concerns with <code>target="_blank"</code> I strongly recommend that you always add <code>rel="noreferrer noopener"</code> to the anchor element to prevent a type of phishing known as <a href="https://en.wikipedia.org/wiki/Tabnabbing" target="_blank" rel="noopener noreferer">tabnabbing</a>.<label for="tabnab">explain</label><input type="checkbox" id="tabnab"><small><ul> <li> <a href="https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/" target="_blank" rel="noopener noreferer"> [1] Alex Yumashev's article on Tabnabbing.</a></li> <li> <a href="https://owasp.org/www-community/attacks/Reverse_Tabnabbing" target="_blank" "rel="noopener noreferer"> [2] Reverse Tabnabbing - OWASP </a></li></ul> </small>
</small></li>
<li>This blog is subject to updated.(to be continued..)</li>
<li><a href="mailto:neovoid@hi2.in" target="_blank" rel="noopener noreferer"> Suggestions are welcome </a> cuz this list looks too boring (colorless)</li>
</ul>
</div>
</article>
<article>
<h2><time>16-03-2022</time> 🦇 Beautify Linux Manuals with Bat</h2>
<div>
<p style="color:var(--textcolor)"> Whatever you are doing, stop right away and do this right now cuz this is <b>IMPORTANT!<b>. <br> </p>
<p> Ever wonder? WHAT IF your favourite RTFM <label for="rtfm">^</label><input type="checkbox" id="rtfm"><small><a href="https://explainxkcd.com/wiki/index.php/293:_RTFM" target="_blank" rel="noopener noreferer">Reading the Fine Manual</a></small> can be experienced with cheering colors of BAT <label for="bat">^</label><input type="checkbox" id="bat"><small> <a href="https://github.com/sharkdp/bat" target="_blank" rel="noopener noreferer"> BAT - A cat(1) clone with syntax highlighting and Git integration.</a></small>. Well Wait no more.</p>
<p style="color:var(--textcolor)"> Just set this enviromental variable inside your .profile or .zprofile and see the magic of bat. </p>
<p><code style="color:var(--highlight)"> export MANPAGER="sh -c 'col -bx | bat -l man -p'" </code> <br> </p>
<p style="color:var(--textcolor)">Thanks me later.</p>
</div>
</article>
<article>
<h2><time>05-03-2022</time> 🙏 Shri Ganesha of Blogging.</h2>
<div>
First Blog!
<figure>
<img loading="lazy" alt="Shri Ganesha" src="img/gnes.png" width="299" height="230">
</figure>
<blockquote>
<p style="color:var(--greencolor)"><em>Life gives lemons. </em> </p>
<p style="color:var(--greencolor)"><em>It is the thou art of juice making that defines thou lemonade's taste. </em> </p>
<p style="color:var(--highlight)"><em>- The guy who loves pineapples. </em></p>
</blockquote>
</div>
</article>
</section>
<!-- ----------
---- PHOTOS ---
----------- -->
<section id="photos">
<p>My Gallery</p>
<!-- You can use this grid of images in any page -->
<div class="grid">
<a href="#img-01"><img loading="lazy" alt="" src="gl/tr.jpg"></a>
<a href="#img-02"><img loading="lazy" alt="" src="gl/trio.jpg"></a>
<a href="#img-03"><img loading="lazy" alt="" src="gl/hh.jpg"></a>
<a href="#img-04"><img loading="lazy" alt="" src="gl/ced.jpg"></a>
<a href="#img-05"><img loading="lazy" alt="" src="gl/cs.jpg"></a>
<a href="#img-06"><img loading="lazy" alt="" src="gl/qe.png"></a>
<a href="#img-07"><img loading="lazy" alt="" src="gl/hc.png"></a>
<a href="#img-08"><img loading="lazy" alt="" src="gl/rc.png"></a>
<a href="#img-09"><img loading="lazy" alt="" src="gl/hb.jpg"></a>
<a href="#img-10"><img loading="lazy" alt="" src="gl/we.jpg"></a>
<a href="#img-11"><img loading="lazy" alt="" src="gl/mo.jpg"></a>
<a href="#img-12"><img loading="lazy" alt="" src="gl/bk.png"></a>
<a href="#img-13"><img loading="lazy" alt="" src="gl/bq.jpg"></a>
<a href="#img-14"><img loading="lazy" alt="" src="gl/sp.jpg"></a>
<a href="#img-15"><img loading="lazy" alt="" src="gl/ch.png"></a>
<a href="#img-16"><img loading="lazy" alt="" src="gl/pi.jpg"></a>
<a href="#img-18"><img loading="lazy" alt="" src="gl/ol.png"></a>
<a href="#img-19"><img loading="lazy" alt="" src="gl/ct.jpg"></a>
</div>
</section>
<!-- ----------
-- PORTFOLIO fdcb39--
533d32
----------- -->
<section id="portfolio">
<div class="slides">
<figure class="cover"> <img loading="lazy" alt="" src="img/snape.jpg"></figure>
<figure class="cover"><img loading="lazy" alt="" src="img/Alwaysextract.jpg"></figure>
<figure class="cover"><img loading="lazy" alt="" src="img/kingcross.jpg"></figure>
<figure style="background:#533d32">
<p>hogwarts is my home.</p>
</figure>
<figure class="cover">
<img loading="lazy" alt="" src="img/castleouter.jpg">
</figure>
<figure class="cover">
<img loading="lazy" alt="" src="img/castle.jpg">
<figcaption>…in mystery and light</figcaption>
</figure>
<figure style="background:#37433f">
<img loading="lazy" alt="" src="img/collage.jpg">
<figcaption>together</figcaption>
</figure>
<figure>
<img loading="lazy" alt="" src="img/casts.jpg">
<p style="color:#fff">forever.</p>
</figure>
<figure class="cover">
<img loading="lazy" alt="" src="img/hedwig.jpg">
<p style="color:#fff">Always.</p>
</figure>
</div>
</section>
<!-- HIDDEN PAGE -->
<section id="if-you-want">
<p>This page is not referenced in the menu, for example.</p>
<p><a href="#home">← back</a></p>
</section>
</main>
<!-- ----------
- HI-RES IMAGES
----------- -->
<!-- For the PHOTOS grid -->
<a href="#photos" class="lightbox" id="img-01"><img loading="lazy" alt="" src="gl/tr.jpg"></a>
<a href="#photos" class="lightbox" id="img-02"><img loading="lazy" alt="" src="gl/trio.jpg"></a>
<a href="#photos" class="lightbox" id="img-03"><img loading="lazy" alt="" src="gl/hh.jpg"></a>
<a href="#photos" class="lightbox" id="img-04"><img loading="lazy" alt="" src="gl/ced.jpg"></a>
<a href="#photos" class="lightbox" id="img-05"><img loading="lazy" alt="" src="gl/cs.jpg"></a>
<a href="#photos" class="lightbox" id="img-06"><img loading="lazy" alt="" src="gl/qe.png"></a>
<a href="#photos" class="lightbox" id="img-07"><img loading="lazy" alt="" src="gl/hc.png"></a>
<a href="#photos" class="lightbox" id="img-08"><img loading="lazy" alt="" src="gl/rc.png"></a>
<a href="#photos" class="lightbox" id="img-09"><img loading="lazy" alt="" src="gl/hb.jpg"></a>
<a href="#photos" class="lightbox" id="img-10"><img loading="lazy" alt="" src="gl/we.jpg"></a>
<a href="#photos" class="lightbox" id="img-11"><img loading="lazy" alt="" src="gl/mo.jpg"></a>
<a href="#photos" class="lightbox" id="img-12"><img loading="lazy" alt="" src="gl/bk.png"></a>
<a href="#photos" class="lightbox" id="img-13"><img loading="lazy" alt="" src="gl/bq.jpg"></a>
<a href="#photos" class="lightbox" id="img-14"><img loading="lazy" alt="" src="gl/sp.jpg"></a>
<a href="#photos" class="lightbox" id="img-15"><img loading="lazy" alt="" src="gl/ch.png"></a>
<a href="#photos" class="lightbox" id="img-16"><img loading="lazy" alt="" src="gl/pi.jpg"></a>
<a href="#photos" class="lightbox" id="img-17"><img loading="lazy" alt="" src="gl/qt.jpg"></a>
<a href="#photos" class="lightbox" id="img-18"><img loading="lazy" alt="" src="gl/ol.png"></a>
<a href="#photos" class="lightbox" id="img-19"><img loading="lazy" alt="" src="gl/ct.jpg"></a>
<!-- Other images -->
<a href="#blog" class="lightbox" id="nice-image"><img loading="lazy" alt="Oh my Friend Ganesha" src="img/gnes.png"></a>
</body>
</html>