My Personal Website

Table of Content:

• Description
• Tools Used
• Reflection
• References
• Installation

📜 Description:

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.

🛠️ Tools Used:

• 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

🔖 References:

• 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 uses ProcessBuilder 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.

⚙️ Installation:

• 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 your PATH.
  • 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.