feat: Added project & testimonial sections

JamshedAlamQaderi · Aug 12, 2023 · 72b8e5c · 72b8e5c
1 parent 831ff48
commit 72b8e5c
Show file tree

Hide file tree

Showing 13 changed files with 332 additions and 38 deletions.
diff --git a/web/src/jsMain/kotlin/com/jamshedalamqaderi/portfolio/Main.kt b/web/src/jsMain/kotlin/com/jamshedalamqaderi/portfolio/Main.kt
@@ -1,10 +1,14 @@
 package com.jamshedalamqaderi.portfolio
 
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.DpSize
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.CanvasBasedWindow
 import com.arkivanov.decompose.DefaultComponentContext
 import com.arkivanov.decompose.ExperimentalDecomposeApi
@@ -31,6 +35,14 @@ import org.jetbrains.skiko.wasm.onWasmReady
 import org.koin.compose.KoinApplication
 import org.koin.dsl.module
 
+object ScreenConstraints {
+    val size = mutableStateOf(DpSize(0.dp, 0.dp))
+
+    fun update(size: DpSize) {
+        this.size.value = size
+    }
+}
+
 @OptIn(ExperimentalDecomposeApi::class, ExperimentalComposeUiApi::class)
 fun main() {
     val lifecycleRegistry = LifecycleRegistry()
@@ -65,12 +77,15 @@ fun BootstrapApp(navigationManagerService: NavigationManagerService) {
                 modifier = Modifier.fillMaxSize(),
                 animation = stackAnimation(fade() + scale()),
             ) {
-                navigationManagerService
-                    .findRouteByNavigationRouter(it.instance)
-                    ?.content?.invoke(it.instance)
-                    ?: Center {
-                        Text("Screen not found for path: ${it.instance.path}")
-                    }
+                BoxWithConstraints {
+                    ScreenConstraints.update(DpSize(maxWidth, maxHeight))
+                    navigationManagerService
+                        .findRouteByNavigationRouter(it.instance)
+                        ?.content?.invoke(it.instance)
+                        ?: Center {
+                            Text("Screen not found for path: ${it.instance.path}")
+                        }
+                }
             }
         }
     }

diff --git a/web/src/jsMain/kotlin/com/jamshedalamqaderi/portfolio/domain/utils/AppStrings.kt b/web/src/jsMain/kotlin/com/jamshedalamqaderi/portfolio/domain/utils/AppStrings.kt
@@ -7,4 +7,8 @@ object AppStrings {
     const val jobTitle = "Full stack developer"
     const val introDescription =
         "I specialize in Kotlin Multiplatform development, and I excel in it."
+
+    const val VIEW_DETAILS = "View Details"
+    const val PROJECTS = "Projects"
+    const val TESTIMONIALS = "Testimonials"
 }
