BackToTopButton.kt added and SiteFooter.kt updated.

kotlang-dev · kotlang-dev · commit e7b08f095121 · 2025-09-19T13:28:05.000+05:30
diff --git a/site/src/jsMain/kotlin/org/kotlang/portfolio/AppEntry.kt b/site/src/jsMain/kotlin/org/kotlang/portfolio/AppEntry.kt
@@ -2,7 +2,9 @@ package org.kotlang.portfolio
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import com.varabyte.kobweb.compose.css.ScrollBehavior
 import com.varabyte.kobweb.compose.ui.modifiers.fillMaxHeight
+import com.varabyte.kobweb.compose.ui.modifiers.scrollBehavior
 import com.varabyte.kobweb.core.App
 import com.varabyte.kobweb.silk.SilkApp
 import com.varabyte.kobweb.silk.components.layout.Surface
@@ -20,7 +22,11 @@ fun AppEntry(content: @Composable () -> Unit) {
             colorMode.saveToLocalStorage()
         }
 
-        Surface(SmoothColorStyle.toModifier().fillMaxHeight()) {
+        Surface(
+            SmoothColorStyle.toModifier()
+                .scrollBehavior(ScrollBehavior.Smooth)
+                .fillMaxHeight()
+        ) {
             content()
         }
     }
diff --git a/site/src/jsMain/kotlin/org/kotlang/portfolio/components/PageLayout.kt b/site/src/jsMain/kotlin/org/kotlang/portfolio/components/PageLayout.kt
@@ -1,23 +1,35 @@
 package org.kotlang.portfolio.components
 
 import androidx.compose.runtime.Composable
+import com.varabyte.kobweb.compose.foundation.layout.Box
 import com.varabyte.kobweb.compose.foundation.layout.Column
 import com.varabyte.kobweb.compose.foundation.layout.ColumnScope
 import com.varabyte.kobweb.compose.ui.Alignment
 import com.varabyte.kobweb.compose.ui.Modifier
 import com.varabyte.kobweb.compose.ui.modifiers.fillMaxSize
