https://kotlinlang.org logo
Join Slack
Powered by
Hello everyone, I'm thrilled to announce that Codi...
# kobweb
m
Hello everyone, I'm thrilled to announce that Coding Meet's official portfolio website is now live! It is built using the powerful Kotlin-based framework, Kobweb and deployed using Firebase Hosting. Kobweb framework is built on top of compose HTML. 🌐 Portfolio - https://www.codingmeet.com 👨‍💻Repository - https://github.com/Coding-Meet/Porfolio-Kobweb Please do visit the site and and repository and star it.
🔥 3
👏 2
K 2
🙌 Special Thanks to: 💫 @David Herman – For his incredible work on Kobweb. 💫 @Ayfri – For his inspiring portfolio that guided my learning. 💫 Stefan Jovanovic – For his excellent Kobweb Udemy course and YouTube Kobweb videos that helped me understand Kobweb better.
yay 1
💫 @Sushant Hande – For guiding me through Firebase Hosting setup.
d
Wow @Meet you really went all out. Congratulations on making a portfolio site that is unique and packed with information.
For your list of icons on the front page (youtube, github, gmail, medium, ...), I bet it would look nice if you used a simple grid there and made it 5 columns wide. It looks balanced in that case (as opposed to my screen where I'm getting 9 icons on the first row and one on the second)
I am not sure what to recommend exactly but for your text that types in, some of the longer phrases wrap which causes the whole page to shift. I would either remove the longer ones (e.g. Kotlin Multiplatform Developer) or set that area's height to a fixed value like 3.em or something so that even when it wraps once, it will just fill the empty space.
But I love the amount of subtle animation interactions you have.
m
@David Herman thanks for feedback I can improve
👍 1
@David Herman I have one issue project section I remove loading ui. Issue was any category select project see it but image slider not proper handle it any idea?
I need project list change by project category select without any loading ui
d
I'm sorry I didn't follow that question at all
m
Ok ok I send video
Copy code
var selectedCategory by remember { mutableStateOf(ProjectCategory.ALL) }
            val filteredProjects by remember {
                derivedStateOf {
                    if (selectedCategory == ProjectCategory.ALL) {
                        Constants.projects
                    } else {
                        Constants.projects.filter { it.categories.contains(selectedCategory) }
                            .toMutableList()
                    }
                }
            }
            ProjectCategorySection(
                selectedCategory = selectedCategory,
                onCategorySelected = {
                    selectedCategory = it
                }
            )

            SimpleGrid(
                numColumns = numColumns(base = 1, sm = 1, md = 2, lg = 3),
                modifier = Modifier.fillMaxWidth()
                    .padding(
                        bottom = 10.px,
                        leftRight = if (breakpoint > <http://Breakpoint.SM|Breakpoint.SM>) 10.px else 0.px
                    ).animation(
                        fadeInUpPageAnimation.toAnimation(
                            duration = 1.s,
                            timingFunction = AnimationTimingFunction.EaseOut
                        )
                    ),
            ) {
                filteredProjects.forEachIndexed { index, project ->
                    ProjectCard(project) {
                        openProject = project
                        currentProjectIndex = index
                        isShowDialog = true
                    }
                }
            }
Recording 2025-03-20 095211.mp4
see image slider
currently, in production i add loading so refresh list like this:
Copy code
if (isLoading) {
    // Circular Progress Indicator
    Div(attrs = rotateAnimation.toAttrs())
} else {
    SimpleGrid(
        numColumns = numColumns(base = 1, sm = 1, md = 2, lg = 3),
        modifier = Modifier.fillMaxWidth()
            .padding(
                bottom = 10.px,
                leftRight = if (breakpoint > <http://Breakpoint.SM|Breakpoint.SM>) 10.px else 0.px
            ).animation(
                fadeInUpPageAnimation.toAnimation(
                    duration = 1.s,
                    timingFunction = AnimationTimingFunction.EaseOut
                )
            ),
    ) {
        filteredProjects.forEachIndexed { index, project ->
            ProjectCard(project) {
                openProject = project
                currentProjectIndex = index
                isShowDialog = true
            }
        }
    }
}
d
What is causing 
isLoading
from going from false to true? Have you tried adding println logging yet to understand what's going on?
m
Copy code
LaunchedEffect(selectedCategory) {
            isLoading = true
            delay(300)
            filteredProjects = if (selectedCategory == ProjectCategory.ALL) {
                Constants.projects
            } else {
                Constants.projects.filter { it.categories.contains(selectedCategory) }
                    .toMutableList()
            }
            isLoading = false
        }
but i loading not needed
I need project list change by project category select without any loading ui code but issue was image slider
see the video
d
I see the video but I don't know your code I'm afraid, and it's not clear to me you can explain the exact issue, which probably means you need to debug a bit more?
I don't know if you're encountering a bug with Compose, Kobweb, or your own code; or if it's a misunderstanding about Compose, etc.
If you can understand the problem well, you'll be able to ask me a very clear direct question, and if you could product a really clear, small repro example showing the issue that's even better.
m
only this file change it in this repo after run locally you automatic understand what issue
ProjectPage.kt
my english not good to explain
d
If you can't explain with English (which is OK), explain with code. But not files and files of code...
m
ok issue was image slider by clicking project category without any loading ui
d
Oh great! You fixed it?
m
No. I have no time to fix currently
d
But you know how to fix it?
m
Currently In production I add progress bar for category select
But I do not need it because it is a static list just filter data
I little bit know may be issue image slider pass id it recompose skip may be it works
d
What I would recommend is creating an empty project (
kobweb create app/empty
) and trying to reproduce the issue you're dealing with in isolation BTW, I just got this very excellently written bug report from @Ahmed Riyadh (https://github.com/varabyte/kobweb/issues/676) which I'm sharing here as an example that makes it really clear the developer spent a lot of time isolating and explaining the core problem. (This is a top quality bug report. I don't expect almost any report to be this detailed. Still, I thought I would share it as a golden ideal to aim for when possible!)
thank you color 1
a
Submitting a PR after creating an issue sounds like a lot but often you save yourself and the others a lot of time. Here is a recent example: Issue: https://github.com/Epic-Fight/epicfightmod/issues/1934 PR: https://github.com/Epic-Fight/epicfightmod/pull/1935 And I got my fix merged without even discussing anything with them. Working on creating good docs or explaining issues sounds boring at first but often it's necessary and you will learn a lot from it.
❤️ 1
4 Views
Open in Slack
PreviousNext
Powered by