About Me
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 optical 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 an HTML and web development class to supplement my Instagram account (@astronomeh), so please take the time to submit a site survey, as your feedback will be greatly appreciated for helping me learn.
Documentation
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 nav element with links to each page. The CSS styling gives the links a transparent background and highlights them when hovering, as well as on the current page. This menu is displayed on each page. The featured image is in a main element with class “coverImage,” and scales to fit different screen sizes without stretching. 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 on the About, Newsletter, and Survey pages, but not the Gallery or Projects pages, 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 anyway, 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/index.html,” is one of the main features of the site. It displays multiple images in a grid, as well as a name 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, press Escape, or click the dark area around the image. Arrows and the arrow keys switch between adjacent images. To accomplish this, “js/gallery.js” first loads and reads a file named “img/gallery.txt,” where I can conveniently add new content. This contains the titles and descriptions of each image on separate lines, each ending with “--” and a new line. The script then pairs each title and description with its image. This requires a consistent naming convention on my part, using “img1.jfif,” “img2.jfif,” etc. Each image is placed in a button with class “image-container,” along with its title, to allow the hovering text to appear, and these are then appended to the gallery. Event listeners open the enlarged view, which is a dialog element, and set the “enlarged-label” and “enlarged-desc” to the title and description, respectively. These are also repositioned depending on the screen size using a media query in the CSS.
The Newsletter page, “news/index.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 by “js/news.js” from “data/blog.txt.” Each entry is made by 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 are then added to a “blogs” article, which is appended to “blogContainer.” 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/index.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, followed by this documentation. This page also includes an absolute link to my Instagram profile.
The Projects page, “projects/index.html,” links to the other things I have built, each in its own folder, including geometry and constellation games, a sprite generator, a video experiment, group chess, and anonymous grade polls.
The Survey page, “survey/index.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. It displays text, number, and radio button inputs and uses “js/forms.js” to send them in the background and show any errors. The input is processed in “survey.php,” where it is validated and scrubbed before being sent to the “survey_results” table. 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 help prevent unwanted code injections. The data is then checked for errors such as name length, and returns the error to be displayed, if applicable. All of the fields are optional to allow anonymity. Upon a successful submission, the user will see a message 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.
The site is hosted on Hostinger. The domain name, astronomeh.com, is registered through Squarespace, and I use Cloudflare for DNS and to provide a security certificate. Website files stay in a public folder, while database credentials and other private files are kept in a secure folder outside it.
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.