fixes: set overflow: hidden and some js optimizations

publish

@@ -1,50 +1,90 @@
 #!usr/bin/env
 
 
-# Variables
+# ------------------ Variables ------------------#
 PKGM="pnpm"
 GHP_BRANCH="gh-pages"
 UPSTREAM_NM="ghupstream"
 REPO_URL="https://github.com/Itz-fork/itz-fork.github.io.git"
+BUILD_START=$(date +%Y-%m-%d-%H-%M-%S)
 FLAGS=""
 
+# ------------------ Constants ------------------#
+CURDIR="./${PWD##*/}/."
+TMPDIR="./pages_build/"
 
-echo -e "> Creating build branch - ${GHP_BRANCH}"
+# ------------------ Colors codes ------------------#
+WHITE="\033[1;37m"
+CYAN="\033[1;36m"
+BLACK="\033[1;30m"
+YELLOW="\033[1;93m"
+GREEN="\033[1;92m"
+RED="\033[1;31m"
+CYAN_BACK="\033[1;46m"
+GREEN_BACK="\033[1;42m"
+RESET="\033[0m"
+
+# ------------------ Output functions ------------------#
+say_sh() {
+    echo -e "${CYAN}$1${RESET}\n\n"
+}
+info_sh() {
+    echo -e "   ${WHITE}$1${RESET}\n\n"
+}
+warn_sh() {
+    echo -e "${RED}WARNING !\n $1${RESET}\n\n"
+}
+
+
+
+say_sh "> Setting up build environment..."
+cd ..
+mkdir $TMPDIR
+cp -a $CURDIR $TMPDIR
+cd $TMPDIR
+
+
+say_sh "> Creating build branch - ${GHP_BRANCH}"
 git checkout $GHP_BRANCH &> /dev/null || git checkout -b $GHP_BRANCH
 
 
-echo -e "> Building site..."
+say_sh "> Building site..."
 if [ ! -d "node_modules" ]; then
-    echo -e "WARNING! \nnode_modules folder doesn't exist"
-    echo -e "> Installing dependencies... \n"
+    warn_sh "node_modules folder doesn't exist"
+    info_sh "> Installing dependencies..."
     $PKGM install
 fi
 $PKGM build $FLAGS
 
 
-echo -e "> Setting up environment... \n\n"
+say_sh "> Preparing to publish..."
 mkdir nodel
 mv dist nodel
+mv .git nodel
 find ./ -mindepth 1 ! -regex '^./nodel\(/.*\)?' -delete
 mv nodel/dist/* ./
+mv nodel/.git ./
 rm -rf nodel
 
-echo -e "> Setting up git..."
+
+say_sh "> Publishing your branch to ${REPO_URL}"
 if [ ! -d ".git" ]; then
-    echo -e "WARNING! \nGit folder doesn't exist"
-    echo -e "> Initializing a new project... \n\n"
+    warn_sh "Git folder doesn't exist"
+    info_sh "> Initializing a new project..."
     git init
 fi
 git add .
 git commit -m "feat: new build"
-git checkout $GHP_BRANCH &> /dev/null || git checkout -b $GHP_BRANCH
+git checkout $GHP_BRANCH &> /dev/null || git checkout -b $GHP_BRANCH &> /dev/null
 git remote -v
 git remote add "${UPSTREAM_NM}" "${REPO_URL}"
 git push -u "${UPSTREAM_NM}" "${GHP_BRANCH}" --force
 
 
-echo -e "> Switching back to working branch \n\n"
-git checkout -
+say_sh "> Switching back to working dir"
+cd ..
+rm -rf $TMPDIR
+cd $CURDIR
 
 
-echo -e "> Done"
+say_sh "> Done"

src/css/main.css

@@ -124,7 +124,7 @@ button.sc_btns:hover:not(button.sc_btns) {
     align-items: center;
     font-family: Space Grotesk, monospace;
     display: flex;
-    overflow: auto;
+    overflow: hidden;
 }
 
 .greet {

src/index.html

@@ -37,7 +37,7 @@ <h2>About me</h2>
       <br><br>
       Over the next 5 years, I learned more and more things about computers and software. Needless to say, during those
       years I also learned about front-end development thus making me a full-stack developer.
-      Check out <a ohref="#skills" data-linker>my skills</a> 💪
+      Check out <a href="#skills" data-linker>my skills</a> 💪
     </p>
   </section>
 

src/js/effects.js

@@ -2,8 +2,8 @@
 
 
 //  Pre-defined variables
-const intWidth = window.innerWidth
-const intHeight = window.innerHeight
+var intWidth = window.innerWidth
+var intHeight = window.innerHeight
 const container = document.getElementById("sqbg");
 const cursor = document.getElementById("cursor");
 
@@ -70,17 +70,19 @@ CalcGrid();
 
 // Generate grid on resize
 window.onresize = () => {
-    // fix: stop regenerating grid on scroll (mobile)
-    if (curWidth == window.innerWidth && curHeight == window.innerHeight) {
-        return
+    let curWidth = window.innerWidth
+    let curHeight = window.innerHeight
+    if (curWidth != intWidth || curHeight != intHeight) {
+        CalcGrid()
+        intWidth = curWidth
+        intHeight = curHeight
     }
-    CalcGrid()
 };
 
 // Mouse move effect
 window.onmousemove = (ev) => {
-    const position = Math.floor(ev.x / 100) + Math.floor(ev.y / 100) * columns;
-    const el = container.children[position];
+    let position = Math.floor(ev.x / 100) + Math.floor(ev.y / 100) * columns;
+    let el = container.children[position];
     try {
         el.animate({
             opacity: [