Documentation for Reese.Land

Reese Land is a personal website that showcases the work, writing, photos, designs, and coding of its creator, Reese Oxner.

Google Tag Manager

Reese Land uses Google Tag Manager to manage analytics and other tracking scripts. The script is included in the head of the HTML code, allowing for easy tracking of visitor behavior.

Twitter Metadata

The Twitter metadata included in the head of the HTML code allows for easy sharing of the website on Twitter. The twitter:card, twitter:site, twitter:title, twitter:description, and twitter:image properties are included.

Form

Reese Land includes a form for generating JSON entries. It is used solely by Reese to create entries for future use. Visitors can exit the form by pushing the "esc" button.

Typewriter

The "typewriter" effect used on the "welcome to reese land" heading is accomplished using a CSS animation.

Content

The rest of the HTML code includes information about Reese's work, writing, photos, designs, and coding. Each section is nested inside a details element, which allows for easy collapsing and expanding of sections.

Contact Information

Reese Land includes contact information for Reese, including links to Instagram, Twitter, LinkedIn, and an email address.

JavaScript

The JavaScript included in Reese Land is used for generating JSON entries, displaying content, and navigation. The script is included at the bottom of the HTML code, allowing for easy management and customization.

JavaScript functions:

• getURLParameter(): This function extracts the version number from the URL if present and returns it as a number.
• updateCssFromLatestJson(): This function fetches the latest version of the content from the content.json file and updates the primary color of the site to the latest version's color.
• fetchJSON(): This function fetches the JSON data from the content.json file and returns the data.
• loadContent(): This function loads the content from the content.json file and manages the version selection, arrow buttons, and URL updates based on user input.
• updateUrlParameter(id): This function updates the URL with the selected version ID, allowing users to easily bookmark and share specific versions of the page.
• checkArrows(selectedIndex, numItems, leftArrow, rightArrow): This function checks the visibility of the arrow buttons based on the current selected index and the total number of items (versions).
• displayContent(html): This function updates the content div on the page with the specified HTML.
• updateColor(color): This function updates the primary color of the site to the specified color.
• generateJSON(): This function generates a new JSON entry based on the values entered into the form.
• formatDate(date): This function formats a date object into the format used for the version name.
• copyToClipboard(text): This function copies the specified text to the clipboard.

Features:

• Version Selection: The user can select a specific version of the site to view from a dropdown menu of available versions.
• Navigation Arrows: The user can navigate between versions using left and right arrows or arrow keys on their keyboard.
• URL Updates: The URL updates based on the selected version, allowing users to easily share and bookmark specific versions of the site.
• Form Submission: Users can enter their own data into a form, which generates a new entry in the same format as the existing entries.
• Copy to Clipboard: Users can copy the JSON output of the form submission to their clipboard for easy sharing and use elsewhere.

How to tweak the website:

• To modify the content of the site, edit the content.json file.
• To modify the form fields, edit the HTML in the index.html file and update the generateJSON() function to include any new fields.
• To modify the date format used for version names, update the formatDate() function.
• To modify the copy generated by the form submission, modify the generateJSON() function to include any new fields or change the HTML output as desired.