feat: Updated websites section

server.py

@@ -82,6 +82,7 @@ def wallet(path):
 # Main routes
 @app.route('/')
 def index():
+    global address
     git=requests.get('https://git.woodburn.au/api/v1/users/nathanwoodburn/activities/feeds?only-performed-by=true&limit=1&token=' + os.getenv('git_token'))
     git = git.json()
     git = git[0]
@@ -118,7 +119,7 @@ def index():
     if request.cookies.get('HNS'):
             return render_template('index.html', handshake_scripts=handshake_scripts, HNS=request.cookies.get('HNS'), repo=repo, repo_description=repo_description, custom=custom)
     
-    if handshake_scripts != "":
+    if address == '':
         address = getAddress()
     # Set cookie
     resp = make_response(render_template('index.html', handshake_scripts=handshake_scripts, HNS=address, repo=repo, repo_description=repo_description, custom=custom), 200, {'Content-Type': 'text/html'})
@@ -157,4 +158,4 @@ def not_found(e):
     return render_template('404.html'), 404
 
 if __name__ == '__main__':
-    app.run(debug=False, port=5000, host='0.0.0.0')
+    app.run(debug=True, port=5000, host='0.0.0.0')

templates/assets/css/index.min.css

@@ -1 +1 @@
-img.no-drag{pointer-events:none}img.fog{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%}#downtime{z-index:2;position:fixed;right:0;bottom:0;width:20%;transition:opacity .5s;opacity:0;cursor:pointer}blockquote.speech{position:absolute;display:inline-block;right:14vw;bottom:23vh;width:17vw;background:url(/assets/img/speech-bubble.svg) center;color:#fff;padding-top:3%;padding-bottom:20%;background-repeat:no-repeat!important;margin:0 auto;text-align:center;box-sizing:content-box;line-height:1;font-family:SequentialistBB,cursive;font-size:1.2vw}
+#sites{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:60px;font-family:Quicksand,sans-serif}.site-container{background:rgba(133,133,133,.2);box-shadow:0 4px 30px rgba(0,0,0,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:25px;padding:30px 0;width:min(1200px,100%)}.site-container>h1{font-size:2rem;font-weight:600;text-align:center;color:#dda3b6;margin:20px 0 40px}.swiper{width:80%;height:100%;margin-bottom:30px}.swiper-scrollbar{--swiper-scrollbar-bottom:0px;--swiper-scrollbar-drag-bg-color:#dda3b6;--swiper-scrollbar-size:5px}.site{position:relative;max-width:400px;padding:1rem;font-family:inherit;font-size:1rem;font-weight:500;color:var(--clr-text);background-color:transparent;border-radius:10px;isolation:isolate;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.site::before{content:"";position:absolute;top:0;left:0;right:0;bottom:15px;background:rgba(236,149,200,.2);box-shadow:0 4px 30px rgba(0,0,0,.1);border-radius:10px;z-index:-1}.site-img{width:100%;max-width:400px;object-fit:cover;overflow:hidden;aspect-ratio:1;border-radius:6px}.site-body{align-items:center;gap:8px;padding:15px 0;cursor:default}.site-name{font-size:.9rem;font-weight:600;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.site-author{width:fit-content;font-size:.8rem;font-weight:600;opacity:.6;color:var(--clr-text)}.site-avatar{width:40px;aspect-ratio:1/1;object-fit:cover;border-radius:5px;cursor:pointer}.site-actions{position:relative}.site-actions-content{position:absolute;bottom:130%;right:0;padding:8px;border-radius:8px;background:rgba(172,172,172,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:2px 2px 10px 2px hsl(0,0%,0%,.25);transition:opacity .25s,scale .25s;transform-origin:bottom right}.site-actions-content[data-visible=false]{pointer-events:none;opacity:0;scale:0}.site-actions-content[data-visible=true]{pointer-events:unset;scale:1;opacity:1}.site-actions-content li{padding:.5rem .65rem;border-radius:.25rem;list-style:none}.site-actions-content li:is(:hover,:focus-within){background-color:rgba(248,132,169,.7)}.site-actions-link{width:max-content;display:grid;grid-template-columns:1rem 1fr;align-items:center;gap:.6rem;color:inherit;text-decoration:none;cursor:pointer}.site-like{text-decoration:none;color:var(--clr-text);margin-right:5px;font-size:1.1rem;opacity:.65;border-radius:50%;overflow:hidden;transition:.35s}.site-actions-controller{border:0;background:0 0;color:var(--clr-text);cursor:pointer;opacity:.65}.site-actions-controller:hover,.site-like:hover{opacity:1}.site-like:focus{outline:0}.site-like.active{color:red;opacity:1;transform:scale(1.2)}@media (max-width:1200px){.swiper{width:80%}}@media (max-width:900px){#sites{padding:60px 80px}.swiper{width:50%}}@media (max-width:765px){.swiper{width:70%}}@media (max-width:550px){#sites{padding:40px}.swiper{width:80%}}img.no-drag{pointer-events:none}img.fog{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%}#downtime{z-index:2;position:fixed;right:0;bottom:0;width:20%;transition:opacity .5s;opacity:0;cursor:pointer}blockquote.speech{position:absolute;display:inline-block;right:14vw;bottom:23vh;width:17vw;background:url(/assets/img/speech-bubble.svg) center;color:#fff;padding-top:3%;padding-bottom:20%;background-repeat:no-repeat!important;margin:0 auto;text-align:center;box-sizing:content-box;line-height:1;font-family:SequentialistBB,cursive;font-size:1.2vw}

