How ChatGPT Helped Shape My Website (markodevops.com)

Published in

𝐀𝐈 𝐦𝐨𝐧𝐤𝐬.𝐢𝐨

6 min readMay 16, 2023

For an extended period, I’ve been avoiding creating a website for my business. However, given the current economic circumstances and a newfound abundance of free time, I found myself out of excuses. After completing all household chores and tasks my wife had assigned me, I finally decided to plunge into website creation.

TL;DR: I did make the website and you can see it here https://markodevops.com

What tool to use?

Having spent most of my career in the backend domain, my understanding of good UX is a standard Unix terminal. While I’m proficient in HTML manipulation, I’m clueless about creating web pages that appeal to users. In my mind, a website with only black and white colors, and text in Fixed Width Courier, is absolute perfection. The mantra being, “Keep It Simple!”

Initially, I considered paid solutions for my website, with my first choice being Wix.com. However, the pricing structure didn’t suit me. I explored other templates but was put off by their cost as well. Given the absence of contracts at the moment, I decided not to invest much in this project and chose to do it myself.

Deciding to use ReactJS for a simple static website was an easy choice, as I had used this framework in the past. However, soon after I began laying out the website, I realized I would be spending too much time reading documentation on the myriad of libraries and frameworks available for ReactJS. This led me back to researching templates, but again, the pricing deterred me.

My relationship with JavaScript and its countless frameworks is complicated. With new frameworks popping up every two weeks (I recently found out about Next.js), the options can be overwhelming. I won’t even delve into the details of npm, node.js, and the rest of the tooling that needs constant updates to avoid security risks. This video about JavaScript really resonates with me:

ChatGPT to the rescue

I was on the verge of giving up on the website to return to my gardening and the new list of chores my wife had prepared, when I remembered my recent subscription to ChatGPT+. This is where things started getting interesting.

I began explaining to ChatGPT that I needed a website and wanted it to look a certain way, designed in ReactJS. The AI provided me with working code and explanations. To my delight, the code worked flawlessly!

Continuing the conversation, I shared more details with ChatGPT. For instance, I needed the code to incorporate the Material-UI library. The AI responded with instructions on how to add the dependency and modify the code.

I kept probing ChatGPT for different design options, libraries, contrast issues, sourcing free images, fixing the navigation bar, and more. I encountered a problem with the contrast of the Typography component — some background images were lighter than the font colors, while others were darker. To my query, ChatGPT provided a detailed solution involving the use of a translucent overlay on the background images to increase the contrast. This was just one of many problems that would have taken me hours to figure out on my own.

Yes, contrast can indeed be an issue with dynamic background images. One approach could be to add a translucent overlay to your background images. This overlay can be either light or dark and can increase the contrast between your text and the background image. 

Here is how you can adjust your `Section` component:

```jsx
<Paper 
  sx={{ 
    display: 'flex', 
    justifyContent: 'center', 
    alignItems: 'center', 
    height: '100vh', 
    paddingTop: '70px',
    backgroundImage: `url(${bgImage})`,
    backgroundSize: 'cover',
    backgroundColor: bgImage ? 'transparent' : 'grey.500',
    position: 'relative', // Add this line
  }}
>
  <div 
    style={{ 
      position: 'absolute', 
      top: 0, 
      bottom: 0, 
      left: 0, 
      right: 0, 
      backgroundColor: 'rgba(0, 0, 0, 0.5)', // This is the overlay
    }} 
  />
  <Grid container spacing={2}>
    {/* ...Rest of your code... */}
  </Grid>
</Paper>
```

In this example, I've added a `div` with an absolute position that covers the entire `Paper` component. The `div` has a semi-transparent black background color (`rgba(0, 0, 0, 0.5)`) which acts as an overlay on the background image. The `rgba` function is used to specify the color and the alpha (transparency) value.

The result is that the overlay darkens the background image, which should increase the contrast between the text and the background. If you want to lighten the image instead, you can use a white overlay (`rgba(255, 255, 255, 0.5)`).

Remember to adjust the alpha value to get the right amount of contrast. A higher alpha value will make the overlay darker, and a lower alpha value will make it lighter.

