Skip to content

Commit

Permalink
Updated UI
Browse files Browse the repository at this point in the history
  • Loading branch information
vladleesi committed Apr 9, 2024
1 parent 8026d0f commit e4663c6
Show file tree
Hide file tree
Showing 4 changed files with 171 additions and 110 deletions.
249 changes: 161 additions & 88 deletions src/main/kotlin/pages/Home.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,109 +6,102 @@ import react.FC
import react.dom.html.ReactHTML
import react.dom.html.ReactHTML.a
import react.dom.html.ReactHTML.div
import react.dom.html.ReactHTML.footer
import react.dom.html.ReactHTML.header
import react.dom.html.ReactHTML.img
import react.dom.html.ReactHTML.li
import react.dom.html.ReactHTML.nav
import react.dom.html.ReactHTML.p
import react.dom.html.ReactHTML.span
import react.dom.html.ReactHTML.ul
import react.router.Outlet
import style.*
import web.cssom.*
import web.cssom.None.Companion.none
import web.window.WindowTarget

val HomePage = FC {
div {

header {
css {
justifyContent = JustifyContent.center
justifyContent = JustifyContent.spaceBetween
alignItems = AlignItems.center
display = Display.grid
textAlign = TextAlign.start
flexDirection = FlexDirection.column
backgroundColor = backgroundBlack
display = Display.flex
width = 100.pct
paddingTop = 1.em
fontSize = 20.px
}

div {
css { buildFooterStyle() }

span {
a {
css { buildFooterLinkStyle() }
href = "mailto:hello@vladleesi.dev"

img {
css {
height = 18.px
verticalAlign = VerticalAlign.middle
marginRight = 6.px
}
src = "./email.svg"
}
+"hello@vladleesi.dev"
a {
// css { buildHeaderLinkStyle() }
// href = "/"
+"@vladleesi"
}
nav {
ul {
css {
display = Display.flex
columnGap = 1.em
listStyleType = none
}
}
li {

span {
span {
css {
marginRight = 8.px
}
a {
css { buildFooterLinkStyle() }
href = "https://dev.to/vladleesi"
target = WindowTarget._blank
+"dev.to"
}
}
+"/"
span {
css {
marginLeft = 8.px
marginRight = 8.px
}
a {
css { buildFooterLinkStyle() }
href = "https://github.com/vladleesi"
target = WindowTarget._blank
+"github"
css { buildHeaderLinkStyle() }
href = "#Welcome"
+"Welcome"
}
}
+"/"
span {
css {
marginLeft = 8.px
marginRight = 8.px
}
li {
a {
css { buildFooterLinkStyle() }
href = "https://twitter.com/vladleesi"
target = WindowTarget._blank
+"twitter"
css { buildHeaderLinkStyle() }
href = "#Projects"
+"Projects"
}
}
+"/"
span {
css {
marginLeft = 8.px
}
li {
a {
css { buildFooterLinkStyle() }
href = "https://www.linkedin.com/in/vladkochetov/"
target = WindowTarget._blank
+"linkedin"
css { buildHeaderLinkStyle() }
href = "#Contact"
+"Contact"
}
}
}
}
}

div {
css {
justifyContent = JustifyContent.center
alignItems = AlignItems.center
display = Display.grid
textAlign = TextAlign.start
flexDirection = FlexDirection.column
backgroundColor = backgroundBlack
}

div {
css {
marginTop = 72.px
marginTop = 40.px
fontSize = 36.px
textAlign = TextAlign.center
}
+"Site Under Construction"
}


img {
css {
width = 20.pct
marginTop = 3.em
}
id = "Welcome"
src = "https://avatars.githubusercontent.com/vladleesi"
alt = "Some handsome guy"
}

div {
css {
marginTop = 72.px
marginTop = 1.em
fontSize = 36.px
}
+"Hi there!"
Expand All @@ -132,6 +125,7 @@ val HomePage = FC {
+"."
}
div {
id = "Projects"
css {
marginTop = 64.px
fontSize = 36.px
Expand All @@ -147,17 +141,15 @@ val HomePage = FC {
title = "Braindance",
description = "Explore games, add favorites, get details, follow release calendar, and read game news. Multiplatform app for Android, iOS, Desktop. Built with KMM & Jetpack Compose.",
redirectUrl = "https://github.com/vladleesi/braindance-app"
),
isMarginLeftNeeded = false
)
)
buildProjectCell(
project = Project(
tags = listOf("Kotlin", "Android SDK"),
title = "Kutilicious",
description = "Lightweight library with a set of small Kotlin and Android extensions for a better development experience.",
redirectUrl = "https://github.com/vladleesi/kutilicious"
),
isMarginLeftNeeded = true
)
)
}

Expand All @@ -168,8 +160,7 @@ val HomePage = FC {
title = "Personal website",
description = "Personal website developed in Kotlin/JS. Why? I don't know, but it was fun.",
redirectUrl = "https://github.com/vladleesi/vladleesi.github.io"
),
isMarginLeftNeeded = false
)
)
buildProjectCell(
project = Project(
Expand All @@ -179,8 +170,7 @@ val HomePage = FC {
title = "Factastic",
description = "Useless facts every day! Here's an example of a multiplatform app with shared UI and network logic built with Kotlin Multiplatform and Compose Multiplatform for Android, iOS and Desktop.",
redirectUrl = "https://github.com/vladleesi/factastic"
),
isMarginLeftNeeded = true
)
)
}

Expand All @@ -191,28 +181,116 @@ val HomePage = FC {
title = "Yet Another Calculator (YAC)",
description = "Behold, here it is – yet another calculator! This marvel of innovation will calculate stuff, just like countless others before it. Built for Android and iOS using Compose Multiplatform.",
redirectUrl = "https://github.com/vladleesi/yet-another-calculator"
),
isMarginLeftNeeded = false
)
)
buildProjectCell(
project = Project(
tags = listOf("Kotlin", "Android SDK"),
title = "Scanmate",
description = "A simple QR code scanner with tactile and audio feedback. You can also save and view previously scanned codes.",
redirectUrl = "https://github.com/vladleesi/scanmate"
),
isMarginLeftNeeded = true
)
)
}
}