templates/assets/js/hacker.min.js

@@ -1 +1 @@
-const letters="ABCDEFGHIJKLMNOPQRSTUVWXYZ/.?!@#$%^&*()_+";let interval=null,interval2=null,interval3=null;window.onload=t=>{target=document.querySelector(".nathanwoodburn");let e=0,n="NATHAN.WOODBURN/";clearInterval(interval),interval=setInterval((()=>{target.innerText=target.innerText.split("").map(((t,r)=>r<e?n[r]:letters[Math.floor(41*Math.random())])).join(""),e>=n.length&&clearInterval(interval),e+=1/3}),30)},document.querySelector(".copyright").onmouseover=t=>{let e=0,n="Copyright © Nathan Woodburn 2023";console.log(n),clearInterval(interval2),interval2=setInterval((()=>{t.target.innerText=t.target.innerText.split("").map(((t,r)=>r<e?n[r]:letters[Math.floor(41*Math.random())])).join(""),e>=n.length&&clearInterval(interval2),e+=1/3}),10)};
+const letters="ABCDEFGHIJKLMNOPQRSTUVWXYZ/.?!@#$%^&*()_+";let interval=null,interval2=null,interval3=null;window.onload=t=>{target=document.querySelector(".nathanwoodburn");let e=0,n="NATHAN.WOODBURN/";clearInterval(interval),interval=setInterval((()=>{target.innerText=target.innerText.split("").map(((t,r)=>r<e?n[r]:letters[Math.floor(41*Math.random())])).join(""),e>=n.length&&clearInterval(interval),e+=1/3}),30)},document.querySelector(".copyright").onmouseover=t=>{let e=0,n="Copyright © Nathan.Woodburn/ 2024";console.log(n),clearInterval(interval2),interval2=setInterval((()=>{t.target.innerText=t.target.innerText.split("").map(((t,r)=>r<e?n[r]:letters[Math.floor(41*Math.random())])).join(""),e>=n.length&&clearInterval(interval2),e+=1/3}),10)};

templates/index.html

@@ -52,6 +52,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     <link rel="stylesheet" href="/assets/css/styles.min.css">
     <link rel="stylesheet" href="/assets/css/index.min.css">
     <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/swiper.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 
 <!-- Matomo -->
@@ -126,43 +127,68 @@ Check them out here!</blockquote><img class="img-fluid" src="/assets/img/pfront.
         <p class="text-start d-inline-block skillcode"></p>
     </section><img class="no-drag" src="/assets/img/tilt.svg" style="background: #363636;width: 100%;" alt="">
     <section class="text-center content-section sites" id="sites" style="background: #363636;padding-top: 0px;padding-bottom: 0px;">
-        <div class="container">
+        <div class="site-container">
-            <div class="row">
+            <h1>My Websites</h1>
-                <div class="col-lg-8 mx-auto">
+            <div class="swiper">
-                    <h2>My WebSites</h2>
+                <div class="swiper-wrapper">
+                    <div class="swiper-slide site" data-url="https://nathan3dprinting.au"><img class="site-img" src="/assets/img/favicon_trans.webp">
+                        <div class="site-body">
+                            <div class="site-detail" style="width: 100%;">
+                                <h2 class="site-name" style="text-align: left;">Nathan 3D Printing</h2>
+                                <p class="text-start site-author">Offering 3D Printing and CAD modelling services to the Canberra region</p>
                             </div>
                         </div>
-            <div class="row row-cols-1 d-print-none d-lg-none d-xl-none d-xxl-none">
-                <div class="col" style="padding-bottom: 50px;"><a href="https://nathan3dprinting.au" target="_blank"><img src="/assets/img/favicon_trans.webp" style="width: 200px;" alt="Nathan 3D Printing Logo"></a>
-                    <p>Nathan 3D Printing Service<br>Cheap 3D printing and CAD modeling</p><a class="btn btn-primary" role="button" href="https://nathan3dprinting.au" target="_blank">Visit Nathan 3D Printing Service</a>
                     </div>