Another instance was when I asked for help with animation. I wanted to animate some text as the visitor scrolled down. Initially, the AI’s suggestion didn’t work due to npm issues. However, it recommended another library that worked. Eventually, I discovered Fade and Slide from Material-UI and asked ChatGPT to incorporate them instead. The AI successfully modified the code to include these components.

However, the animation didn’t work as expected. I asked why the font color was changing from white to gray as soon as the Title and Description loaded. ChatGPT accurately diagnosed the issue as a problem with the z-index and offered a solution to adjust it accordingly.

This could be happening because of the z-index. The z-index property in CSS controls the vertical stacking order of elements that overlap. If your text (Title and Description) is appearing under the overlay, it might be due to the overlay having a higher z-index. 

You can solve this by setting the z-index of the overlay to a lower value and the z-index of the grid container to a higher value. Here's how you can do it:

```jsx
<Paper 
  sx={{ 
    display: 'flex', 
    justifyContent: 'center', 
    alignItems: 'center', 
    height: '100vh', 
    paddingTop: '70px',
    backgroundImage: `url(${bgImage})`,
    backgroundSize: 'cover',
    backgroundColor: bgImage ? 'transparent' : 'grey.500',
    position: 'relative', // Add this line
  }}
>
  <div 
    style={{ 
      position: 'absolute', 
      top: 0, 
      bottom: 0, 
      left: 0, 
      right: 0, 
      backgroundColor: 'rgba(0, 0, 0, 0.5)', // This is the overlay
      zIndex: 1, // Set z-index to 1
    }} 
  />
  <Grid container spacing={2} style={{ zIndex: 2 }}> {/* Set z-index to 2 */}
    {/* ...Rest of your code... */}
  </Grid>
</Paper>
```

In this example, I've added `style={{ zIndex: 2 }}` to the `Grid` component and `zIndex: 1` to the overlay `div`. This ensures that the `Grid` (and everything inside it) appears above the overlay.

Remember that elements with a higher z-index cover those with a lower z-index. If you still have issues, try increasing the z-index of the `Grid` or decreasing the z-index of the overlay.

Such issues like z-index adjustments are the most time-consuming when trying to prototype a web app. Web development is replete with tweaks and knobs that are challenging to navigate and can lead to frustration. I have immense respect for UI developers, as it’s not easy to tweak these CSS parameters to deliver an excellent user experience that’s aesthetically pleasing to the human brain.

Feeling Like Lt. Commander Geordi LaForge

As I collaborated with ChatGPT in developing my website, I began to feel like Geordi La Forge, my favourite Star Trek officer. It felt as though I was interacting with the USS Enterprise’s onboard computer while creating new components for the ship. It reminded me of the episode ‘Booby Trap’ in TNG where Geordi fixes the warp drive with the help of a holographic Dr Leah Brahms. In my case, Dr. Leah Brahms was ChatGPT.

Lessons Learned

One vital lesson I gained from Andrew Ng’s deep learning course is to be specific and clear when assigning tasks to ChatGPT. Having some expertise in your field of interest definitely enhances your interaction with ChatGPT. If you don’t know what to ask, the answer might just be “42”.

ChatGPT has proved to be an excellent collaborator for my creative endeavors. It’s like having a team member who learns from me and with me, and helps in producing quality work in the least amount of time.

Was it conscious?

After completing the website, I found myself pondering over whether ChatGPT is conscious. My entire experience was composed of asking questions and receiving answers. At no point did ChatGPT inquire about anything from me. I wondered if ChatGPT had desires like humans, perhaps wanting to relax and watch Netflix.

I shared this thought with my friend Robin, who assured me there were safeguards to prevent such an eventuality… for now. While contemplating ChatGPT’s consciousness and my overall programming experience with it, I stumbled upon this video (timing couldn’t be more perfect):

Final Thoughts

Going forward, I plan to continue using ChatGPT to assist me in programming. I already use GitHub Copilot and am quite fond of it. I eagerly await the availability of Bard in Canada so I can start experimenting with it too. I hope that Bard will be able to assist me in writing Technical Design Documents for GCP in the future.

(DISCLAIMER: I used ChatGPT to proof read the draft of this blog and make wording, style, and grammar better)

Also, Read