+import com.varabyte.kobweb.compose.ui.modifiers.fillMaxWidth
+import org.kotlang.portfolio.components.widgets.BackToTopButton
 
 @Composable
 fun PageLayout(
     header: @Composable () -> Unit,
     content: @Composable ColumnScope.() -> Unit
 ) {
-    Column(
-        modifier = Modifier.fillMaxSize(),
-        horizontalAlignment = Alignment.CenterHorizontally
+    Box(
+        modifier = Modifier.fillMaxSize()
     ) {
-        header()
-        content()
-        SiteFooter()
+        Column(
+            modifier = Modifier.fillMaxSize()
+        ) {
+            header()
+            Column(
+                modifier = Modifier.fillMaxWidth().weight(1),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                content()
+            }
+            SiteFooter()
+        }
+        BackToTopButton()
     }
 }
diff --git a/site/src/jsMain/kotlin/org/kotlang/portfolio/components/SiteFooter.kt b/site/src/jsMain/kotlin/org/kotlang/portfolio/components/SiteFooter.kt
@@ -2,21 +2,60 @@ package org.kotlang.portfolio.components
 
 import androidx.compose.runtime.Composable
 import com.varabyte.kobweb.compose.foundation.layout.Box
+import com.varabyte.kobweb.compose.foundation.layout.Column
+import com.varabyte.kobweb.compose.foundation.layout.Row
 import com.varabyte.kobweb.compose.ui.Alignment
 import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.modifiers.background
 import com.varabyte.kobweb.compose.ui.modifiers.fillMaxWidth
-import com.varabyte.kobweb.compose.ui.modifiers.height
+import com.varabyte.kobweb.compose.ui.modifiers.gap
+import com.varabyte.kobweb.compose.ui.modifiers.padding
+import com.varabyte.kobweb.navigation.OpenLinkStrategy
+import com.varabyte.kobweb.silk.components.icons.fa.FaGithub
+import com.varabyte.kobweb.silk.components.navigation.Link
 import com.varabyte.kobweb.silk.components.text.SpanText
+import com.varabyte.kobweb.silk.style.toModifier
+import com.varabyte.kobweb.silk.theme.colors.ColorMode
 import org.jetbrains.compose.web.css.px
+import org.kotlang.portfolio.theme.FooterTextStyle
+import org.kotlang.portfolio.theme.toPortfolioPalette
 
 @Composable
 fun SiteFooter() {
+    val palette = ColorMode.current.toPortfolioPalette()
     Box(
         modifier = Modifier
             .fillMaxWidth()
-            .height(100.px),
+            .background(palette.backgroundVariant)
+            .padding(topBottom = 40.px),
         contentAlignment = Alignment.Center
     ) {
-        SpanText("© 2025 Mohammad Arif. All Rights Reserved.")
+        Column(
+            modifier = Modifier.gap(16.px),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            SpanText(
+                text = "Copyright © 2025 Mohammad Arif. All rights reserved.",
+                modifier = FooterTextStyle.toModifier()
+            )
+            Row(
+                modifier = FooterTextStyle.toModifier().gap(4.px),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                FaGithub()
+                SpanText("This site is")
+                Link(
+                    path = "https://github.com/kotlang-dev/PortfolioWebsite",
+                    text = "open source",
+                    openExternalLinksStrategy = OpenLinkStrategy.IN_NEW_TAB
+                )
+                SpanText("written using")
+                Link(
+                    path = "https://kobweb.varabyte.com/",
+                    text = "Kobweb.",
+                    openExternalLinksStrategy = OpenLinkStrategy.IN_NEW_TAB
+                )
+            }
+        }
     }
 }
diff --git a/site/src/jsMain/kotlin/org/kotlang/portfolio/components/widgets/BackToTopButton.kt b/site/src/jsMain/kotlin/org/kotlang/portfolio/components/widgets/BackToTopButton.kt
@@ -0,0 +1,81 @@
+package org.kotlang.portfolio.components.widgets
+
+import androidx.compose.runtime.*
+import com.varabyte.kobweb.compose.css.PointerEvents
+import com.varabyte.kobweb.compose.css.Visibility
+import com.varabyte.kobweb.compose.foundation.layout.Arrangement
+import com.varabyte.kobweb.compose.foundation.layout.Box
+import com.varabyte.kobweb.compose.foundation.layout.Column
+import com.varabyte.kobweb.compose.ui.Alignment
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.modifiers.*
+import com.varabyte.kobweb.silk.components.icons.fa.FaArrowUp
+import com.varabyte.kobweb.silk.components.icons.fa.IconSize
+import com.varabyte.kobweb.silk.style.animation.toAnimation
+import com.varabyte.kobweb.silk.style.toModifier
+import kotlinx.browser.document
+import kotlinx.browser.window
+import org.jetbrains.compose.web.css.AnimationTimingFunction
+import org.jetbrains.compose.web.css.Position
+import org.jetbrains.compose.web.css.s
+import org.kotlang.portfolio.theme.BackToTopButtonStyle
+import org.kotlang.portfolio.theme.FadeInAnimation
+import org.w3c.dom.SMOOTH
+import org.w3c.dom.ScrollBehavior
+import org.w3c.dom.ScrollToOptions
+import org.w3c.dom.events.EventListener
+
+@Composable
+fun BackToTopButton() {
+    var scroll: Double? by remember { mutableStateOf(null) }
+
+    DisposableEffect(Unit) {
+        val listener = EventListener {
+            scroll = document.documentElement?.scrollTop
+        }
+        window.addEventListener(type = "scroll", callback = listener)
+        onDispose {
+            window.removeEventListener(type = "scroll", callback = listener)
+        }
+    }
+
+    val showButton = (scroll ?: 0.0) > 400.0
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .position(Position.Fixed)
+            .zIndex(1)
+            .pointerEvents(PointerEvents.None),
+        verticalArrangement = Arrangement.Bottom,
+        horizontalAlignment = Alignment.End
+    ) {
+        Box(
+            modifier = BackToTopButtonStyle.toModifier()
+                .visibility(if (showButton) Visibility.Visible else Visibility.Hidden)
+                .onClick {
+                    document.documentElement?.scroll(
+                        ScrollToOptions(
+                            top = 0.0,
+                            behavior = ScrollBehavior.SMOOTH
+                        )
+                    )
+                }
+                .then(
+                    if (showButton) {
+                        Modifier.animation(
+                            FadeInAnimation.toAnimation(
+                                duration = 1.s,
+                                timingFunction = AnimationTimingFunction.EaseInOut
+                            )
+                        )
+                    } else {
+                        Modifier
+                    }
+                ),
+            contentAlignment = Alignment.Center
+        ) {
+            FaArrowUp(size = IconSize.LG)
+        }
+    }
+}
diff --git a/site/src/jsMain/kotlin/org/kotlang/portfolio/theme/AppStyles.kt b/site/src/jsMain/kotlin/org/kotlang/portfolio/theme/AppStyles.kt
@@ -135,4 +135,24 @@ val ProfileImageStyle = CssStyle {
                 scale(1.05)
             }
     }
