working on ui

_sass/site/color-theme.scss

@@ -2,6 +2,7 @@
     --color-red: #ff556e;
 
     --color-purple:#4844a3;
+    --color-faint-purple:#4844a350;
     --color-light-purple: #8a8ed8;
     --color-dark-purple:#342d71;
 

_sass/site/home.scss

@@ -41,10 +41,10 @@
 
 .hello {
   #callsign {
-        color: rgba(255, 255, 255, .75);
+    color: rgba(255, 255, 255, 0.75);
 
     a {
-            color: rgba(255, 255, 255, .75);
+      color: rgba(255, 255, 255, 0.75);
     }
 
     a:hover {
@@ -53,3 +53,21 @@
     }
   }
 }
+
+.border-loop {
+    // border-color: var(--color-faint-purple);
+    // border-width: 1px;
+    // border-radius: 15px;
+    border:none;
+}
+
+.border-loop-right {
+  border-left: none;
+  border-bottom: none;
+  border-top-left-radius: 0px;
+}
+
+.border-loop-left {
+  border-right: none;
+  border-bottom: none;
+}

assets/css/easyScrollDots.min.css

@@ -0,0 +1,12 @@
+/* Easy Scroll Dots 1.1.5 --- https://github.com/Superhands89/EasyScrollDots
+* Quickly add anchor points throughout your web page/application and have navigational dots automatically appear
+* in a fixed position on the side of the page. This allows the user to click to scroll though sections of the page,
+* and it updates as they scroll.
+*
+* By Superhands89 2019-2021 --- https://github.com/Superhands89/
+*
+* GPLv3 Licence for open source use only
+* or purchase a Single Commercial License at https://gum.co/TdtEX
+* or purchase an Extended Commercial License at https://gum.co/NGfmlw
+*/
+.scroll-indicator-controller{position:fixed;top:50vh;transform:translate(0,-50%);right:10px;z-index:999}.scroll-indicator-controller.indi-mobile>div span{display:none}@media (min-width:1025px){.scroll-indicator-controller{right:20px}}.scroll-indicator-controller>div{width:20px;height:20px;position:relative;border-radius:50%;border:1px solid tomato;background:rgba(0,0,0,.25);margin:0 0 10px 0;cursor:pointer;transition:background .4s ease;will-change:transition}.scroll-indicator-controller>div span{color:tomato;position:absolute;right:calc(100% + 8px);white-space:nowrap;top:50%;font-family:arial,sans-serif;font-size:16px;line-height:17px;width:0;overflow:hidden;opacity:0;transform:translateY(-50%) translateX(10px);transition:all .4s ease;will-change:transition}@media (hover:none){.scroll-indicator-controller>div span{display:none}}.scroll-indicator-controller>div span:after{content:"-----";padding-left:5px;letter-spacing:-2px;font-family:arial,sans-serif;vertical-align:text-top;line-height:14px}@media (hover:hover),(-ms-high-contrast:none),(-ms-high-contrast:active){.scroll-indicator-controller>div:hover span{width:auto;opacity:1;overflow:visible;transform:translateY(-50%) translateX(0)}}.scroll-indicator-controller>div.active{background:tomato;border-color:rgba(0,0,0,.25)}@supports (-ms-ime-align:auto){.scroll-indicator-controller>div span{transition:opacity .4s ease}}

assets/js/dotnav.min.js