-                <div class="col" style="padding-bottom: 50px;"><a href="https://hns.au" target="_blank"><img src="/assets/img/HNSAU_white.webp" style="width: 192px;" alt="HNSAU Logo"></a>
+                    <div class="swiper-slide site" data-url="https://reg.woodburn.au"><img class="site-img" src="/assets/img/logo.png">
-                    <p>Handshake AU<br>Australian Handshake web3 group</p><a class="btn btn-primary" role="button" href="https://hns.au" target="_blank">Visit HNSAU</a>
+                        <div class="d-lg-flex justify-content-lg-center align-items-lg-start site-body">
-                </div>
+                            <div class="site-detail" style="width: 100%;">
-                <div class="col" style="padding-bottom: 50px;"><a href="https://reg.woodburn.au/" target="_blank"><img src="/assets/img/logo.svg" style="width: 221px;" alt="Woodburn Logo"></a>
+                                <h2 class="site-name" style="text-align: left;">Woodburn Registry</h2>
-                    <p>Woodburn Registry<br>Selling Domains on some Handshake TLDs</p><a class="btn btn-primary" role="button" href="https://reg.woodburn.au/" target="_blank">Visit Woodburn Registry</a>
+                                <p class="text-start site-author">An easy to use DNS provider and domain reselling platform</p>
                             </div>
                         </div>
-            <div class="row d-none d-print-flex d-lg-flex d-xl-flex d-xxl-flex">
-                <div class="col"><a href="https://nathan3dprinting.au" target="_blank"><img src="/assets/img/favicon_trans.webp" style="width: 200px;" alt="Nathan 3D Printing Logo"></a></div>
-                <div class="col"><a href="https://hns.au" target="_blank"><img src="/assets/img/HNSAU_white.webp" style="width: 192px;" alt="HNSAU Logo"></a></div>
-                <div class="col"><a href="https://reg.woodburn.au/" target="_blank"><img src="/assets/img/favicon.png" style="width: 221px;" alt="Woodburn Logo"></a></div>
                     </div>
-            <div class="row d-none d-print-flex d-lg-flex d-xl-flex d-xxl-flex">
+                    <div class="swiper-slide site" data-url="https://hns.au"><img class="site-img" src="/assets/img/HNSAU_white.webp">
-                <div class="col">
+                        <div class="d-lg-flex justify-content-lg-center align-items-lg-start site-body">
-                    <p>Nathan 3D Printing Service<br>Cheap 3D printing and CAD modeling</p>
+                            <div class="site-detail" style="width: 100%;">
-                </div>
+                                <h2 class="site-name" style="text-align: left;">HNSAU</h2>
-                <div class="col">
+                                <p class="text-start site-author">The group for Handshake enthusiasts in Australia</p>
-                    <p>Handshake AU<br>Australian Handshake web3 group</p>
-                </div>
-                <div class="col">
-                    <p>Woodburn Registry<br>Selling Domains on some Handshake TLDs</p>
                             </div>
                         </div>
-            <div class="row d-none d-print-flex d-lg-flex d-xl-flex d-xxl-flex">
+                    </div>
-                <div class="col" style="padding-bottom: 50px;"><a class="btn btn-primary" role="button" href="https://nathan3dprinting.au" target="_blank">Visit Nathan 3D Printing Service</a></div>
+                    <div class="swiper-slide site" data-url="https://git.woodburn.au"><img class="site-img" src="/assets/img/logo.png">
-                <div class="col" style="padding-bottom: 50px;"><a class="btn btn-primary" role="button" href="https://hns.au" target="_blank">Visit HNSAU</a></div>
+                        <div class="d-lg-flex justify-content-lg-center align-items-lg-start site-body">
-                <div class="col" style="padding-bottom: 50px;"><a class="btn btn-primary" role="button" href="https://reg.woodburn.au/" target="_blank">Visit Woodburn Registry</a></div>
+                            <div class="site-detail" style="width: 100%;">
+                                <h2 class="site-name" style="text-align: left;">Git Server</h2>
+                                <p class="text-start site-author">Selfhosted Git server to host my repos with custom hosted CI/CD&nbsp;</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide site" data-url="https://hnshosting.au"><img class="site-img" src="/assets/img/logo.png">
+                        <div class="d-lg-flex justify-content-lg-center align-items-lg-start site-body">
+                            <div class="site-detail" style="width: 100%;">
+                                <h2 class="site-name" style="text-align: left;">HNSHosting</h2>
+                                <p class="text-start site-author">Simple Wordpress hosting for Handshake domains with builtin SSL using DANE</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide site" data-url="https://shakecities.com"><img class="site-img" src="/assets/img/HNSW.png">
+                        <div class="d-lg-flex justify-content-lg-center align-items-lg-start site-body">
+                            <div class="site-detail" style="width: 100%;">
+                                <h2 class="site-name" style="text-align: left;">ShakeCities</h2>
+                                <p class="text-start site-author">A single page website creator where each user's page on their free HNS domain</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide site" data-url="https://linkr"><img class="site-img" src="/assets/img/logo.png">
+                        <div class="d-lg-flex justify-content-lg-center align-items-lg-start site-body">
+                            <div class="site-detail" style="width: 100%;">
+                                <h2 class="site-name" style="text-align: left;">LINKR/</h2>
+                                <p class="text-start site-author">A free link shortener with a Handshake TLD and using DNS for authentication</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="swiper-scrollbar"></div>
             </div>
         </div>
     </section><img class="no-drag" src="/assets/img/tilt.svg" style="width: 100%;background: #363636;transform: rotate(180deg);" alt="">
