feat: make site responsive

nsh07 · nsh07 · commit f66177447d7a · 2025-10-11T12:50:07.000+05:30
diff --git a/composeApp/build.gradle.kts b/composeApp/build.gradle.kts
@@ -36,7 +36,7 @@ kotlin {
             implementation(compose.runtime)
             implementation(compose.foundation)
             implementation(compose.material3)
-            implementation(libs.compose.material3.windowsizeclass)
+            implementation(libs.compose.material3.adaptive)
             implementation(libs.coil.kt)
             implementation(libs.coil.kt.ktor)
             implementation(compose.ui)
diff --git a/composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/AppScreen.kt b/composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/AppScreen.kt
@@ -1,14 +1,12 @@
 package org.nsh07.nsh07.ui
 
-import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.lifecycle.viewmodel.compose.viewModel
 import org.nsh07.nsh07.ui.homeScreen.AppHomeScreen
 
-@OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
 @Composable
 fun AppScreen(
     viewModel: UiViewModel = viewModel(factory = UiViewModel.Factory),
diff --git a/composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/homeScreen/AppHomeScreen.kt b/composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/homeScreen/AppHomeScreen.kt
@@ -1,30 +1,36 @@
 package org.nsh07.nsh07.ui.homeScreen
 
+import androidx.compose.animation.*
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.*
+import androidx.compose.material3.MaterialTheme.motionScheme
 import androidx.compose.material3.MaterialTheme.typography
-import androidx.compose.material3.Text
+import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.unit.dp
+import androidx.window.core.layout.WindowSizeClass
 import kotlinx.coroutines.launch
 
-@OptIn(ExperimentalMaterial3ExpressiveApi::class)
+@OptIn(ExperimentalMaterial3ExpressiveApi::class, ExperimentalMaterial3Api::class)
 @Composable
 fun AppHomeScreen(
     projectState: ProjectsState,
     modifier: Modifier = Modifier
 ) {
     val uriHandler = LocalUriHandler.current
     val scope = rememberCoroutineScope()
+    val motionScheme = motionScheme
 
     val listState = rememberLazyListState()
     val firstVisibleItem by derivedStateOf { listState.firstVisibleItemIndex }
+    val scrolledUp by derivedStateOf { listState.lastScrolledForward }
 
     val paragraphs = remember {
         listOf(
@@ -40,7 +46,7 @@ fun AppHomeScreen(
                 start = "Aug 2025",
                 end = "Present",
                 position = "Open Source Lead",
-                description = "Perform the role of Open Source Lead of the Development Club. Helped successfully organise OPCODE (Open Source Fest) 2025.",
+                description = "Perform the role of Open Source Lead of the Development Club. Successfully organised OPCODE (Open Source Fest) 2025, while also contributing a project.",
                 company = "DevC, IIIT Bhagalpur",
                 companyUrl = "https://gymkhana.iiitbh.ac.in/technical/",
                 skills = listOf()
@@ -60,63 +66,137 @@ fun AppHomeScreen(
 
     val cardPadding = remember { 16.dp }
 
-    Row(
-        modifier = Modifier
-            .padding(horizontal = 48.dp)
-            .widthIn(max = 1200.dp)
-            .then(modifier)
-    ) {
-        Column(Modifier.padding(vertical = 96.dp).weight(1f)) {
-            Column(Modifier.verticalScroll(rememberScrollState())) {
-                NameAndDesc()
+    val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
 
-                Spacer(Modifier.height(72.dp))
+    if (windowSizeClass.isWidthAtLeastBreakpoint(WindowSizeClass.WIDTH_DP_EXPANDED_LOWER_BOUND)) {
+        Row(
+            modifier = Modifier
+                .padding(horizontal = 48.dp)
+                .widthIn(max = 1200.dp)
+                .then(modifier)
+        ) {
+            Column(Modifier.padding(vertical = 96.dp).weight(1f)) {
+                Column(Modifier.verticalScroll(rememberScrollState())) {
+                    NameAndDesc()
 
-                NavigationItem(
-                    selected = firstVisibleItem < paragraphCount + 1,
-                    onClick = {
-                        scope.launch { listState.animateScrollToItem(0) }
-                    },
-                    label = { Text("About", style = typography.bodyMedium) },
-                    modifier = Modifier.offset(x = (-20).dp)
-                )
-                NavigationItem(
-                    selected = firstVisibleItem in paragraphCount + 1..<paragraphCount + experienceCount + 2,
-                    onClick = {
-                        scope.launch { listState.animateScrollToItem(paragraphCount + 1) }
-                    },
-                    label = { Text("Experience", style = typography.bodyMedium) },
-                    modifier = Modifier.offset(x = (-20).dp)
-                )
-                NavigationItem(
-                    selected = firstVisibleItem >= paragraphCount + experienceCount + 2,
-                    onClick = {
-                        scope.launch { listState.animateScrollToItem(paragraphCount + experienceCount + 2) }
-                    },
-                    label = { Text("Projects", style = typography.bodyMedium) },
-                    modifier = Modifier.offset(x = (-20).dp)
-                )
+                    Spacer(Modifier.height(72.dp))
 
-                Spacer(Modifier.height(32.dp))
-            }
+                    NavigationItem(
+                        selected = firstVisibleItem < paragraphCount + 1,
+                        onClick = {
+                            scope.launch { listState.animateScrollToItem(0) }
+                        },
+                        label = { Text("About", style = typography.bodyMedium) },
+                        modifier = Modifier.offset(x = (-20).dp)
+                    )
+                    NavigationItem(
+                        selected = firstVisibleItem in paragraphCount + 1..<paragraphCount + experienceCount + 2,
+                        onClick = {
+                            scope.launch { listState.animateScrollToItem(paragraphCount + 1) }
+                        },
+                        label = { Text("Experience", style = typography.bodyMedium) },
+                        modifier = Modifier.offset(x = (-20).dp)
+                    )
+                    NavigationItem(
+                        selected = firstVisibleItem >= paragraphCount + experienceCount + 2,
+                        onClick = {
+                            scope.launch { listState.animateScrollToItem(paragraphCount + experienceCount + 2) }
+                        },
+                        label = { Text("Projects", style = typography.bodyMedium) },
+                        modifier = Modifier.offset(x = (-20).dp)
+                    )
 
-            Spacer(Modifier.weight(1f))
+                    Spacer(Modifier.height(32.dp))
+                }
 
-            SocialIcons()
-        }
+                Spacer(Modifier.weight(1f))
 
-        LazyColumn(
-            state = listState,
-            contentPadding = PaddingValues(vertical = 96.dp),
-            modifier = Modifier.fillMaxHeight().weight(1.1f)
-        ) {
-            mainContent(
-                paragraphs,
-                experiences,
-                projectState,
-                cardPadding,
-                uriHandler
-            )
+                SocialIcons()
+            }
+
+            LazyColumn(
+                state = listState,
+                contentPadding = PaddingValues(vertical = 96.dp),
+                modifier = Modifier.fillMaxHeight().weight(1.1f)
+            ) {
+                mainContent(
+                    paragraphs,
+                    experiences,
+                    projectState,
+                    cardPadding,
+                    uriHandler
+                )
+            }
+        }
+    } else {
+        Scaffold(
+            topBar = {
+                AnimatedVisibility(
+                    firstVisibleItem > 1,
+                    enter = slideInVertically(motionScheme.defaultSpatialSpec(), initialOffsetY = { -it }),
+                    exit = slideOutVertically(motionScheme.defaultSpatialSpec(), targetOffsetY = { -it })
+                ) {
+                    val topBarContent = when (firstVisibleItem) {
+                        in paragraphCount + 2..<paragraphCount + experienceCount + 3 -> 1
+                        in paragraphCount + experienceCount + 3..1000 -> 2
+                        else -> 0
+                    }
+                    TopAppBar(
+                        title = {
+                            AnimatedContent(
+                                topBarContent,
+                                transitionSpec = {
+                                    slideInVertically(
+                                        animationSpec = motionScheme.fastSpatialSpec(),
+                                        initialOffsetY = {
+                                            if (scrolledUp) (it * 1.25).toInt() else (-it * 1.25).toInt()
+                                        }
+                                    ).togetherWith(
+                                        slideOutVertically(
+                                            animationSpec = motionScheme.fastSpatialSpec(),
+                                            targetOffsetY = {
+                                                if (scrolledUp) (-it * 1.25).toInt() else (it * 1.25).toInt()
+                                            }
+                                        )
+                                    )
+                                },
+                                modifier = Modifier.width(200.dp).padding(start = 8.dp)
+                            ) {
+                                when (it) {
+                                    1 -> Text("Experience")
+                                    2 -> Text("Projects")
+                                    else -> Text("About")
+                                }
+                            }
+                        }
+                    )
+                }
+            }
+        ) { innerPadding ->
+            val layoutDirection = LocalLayoutDirection.current
+            LazyColumn(
+                state = listState,
+                contentPadding = PaddingValues(
+                    top = 48.dp,
+                    start = innerPadding.calculateStartPadding(layoutDirection),
+                    end = innerPadding.calculateEndPadding(layoutDirection),
+                    bottom = 48.dp
+                ),
+                modifier = Modifier.fillMaxWidth().padding(horizontal = 8.dp)
+            ) {
+                item { NameAndDesc(horizontalPadding = 16.dp) }
+                item {
+                    SocialIcons(Modifier.padding(top = 32.dp, start = 12.dp, end = 12.dp))
+                    Spacer(Modifier.height(96.dp))
+                }
+                mainContent(
+                    paragraphs,
+                    experiences,
+                    projectState,
+                    cardPadding,
+                    uriHandler
+                )
+            }
         }
     }
 }
diff --git a/composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/homeScreen/HomeScreenContent.kt b/composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/homeScreen/HomeScreenContent.kt
@@ -21,31 +21,36 @@ import nsh07.composeapp.generated.resources.*
 import org.jetbrains.compose.resources.painterResource
 
 @Composable
-fun NameAndDesc() {
+fun NameAndDesc(horizontalPadding: Dp = 0.dp) {
     Text(
         "Nishant Mishra",
         style = typography.displayLarge.copy(fontSize = 48.sp),
-        color = colorScheme.onSurface
+        color = colorScheme.onSurface,
+        modifier = Modifier.padding(horizontal = horizontalPadding)
     )
     Spacer(Modifier.height(4.dp))
     Text(
         "App developer",
         style = typography.titleLarge,
-        color = colorScheme.onSurface
+        color = colorScheme.onSurface,
+        modifier = Modifier.padding(horizontal = horizontalPadding)
     )
     Spacer(Modifier.height(20.dp))
     Text(
         "I build performant, beautiful apps for mobile and desktop.",
         style = typography.bodyLarge,
         color = colorScheme.onSurfaceVariant,
-        modifier = Modifier.widthIn(max = 320.dp)
+        modifier = Modifier.widthIn(max = 320.dp).padding(horizontal = horizontalPadding)
     )
 }
 
 @Composable
-fun SocialIcons() {
+fun SocialIcons(modifier: Modifier = Modifier) {
     val uriHandler = LocalUriHandler.current
-    Row(verticalAlignment = Alignment.CenterVertically) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = modifier
+    ) {
         IconButton(onClick = { uriHandler.openUri("https://github.com/nsh07") }) {
             Icon(
                 painterResource(Res.drawable.github),
@@ -151,8 +156,8 @@ fun LazyListScope.mainContent(
     }
     item("tech stack spacer") { Spacer(Modifier.height(112.dp)) }
     item("tech stack") {
-        Row(
-            verticalAlignment = Alignment.CenterVertically,
+        FlowRow(
+            itemVerticalAlignment = Alignment.CenterVertically,
             modifier = Modifier.padding(horizontal = cardPadding)
         ) {
             Text(
@@ -175,7 +180,8 @@ fun LazyListScope.mainContent(
                 null,
                 modifier = Modifier.clickable { uriHandler.openUri("https://www.jetbrains.com/compose-multiplatform/") }
             )
-            Text(" in Kotlin. Deployed with ", style = typography.bodyMedium, color = colorScheme.outline)
+            Text(" in Kotlin. ", style = typography.bodyMedium, color = colorScheme.outline)
+            Text("Deployed with ", style = typography.bodyMedium, color = colorScheme.outline)
             Icon(
                 painterResource(Res.drawable.githubpages),
                 null,
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -5,13 +5,14 @@ composeMultiplatform = "1.10.0-alpha02"
 kotlin = "2.2.20"
 ksp = "2.2.20-2.0.4"
 ktor = "3.3.1"
+material3-adaptive = "1.2.0-alpha07"
 
 [libraries]
 androidx-lifecycle-runtimeCompose = { module = "org.jetbrains.androidx.lifecycle:lifecycle-runtime-compose", version.ref = "androidx-lifecycle" }
 androidx-lifecycle-viewmodelCompose = { module = "org.jetbrains.androidx.lifecycle:lifecycle-viewmodel-compose", version.ref = "androidx-lifecycle" }
 coil-kt = { module = "io.coil-kt.coil3:coil-compose", version.ref = "coil3" }
 coil-kt-ktor = { module = "io.coil-kt.coil3:coil-network-ktor3", version.ref = "coil3" }
-compose-material3-windowsizeclass = { module = "org.jetbrains.compose.material3:material3-window-size-class", version.ref = "composeMultiplatform" }
+compose-material3-adaptive = { module = "org.jetbrains.compose.material3.adaptive:adaptive", version.ref = "material3-adaptive" }
 kotlin-test = { module = "org.jetbrains.kotlin:kotlin-test", version.ref = "kotlin" }
 ktor-client-content-negotiation = { module = "io.ktor:ktor-client-content-negotiation", version.ref = "ktor" }
 ktor-serialization-kotlinx-json = { module = "io.ktor:ktor-serialization-kotlinx-json", version.ref = "ktor" }
