KILO LANI

Video Demo: https://youtu.be/KNlh2r1rs3Y

Description: Being of Native-Hawaiian descent, my culture is very much connected to the elements as well as nature. I have always been drawn to and passionate about astronomy. I decided to create a personal web-based Kilo Lani (stargazing) Blog for me to document all things astronomy. I have two young kids and we are beginning to study the sky together. I was hoping to use my newly acquired skills from CS50 to build a webpage that I can use to document our journey.

My webpage I created is called Kilo Lani. In hawaiian that means to observe the heavens. I chose to style my main web page the way i have where the initial window showed a beautiful image of the night sky reflected in the ocean with a vessel. It speaks to what this space represents. Polynesians voyaged the oceans and circumnavigated the globe using starlines and the elements for navigation. I included the hawaiian proverb, O nā hōkū no nā kiu o ka lani - which translates to "The stars are the eyes of heaven".

I designed the Navigation bar at the top to include tabs connected to separate html files. The files include: inspiration.html, projects.html, and resources.html. I also had one additional tab in this nav bar that is title "Online Portfolio" but that was intended for me to include the link for a personal portfolio page of mine that I need to update and still put online at a later time. The inspiration tab takes you to a page that lists some things and people that have inspired me to be so passionate about astronomy in the ways that I am. I also have a projects tab that briefly mention what I am currently working on. I am working on restoring a refracting telescope so as I continue to restore that, I will be updated this page also at a later time. The Resources tab takes you to a page that include some online and literature resources i reference as I am studying/analyzing the night sky. I feel its important to include that to not only cite things I may state in my blog but also to give credit to those who have provided the knowledge - plus, others can learn from them as well!

In the top right corner I have social media icons. I was able to import icons from font-awesome included in a folder called webfonts. Eventually I will uodate the code so that you can click on each icon and be navigated to those respected social media pages of mine as it pertains to astronomy. However, for now, I have only included a link to my youtube page. Also important to note, I included an all.css file that I downloaded also for this purpose.

As you scroll down the main page (index.html), you will see some template/beginning blog posts I have started. The few I was able to put in a carousel using owl carousel. I downloaded the files in owl.carousel.min.js, owl.carousel.min.css, & owl.theme.default.min.css. This took some time to learn with videos on youtube but I at least got it to rotate when you grab hold of the image and drag it horizontally. I was trying to make it automatically rotate on the screen so it seemed more interactive and dynamic, but I couldnt figure that out. I also had to include a current version of jquery that i downloaded so this could function the way i needed it to. (jquery3.6.min.js)

As you continue to scroll down on the main webpage, you will notice I have more template blog posts lined all the way down. Once I figured out the right dimensions for this I was happy with the way it turned out. Though I will say it was challenging figuring out the appropriate image sizes so that it looked nice. I ended up having to use the program Canva to resize a lot of my photos. If the photos I used werent taken myself, I downloaded from unsplash for free stock photos. I included all jpegs and png files in the kii folder. I will say I have several images in this folder I did not end up using because they were not an appropriate size as I was designing the page. I only learned that after the fact.

The main page also has a side bar on the far right. At the top of where the side bar begins, I created a category section where I was intending to use as a means of organizing my blogs based on more specific categories other than broadly astronomy. I did not create any pages for those categories yet since I still need to write the blogs in the first place. Further down from the side bar I created a section for popular posts. The idea is so that once people begin to follow my blog, I can include the most popular ones in this side bar.

Below the popular posts section I created an input for a newsletter. If for whatever reason a lot of people may be interested in following along with me and my kids as we stargaze and journal, i thought i could eventually start a newsletter and send it out to those who include their email...now that I am aware of API I could use that to save their info. However, since I dont have money to pay for it I cant use that in my page.

I also included a popular tags at the bottom thinking that as i publish more and more blogs, it would be another way visitors could navigate their way to blog posts that are more specific and relevant to their interests.

My footer was cool. I decided include a small about me section, another option for a newsletter just in case the visitor was on another tab of my main page instead of the home page, they could still sign up for a newsletter. I also included a section for some instagram post pictures, as well as another section for the social media icons. I tried making an arrow that you could click that would take you back to the top of the page but I got too frustrated to figure it out. SO I will need to work on that next time.

Styling I went through google fonts and saved files for them specifically to style my web page. The fonts I went with were Gloock, Noto_Serif, and Playfair_Display. Honestly, I think I need to work on using family-font code in styling. I felt incompetent in really executing in that. So that is definitely an area of oppourtunity for next time. I did all my styling in my style.css code. I also created fonts.css to include the font familys I wanted to use in my webpage.

In supplement to what I have learned in class, I also sought out examples from other developers as well as blog pages. One in particular that I really appreciated the layout and overall asthetic was one of Daily Tuition. I was inspired by the layout and chose what I wanted to also implement on my personal blog.