Skip to content

Commit

Permalink
feat: updated intro in landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
JamshedAlamQaderi committed Aug 1, 2023
1 parent 2badd3c commit fe04979
Show file tree
Hide file tree
Showing 9 changed files with 218 additions and 104 deletions.
14 changes: 6 additions & 8 deletions web/src/jsMain/kotlin/com/jamshedalamqaderi/portfolio/Main.kt
Original file line number Diff line number Diff line change
@@ -1,25 +1,23 @@
package com.jamshedalamqaderi.portfolio

import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import com.jamshedalamqaderi.portfolio.domain.utils.FontLoader
import com.jamshedalamqaderi.portfolio.presentation.pages.Landing
import com.jamshedalamqaderi.portfolio.presentation.pages.OnBoarding
import com.jamshedalamqaderi.portfolio.presentation.ui.theme.PortfolioTheme
import com.jamshedalamqaderi.webrouter.dsl.WebRouterWindow
import org.jetbrains.skiko.wasm.onWasmReady

@OptIn(ExperimentalComposeUiApi::class)
fun main() {
onWasmReady {
WebRouterWindow {
routeView("/") { context ->
PortfolioTheme {
OnBoarding(context)
}
OnBoarding(context)
}
routeView("/landing") {
PortfolioTheme {
Landing()
}
Landing()
}
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
package com.jamshedalamqaderi.portfolio.presentation

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import com.jamshedalamqaderi.portfolio.domain.utils.FontLoader
import com.jamshedalamqaderi.portfolio.presentation.ui.theme.PortfolioTheme

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun PortfolioScaffold(modifier: Modifier = Modifier, content: @Composable () -> Unit) {
val loaded = remember { mutableStateOf(false) }
LaunchedEffect(Unit) {
FontLoader.loadPoppins()
loaded.value = true
}
if (loaded.value) {
PortfolioTheme {
Scaffold(modifier) {
content.invoke()
}
}
} else {
Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
CircularProgressIndicator()
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
package com.jamshedalamqaderi.portfolio.presentation.components.landing

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

@Composable
fun Expertise() {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text("Kotlin Multiplatform")
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text
Expand All @@ -27,7 +26,6 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.Outline
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import com.jamshedalamqaderi.portfolio.domain.utils.AppStrings
Expand All @@ -41,78 +39,65 @@ fun LandingIntro() {
val landingIntroProfileImage = remember { mutableStateOf<ImageBitmap?>(null) }
LaunchedEffect(Unit) {
landingIntroProfileImage.value =
resource("images/colored_landing_intro_profile_image.png").readBytes().toImageBitmap()
resource("images/my_picture.png").readBytes().toImageBitmap()
}
if (landingIntroProfileImage.value == null) return
Column(
modifier = Modifier.fillMaxSize().background(
Brush.horizontalGradient(
colors = listOf(
MaterialTheme.colorScheme.secondaryContainer,
MaterialTheme.colorScheme.tertiaryContainer,
Row(
modifier = Modifier
.fillMaxSize()
.background(
Brush.horizontalGradient(
colors = listOf(
MaterialTheme.colorScheme.secondaryContainer,
MaterialTheme.colorScheme.tertiaryContainer,
)
)
)
),
horizontalAlignment = Alignment.CenterHorizontally
).padding(horizontal = 20.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
Text(
text = AppStrings.greeting,
style = MaterialTheme.typography.headlineLarge,
fontWeight = FontWeight.Bold,
modifier = Modifier.padding(top = 30.dp)
)
Spacer(modifier = Modifier.height(8.dp))
Row(
PortfolioImage(landingIntroProfileImage.value!!)
Spacer(modifier = Modifier.width(50.dp))
Column(
modifier = Modifier
.fillMaxSize().padding(horizontal = 20.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
.verticalScroll(rememberScrollState())
.padding(16.dp)
.fillMaxWidth(0.9f),
) {
Image(
landingIntroProfileImage.value!!,
contentDescription = "Landing Intro Profile Image",
modifier = Modifier.size(500.dp)
Text(
text = "As-Salamu Alaykum. I'm",
style = MaterialTheme.typography.headlineSmall,
fontWeight = FontWeight.Bold,
modifier = Modifier.padding(top = 30.dp)
)
Text(
text = AppStrings.myName,
style = MaterialTheme.typography.displayLarge,
fontWeight = FontWeight.Bold,
)
Spacer(Modifier.width(10.dp))
Text(
text = AppStrings.jobTitle,
style = MaterialTheme.typography.headlineSmall,
fontWeight = FontWeight.Bold,
)
Spacer(modifier = Modifier.width(100.dp))
Column(
modifier = Modifier
.verticalScroll(rememberScrollState())
.padding(16.dp)
.fillMaxWidth(),
Spacer(modifier = Modifier.height(10.dp))
Text(
text = AppStrings.introDescription,
style = MaterialTheme.typography.bodyLarge,
)
Spacer(modifier = Modifier.height(20.dp))
Row(
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = AppStrings.iAm,
style = MaterialTheme.typography.headlineSmall,
fontWeight = FontWeight.Bold,
)
Text(
text = AppStrings.myName,
style = MaterialTheme.typography.displayLarge,
fontWeight = FontWeight.Bold,
)
Text(
text = AppStrings.jobTitle,
style = MaterialTheme.typography.headlineSmall,
fontWeight = FontWeight.Bold,
)
Spacer(modifier = Modifier.height(10.dp))
Text(
text = AppStrings.introDescription,
style = MaterialTheme.typography.bodyLarge,
)
Spacer(modifier = Modifier.height(16.dp))
Row(
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
) {
Button(onClick = { /* Navigate to Projects */ }) {
Text(text = "View Projects", style = MaterialTheme.typography.labelLarge)
}
Spacer(modifier = Modifier.width(8.dp))
Button(onClick = { /* Navigate to Projects */ }) {
Text(text = "View Projects", style = MaterialTheme.typography.labelLarge)
}
Spacer(modifier = Modifier.width(8.dp))

OutlinedButton(onClick = { /* Navigate to Contact */ },) {
Text(text = "Let's Talk", style = MaterialTheme.typography.labelLarge)
}
OutlinedButton(onClick = { /* Navigate to Contact */ }) {
Text(text = "Let's Talk", style = MaterialTheme.typography.labelLarge)
}
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
package com.jamshedalamqaderi.portfolio.presentation.components.landing

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.unit.dp

internal val RoundedPortfolioPictureShape = RoundedCornerShape(
topStartPercent = 50,
topEndPercent = 50,
bottomStartPercent = 5,
bottomEndPercent = 5,
)

@Composable
fun PortfolioImage(picture: ImageBitmap) {
Box(
modifier = Modifier
.shadow(5.dp, shape = RoundedPortfolioPictureShape)
.background(
Color(0xFF60C7AE),
shape = RoundedPortfolioPictureShape
)
.border(
10.dp,
color = MaterialTheme.colorScheme.primary,
shape = RoundedPortfolioPictureShape
)
.padding(top = 50.dp),
) {
Image(
picture,
contentDescription = "Landing Intro Profile Image",
modifier = Modifier.size(500.dp)
)
}
}
Original file line number Diff line number Diff line change
@@ -1,16 +1,41 @@
package com.jamshedalamqaderi.portfolio.presentation.pages

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.pager.PagerDefaults
import androidx.compose.foundation.pager.PagerSnapDistance
import androidx.compose.foundation.pager.VerticalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.jamshedalamqaderi.portfolio.presentation.PortfolioScaffold
import com.jamshedalamqaderi.portfolio.presentation.components.landing.Expertise
import com.jamshedalamqaderi.portfolio.presentation.components.landing.LandingIntro

@OptIn(ExperimentalMaterial3Api::class)
@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun Landing() {
Scaffold(modifier = Modifier.fillMaxSize()) {
LandingIntro()
val pagerState = rememberPagerState()

val fling = PagerDefaults.flingBehavior(
state = pagerState,
pagerSnapDistance = PagerSnapDistance.atMost(2)
)

PortfolioScaffold (modifier = Modifier.fillMaxSize()) {
VerticalPager(
pageCount = 2,
state = pagerState,
flingBehavior = fling,
pageContent = { index ->
when (index) {
0 -> LandingIntro()
1 -> Expertise()
}
}
)

}
}
Loading

0 comments on commit fe04979

Please sign in to comment.