Skip to content

Commit f23e4de

Browse files
nsh07nsh07
committed
refactor: make code more modular
This will help in making the UI responsive in further commits
1 parent dc1e2ca commit f23e4de

File tree

2 files changed

+248
-207
lines changed

2 files changed

+248
-207
lines changed

‎composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/homeScreen/AppHomeScreen.kt‎

Lines changed: 11 additions & 207 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,18 @@
11
package org.nsh07.nsh07.ui.homeScreen
22

3-
import androidx.compose.foundation.clickable
43
import androidx.compose.foundation.layout.*
54
import androidx.compose.foundation.lazy.LazyColumn
6-
import androidx.compose.foundation.lazy.items
75
import androidx.compose.foundation.lazy.rememberLazyListState
86
import androidx.compose.foundation.rememberScrollState
97
import androidx.compose.foundation.verticalScroll
10-
import androidx.compose.material3.*
11-
import androidx.compose.material3.MaterialTheme.colorScheme
8+
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
129
import androidx.compose.material3.MaterialTheme.typography
10+
import androidx.compose.material3.Text
1311
import androidx.compose.runtime.*
14-
import androidx.compose.ui.Alignment
1512
import androidx.compose.ui.Modifier
1613
import androidx.compose.ui.platform.LocalUriHandler
17-
import androidx.compose.ui.text.*
18-
import androidx.compose.ui.text.font.FontWeight
1914
import androidx.compose.ui.unit.dp
20-
import androidx.compose.ui.unit.sp
2115
import kotlinx.coroutines.launch
22-
import nsh07.composeapp.generated.resources.*
23-
import org.jetbrains.compose.resources.painterResource
2416

