Hello, and thank you for visiting my site! I am an amateur astronomer from Torrance, California and have created this site to share my journey exploring our beautiful universe. In 2018, I built a Newtonian telescope by hand-grinding and polishing a six-inch mirror, and constructing an opticle tube and mount. I was always interested in space and astronomy, but this finally enabled me to gaze at the wonders of the cosmos for myself. Since then, I have acquired a six-inch Celestron Newtonian, as well as a computerized mount and dedicated astrophotography camera. This was the start of my passion for astrophotography
Aside from my personal hobby, I also proudly serve as the co-president of the El Camino College Astronomy Club. Together, we delve into fascinating discussions on various astronomical topics. To escape the ever-present city lights, our club organizes camping trips, offering us the opportunity to marvel at the night sky in all its grandeur.
Sharing my passion and knowledge is a gratifying experience, which is why I am also a Teaching Assistant (TA) for two astronomy lab classes. In these labs, students are introduced to the intricacies of using telescopes and making astronomical observations to collect scientific data. Guiding these budding stargazers on their journey brings me great joy and fulfillment.
Thank you again for visiting my site. This was created as part of a html and web development class to supplement my Instagram account (@astronomehh), so please take the time to submit a site survey, as your feedback will be greatly appreciated for helping me learn.
The website that I decided to develop is one that I have been wanting to build for some time now. It is a simple website for showcasing my astrophotography and sharing news about our universe. I am very passionate about astronomy, and regularly post images on Instagram. However, I desired a more personal approach to sharing my astrophotography, and so I’ve created this website for my web programming final project, with hopes to use it in the future beyond this class.
The Home page, “index.html,” is a simple landing page displaying a title, menu, and a featured image. The menu is a div element with anchor tags for buttons to each page. The CSS styling gives the buttons a transparent background and highlights them when hovering. This menu is displayed on each page. The featured image is a div element with class “coverImage,” and contains an image tag. I tried to make it so that it scales to different screen sizes, but it tends to stretch if the screen is too wide. The Home page also includes a script in the header. This is code for Google’s Adsense to include ads on the site and is also included in “about.html,” “news.html,” and “survey.html,” but not “gallery.html,” as I did not want ads obstructing my images. While this is only a personal site and I understand ads can be annoying or intrusive, I do not expect to get much traffic anyways, so have included this for fun and learning purposes. It may be removed later. Frankly, I was unsure of the direction I wanted to go in when designing the Home page. I contemplated a side-bar menu, as well as implementing a search function to find images and blog posts on the site, and may consider these in the future. I also considered adding a description for the featured image, but felt this would be redundant, as the image, along with a description, can be found in the gallery.
The Gallery page, “gallery.html,” is one of the main features of the site. It displays multiple images in a grid, as well as a name or short description when hovering over any particular image. It also displays an enlarged view of the image if one is clicked, along with the title and a description of that image. To exit the enlarged view, the user can click the “X” in the corner of the image, or click anywhere outside the image (except on the text). To accomplish this, the page first loads and reads a file named “gallery.txt,” where I can conveniently add new content. This contains the titles and descriptions of each image on separate lines, split with “--” and a new line. The program then iterates through each line using a for loop to parse the titles and descriptions. In another for loop, the program gets the image source names using “imageElement.src = 'img/img' + (i + 1) + '.jfif';.” This requires a consistent naming convention on my part, using “img1.jfif,” “img2.jfif,” etc. The loop then applies the title as a title and the description as the alt text from the corresponding “imageData” index. Finally, an h3 tag containing the title and the image are appended to an “imageContainer” to allow the hovering text to appear, and this “imageContainer” is then appended to the “galleryContainer.” Event listeners are then used to display the enlarged image “overlay” and set the “enlarged-label” and “enlarged-desc” to the title, and description, respectively. The “enlarged-labels” and “enlarged-desc” are also resized and repositioned depending on the screen size using a media query in the CSS. The scaling for this still isn’t perfect, as I also tried to make the enlarged image scale for different screen sizes as well, similar to the coverImage. This seems to be a challenge for me. I have also considered implementing arrows on the enlarged image to switch between adjacent images, rather than closing the overlay and clicking another image, but have left this for future development.
The Newsletter page, “news.html,” is another of the primary features for the site. First, it displays my latest image, along with a short description. For now, this is just through simple HTML tags, but I may change it to automatically retrieve the latest image and description from “/img.” Next, is the blog entry generation. In a fashion similar to the gallery generation, the blog entries are generated from “data/blog.txt.” Each entry is made by a for loop parsing a title, date, and content, with each entry separated by “--” in the text file. The content portion can also contain an image by denoting the url with ”![imageurl).” The title, date, and content is then added to “blogEntry” using “innerHTML”, and the “blogEntry” is appended to “blogContainer.” Finally, this page also contains a subscription form. Here the user can submit an email address to receive monthly updates. I utilized AJAX for this to handle error messages and process the input in “subscribe.php” where the contents are validated and scrubbed, before being sent to an SQL database table “subs.” Currently, the emails are not automated, so I will have to manually send them, sign up for a service, or devise a system of my own. In the future, I also plan to implement numbered pages, so that only a limited number of entries display at a time. I will also consider search and sort functions, as mentioned before.
The About page, “about.html,” is probably the simplest of the pages. It welcomes users to the site and tells a little bit about me and my passion for astronomy. This page also includes an absolute link to my Instagram profile. I may consider including this documentation as well.
The Survey page, “survey.html,” is not one I originally intended to include, but was a welcome addition upon recommendation from the assignment as a way to include SQL databases and receive feedback. While I did utilize a database to save subscription data, this provided an opportunity to make another table with more stored values. Overall, this works similarly to the subscription action. It displays text, number, and radio button inputs and uses AJAX to check for errors and process it in “survey.php,” where it validates and scrubs the input, before sending it to the “survey_results” table. The code for “subscribe.php” and “survey.php” are very similar. To connect to the database, the file first reads my login credentials from “config.php,” located in a secure folder outside the root. The data is then collected from the inputs and sent through the function “sanitizeInput,” which uses “trim,” “stripslashes,” and “htmlspecialchars” to prevent unwanted code injections. The data is then checked for errors such as name length, email format, and duplicate emails, and returns the error to be displayed, if applicable. Name, age, email and the radio bubbles are optional to allow anonymity, but feedback is required for a successful submission. Upon a successful submission, the user will get a pop-up alert indicating a success, and the form will reset. I can easily add more questions or input fields if I please, but for now I am relying on the feedback section for additional comments and suggestions.
I chose to host the site on 000webhost, due to its affordability. The domain name, astronomehh.com, is registered through Google Domains. However, 000webhost does not provide security certificates for custom domains other than their subdomains. To circumvent this, I am using Cloudflare, where traffic to astronomehh.com is rerouted to astrophotographehh.000webhostapp.com, maintaining the custom domain, and providing a security certificate as well. This involved setting DNS custom name servers and CNAME records. I hope to move to a paid web host going forward to allow higher traffic and reliable uptimes.
Developing this site was a very fulfilling experience. While it presented numerous challenges, I learned a lot throughout the process. There is still much room for improvement, and I hope to continue to use and develop this site in the future.