CodingANDCoffeeEQHappy Personal Website

Project Overview 💻

• This project includes my personal website, designed to showcase my work and skills. I hope it can serve as a valuable resource for potential employers and others interested in learning more about my professional journey.
• In addition to this main site, I have also created a simple real-time simulation of the Earth, Moon, and Sun using Three.js. This simulation uses satellite imagery from NASA to create textures for the Earth and Moon. The Earth's position relative to the Sun and the Moon's position relative to the Earth are approximately calculated using Kepler's Laws of Planetary Motion. Additionally, the simulated Earth includes interactive features and data, including real-time time zone calculations and semi-real-time weather data for a few cities on Earth. To find more information about the work behind this portion of the project, please check out this document for more details.
• My space simulation is heavily inspired by NASA's Eyes on the Solar System and Google Earth. NASA's Eyes on the Solar System is one of my favorite Three.js projects, and I really enjoy the research and effort in this project. Although I wanted to make my project unique, it shares a few similar features. Eyes on the Solar System is an amazing learning tool, and I recommend checking it out if you haven't.
• If you would like to visit the main site to learn more about me, please click here. If you would like to check out my space simulation website, please click here.

Thank you for checking it out!

Resources Used 📃

Main Site (index.html and helloworld.html) 💻

• The animated coffee cup and star/shooting stars are adapted from example code found on CodePen. Special thanks to Sneha P P and SEMdeck Digital on CodePen for their inspiring examples. The code has been modified and is used under the MIT License. All license/copyright information can be found in the respective files that include code used from these examples in comments at the top of the file.

Space Site (space.html) 🚀

• To help create the Earth model for this portion of the project, I used this amazing article by Franky Hung. This article taught me how to create the Earth model, apply the textures, and write shaders to improve the realistic look of the Earth.
• On the loading page for the space simulation, there is an animated coffee cup, star/shooting stars, and space shuttle which are adapted from example code found on CodePen. Special thanks to Sneha P P, SEMdeck Digital, and Miles S on CodePen for their inspiring examples. The code has been modified and is used under the MIT License. All license/copyright information can be found in the respective files that include code used from these examples in comments at the top of the file.
• NASA Images:
  • The script that downloads and saves these images in this repo can be found here.
  1. The Tycho Catalog Skymap - Version 2.0
     • Image Credit: NASA/Goddard Space Flight Center Scientific Visualization Studio
  2. The Blue Marble: Land Surface, Ocean Color and Sea Ice
     • Image Credit: NASA Goddard Space Flight Center Image by Reto Stöckli (land surface, shallow water, clouds). Enhancements by Robert Simmon (ocean color, compositing, 3D globes, animation). Data and technical support: MODIS Land Group; MODIS Science Data Support Team; MODIS Atmosphere Group; MODIS Ocean Group Additional data: USGS EROS Data Center (topography); USGS Terrestrial Remote Sensing Flagstaff Field Center (Antarctica); Defense Meteorological Satellite Program (city lights).
  3. Earth at Night (Black Marble) 2016 Color Maps
     • Image Credit: NASA Earth Observatory images by Joshua Stevens, using Suomi NPP VIIRS data from Miguel Román, NASA GSFC
  4. Topography
     • Image Credit: Imagery by Jesse Allen, NASA's Earth Observatory, using data from the General Bathymetric Chart of the Oceans (GEBCO) produced by the British Oceanographic Data Centre.
  5. Draining the Oceans
     • Image Credit: NASA/Goddard Space Flight Center Scientific Visualization Studio, U.S. Department of Commerce, National Oceanic and Atmospheric Administration, National Geophysical Data Center, 2006, 2-minute Gridded Global Relief Data (ETOPO2v2) - http://www.ngdc.noaa.gov/mgg/fliers/06mgg01.html The Blue Marble Next Generation data is courtesy of Reto Stockli (NASA/GSFC) and NASA's Earth Observatory.
  6. Blue Marble: Clouds
     • Image Credit: NASA Goddard Space Flight Center Image by Reto Stöckli (land surface, shallow water, clouds). Enhancements by Robert Simmon (ocean color, compositing, 3D globes, animation). Data and technical support: MODIS Land Group; MODIS Science Data Support Team; MODIS Atmosphere Group; MODIS Ocean Group Additional data: USGS EROS Data Center (topography); USGS Terrestrial Remote Sensing Flagstaff Field Center (Antarctica); Defense Meteorological Satellite Program (city lights).
  7. CGI Moon Kit
  8. CGI Moon Kit
     • Image Credit: NASA's Scientific Visualization Studio
• OpenWeatherMap:
  • The script that downloads and saves the weather data in this repo can be found here, and the script that downloads and saves the weather icons can be found here.
  • The OpenWeatherMap API is used to get weather data for this website.
    • Weather data is updated on this GitHub repo every hour and the simulation website attempts to use the most up-to-date data. While OpenWeatherMap offers up-to-date and accurate data, I chose this method to limit API calls/costs. The returned JSON is saved into this repo, and the simulation website parses the JSON and updates the page. Additionally, the webpage displays the time and date when the data was added to this GitHub repo to inform users of the age of the data they are viewing. This should hopefully ensure a clear description of the data's accuracy.
  • OpenWeatherMap also provides weather icons to represent different weather conditions, and these are used on this site.
• Wikipedia: Some information in this project is sourced from Wikipedia and is available under the Creative Commons Attribution-ShareAlike license. Links to Wikipedia pages can be found in the code and on the webpage where needed.

Packages

Frontend:

• Three.js: This library is used for the 3D graphics on the space simulation webpage.
  • The Three.js OrbitControls.js were also used for this project.
• DOMPurify: This library is used on the client for sanitizing the JSON data pulled from API calls and stored in this repo.

Backend:

• Axios: This library is used to make API requests in the backend code. In this case, Axios is used in a GitHub Actions script within a Node.js environment to make OpenWeatherMap API requests.
• Isomorphic-dompurify: This library is used to sanitize the returned data from API requests. This package allows DOMPurify to run easily in this environment and works very well. The purpose of running this on the server as well as the client is to ensure all data is as clean as possible before saving it within this repo and serving to clients. Both of these libraries are very efficient and so I believe this is a worthwhile decision.

License ⚖️

• Please see this document for more information.
  • The source code is licensed under the MIT License.