@@ -0,0 +1 @@
+const dotNav=(e,t)=>{(e=>{let t=document.getElementsByTagName(e),n=window.innerHeight;const o=()=>{for(let e=0;e<t.length;e++)t[e].getBoundingClientRect().top<n?t[e].classList.add("in-viewport"):t[e].classList.remove("in-viewport")};o(),window.addEventListener("scroll",o)})("section");const n=document.getElementsByTagName(e),o=document.getElementById("dot-nav");let s,i=document.getElementsByClassName("in-viewport");for(let e=0;e<n.length;e++)n[e].classList.add("section-"+e);(()=>{for(let e=0;e<n.length;e++){const t=document.createElement("a");t.id="dot-"+e,t.classList.add("dots"),t.href="#",t.setAttribute("data-sec",e),o.appendChild(t)}})();let a=document.getElementById("dot-nav").clientHeight/2;document.getElementById("dot-nav").style.top="calc(50% - "+a+"px)";const c=()=>{i=document.getElementsByClassName("in-viewport"),s=document.getElementsByClassName("dots"),visNum=i.length;let e=visNum-1;for(let e=0;e<n.length;e++)s[e].classList.remove("active");document.getElementById("dot-"+e).classList.add("active")};c(),window.onscroll=function(){c()};const d=e=>{let n=e.currentTarget.dataset.sec;!function(e,t=200,n="linear",o){const s={linear:e=>e,easeInQuad:e=>e*e,easeOutQuad:e=>e*(2-e),easeInOutQuad:e=>e<.5?2*e*e:(4-2*e)*e-1,easeInCubic:e=>e*e*e,easeOutCubic:e=>--e*e*e+1,easeInOutCubic:e=>e<.5?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1,easeInQuart:e=>e*e*e*e,easeOutQuart:e=>1- --e*e*e*e,easeInOutQuart:e=>e<.5?8*e*e*e*e:1-8*--e*e*e*e,easeInQuint:e=>e*e*e*e*e,easeOutQuint:e=>1+--e*e*e*e*e,easeInOutQuint:e=>e<.5?16*e*e*e*e*e:1+16*--e*e*e*e*e},i=window.pageYOffset,a="now"in window.performance?performance.now():(new Date).getTime(),c=Math.max(document.body.scrollHeight,document.body.offsetHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight,document.documentElement.offsetHeight),d=window.innerHeight||document.documentElement.clientHeight||document.getElementsByTagName("body")[0].clientHeight,l="number"==typeof e?e:e.offsetTop,m=Math.round(c-l<d?c-d:l);if("requestAnimationFrame"in window==0)return window.scroll(0,m),void(o&&o());!function e(){const c="now"in window.performance?performance.now():(new Date).getTime(),d=Math.min(1,(c-a)/t),l=s[n](d);window.scroll(0,Math.ceil(l*(m-i)+i)),window.pageYOffset!==m?requestAnimationFrame(e):o&&o()}()}(document.querySelector(".section-"+n),"1000",t),e.preventDefault()};s=document.getElementsByClassName("dots");for(let e=0;e<s.length;e++)s[e].addEventListener("click",d)};dotNav("section","easeInOutCubic");

assets/js/easyScrollDots.min.js

@@ -0,0 +1,12 @@
+/* Easy Scroll Dots 1.1.5 --- https://github.com/Superhands89/EasyScrollDots
+* Quickly add anchor points throughout your web page/application and have navigational dots automatically appear
+* in a fixed position on the side of the page. This allows the user to click to scroll though sections of the page,
+* and it updates as they scroll.
+*
+* By Superhands89 2019-2021 --- https://github.com/Superhands89/
+*
+* GPLv3 Licence for open source use only
+* or purchase a Single Commercial License at https://gum.co/TdtEX
+* or purchase an Extended Commercial License at https://gum.co/NGfmlw
+*/
+function dotsThrottle(t,e,o){let n,i,d,l=null,c=0;o||(o={});const s=function(){c=!1===o.leading?0:Date.now(),l=null,d=t.apply(n,i),l||(n=i=null)};return function(){const a=Date.now();c||!1!==o.leading||(c=a);const r=e-(a-c);return n=this,i=arguments,r<=0||r>e?(l&&(clearTimeout(l),l=null),c=a,d=t.apply(n,i),l||(n=i=null)):l||!1===o.trailing||(l=setTimeout(s,r)),d}}let dotFixedNavPresent=!1,dotFixedNavId="",dotFixedNavUp=!1,dotOffset=0;function easyScrollDots(t){let e=document.querySelectorAll(".scroll-indicator");if(!0===t.fixedNav&&(dotFixedNavPresent=!0),dotFixedNavId=""!==t.fixedNavId&&t.fixedNavId,!0===t.fixedNavUpward&&(dotFixedNavUp=!0),t.offset>0&&(dotOffset=t.offset),e.length){const t='<div class="scroll-indicator-controller"><span></span></div>';document.querySelector("body").lastElementChild.insertAdjacentHTML("afterend",t);const o=document.querySelector(".scroll-indicator-controller");void 0===window.orientation&&-1===navigator.userAgent.indexOf("IEMobile")||o.classList.add("indi-mobile");const n=Array.prototype.slice.call(e);n.forEach(function(t,e){const n=t.getAttribute("id"),i=t.getAttribute("data-scroll-indicator-title");let d="";0==e&&(d="active"),o.lastElementChild.insertAdjacentHTML("afterend",'<div class="'+d+'" data-indi-controller-id="'+n+'" onclick="scrollIndiClicked(\''+n+"');\"><span>"+i+"</span><div></div></div>")});const i=o.querySelectorAll("[data-indi-controller-id]"),d=dotsThrottle(function(){let t={};n.forEach(function(e){const o=e.getAttribute("id"),n=e.getBoundingClientRect().top;t[o]=n});const e=Object.keys(t).map(function(e){return t[e]});Object.keys(t).forEach(function(n){t[n]==function(){const t=e.filter(function(t){return t>-150});return Math.min.apply(null,t)}()&&(Array.prototype.forEach.call(i,function(t){t.classList.contains("active")&&t.classList.remove("active")}),o.querySelector('[data-indi-controller-id="'+n+'"]').classList.add("active"))})},300);window.addEventListener("scroll",d)}}function scrollIndiClicked(t){if(window.jQuery){const e=$("html, body");if(!0===dotFixedNavPresent&&dotFixedNavId.length){const o=document.getElementById(dotFixedNavId).clientHeight,n=$("#"+t);if(!0===dotFixedNavUp){e.animate({scrollTop:n.offset().top-dotOffset},700);const t=document.body.getBoundingClientRect().top;setTimeout(function(){document.body.getBoundingClientRect().top>t&&e.animate({scrollTop:n.offset().top-o-dotOffset},400)},400)}else e.animate({scrollTop:n.offset().top-o-dotOffset},700)}else e.animate({scrollTop:$("#"+t).offset().top-dotOffset},700)}else if(!0===dotFixedNavPresent&&dotFixedNavId.length){const e=document.getElementById(dotFixedNavId).clientHeight,o=document.getElementById(t);if(!0===dotFixedNavUp){window.scrollTo({top:o.offsetTop-dotOffset,left:0,behavior:"smooth"});const t=document.body.getBoundingClientRect().top;setTimeout(function(){document.body.getBoundingClientRect().top>t&&window.scrollTo({top:o.offsetTop-e-dotOffset,left:0,behavior:"smooth"})},400)}else window.scrollTo({top:o.offsetTop-e-dotOffset,left:0,behavior:"smooth"})}else window.scrollTo({top:document.getElementById(t).offsetTop-dotOffset,left:0,behavior:"smooth"})}