diff --git a/web/src/jsMain/kotlin/com/jamshedalamqaderi/portfolio/domain/utils/ProjectListValues.kt b/web/src/jsMain/kotlin/com/jamshedalamqaderi/portfolio/domain/utils/ProjectListValues.kt
@@ -0,0 +1,48 @@
+package com.jamshedalamqaderi.portfolio.domain.utils
+
+import com.jamshedalamqaderi.portfolio.presentation.landing.entities.ProjectListItemModel
+
+val ProjectListValues = listOf(
+    ProjectListItemModel(
+        "Socialdroid",
+        "Great job! I appreciate theming, grouping things into sections. The only missing thing (for me of course) are the placeholders in the text fields.",
+        "images/my_picture.png",
+        tags = listOf("KOTLIN", "KMP", "ANDROID"),
+        link = ""
+    ),
+    ProjectListItemModel(
+        "Socialdroid",
+        "Great job! I appreciate theming, grouping things into sections. The only missing thing (for me of course) are the placeholders in the text fields.",
+        "images/my_picture.png",
+        tags = listOf("KOTLIN", "KMP", "ANDROID"),
+        link = ""
+    ),
+    ProjectListItemModel(
+        "Socialdroid",
+        "Great job! I appreciate theming, grouping things into sections. The only missing thing (for me of course) are the placeholders in the text fields.",
+        "images/my_picture.png",
+        tags = listOf("KOTLIN", "KMP", "ANDROID"),
+        link = ""
+    ),
+    ProjectListItemModel(
+        "Socialdroid",
+        "Great job! I appreciate theming, grouping things into sections. The only missing thing (for me of course) are the placeholders in the text fields.",
+        "images/my_picture.png",
+        tags = listOf("KOTLIN", "KMP", "ANDROID"),
+        link = ""
+    ),
+    ProjectListItemModel(
+        "Socialdroid",
+        "Great job! I appreciate theming, grouping things into sections. The only missing thing (for me of course) are the placeholders in the text fields.",
+        "images/my_picture.png",
+        tags = listOf("KOTLIN", "KMP", "ANDROID"),
+        link = ""
+    ),
+    ProjectListItemModel(
+        "Socialdroid",
+        "Great job! I appreciate theming, grouping things into sections. The only missing thing (for me of course) are the placeholders in the text fields.",
+        "images/my_picture.png",
+        tags = listOf("KOTLIN", "KMP", "ANDROID"),
+        link = ""
+    )
+)
diff --git a/...rc/jsMain/kotlin/com/jamshedalamqaderi/portfolio/presentation/common/components/Margin.kt b/...rc/jsMain/kotlin/com/jamshedalamqaderi/portfolio/presentation/common/components/Margin.kt
@@ -0,0 +1,12 @@
+package com.jamshedalamqaderi.portfolio.presentation.common.components
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+
+@Composable
+fun Margin(modifier: Modifier, content: @Composable () -> Unit) {
+    Box(modifier) {
+        content()
+    }
+}
diff --git a/web/src/jsMain/kotlin/com/jamshedalamqaderi/portfolio/presentation/landing/LandingScreen.kt b/web/src/jsMain/kotlin/com/jamshedalamqaderi/portfolio/presentation/landing/LandingScreen.kt
@@ -1,21 +1,28 @@
 package com.jamshedalamqaderi.portfolio.presentation.landing
 
 import androidx.compose.foundation.ExperimentalFoundationApi
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.pager.VerticalPager
-import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import com.jamshedalamqaderi.portfolio.presentation.landing.components.Expertise
+import com.jamshedalamqaderi.portfolio.presentation.landing.components.Contacts
 import com.jamshedalamqaderi.portfolio.presentation.landing.components.LandingIntro