@@ -220,7 +246,7 @@ Check them out here!</blockquote><img class="img-fluid" src="/assets/img/pfront.
             <div class="row">
                 <div class="col">
                     <p class="d-none d-print-inline-block d-sm-inline-block d-md-inline-block d-lg-inline-block d-xl-inline-block d-xxl-inline-block">This site is also available on<br><a href="https://learn.namebase.io/" target="_blank">Handshake</a>&nbsp;at <a href="https://nathan.woodburn">https://nathan.woodburn/</a><br><a href="https://www.torproject.org/" target="_blank">Tor</a> at <a href="http://wdbrncwefot4hd7bdrz5rzb74mefay7zvrjn2vmkpdm44l7fwnih5ryd.onion/">http://wdbrncwefot4hd7bdrz5rzb74mefay7zvrjn2vmkpdm44l7fwnih5ryd.onion/</a></p>
-                    <p class="copyright">Copyright ©&nbsp;Nathan Woodburn 2023</p>
+                    <p class="copyright">Copyright ©&nbsp;Nathan.Woodburn/ 2024</p>
                 </div>
             </div>
         </div>
@@ -253,6 +279,7 @@ Check them out here!</blockquote><img class="img-fluid" src="/assets/img/pfront.
     <script src="/assets/js/script.min.js"></script>
     <script src="/assets/js/hacker.min.js"></script>
     <script src="/assets/js/downtime.min.js"></script>
+    <script src="/assets/js/sites.min.js"></script>
 </body>
 
 </html>

templates/podcast.html

@@ -101,7 +101,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
         <div class="container text-center">
             <div class="row">
                 <div class="col">
-                    <p class="copyright">Copyright ©&nbsp;Nathan Woodburn 2023</p>
+                    <p class="copyright">Copyright ©&nbsp;Nathan.Woodburn/ 2024</p>
                 </div>
             </div>
         </div>

templates/projects.html

@@ -91,7 +91,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
             <div class="row">
                 <div class="col" style="padding-top: 20px;">
                     <h2>ShakeCities</h2>
-                    <p>A single page website creator with each user's page on their free HNS domain</p><a class="btn btn-primary" role="button" href="https://shakecities.com" target="_blank">More Info</a>
+                    <p>A single page website creator where each user's page on their free HNS domain</p><a class="btn btn-primary" role="button" href="https://shakecities.com" target="_blank">More Info</a>
                 </div>
                 <div class="col" style="padding-top: 20px;">
                     <h2>Woodburn Faucet</h2>
@@ -132,7 +132,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     </section>
     <footer>
         <div class="container text-center">
-            <p class="copyright">Copyright ©&nbsp;Nathan Woodburn 2023</p>
+            <p class="copyright">Copyright ©&nbsp;Nathan.Woodburn/ 2024</p>
         </div>
     </footer>{{handshake_scripts | safe}}
     <script src="/assets/bootstrap/js/bootstrap.min.js"></script>

templates/resume.html

@@ -157,7 +157,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                             <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
                         </svg></a></li>
             </ul>
-            <p class="text-muted mb-0" style="color: rgb(255,255,255) !important;">Copyright © 2023 Nathan.Woodburn/</p>
+            <p class="text-muted mb-0" style="color: rgb(255,255,255) !important;">Copyright © Nathan.Woodburn/ 2024</p>
         </div>
     </footer>
     <script src="/assets/bootstrap/js/bootstrap.min.js"></script>

templates/servers.html

@@ -308,7 +308,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     </header>
     <footer>
         <div class="container text-center">
-            <p class="copyright">Copyright ©&nbsp;Nathan Woodburn 2023</p>
+            <p class="copyright">Copyright ©&nbsp;Nathan.Woodburn/ 2024</p>
         </div>
     </footer>{{handshake_scripts | safe}}
     <script src="/assets/bootstrap/js/bootstrap.min.js"></script>