Skip to content

Commit 365a04f

Browse files
ItamiOMWItamiOMW
committed
1) Export 0.1.7 (Combine StartSection and SkillsSectionDivider; Minor component changes; Set maxWidth for SectionContainer);
1 parent 2d4f300 commit 365a04f

File tree

9 files changed

+92
-71
lines changed

9 files changed

+92
-71
lines changed

‎site/.kobweb/site/index.html‎

Lines changed: 44 additions & 42 deletions
Large diffs are not rendered by default.

‎site/.kobweb/site/itami_mobile.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/.kobweb/site/itami_mobile.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/src/jsMain/kotlin/com/itami/itami_mobile/components/sections/nav_header/NavHeader.kt‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,19 @@ val NavHeaderStyle by ComponentStyle(extraModifiers = { SmoothColorStyle.toModif
5555
Modifier.padding(left = 24.px, right = 24.px, top = 10.px, bottom = 10.px)
5656
}
5757
Breakpoint.MD {
58-
Modifier.padding(left = 34.px, right = 34.px, top = 15.px, bottom = 15.px)
58+
Modifier
59+
.padding(left = 34.px, right = 34.px, top = 15.px, bottom = 15.px)
60+
.height(7.vh)
5961
}
6062
Breakpoint.LG {
61-
Modifier.padding(left = 54.px, right = 54.px, top = 20.px, bottom = 20.px)
63+
Modifier
64+
.padding(left = 54.px, right = 54.px, top = 20.px, bottom = 20.px)
65+
.height(10.vh)
6266
}
6367
Breakpoint.XL {
64-
Modifier.padding(left = 104.px, right = 104.px, top = 20.px, bottom = 20.px)
68+
Modifier
69+
.padding(left = 104.px, right = 104.px, top = 20.px, bottom = 20.px)
70+
.height(10.vh)
6571
}
6672
}
6773

‎site/src/jsMain/kotlin/com/itami/itami_mobile/components/sections/start/StartSection.kt‎

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
package com.itami.itami_mobile.components.sections.start
22

33
import androidx.compose.runtime.Composable
4+
import com.itami.itami_mobile.components.sections.start.components.SkillsSectionDivider
45
import com.itami.itami_mobile.components.sections.start.components.StartSectionGridStyle
56
import com.itami.itami_mobile.components.sections.start.components.StartSectionImageStyle
67
import com.itami.itami_mobile.components.widgets.button.PrimaryButton
@@ -36,20 +37,18 @@ import com.varabyte.kobweb.silk.components.style.toModifier
3637
import com.varabyte.kobweb.silk.components.text.SpanText
3738
import com.varabyte.kobweb.silk.theme.breakpoint.rememberBreakpoint
3839
import com.varabyte.kobweb.silk.theme.colors.palette.toPalette
40+
import org.jetbrains.compose.web.css.cssRem
3941
import org.jetbrains.compose.web.css.percent
4042
import org.jetbrains.compose.web.css.px
4143
import org.jetbrains.compose.web.css.vh
4244
import org.jetbrains.compose.web.dom.Div
4345

