ProfileSideBar done at 80%

composeApp/src/commonMain/composeResources/values/string.xml

@@ -0,0 +1,3 @@
+<resources>
+   <string name="tech_skill_section">Technical skills</string>
+</resources>

composeApp/src/wasmJsMain/kotlin/data/StaticData.kt

@@ -1,8 +1,8 @@
 package data
 
+import model.SkillData
 import model.UserInfo
-import myresume.composeapp.generated.resources.Res
-import myresume.composeapp.generated.resources.photo_profile
+import myresume.composeapp.generated.resources.*
 
 val myInfo = UserInfo(
     firstName = "Eric Eugène",
@@ -13,4 +13,32 @@ val myInfo = UserInfo(
     pictureProfile = Res.drawable.photo_profile,
     linkedinLink = "https://www.linkedin.com/in/eric-eug%C3%A8ne-randrianarisoa-a853696a/",
     githubLink = "https://github.com/raneric"
-)
+)
+
+val mobileSkills = SkillData(
+    tittle = "Mobile",
+    skills = mapOf(
+        "Android" to Res.drawable.android,
+        "JetpackCompose" to Res.drawable.compose
+    )
+)
+
+val programmingLanguage = SkillData(
+    tittle = "Programming Language",
+    skills = mapOf(
+        "Kotlin" to Res.drawable.kotlin,
+        "Java" to Res.drawable.java,
+        "JavaScript" to Res.drawable.js
+    )
+)
+
+val web = SkillData(
+    tittle = "Front-End",
+    skills = mapOf(
+        "React.js" to Res.drawable.react,
+        "Html" to Res.drawable.html5,
+        "CSS3" to Res.drawable.css3
+    )
+)
+
+val techSkills = listOf(programmingLanguage, mobileSkills, web)

composeApp/src/wasmJsMain/kotlin/model/SkillData.kt

@@ -0,0 +1,8 @@
+package model
+
+import org.jetbrains.compose.resources.DrawableResource
+
+data class SkillData(
+    val tittle: String,
+    val skills: Map<String, DrawableResource>
+)

composeApp/src/wasmJsMain/kotlin/ui/uiComponent/NavigationBar.kt

@@ -3,6 +3,7 @@ package ui.uiComponent
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material.Text
 import androidx.compose.material.TextButton
@@ -14,37 +15,50 @@ import myresume.composeapp.generated.resources.Res
 import myresume.composeapp.generated.resources.rubik_light
 import org.jetbrains.compose.resources.Font
 import ui.theme.darkPrimaryBlue
-import ui.theme.wheatFontColor
 import ui.theme.navigationTypo
 import ui.theme.primaryBlue
+import ui.theme.wheatFontColor
 
 @Composable