index.html

@@ -18,6 +18,23 @@ uses:
         "url": "https://retrylife.ca"
     }
 </script>
+
+    <!-- <link rel="stylesheet" href="{{site.baseurl}}/assets/css/easyScrollDots.min.css">
+
+    <style>
+        .scroll-indicator-controller>div {
+            border: 1px solid var(--color-blue);
+            background: unset;
+        }
+
+        .scroll-indicator-controller>div span {
+            color: var(--color-blue);
+        }
+
+        .scroll-indicator-controller>div.active {
+            background: var(--color-blue);
+        }
+    </style> -->
 </head>
 
 <body>
@@ -26,47 +43,87 @@ uses:
         <!-- Navbar -->
         {% include nav.html %}
 
+        <section>
+            <div>
+                <div class="scroll-indicator" id="headerSection" data-scroll-indicator-title="Hello"></div>
+            </div>
             <div class="color-hero">
                 <div class="hello container">
                     <h1>Hi,</h1>
                     <h1>I am Evan&nbsp;Pratten</h1>
                 </div>
             </div>
+        </section>
 
         <div class="home-secondary-panel edge--top">
             <div class="inner-content-container home-content container">
+                <div class="card border-loop border-loop-right">
+                    <div class="card-body">
+
                         <h1>Who I am</h1>
 
-                <h3>I am a senior-year Highschool student who studies computer science, a Canadian amateur radio operator (callsign <a href="https://www.qrz.com/db/VA3ZZA">va3zza</a>), and am one of the primary
+                        <h3>I am a senior-year Highschool student who studies computer science, a Canadian amateur radio
+                            operator (callsign <a href="https://www.qrz.com/db/VA3ZZA">va3zza</a>), and am one of the
+                            primary
                             software
                             developers
-                    writing the code that powers competition-ready robots at <a href="https://github.com/frc5024">Raider
+                            writing the code that powers competition-ready robots at <a
+                                href="https://github.com/frc5024">Raider
                                 Robotics</a>.</h3>
+                        <div>
+                            <div class="scroll-indicator" id="whoSection" data-scroll-indicator-title="Who I am"></div>
+                        </div>
+                    </div>
+                </div>
 
-                <div class="header-space"></div>
+                <!-- <div class="header-space"></div> -->
 