2517
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
2618
@Composable
@@ -76,24 +68,7 @@ fun AppHomeScreen(
7668
) {
7769
Column(Modifier.padding(vertical = 96.dp).weight(1f)) {
7870
Column(Modifier.verticalScroll(rememberScrollState())) {
79-
Text(
80-
"Nishant Mishra",
81-
style = typography.displayLarge.copy(fontSize = 48.sp),
82-
color = colorScheme.onSurface
83-
)
84-
Spacer(Modifier.height(4.dp))
85-
Text(
86-
"App developer",
87-
style = typography.titleLarge,
88-
color = colorScheme.onSurface
89-
)
90-
Spacer(Modifier.height(20.dp))
91-
Text(
92-
"I build performant, beautiful apps for mobile and desktop.",
93-
style = typography.bodyLarge,
94-
color = colorScheme.onSurfaceVariant,
95-
modifier = Modifier.widthIn(max = 320.dp)
96-
)
71+
NameAndDesc()
9772

9873
Spacer(Modifier.height(72.dp))
9974

@@ -127,192 +102,21 @@ fun AppHomeScreen(
127102

128103
Spacer(Modifier.weight(1f))
129104

130-
Row(verticalAlignment = Alignment.CenterVertically) {
131-
IconButton(onClick = { uriHandler.openUri("https://github.com/nsh07") }) {
132-
Icon(
133-
painterResource(Res.drawable.github),
134-
contentDescription = null,
135-
modifier = Modifier.size(24.dp)
136-
)
137-
}
138-
IconButton(onClick = { uriHandler.openUri("https://gitlab.com/nsh07") }) {
139-
Icon(
140-
painterResource(Res.drawable.gitlab),
141-
contentDescription = null,
142-
modifier = Modifier.size(24.dp)
143-
)
144-
}
145-
IconButton(onClick = { uriHandler.openUri("https://www.linkedin.com/in/nsh07/") }) {
146-
Icon(
147-
painterResource(Res.drawable.linkedin),
148-
contentDescription = null,
149-
modifier = Modifier.size(24.dp)
150-
)
151-
}
152-
IconButton(onClick = { uriHandler.openUri("mailto:[email protected]") }) {
153-
Icon(
154-
painterResource(Res.drawable.email),
155-
contentDescription = null,
156-
modifier = Modifier.size(24.dp)
157-
)
158-
}
159-
}
105+
SocialIcons()
160106
}
161107

162108
LazyColumn(
163109
state = listState,
164110
contentPadding = PaddingValues(vertical = 96.dp),
165111
modifier = Modifier.fillMaxHeight().weight(1.1f)
166112
) {
167-
items(paragraphs, key = { it.substring(0, 16) }) {
168-
Text(
169-
it,
170-
style = typography.bodyLarge,
171-
color = colorScheme.onSurfaceVariant,
172-
modifier = Modifier.padding(start = cardPadding, bottom = 16.dp, end = cardPadding)
173-
)
174-
}
175-
item("experience spacer") { Spacer(Modifier.height(112.dp)) }
176-
items(experiences, key = { it.start }) {
177-
ExperienceCard(experience = it, cardPadding = cardPadding, modifier = Modifier.padding(bottom = 32.dp))
178-
}
179-
item("linkedin link text") {
180-
Row(
181-
verticalAlignment = Alignment.CenterVertically,
182-
modifier = Modifier
183-
.padding(start = cardPadding)
184-
.clickable { uriHandler.openUri("https://www.linkedin.com/in/nsh07/") }
185-
) {
186-
Text("View LinkedIn profile ", style = typography.bodyLarge, fontWeight = FontWeight.SemiBold)
187-
Icon(painterResource(Res.drawable.open_in_browser), null, Modifier.size(16.dp))
188-
}
189-
Spacer(Modifier.height(112.dp))
190-
}
191-
if (!projectState.isLoading)
192-
items(projectState.projects, key = { it.id }) {
193-
ProjectCard(
194-
project = it,
195-
cardPadding = cardPadding,
196-
modifier = Modifier.padding(bottom = 32.dp)
197-
)
198-
}
199-
else item {
200-
LinearWavyProgressIndicator(
201-
Modifier.fillMaxWidth().padding(cardPadding).padding(bottom = 32.dp)
202-
)
203-
}
204-
item("github link text") {
205-
Row(
206-
verticalAlignment = Alignment.CenterVertically,
207-
modifier = Modifier
208-
.padding(start = cardPadding)
209-
.clickable { uriHandler.openUri("https://github.com/nsh07") }
210-
) {
211-
Text("View all projects on GitHub ", style = typography.bodyLarge, fontWeight = FontWeight.SemiBold)
212-
Icon(painterResource(Res.drawable.open_in_browser), null, Modifier.size(16.dp))
213-
}
214-
Spacer(Modifier.height(112.dp))
215-
}
216-
item("work in progress") {
217-
Column(
218-
horizontalAlignment = Alignment.CenterHorizontally,
219-
verticalArrangement = Arrangement.Center,
220-
modifier = Modifier.fillMaxWidth().padding(vertical = 56.dp)
221-
) {
222-
Icon(
223-
painterResource(Res.drawable.forklift),
224-
null,
225-
modifier = Modifier.size(64.dp)
226-
)
227-
Spacer(Modifier.height(16.dp))
228-
Text("Work in progress", style = typography.headlineSmall)
229-
}
230-
}
231-
item("tech stack spacer") { Spacer(Modifier.height(112.dp)) }
232-
item("tech stack") {
233-
Row(
234-
verticalAlignment = Alignment.CenterVertically,
235-
modifier = Modifier.padding(horizontal = cardPadding)
236-
) {
237-
Text(
238-
buildAnnotatedString {
239-
append("Built with ")
240-
withLink(
241-
LinkAnnotation.Url(
242-
url = "https://www.jetbrains.com/compose-multiplatform/",
243-
styles = TextLinkStyles(SpanStyle(color = colorScheme.onSurface))
244-
)
245-
) {
246-
append("Compose Multiplatform ")
247-
}
248-
},
249-
style = typography.bodyMedium,
250-
color = colorScheme.outline
251-
)
252-
Icon(
253-
painterResource(Res.drawable.compose),
254-
null,
255-
modifier = Modifier.clickable { uriHandler.openUri("https://www.jetbrains.com/compose-multiplatform/") }
256-
)
257-
Text(" in Kotlin. Deployed with ", style = typography.bodyMedium, color = colorScheme.outline)
258-
Icon(
259-
painterResource(Res.drawable.githubpages),
260-
null,
261-
modifier = Modifier
262-
.height(20.dp)
263-
.clickable { uriHandler.openUri("https://pages.github.com/") }
264-
)
265-
Text(".", style = typography.bodyMedium, color = colorScheme.outline)
266-
}
267-
Text(
268-
buildAnnotatedString {
269-
append("Text is set in ")
270-
withLink(
271-
LinkAnnotation.Url(
272-
url = "https://fonts.google.com/specimen/DM+Serif+Text",
273-
styles = TextLinkStyles(
274-
SpanStyle(
275-
color = colorScheme.onSurface,
276-
fontFamily = typography.displayLarge.fontFamily
277-
)
278-
)
279-
)
280-
) {
281-
append("DM Serif Text")
282-
}
283-
append(" and ")
284-
withLink(
285-
LinkAnnotation.Url(
286-
url = "https://rsms.me/inter/",
287-
styles = TextLinkStyles(SpanStyle(color = colorScheme.onSurface))
288-
)
289-
) {
290-
append("Inter")
291-
}
292-
append('.')
293-
},
294-
color = colorScheme.outline,
295-
style = typography.bodyMedium,
296-
modifier = Modifier.padding(horizontal = cardPadding)
297-
)
298-
Text(
299-
buildAnnotatedString {
300-
append("Layout inspired by ")
301-
withLink(
302-
LinkAnnotation.Url(
303-
url = "https://brittanychiang.com/",
304-
styles = TextLinkStyles(SpanStyle(color = colorScheme.onSurface))
305-
)
306-
) {
307-
append("Brittany Chiang")
308-
}
309-
append("'s website.")
310-
},
311-
color = colorScheme.outline,
312-
style = typography.bodyMedium,
313-
modifier = Modifier.padding(horizontal = cardPadding)
314-
)
315-
}
113+
mainContent(
114+
paragraphs,
115+
experiences,
116+
projectState,
117+
cardPadding,
118+
uriHandler
119+
)
316120
}
317121
}
318122
}

0 commit comments

Comments
 (0)