-fun NavigationBar(modifier: Modifier = Modifier) {
-    val rubikRegular = Font(Res.font.rubik_light)
+fun NavigationBar(
+    modifier: Modifier = Modifier, elements: @Composable RowScope.() -> Unit
+) {
     Row(
-        modifier = modifier.fillMaxWidth().background(navGradientColor),
-        horizontalArrangement = Arrangement.End
+        modifier = modifier.fillMaxWidth().background(navGradientColor), horizontalArrangement = Arrangement.Center
     ) {
-        link.forEach {
-            TextButton(onClick = {}) {
-                Text(
-                    text = it,
-                    style = navigationTypo.copy(
-                        color = wheatFontColor,
-                        fontFamily = FontFamily(rubikRegular)
-                    )
-                )
-            }
-        }
+        elements()
+    }
+}
+
+@Composable
+fun NavigationItem(
+    tittle: String,
+    modifier: Modifier = Modifier
+) {
+    val rubikRegular = Font(Res.font.rubik_light)
+    TextButton(modifier = modifier, onClick = {}) {
+        Text(
+            text = tittle,
+            style = navigationTypo.copy(
+                color = wheatFontColor, fontFamily = FontFamily(rubikRegular)
+            )
+        )
     }
 }
 
+sealed class Destination(
+    val tittle: String,
+    val route: String
+) {
+    object AboutMe : Destination(tittle = "About me", route = "about_me")
+    object Experience : Destination(tittle = "Experiences", route = "experience")
+    object PersonalProject : Destination(tittle = "Personal project", route = "personal_project")
+    object MyResume : Destination(tittle = "My Resume", route = "my_resume")
+}
+
 val pattern = arrayOf(
-    0.0f to darkPrimaryBlue,
-    0.3f to primaryBlue,
-    0.7f to primaryBlue,
-    1f to darkPrimaryBlue
+    0.0f to darkPrimaryBlue, 0.3f to primaryBlue, 0.7f to primaryBlue, 1f to darkPrimaryBlue
 )
 val navGradientColor = Brush.horizontalGradient(colorStops = pattern)
 
-private val link = listOf("About me", "Experiences", "Personal project", "My Resume")
+val link = listOf("About me", "Experiences", "Personal project", "My Resume")

composeApp/src/wasmJsMain/kotlin/ui/uiComponent/ProfileInfoSideBar.kt

@@ -1,28 +1,23 @@
 package ui.uiComponent
 
-import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Card
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.painter.Painter
-import androidx.compose.ui.text.font.FontFamily
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
+import data.techSkills
 import model.UserInfo
-import myresume.composeapp.generated.resources.*
-import org.jetbrains.compose.resources.DrawableResource
-import org.jetbrains.compose.resources.Font
-import org.jetbrains.compose.resources.painterResource
-import ui.theme.darkBlueBackground
-import ui.theme.wheatFontColor
+import myresume.composeapp.generated.resources.Res
+import myresume.composeapp.generated.resources.tech_skill_section
+import org.jetbrains.compose.resources.stringResource
+import ui.uiCore.ProfilePicture
+import ui.uiCore.Skills
+import ui.uiCore.TechSkillsRow
+import ui.uiCore.UserDetails
 
 @Composable
 fun ProfileInfoSideBar(
@@ -37,7 +32,7 @@ fun ProfileInfoSideBar(
         shape = MaterialTheme.shapes.small
     ) {
         Column(
-            modifier = Modifier.padding(
+            modifier = Modifier.verticalScroll(rememberScrollState()).padding(
                 top = 16.dp,
                 start = 8.dp,
                 end = 8.dp
@@ -47,91 +42,14 @@ fun ProfileInfoSideBar(
         ) {
             ProfilePicture(userInfo.pictureProfile)
             UserDetails(userInfo)
-            SectionTitle("Compétances techniques")
-        }
-    }
-}
-
-@Composable
-fun ProfilePicture(
-    picture: DrawableResource,
-    modifier: Modifier = Modifier
-) {
-    Image(
-        modifier = modifier.size(190.dp).clip(CircleShape),
-        painter = painterResource(picture),
-        contentDescription = ""
-    )
-}
-
-@Composable
-fun UserDetails(
-    userInfo: UserInfo,
-    modifier: Modifier = Modifier
-) {
-    Card(modifier = modifier.fillMaxWidth(), elevation = 4.dp) {
-        Column(
-            modifier = Modifier.padding(8.dp),
-            verticalArrangement = Arrangement.SpaceAround,
-            horizontalAlignment = Alignment.Start
-        ) {
-            UserDetailsItem(
-                icon = painterResource(Res.drawable.name_svg),
-                text = userInfo.fullName
-            )
-            UserDetailsItem(
-                icon = painterResource(Res.drawable.birthdate_svg),
-                text = userInfo.birthDate
-            )
-            UserDetailsItem(
-                icon = painterResource(Res.drawable.phone_svg),
-                text = userInfo.phoneNumber
-            )
-            UserDetailsItem(
-                icon = painterResource(Res.drawable.mail_svg),
-                text = userInfo.email
+            Skills(
+                tittle = stringResource(Res.string.tech_skill_section),
+                element = {
+                    techSkills.forEach {
+                        TechSkillsRow(skill = it)
+                    }
+                }
             )
         }
     }
 }
-
-@Composable
-fun UserDetailsItem(
-    icon: Painter,
-    text: String,
-    modifier: Modifier = Modifier
-) {
-    val rubikRegular = Font(Res.font.rubik_light)
-    Row(
-        modifier = modifier,
-        horizontalArrangement = Arrangement.spacedBy(8.dp),
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        Image(
-            modifier = Modifier.size(16.dp),
-            painter = icon,
-            contentDescription = null
-        )
-        Text(
-            text = text,
-            style = MaterialTheme.typography.body2.copy(
-                fontWeight = FontWeight.Bold,
-                fontFamily = FontFamily(rubikRegular)
-            )
-        )
-    }
-}
-
-@Composable
-fun SectionTitle(title: String, modifier: Modifier = Modifier) {
-    Text(
-        text = title,
-        color = wheatFontColor,
-        textAlign = TextAlign.Center,
-        modifier = modifier
-            .fillMaxWidth()
-            .padding(vertical = 2.dp)
-            .clip(MaterialTheme.shapes.small)
-            .background(darkBlueBackground)
-    )
-}

composeApp/src/wasmJsMain/kotlin/ui/uiCore/ProfilePicture.kt

@@ -0,0 +1,23 @@
+package ui.uiCore
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+import org.jetbrains.compose.resources.DrawableResource
+import org.jetbrains.compose.resources.painterResource
+
+@Composable
+fun ProfilePicture(
+    picture: DrawableResource,
+    modifier: Modifier = Modifier
+) {
+    Image(
+        modifier = modifier.size(160.dp).clip(CircleShape),
+        painter = painterResource(picture),
+        contentDescription = ""
+    )
+}