A simple personal website built using Kotlin. The challenge is to write majority of HTML, CSS and JS code in Kotlin.
Everytime the project is built, a screenshot of the webpage is taken with the help of my python script (uses Selenium) and Gradle. The screenshots are being used as a social media preview.
- Kotlin based React, CSS and Styled Wrapper
- Kotlin: Delegate Properties, lambda functions, Standard Higher order functions, Class References
- Python: Made a script to screenshot the webpage and save it for social media preview
- Selenium and Chrome webdriver to get screenshot
- Gradle: Execute the screenshot script and to put compiled webpage resources in a suitable directory
- Chrome: For Viewing and Debugging
- Hex Color Tool: Convert Image color to a certain color
✍️ Reflection
- In understanding Kotlin Styled API - The official documentation on Github.
- Adapted CSS Theme and converted into Kotlin.
- Hex Color Tool: Used to to produce filter attribute values, which convert a black color to a certain color.
- Used an unofficial python based Selenium documentation.
- Gradle Task
runScreenshotScript
: Based on this Extension Function provided in this answer, which runs a process via kotlin ( So to run the python script from a command line perspective). This answer usesProcessBuilder
API from Java such that the subprocess I/O (outputs and errors in my case) source or destination will be the same as those of the current process. - 25/02/2021 Fixed the recent bluriness of stars caused chrome 88 update, by adding
backface-visibility: hidden;
to the css animation as mentioned in this blog.
- If you want to just see the website, click on the title or the link in the description.
- If you want to play around with the codebase:
- If you don't have python selenium package
pip3 install selenium
- If you don't have a chrome webdrive, download one and add it to your
PATH
. Alternatively you could use the file path to the chrome webdrive binary in the python script, instead of adding it to yourPATH
. - To open the project in an IDE(I used Intellij), open the root level folder
project
as the Project. - For running the website locally via the IDE, have a look at this documentation.
- If you don't have python selenium package