neosubhamoy/neosubhamoy-portfolio
1
1
Fork 0
mirror of https://github.com/neosubhamoy/neosubhamoy-portfolio.git synced 2025-12-20 01:09:35 +05:30
Code Issues Wiki Activity

(feat): implemented basic floating-bar in home page

Browse Source
This commit is contained in:
Subhamoy Biswas
2023-11-03 21:49:55 +05:30
parent 6948e27e1d
commit 6835a31b27
4 changed files with 90 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
htdocs/assets/extra-style.css
View File

@@ -78,3 +78,12 @@ background: #38BDF8;
fill: red; fill: red;
} */ } */
.floatingbar-slide-down {
transform: translateY(20vh);
transition: transform 0.5s ease-in-out;
}
.floatingbar-slide-up {
transform: translateY(-10%);
transition: transform 0.5s ease-in-out;
}

54
htdocs/assets/style.css
View File

@@ -538,6 +538,11 @@ video {
position: relative; position: relative;
} }
.inset-x-0 {
left: 0px;
right: 0px;
}
.bottom-0 { .bottom-0 {
bottom: 0px; bottom: 0px;
} }
@@ -550,6 +555,10 @@ video {
bottom: 5.5rem; bottom: 5.5rem;
} }
.bottom-\[7vh\] {
bottom: 7vh;
}
.left-0 { .left-0 {
left: 0px; left: 0px;
} }
@@ -566,6 +575,10 @@ video {
left: 3.2rem; left: 3.2rem;
} }
.left-\[50vw\] {
left: 50vw;
}
.right-0 { .right-0 {
right: 0px; right: 0px;
} }
@@ -614,6 +627,10 @@ video {
z-index: 100; z-index: 100;
} }
.z-\[50\] {
z-index: 50;
}
.mx-1 { .mx-1 {
margin-left: 0.25rem; margin-left: 0.25rem;
margin-right: 0.25rem; margin-right: 0.25rem;
@@ -1133,6 +1150,10 @@ video {
padding: 0.75rem; padding: 0.75rem;
} }
.p-\[0\.30rem\] {
padding: 0.30rem;
}
.px-1 { .px-1 {
padding-left: 0.25rem; padding-left: 0.25rem;
padding-right: 0.25rem; padding-right: 0.25rem;
@@ -1168,6 +1189,11 @@ video {
padding-right: 1.75rem; padding-right: 1.75rem;
} }
.px-\[0\.80rem\] {
padding-left: 0.80rem;
padding-right: 0.80rem;
}
.py-1 { .py-1 {
padding-top: 0.25rem; padding-top: 0.25rem;
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
@@ -1348,11 +1374,28 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} }
.shadow-\[0px_0px_30px\] {
--tw-shadow: 0px 0px 30px;
--tw-shadow-colored: 0px 0px 30px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0px_0px_20px\] {
--tw-shadow: 0px 0px 20px;
--tw-shadow-colored: 0px 0px 20px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-accent_primary { .shadow-accent_primary {
--tw-shadow-color: #38BDF8; --tw-shadow-color: #38BDF8;
--tw-shadow: var(--tw-shadow-colored); --tw-shadow: var(--tw-shadow-colored);
} }
.shadow-accent_primary_extratransparent {
--tw-shadow-color: rgba(56, 189, 248, 0.15);
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-accent_primary_transparent { .shadow-accent_primary_transparent {
--tw-shadow-color: rgba(56, 189, 248, 0.30); --tw-shadow-color: rgba(56, 189, 248, 0.30);
--tw-shadow: var(--tw-shadow-colored); --tw-shadow: var(--tw-shadow-colored);
@@ -1448,6 +1491,12 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} }
.hover\:shadow-\[0px_0px_30px\]:hover {
--tw-shadow: 0px 0px 30px;
--tw-shadow-colored: 0px 0px 30px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-accent_primary_transparent:hover { .hover\:shadow-accent_primary_transparent:hover {
--tw-shadow-color: rgba(56, 189, 248, 0.30); --tw-shadow-color: rgba(56, 189, 248, 0.30);
--tw-shadow: var(--tw-shadow-colored); --tw-shadow: var(--tw-shadow-colored);
@@ -1458,6 +1507,11 @@ video {
--tw-shadow: var(--tw-shadow-colored); --tw-shadow: var(--tw-shadow-colored);
} }
.hover\:shadow-accent_primary_extratransparent:hover {
--tw-shadow-color: rgba(56, 189, 248, 0.15);
--tw-shadow: var(--tw-shadow-colored);
}
.group:hover .group-hover\:flex { .group:hover .group-hover\:flex {
display: flex; display: flex;
} }

25
htdocs/index.php
View File

@@ -14,6 +14,13 @@ require './core/query_functions.php';
</head> </head>
<body class="font-lexend bg-bg_primary text-accent_secondary"> <body class="font-lexend bg-bg_primary text-accent_secondary">
<div id="preloader" class="absolute top-0 right-0 h-full w-screen z-[100] flex justify-center items-center bg-bg_primary overflow-hidden"><div class="spinner border-[5px] border-accent_secondary_transparent border-t-[5px] border-t-accent_primary rounded-[50%] h-[50px] w-[50px] animate-spin"></div></div> <div id="preloader" class="absolute top-0 right-0 h-full w-screen z-[100] flex justify-center items-center bg-bg_primary overflow-hidden"><div class="spinner border-[5px] border-accent_secondary_transparent border-t-[5px] border-t-accent_primary rounded-[50%] h-[50px] w-[50px] animate-spin"></div></div>
<div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] flex justify-center items-center">
<div id="searchbar" class="searchbar bg-bg_secondary rounded-full p-[0.30rem] flex items-center cursor-pointer mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_extratransparent transition transform duration-300">
<button class="bg-accent_primary px-3 py-2 rounded-full"><i class="fa-solid fa-magnifying-glass text-bg_primary"></i></button>
<p class="ml-3 mr-4 text-accent_three">SEARCH</p>
</div>
<button id="sharebutton" class="sharebutton bg-accent_primary px-[0.80rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300"><i class="fa-solid fa-share-nodes text-bg_primary"></i></button>
</div>
<?php require 'assets/_header.php';?> <?php require 'assets/_header.php';?>
<div class="homebox w-full px-4 lg:px-[4.5rem]"> <div class="homebox w-full px-4 lg:px-[4.5rem]">
<div class="herosection w-full flex flex-col-reverse justify-center lg:flex-row lg:justify-between items-center mb-3"> <div class="herosection w-full flex flex-col-reverse justify-center lg:flex-row lg:justify-between items-center mb-3">
@@ -244,6 +251,24 @@ require './core/query_functions.php';
for(const card of document.querySelectorAll(".aboutcontainer")){ for(const card of document.querySelectorAll(".aboutcontainer")){
card.onmousemove = e => handleOnMouseMove(e); card.onmousemove = e => handleOnMouseMove(e);
} }
let lastScrollTop = 0;
window.addEventListener("scroll", function () {
const st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop) {
// Scrolling down
document.getElementById("floating-bar").classList.add("floatingbar-slide-down");
document.getElementById("floating-bar").classList.remove("floatingbar-slide-up");
} else {
// Scrolling up
document.getElementById("floating-bar").classList.remove("floatingbar-slide-down");
document.getElementById("floating-bar").classList.add("floatingbar-slide-up");
}
lastScrollTop = st <= 0 ? 0 : st;
});
</script> </script>
</body> </body>
</html> </html>

3
tailwind.config.js
View File

@@ -16,7 +16,8 @@ module.exports = {
accent_three: '#D9D9D9', accent_three: '#D9D9D9',
accent_four: '#ACCBDE', accent_four: '#ACCBDE',
accent_primary_transparent: 'rgba(56, 189, 248, 0.30)', accent_primary_transparent: 'rgba(56, 189, 248, 0.30)',
accent_secondary_transparent: 'rgba(255, 255, 255, 0.30)' accent_secondary_transparent: 'rgba(255, 255, 255, 0.30)',
accent_primary_extratransparent: 'rgba(56, 189, 248, 0.15)',
}, },
extend: {}, extend: {},
}, },