div {
id = "Contact"
css {
marginTop = 64.px
fontSize = 36.px
}
+"Contact"
}

footer {
css {
display = Display.flex
justifyContent = JustifyContent.spaceBetween
marginTop = 2.em
marginBottom = 2.em
}
div {
div {
css {
maxWidth = 400.px
marginBottom = 24.px
}
+"If you're interested in discussing job opportunities or have any project ideas, please don't hesitate to email me. I'm keen to hear about your project and see how I can help out."
}
a {
css {
buildHeaderLinkStyle()
fontSize = 24.px
}
href = "mailto:hello@vladleesi.dev"
+"hello@vladleesi.dev"
}
}

div {
+"Also you can find me here"
div {
css {
display = Display.flex
justifyContent = JustifyContent.spaceBetween
marginTop = 1.em
fontSize = 18.px
}
div {
div {
a {
css { buildHeaderLinkStyle() }
href = "https://dev.to/vladleesi"
target = WindowTarget._blank
+"Dev.to"
}
}
div {
css {
marginTop = 0.5.em
}
a {
css { buildHeaderLinkStyle() }
href = "https://github.com/vladleesi"
target = WindowTarget._blank
+"GitHub"
}
}
}
div {
div {
a {
css { buildHeaderLinkStyle() }
href = "https://twitter.com/vladleesi"
target = WindowTarget._blank
+"Twitter"
}
}
div {
css {
marginTop = 0.5.em
}
a {
css { buildHeaderLinkStyle() }
href = "https://www.linkedin.com/in/vladkochetov/"
target = WindowTarget._blank
+"LinkedIn"
}
}
}
}
}
}
}

div {
css {
justifyContent = JustifyContent.center
alignItems = AlignItems.center
display = Display.flex
marginTop = 48.px
marginTop = 3.em
marginBottom = 1.em
}
p {
css {
Expand Down Expand Up @@ -247,8 +325,7 @@ private fun ChildrenBuilder.projectTable(builder: ChildrenBuilder.() -> Unit) {
display = Display.table
width = 100.pct
borderCollapse = BorderCollapse.separate
borderSpacing = 0.5.em
margin = (-0.5).em
borderSpacing = 0.2.em
marginTop = 1.em
tableLayout = TableLayout.fixed
}
Expand All @@ -262,17 +339,13 @@ private fun ChildrenBuilder.projectRow(builder: ChildrenBuilder.() -> Unit) {
}
}

private fun ChildrenBuilder.buildProjectCell(project: Project, isMarginLeftNeeded: Boolean) {
private fun ChildrenBuilder.buildProjectCell(project: Project) {
ReactHTML.td {
css {
backgroundColor = white
padding = 0.75.em
display = Display.tableCell
verticalAlign = VerticalAlign.top

if (isMarginLeftNeeded) {
marginLeft = 0.5.em
}
}
div {
css {
Expand Down
3 changes: 1 addition & 2 deletions src/main/kotlin/style/Colors.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,8 @@ import web.cssom.Color

val white = Color("#FFFFFF")
val black = Color("#000000")
val gray = Color("#323232")

val accent = Color("#FFC300")
val accent = Color("#03DAC6")

val backgroundBlack = Color("#171717")

Expand Down
Loading

0 comments on commit e4663c6

Please sign in to comment.