-                <!-- <h1>My Blog</h1>
+                <div class="card card border-loop border-loop-left">
+                    <div class="card-body">
+                        <h1>The blog</h1>
+                        <h3>I occasionally post writeups and tutorials in the blog portion of this website. Below are
+                            the
+                            three most recent posts.</h3>
 
-                <h3>The main function of this website is to host my <a href="/blog">blog</a>. </h3>
+                        <div class="card-deck">
+                            {% assign i = 0 %}
+                            {% for post in site.posts %}
+                            {% if i < 3 %} <div class="card home-project">
+                                <div class="card-body">
+                                    <h5 class="card-title">{{post.title}}</h5>
+                                    <h6 class="card-text">{{post.excerpt}}</h6>
+                                </div>
+                                <div class="card-footer">
+                                    {% assign post_date = post.date | split: " " %}
+                                    <small class="text-muted">Published: {{post_date.first}}</small>
+                                    <a href="{{post.url}}"><button class="btn btn-outline-primary btn-sm"
+                                            style="float:right;">Read Post</button></a>
+                                </div>
+                        </div>
+                        {% endif %}
+                        {% assign i = i | plus:1 %}
+                        {% endfor %}
+                    </div>
 
-                <div class="header-space"></div> -->
+                    <br>
 
-                <!-- <h1>What I do</h1>
+                    <div style="text-align:center;">
+                        <a href="/blog" style="margin:auto;"><button type="button" class="btn btn-outline-primary">View
+                                More</button></a>
+                    </div>
 
-                <h3> I am a software developer, and photographer. I use this website to host
+                </div>
-                    <a href="/blog">blog posts</a>
+            </div>
-                    about my learnings as a programmer, and to share the best of my
-                    <a href=" /photography">photos</a></h3>
 
+            <!-- <div class="header-space"></div> -->
 
-                <div style="padding-top:3rem;"></div>
+            <div class="card card border-loop border-loop-right">
-                <hr>
+                <div class="card-body">
-                <div style="padding-top:3rem;"></div> -->
-
                     <h1>My notable projects</h1>
 
                     <h3>I develop and provide many web and desktop applications for public use. I host them all on my
-                    private backend infrastructure. The network of servers that powers these applications was originally
+                        private backend infrastructure. The network of servers that powers these applications was
+                        originally
                         set up to help me learn server management and distributed application development.</h3>
 
 
@@ -78,10 +135,13 @@ uses:
                         <div class="col-sm-4 project-item">
                             <div class="card home-project">
                                 {% if project.hero %}
-                            <img src="{{project.hero.img_src}}" class="card-img-top" alt="{{project.title}}" loading="auto">
+                                <img src="{{project.hero.img_src}}" class="card-img-top" alt="{{project.title}}"
+                                    loading="auto">
                                 {% endif %}
-                            <div class="card-body" {% if project.archived %}data-toggle="tooltip" data-placement="top" title="No longer actively maintained"{% endif %}>
+                                <div class="card-body" {% if project.archived %}data-toggle="tooltip"
-                                <h5 class="card-title"><strong>{{project.title}} {% if project.archived %}<span class="badge badge-secondary">Archived</span>{% endif %}</strong></h5>
+                                    data-placement="top" title="No longer actively maintained" {% endif %}>
+                                    <h5 class="card-title"><strong>{{project.title}} {% if project.archived %}<span
+                                                class="badge badge-secondary">Archived</span>{% endif %}</strong></h5>
                                     <p class="card-text">{{project.description}}</p>
 
                                     {% for text_btn in project.text_buttons %}
@@ -89,7 +149,8 @@ uses:
                                     {% endfor %}
 
                                     {% for icon_btn in project.icon_buttons %}
-                                <a href="{{icon_btn.url}}" class="btn btn-dark"><i class="{{icon_btn.icon}}"></i></a>
+                                    <a href="{{icon_btn.url}}" class="btn btn-dark"><i
+                                            class="{{icon_btn.icon}}"></i></a>
                                     {% endfor %}
                                 </div>
                             </div>
@@ -99,6 +160,8 @@ uses:
                     </div>
                 </div>
             </div>
+        </div>
+    </div>
 
     </div>
 
@@ -133,4 +196,16 @@ uses:
         setTimeout(orderProjectGrid, 5000);
     </script>
 
+
+    <!-- Dotdav -->
+    <!-- <script src="{{site.baseurl}}/assets/js/easyScrollDots.min.js"></script>
+    <script>
+        easyScrollDots({
+            'fixedNav': false,
+            'fixedNavId': '',
+            'fixedNavUpward': false,
+            'offset': 50
+        });
+    </script> -->
+
 </body>