+import com.jamshedalamqaderi.portfolio.presentation.landing.components.Projects
+import com.jamshedalamqaderi.portfolio.presentation.landing.components.Testimonials
 
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun LandingScreen() {
-    VerticalPager(state = rememberPagerState { 2 }, modifier = Modifier.fillMaxSize()) { index ->
-        when (index) {
-            0 -> LandingIntro()
-            1 -> Expertise()
+    LazyColumn {
+        item {
+            LandingIntro()
+        }
+        item {
+            Projects()
+        }
+        item {
+            Testimonials()
+        }
+        item {
+            Contacts()
         }
     }
 }
diff --git a/...jsMain/kotlin/com/jamshedalamqaderi/portfolio/presentation/landing/components/Contacts.kt b/...jsMain/kotlin/com/jamshedalamqaderi/portfolio/presentation/landing/components/Contacts.kt
@@ -0,0 +1,12 @@
+package com.jamshedalamqaderi.portfolio.presentation.landing.components
+
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import com.jamshedalamqaderi.portfolio.presentation.common.components.Center
+
+@Composable
+fun Contacts() {
+    Center {
+        Text("Contacts")
+    }
+}
diff --git a/...sMain/kotlin/com/jamshedalamqaderi/portfolio/presentation/landing/components/Expertise.kt b/...sMain/kotlin/com/jamshedalamqaderi/portfolio/presentation/landing/components/Expertise.kt
diff --git a/...in/kotlin/com/jamshedalamqaderi/portfolio/presentation/landing/components/LandingIntro.kt b/...in/kotlin/com/jamshedalamqaderi/portfolio/presentation/landing/components/LandingIntro.kt
@@ -5,7 +5,6 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -22,7 +21,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import com.jamshedalamqaderi.portfolio.ScreenConstraints
 import com.jamshedalamqaderi.portfolio.domain.utils.AppStrings
+import com.jamshedalamqaderi.portfolio.presentation.common.components.Center
 import org.jetbrains.compose.resources.ExperimentalResourceApi
 import org.jetbrains.compose.resources.orEmpty
 import org.jetbrains.compose.resources.rememberImageBitmap
@@ -31,11 +32,12 @@ import org.jetbrains.compose.resources.resource
 @OptIn(ExperimentalResourceApi::class)
 @Composable
 fun LandingIntro() {
+    val screenSize = ScreenConstraints.size.value
     val profilePicState = resource("images/my_picture.png").rememberImageBitmap()
-
     Row(
         modifier = Modifier
-            .fillMaxSize()
+            .fillMaxWidth()
+            .height(screenSize.height)
             .background(
                 Brush.horizontalGradient(
                     colors = listOf(

diff --git a/...sMain/kotlin/com/jamshedalamqaderi/portfolio/presentation/landing/components/PageTitle.kt b/...sMain/kotlin/com/jamshedalamqaderi/portfolio/presentation/landing/components/PageTitle.kt
@@ -0,0 +1,24 @@
+package com.jamshedalamqaderi.portfolio.presentation.landing.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Divider
+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 androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun PageTitle(title: String) {
+    Column(modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
+        Text(title, style = MaterialTheme.typography.headlineLarge, color = Color.Black)
+        Spacer(Modifier.height(5.dp))
+        Divider(modifier = Modifier.width(100.dp), thickness = 3.dp, color = MaterialTheme.colorScheme.secondary)
+    }
+}
diff --git a/...ain/kotlin/com/jamshedalamqaderi/portfolio/presentation/landing/components/ProjectCard.kt b/...ain/kotlin/com/jamshedalamqaderi/portfolio/presentation/landing/components/ProjectCard.kt
@@ -0,0 +1,80 @@
+package com.jamshedalamqaderi.portfolio.presentation.landing.components
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Chip
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ElevatedButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.jamshedalamqaderi.portfolio.domain.utils.AppStrings
+import com.jamshedalamqaderi.portfolio.presentation.common.components.Margin
+import com.jamshedalamqaderi.portfolio.presentation.landing.entities.ProjectListItemModel
+import org.jetbrains.compose.resources.ExperimentalResourceApi
+import org.jetbrains.compose.resources.orEmpty
+import org.jetbrains.compose.resources.rememberImageBitmap
+import org.jetbrains.compose.resources.resource
+
+@OptIn(ExperimentalResourceApi::class, ExperimentalMaterialApi::class)
+@Composable
+fun ProjectCard(model: ProjectListItemModel) {
+    val profilePicState = resource(model.banner).rememberImageBitmap()
+    Margin(Modifier.padding(25.dp)) {
+        Card(
+            modifier = Modifier.width(300.dp).height(400.dp),
+            elevation = CardDefaults.cardElevation(5.dp),
+            shape = RoundedCornerShape(10.dp)
+        ) {
+            Image(
+                profilePicState.orEmpty(),
+                contentDescription = "Landing Intro Profile Image",
+                modifier = Modifier.fillMaxWidth().height(150.dp)
+            )
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(10.dp),
+                verticalArrangement = Arrangement.SpaceBetween
+            ) {
+                Column {
+                    Text(model.title, style = MaterialTheme.typography.headlineLarge, color = Color.Black)
+                    Row(modifier = Modifier.fillMaxWidth()) {
+                        model.tags.forEach { tag ->
+                            Spacer(Modifier.width(2.dp))
+                            Chip(onClick = {}) {
+                                Text(tag, style = MaterialTheme.typography.labelSmall)
+                            }
+                        }
+                    }
+                    Spacer(Modifier.height(5.dp))
+                    Text(
+                        model.description,
+                        style = MaterialTheme.typography.bodySmall,
+                        color = Color.DarkGray
+                    )
+                    Spacer(Modifier.height(5.dp))
+                }
+                Row {
+                    ElevatedButton(onClick = {}) {
+                        Text(AppStrings.VIEW_DETAILS)
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/...jsMain/kotlin/com/jamshedalamqaderi/portfolio/presentation/landing/components/Projects.kt b/...jsMain/kotlin/com/jamshedalamqaderi/portfolio/presentation/landing/components/Projects.kt
@@ -0,0 +1,50 @@
+package com.jamshedalamqaderi.portfolio.presentation.landing.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.unit.dp
+import com.jamshedalamqaderi.portfolio.domain.utils.AppStrings
+import com.jamshedalamqaderi.portfolio.domain.utils.ProjectListValues
+
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun Projects() {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(
+                Brush.horizontalGradient(
+                    colors = listOf(
+                        MaterialTheme.colorScheme.primaryContainer,
+                        MaterialTheme.colorScheme.errorContainer,
+                    )
+                )
+            )
+            .padding(bottom = 30.dp)
+    ) {
+        Spacer(Modifier.height(50.dp))
+        PageTitle(AppStrings.PROJECTS)
+        Spacer(Modifier.height(30.dp))
+        FlowRow(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.Center,
+            verticalArrangement = Arrangement.SpaceBetween,
+            maxItemsInEachRow = 4
+        ) {
+            ProjectListValues.forEach { model ->
+                ProjectCard(model)
+            }
+        }
+    }
+}