4446
val StartSectionVariant by SectionContainerStyle.addVariant {
4547
val colorPalette = colorMode.toPalette()
46-
base {
47-
Modifier
48-
.height(75.vh)
49-
.minHeight(650.px)
50-
}
5148
Breakpoint.ZERO {
5249
Modifier
50+
.height(75.vh)
51+
.minHeight(38.cssRem)
5352
.backgroundImage(
5453
radialGradient(RadialGradient.Shape.Circle, CSSPosition(x = 50.percent, y = 25.percent)) {
5554
add(colorPalette.brand.primary.toRgb().copyf(alpha = 0.6f))
@@ -59,6 +58,7 @@ val StartSectionVariant by SectionContainerStyle.addVariant {
5958
}
6059
Breakpoint.SM {
6160
Modifier
61+
.minHeight(40.6.cssRem)
6262
.backgroundImage(
6363
radialGradient(RadialGradient.Shape.Circle, CSSPosition(x = 50.percent, y = 30.percent)) {
6464
add(colorPalette.brand.primary.toRgb().copyf(alpha = 0.6f))
@@ -68,15 +68,17 @@ val StartSectionVariant by SectionContainerStyle.addVariant {
6868
}
6969
Breakpoint.MD {
7070
Modifier
71+
.height(78.vh)
7172
.backgroundImage(
7273
radialGradient(RadialGradient.Shape.Circle, CSSPosition(x = 50.percent, y = 30.percent)) {
7374
add(colorPalette.brand.primary.toRgb().copyf(alpha = 0.6f))
74-
add(Colors.Transparent, 45.percent)
75+
add(Colors.Transparent, 40.percent)
7576
}
7677
)
7778
}
7879
Breakpoint.LG {
7980
Modifier
81+
.height(75.vh)
8082
.backgroundImage(
8183
radialGradient(RadialGradient.Shape.Circle, CSSPosition(x = 71.5.percent, y = 50.percent)) {
8284
add(colorPalette.brand.primary.toRgb().copyf(alpha = 0.6f))
@@ -100,20 +102,26 @@ fun StartSection() {
100102
val pageContext = rememberPageContext()
101103
val breakpoint = rememberBreakpoint()
102104

103-
SectionContainer(
104-
modifier = Modifier,
105-
variant = StartSectionVariant,
106-
section = Section.Start,
107-
verticalArrangement = Arrangement.Center
105+
Column(
106+
modifier = Modifier.fillMaxWidth(),
107+
horizontalAlignment = Alignment.CenterHorizontally,
108108
) {
109-
Div(attrs = StartSectionGridStyle.toAttrs()) {
110-
TextContent(
111-
breakpoint = breakpoint,
112-
onExploreWorksClicked = { pageContext.router.navigateTo(Section.Works.href) }
113-
)
114-
ImageContent(breakpoint = breakpoint)
109+
SectionContainer(
110+
modifier = Modifier,
111+
variant = StartSectionVariant,
112+
section = Section.Start,
113+
verticalArrangement = Arrangement.Center
114+
) {
115+
Div(attrs = StartSectionGridStyle.toAttrs()) {
116+
TextContent(
117+
breakpoint = breakpoint,
118+
onExploreWorksClicked = { pageContext.router.navigateTo(Section.Works.href) }
119+
)
120+
ImageContent(breakpoint = breakpoint)
121+
}
122+
ScrollHint(modifier = Modifier.displayIfAtLeast(Breakpoint.MD).align(Alignment.Start))
115123
}
116-
ScrollHint(modifier = Modifier.displayIfAtLeast(Breakpoint.MD).align(Alignment.Start))
124+
SkillsSectionDivider()
117125
}
118126
}
119127

site/src/jsMain/kotlin/com/itami/itami_mobile/components/sections/section_dividers/SkillsSectionDivider.kt renamed to site/src/jsMain/kotlin/com/itami/itami_mobile/components/sections/start/components/SkillsSectionDivider.kt

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
package com.itami.itami_mobile.components.sections.section_dividers
1+
package com.itami.itami_mobile.components.sections.start.components
22

33
import androidx.compose.runtime.Composable
44
import com.itami.itami_mobile.components.widgets.skill.SkillItem
@@ -17,6 +17,7 @@ import com.varabyte.kobweb.silk.theme.breakpoint.rememberBreakpoint
1717
import com.varabyte.kobweb.silk.theme.colors.palette.overlay
1818
import com.varabyte.kobweb.silk.theme.colors.palette.toPalette
1919
import org.jetbrains.compose.web.css.cssRem
20+
import org.jetbrains.compose.web.css.vh
2021

2122
val SkillSectionDividerStyle by ComponentStyle {
2223
val colorPalette = colorMode.toPalette()
@@ -26,10 +27,14 @@ val SkillSectionDividerStyle by ComponentStyle {
2627
.background(colorPalette.overlay)
2728
}
2829
Breakpoint.ZERO {
29-
Modifier.padding(top = 2.5.cssRem, bottom = 2.5.cssRem)
30+
Modifier
31+
.padding(top = 2.5.cssRem, bottom = 2.5.cssRem)
32+
.height(18.vh)
3033
}
3134
Breakpoint.SM {
32-
Modifier.padding(topBottom = 3.cssRem)
35+
Modifier
36+
.height(15.vh)
37+
.padding(topBottom = 3.cssRem)
3338
}
3439
Breakpoint.MD {
3540
Modifier.padding(topBottom = 3.4.cssRem)

‎site/src/jsMain/kotlin/com/itami/itami_mobile/components/sections/works/WorksSection.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ private fun MoreIsYetToCome() {
7070
}
7171

7272
@Composable
73-
private fun TextContent(
73+
private fun TextContent(
7474
breakpoint: Breakpoint,
7575
) {
7676
Column(

‎site/src/jsMain/kotlin/com/itami/itami_mobile/components/widgets/section/SectionContainer.kt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import com.varabyte.kobweb.silk.components.style.ComponentStyle
1212
import com.varabyte.kobweb.silk.components.style.ComponentVariant
1313
import com.varabyte.kobweb.silk.components.style.breakpoint.Breakpoint
1414
import com.varabyte.kobweb.silk.components.style.toModifier
15+
import org.jetbrains.compose.web.css.cssRem
1516
import org.jetbrains.compose.web.css.keywords.auto
1617
import org.jetbrains.compose.web.css.percent
1718
import org.jetbrains.compose.web.css.px
@@ -21,6 +22,7 @@ val SectionContainerStyle by ComponentStyle {
2122
Modifier
2223
.width(100.percent)
2324
.height(auto)
25+
.maxWidth(130.cssRem)
2426
.classNames("section-container")
2527
}
2628
Breakpoint.ZERO {

‎site/src/jsMain/kotlin/com/itami/itami_mobile/pages/Index.kt‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import androidx.compose.runtime.Composable
44
import com.itami.itami_mobile.components.layouts.DefaultPageLayout
55
import com.itami.itami_mobile.components.sections.about.AboutSection
66
import com.itami.itami_mobile.components.sections.contact.ContactSection
7-
import com.itami.itami_mobile.components.sections.section_dividers.SkillsSectionDivider
87
import com.itami.itami_mobile.components.sections.start.StartSection
98
import com.itami.itami_mobile.components.sections.works.WorksSection
109
import com.varabyte.kobweb.compose.foundation.layout.Column
@@ -22,7 +21,6 @@ fun HomePage() {
2221
horizontalAlignment = Alignment.CenterHorizontally
2322
) {
2423
StartSection()
25-
SkillsSectionDivider()
2624
WorksSection()
2725
AboutSection()
2826
ContactSection()

0 commit comments

Comments
 (0)