Hanna Harmon

// I asked OpenAI’s GPT-4o model to generate the html, css, and javascript code for this page in order to demonstrate the capabilities of AI. See the prompt I sent below.

Create a single-page website using one html file (titled "ai.html"), one css file, and one javascript file. Within the title tag should be just “Hanna Harmon”. The site should have a header that reads "Gen AI" and is considerably bigger than the other elements. Place a paragraph below the header that reads "I asked OpenAI’s GPT-4o model to generate the html, css, and javascript code for this page in order to demonstrate the capabilities of AI. See the prompt I sent below.". In this paragraph, on the part that says “OpenAI’s GPT-4o”, make this text a link to ChatGPT. Below the previous elements, put a text box. Below the textbox, put a subheader of “How will Gen AI ai affect the software engineering industry?” then generate 300 words about how generative ai will affect the software engineering industry. Specify that this content was generated by you, GPT-4o. Below this, another header that says “Notes about the generation of this page”. Below it, put a paragraph that says: “The main challenge I faced in the generation of this page was getting GPT-4o to paste the entire content of this prompt into the text box. For some reason, GPT-4o mini did it without any problem, but with GPT-4o, I had to send in a subsequent prompt informing it of its mistake and ask it to regenerate the html with the full prompt in the textbox, rather than placeholder content. Perhaps it was avoiding rewriting the entire prompt to save time. The AI also struggled with making the page integrate with my already established lightmode/darkmode system. In addition, it never quite nailed down the styling to make the darkmode toggle button the look the same as the navigation links. Despite these caveats, I am impressed by the quality and accuracy of the page that GPT-4o created.”

The website must have a navigation bar with multiple links and buttons. The first link with an href of "index.html" should read "Home". The second link with an href of "brain.html" should read "Brain". The third link with an href of "projects.html" should read "Projects". The fourth link with an href of "heart.html" should read "Heart". The next link with an href of "ai.html" should read "Gen AI". The navigation bar should also contain a button to toggle between light and darkmode. Next in the nav bar will be external links. The first external link should read "Linked-In" and have an href of "https://www.linkedin.com/in/hanna-harmon/". The next link should read "Itch.io" and have an href of "https://hannaharmon.itch.io/". The next link should read "GitHub" and have an href of "https://github.com/hannaharmon". The last link should read "Contact" and should have an href of "mailto:hanna.marie.harmon@gmail.com". Ensure that all of these external links open in a new page.

The page should resemble a code editor such as vscode. Make the fonts some sort of monospace. Include the relevant link in the html file so that the font may be accessed. I want the navigation links and buttons to look like tabs on the top of the page. Ensure the navigation bar is fully responsive and transforms into a hamburger menu when the screen gets too narrow. Include some vibrant colors to mimic the look of syntax highlighting in code editors. Be sure to completely change the coloring of every element when switching from light to darkmode. Clickable elements should have a hover effect, and all the buttons/links in the navbar should have consistent styling. Make the textbox tall enough so that about 600 words can be seen without resizing it, and also make sure it resizes itself when the window is resized. The site must be responsive. Add some tasteful padding to the sides of the site so that the content does not touch the sides of the window. Add icons to the fronts of the navigation buttons and the light/dark mode button so they look more like tabs. In front of the paragraph whose text I provided, add two forward slashes to the front and change the text color to mimic the syntax for a comment.

When you are linking between your generated files, pretend that the relative path in order to reach the css file is "ai_styles.css" and the relative path in order to reach the javascript file is "ai_script.js".

Your darkmode toggle should integrate the following pre existing javascript file with the path “darkmode.js”.

let darkmode = localStorage.getItem('darkmode')
const lightSwitches = document.getElementsByClassName('light-button');
const favicon = document.getElementById('favicon')

const enableDarkmode = () => {
    document.body.classList.add('darkmode')
    favicon.href = (favicon.href.includes("manychrome"))? './resources/favicon-manychrome-dark.svg' : './resources/favicon-monochrome-dark.svg'
    localStorage.setItem('darkmode', 'active')
    swapMarkerToDarkmode();
}
const disableDarkmode = () => {
    document.body.classList.remove('darkmode')
    favicon.href = (favicon.href.includes("manychrome"))? './resources/favicon-manychrome-light.svg' : './resources/favicon-monochrome-light.svg'
    localStorage.setItem('darkmode', null)
    swapMarkerToLightmode();
}

if (darkmode === "active") enableDarkmode()

How will Gen AI affect the software engineering industry?

Generative AI, like GPT-4o, is set to transform the software engineering industry in profound ways. Automation of code generation and problem-solving processes will reduce the time spent on repetitive tasks, allowing engineers to focus on higher-level design and system architecture. Tools like AI-powered code assistants can suggest optimizations, detect bugs, and even provide documentation, streamlining the development process. However, these advancements come with challenges. Engineers may need to acquire new skills to work alongside AI tools effectively. AI will democratize software development, enabling non-programmers to build software solutions, which could reshape the industry’s job market. At the same time, AI’s role will foster creativity, as engineers will have more time to focus on innovation. Despite concerns about job displacement, AI will likely complement human efforts rather than replace them. The future of software engineering may involve collaboration between human expertise and AI-driven automation, leading to more efficient, creative, and high-quality software development. (Content generated by GPT-4o.)

Notes about the generation of this page

// The main challenge I faced in the generation of this page was getting GPT-4o to paste the entire content of this prompt into the text box. For some reason, GPT-4o mini did it without any problem, but with GPT-4o, I had to send in a subsequent prompt informing it of its mistake and ask it to regenerate the html with the full prompt in the textbox, rather than placeholder content. Perhaps it was avoiding rewriting the entire prompt to save time. The AI also struggled with making the page integrate with my already established lightmode/darkmode system. In addition, it never quite nailed down the styling to make the darkmode toggle button the look the same as the navigation links. Despite these caveats, I am impressed by the quality and accuracy of the page that GPT-4o created.