made responsive

code/composeApp/build.gradle.kts

@@ -36,6 +36,8 @@ kotlin {
             implementation(compose.material)
             implementation(compose.material3)
             implementation(compose.materialIconsExtended)
+
+            implementation("org.jetbrains.compose.material3:material3-window-size-class:1.7.1")
             implementation("org.jetbrains.androidx.lifecycle:lifecycle-viewmodel-compose:2.8.2")
 
             implementation(compose.ui)

code/composeApp/src/commonMain/kotlin/com/braiso_22/web/App.kt

@@ -1,10 +1,13 @@
 package com.braiso_22.web
 
 import androidx.compose.material3.Surface
+import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
+import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
 import androidx.compose.runtime.*
 import com.braiso_22.web.main_page.MainPage
 import com.braiso_22.web.theme.AppTheme
 
+@OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
 @Composable
 fun App() {
     var isDarkMode by remember { mutableStateOf(true) }
@@ -14,6 +17,7 @@ fun App() {
         Surface {
             MainPage(
                 isDarkMode,
+                calculateWindowSizeClass(),
                 setIsDarkMode = { isDarkMode = !isDarkMode }
             )
         }

code/composeApp/src/commonMain/kotlin/com/braiso_22/web/main_page/MainPage.kt

@@ -1,39 +1,40 @@
 package com.braiso_22.web.main_page
 
-import MyIconPack
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.DarkMode
 import androidx.compose.material.icons.filled.LightMode
 import androidx.compose.material3.*
+import androidx.compose.material3.windowsizeclass.WindowSizeClass
+import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalClipboardManager
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.text.AnnotatedString
-import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.braiso_22.web.main_page.about_me.AboutMe
-import com.braiso_22.web.main_page.profile_info.ProfileInfo
+import com.braiso_22.web.main_page.profile_info.CompactProfileInfo
+import com.braiso_22.web.main_page.profile_info.ExpandedProfileInfo
+import com.braiso_22.web.main_page.profile_info.MediumProfileInfo
+import com.braiso_22.web.main_page.stack.ExpandedMyStack
 import com.braiso_22.web.main_page.stack.MyStack
 import com.braiso_22.web.theme.mediumPadding
-import com.braiso_22.web.theme.smallPadding
-import com.braiso_22.web.theme.verySmallPadding
 import kotlinx.coroutines.flow.collectLatest
-import myiconpack.Android
-import org.jetbrains.compose.resources.DrawableResource
-import org.jetbrains.compose.resources.imageResource
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun MainPage(
     isDarkMode: Boolean,
+    sizeClass: WindowSizeClass,
     setIsDarkMode: () -> Unit,
 ) {
     val snackbarHostState = remember { SnackbarHostState() }
@@ -103,19 +104,49 @@ fun MainPage(
                 rememberScrollState()
             )
         ) {
-            Card(
-                modifier = Modifier.fillMaxWidth(0.75f).padding(mediumPadding)
+            val fraction = if (sizeClass.widthSizeClass == WindowWidthSizeClass.Expanded)
+                0.85f
+            else
+                1f
+
+            Column(
+                modifier = Modifier.fillMaxWidth(fraction)
             ) {
-                ProfileInfo(
-                    onEvent = { viewmodel.onEvent(it) },
-                    modifier = Modifier.padding(mediumPadding),
-                )
-            }
-            Card(modifier = Modifier.fillMaxWidth(0.75f).padding(mediumPadding)) {
-                AboutMe(Modifier.padding(mediumPadding))
-            }
-            Card(modifier = Modifier.fillMaxWidth(0.75f).padding(mediumPadding)) {
-                MyStack(Modifier.padding(mediumPadding))
+                val cardModifier = Modifier.fillMaxWidth().padding(mediumPadding)
+                Card(modifier = cardModifier) {
+                    when (sizeClass.widthSizeClass) {
+                        WindowWidthSizeClass.Compact -> {
+                            CompactProfileInfo(
+                                onEvent = { viewmodel.onEvent(it) },
+                                modifier = cardModifier,
+                            )
+                        }
+
+                        WindowWidthSizeClass.Medium -> {
+                            MediumProfileInfo(
+                                onEvent = { viewmodel.onEvent(it) },
+                                modifier = cardModifier,
+                            )
+                        }
+
+                        WindowWidthSizeClass.Expanded -> {
+                            ExpandedProfileInfo(
+                                onEvent = { viewmodel.onEvent(it) },
+                                modifier = Modifier.padding(mediumPadding),
+                            )
+                        }
+                    }
+                }
+                Card(modifier = cardModifier) {
+                    AboutMe(Modifier.padding(mediumPadding))
+                }
+                Card(modifier = cardModifier) {
+                    if (sizeClass.widthSizeClass == WindowWidthSizeClass.Expanded) {
+                        ExpandedMyStack(Modifier.padding(mediumPadding))
+                    } else {
+                        MyStack(Modifier.padding(mediumPadding))
+                    }
+                }
             }
         }
     }

code/composeApp/src/commonMain/kotlin/com/braiso_22/web/main_page/profile_info/CompactProfileInfo.kt

@@ -0,0 +1,46 @@
+package com.braiso_22.web.main_page.profile_info
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import braiso_22.composeapp.generated.resources.Res
+import braiso_22.composeapp.generated.resources.full_stack_developer
+import com.braiso_22.web.main_page.Event
+import com.braiso_22.web.theme.smallPadding
+import com.braiso_22.web.theme.verySmallPadding
+import org.jetbrains.compose.resources.stringResource
+
+@Composable
+fun CompactProfileInfo(
+    onEvent: (Event) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        modifier = modifier,
+    ) {
+        ProfileImage(
+            size = 192,
+            modifier = Modifier.padding(smallPadding),
+        )
+        Spacer(Modifier.padding(smallPadding))
+        Text(
+            text = "Brais Fernández Vázquez",
+            style = MaterialTheme.typography.titleLarge
+        )
+        Spacer(Modifier.padding(verySmallPadding))
+        Text(
+            stringResource(Res.string.full_stack_developer),
+            style = MaterialTheme.typography.titleMedium
+        )
+        Spacer(Modifier.padding(verySmallPadding))
+        LocationInfo()
+        Spacer(Modifier.padding(verySmallPadding))
+        CompactSocialLinks(onEvent)
+    }
+}

code/composeApp/src/commonMain/kotlin/com/braiso_22/web/main_page/profile_info/ExpandedProfileInfo.kt

@@ -0,0 +1,45 @@
+package com.braiso_22.web.main_page.profile_info
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import braiso_22.composeapp.generated.resources.Res
+import braiso_22.composeapp.generated.resources.full_stack_developer
+import com.braiso_22.web.main_page.Event
+import com.braiso_22.web.theme.smallPadding
+import com.braiso_22.web.theme.verySmallPadding
+import org.jetbrains.compose.resources.stringResource
+
+@Composable
+fun ExpandedProfileInfo(
+    onEvent: (Event) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        horizontalArrangement = Arrangement.Center,
+        modifier = modifier,
+    ) {
+        ProfileImage(
+            modifier = Modifier.padding(smallPadding),
+        )
+        Spacer(Modifier.padding(smallPadding))
+        Column {
+
+            Text(
+                text = "Brais Fernández Vázquez",
+                style = MaterialTheme.typography.titleLarge
+            )
+            Spacer(Modifier.padding(verySmallPadding))
+            Text(
+                stringResource(Res.string.full_stack_developer),
+                style = MaterialTheme.typography.titleMedium
+            )
+            Spacer(Modifier.padding(verySmallPadding))
+            LocationInfo()
+            Spacer(Modifier.padding(verySmallPadding))
+            SocialLinks(onEvent)
+        }
+    }
+}

code/composeApp/src/commonMain/kotlin/com/braiso_22/web/main_page/profile_info/MediumProfileInfo.kt

@@ -0,0 +1,50 @@
+package com.braiso_22.web.main_page.profile_info
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import braiso_22.composeapp.generated.resources.Res
+import braiso_22.composeapp.generated.resources.full_stack_developer
+import com.braiso_22.web.main_page.Event
+import com.braiso_22.web.theme.mediumPadding
+import com.braiso_22.web.theme.smallPadding
+import com.braiso_22.web.theme.verySmallPadding
+import org.jetbrains.compose.resources.stringResource
+
+@Composable
+fun MediumProfileInfo(
+    onEvent: (Event) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        modifier = modifier
+    ) {
+        Row(
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            ProfileImage(
+                modifier = Modifier.padding(smallPadding),
+            )
+            Spacer(Modifier.padding(mediumPadding))
+            Column {
+                Text(
+                    text = "Brais Fernández Vázquez",
+                    style = MaterialTheme.typography.titleLarge
+                )
+                Spacer(Modifier.padding(verySmallPadding))
+                Text(
+                    stringResource(Res.string.full_stack_developer),
+                    style = MaterialTheme.typography.titleMedium
+                )
+                Spacer(Modifier.padding(verySmallPadding))
+                LocationInfo()
+            }
+        }
+        SocialLinks(onEvent)
+    }
+}