+}
+
+val FooterTextStyle = CssStyle {
+    val palette = colorMode.toPortfolioPalette()
+    base {
+        Modifier
+            .fontSize(14.px)
+            .color(palette.text.toRgb().copyf(alpha = 0.7f))
+    }
+
+    cssRule(" a") {
+        Modifier
+            .color(palette.primary)
+            .textDecorationLine(TextDecorationLine.None)
+            .transition(Transition.of("color", 200.ms))
+    }
+
+    cssRule(" a:hover") {
+        Modifier.textDecorationLine(TextDecorationLine.Underline)
+    }
 }
diff --git a/site/src/jsMain/kotlin/org/kotlang/portfolio/theme/BackToTopButtonStyle.kt b/site/src/jsMain/kotlin/org/kotlang/portfolio/theme/BackToTopButtonStyle.kt
@@ -0,0 +1,37 @@
+package org.kotlang.portfolio.theme
+
+import com.varabyte.kobweb.compose.css.Cursor
+import com.varabyte.kobweb.compose.css.Transition
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.modifiers.*
+import com.varabyte.kobweb.compose.ui.styleModifier
+import com.varabyte.kobweb.silk.style.CssStyle
+import com.varabyte.kobweb.silk.style.animation.Keyframes
+import com.varabyte.kobweb.silk.style.selectors.hover
+import org.jetbrains.compose.web.css.AnimationTimingFunction
+import org.jetbrains.compose.web.css.ms
+import org.jetbrains.compose.web.css.percent
+import org.jetbrains.compose.web.css.px
+
+val BackToTopButtonStyle = CssStyle {
+    val palette = colorMode.toPortfolioPalette()
+    base {
+        Modifier
+            .size(50.px)
+            .borderRadius(100.percent)
+            .margin(right = 40.px, bottom = 40.px)
+            .cursor(Cursor.Pointer)
+            .styleModifier { property("pointer-events", "auto") }
+            .transition(Transition.of("translate", 200.ms, AnimationTimingFunction.Ease))
+            .backgroundColor(palette.background.inverted())
+            .color(palette.background)
+    }
+    hover {
+        Modifier.translateY((-10).px)
+    }
+}
+
+val FadeInAnimation = Keyframes {
+    from { Modifier.opacity(0) }
+    to { Modifier.opacity(1) }
+}
diff --git a/site/src/jsMain/kotlin/org/kotlang/portfolio/theme/PortfolioPalette.kt b/site/src/jsMain/kotlin/org/kotlang/portfolio/theme/PortfolioPalette.kt
@@ -9,7 +9,8 @@ import com.varabyte.kobweb.silk.theme.colors.ColorMode
 // These are the semantic names for the color roles in our app.
 class PortfolioPalette(
     val background: Color,
-    val surface: Color, // For slightly elevated surfaces
+    val backgroundVariant: Color,
+    val surface: Color,
     val header: Color,
     val primary: Color,
     val text: Color,
@@ -20,6 +21,7 @@ class PortfolioPalette(
 object PortfolioPalettes {
     val light = PortfolioPalette(
         background = Colors.WhiteSmoke, //Color.rgb(0xFFFFFF),
+        backgroundVariant = Color.rgb(0xF1F1F1),
         surface = Color.rgb(0xF8F9FA),
         header = Colors.White.copyf(alpha = 0.85f),
         primary = Color.rgb(0x059669),
@@ -29,6 +31,7 @@ object PortfolioPalettes {
 
     val dark = PortfolioPalette(
         background = Color.rgb(15, 15, 25), //Color.rgb(0x18181B),
+        backgroundVariant = Color.rgb(0x0D0D0D),
         surface = Color.rgb(0x202023),
         header = Colors.Black.copyf(alpha = 0.85f),
         primary = Color.rgb(0x34D399),
