For those unaware, my first blog post [here](/blog/article/introducing-my-portfolio-website-a-showcase-of-my-blog-and-passion-projects) was written almost entirely by ChatGPT. Yes, the AI craze is taking the world by storm, and I decided to hop on the bandwagon. I had already been experimenting with ChatGPT - mostly using it as a sort of pair programmer to help me write code snippets to build this website. The results were pretty impressive! More often than not ChatGPT would output completely functional code that solved my problems much quicker than any Google search could. So how does ChatGPT fare when it comes to writing for a blog? Let's take a look and see...

The first thing I did was ask ChatGPT "What is a good length for a basic tech blog post?" The answer came back 800-1200 words. At that point I think I was just considering using ChatGPT to guide me in the whole blog post writing process. But then I realized maybe it can just write the whole thing for me and I provided it with a summary prompt:
```ignore
"i built a portfolio website using nextjs. i plan to document the various projects i am working on using the website. the website has a few main components. the index page has the following sections 1) showcase 2) about 3) recent projects 4) recent blog posts. the showcase section has a background image with 100vh and shows my name and "Electrical Engineer, Software Developer & Aspiring Game Designer". the about section provides amplifying detail about me and my skills as engineer, software developer and game designer. the recent projects section has cards that link to my individual projects i've built. the recent blog posts section has cards that link to blog posts i've written. the website is built with nextjs for the front end and strapi v4 for the back end. I want to write an introductory blog post to kick off the website. can you help me draft it up? let me know what additional information you will need."
```
Here's ChatGPT's response:
```ignore
"Sure, I'd be happy to help you draft an introductory blog post for your portfolio website! Here's a possible outline that you can use as a starting point:

Title: Introducing My Portfolio Website: A Showcase of My Skills and Projects

Opening Paragraph:

Welcome to my portfolio website! As an electrical engineer, software developer, and aspiring game designer, I am excited to share with you my latest projects and experiences. In this blog post, I will give you a tour of the website and provide some background on my interests and skills.

Showcase Section:

The first thing you'll notice when you land on the homepage is the showcase section. Here, you'll see a background image that represents my passion for technology and creativity. You'll also see my name and my three main areas of focus: electrical engineering, software development, and game design.

About Section:

If you're curious to learn more about my background and skills, be sure to check out the About section. There, you'll find more information about my educational and professional experience, as well as my personal interests and hobbies.

Recent Projects Section:

One of the main purposes of this website is to showcase the various projects I've been working on. In the Recent Projects section, you'll find cards that link to some of my recent software development and game design projects. From web applications to video games, I have a wide range of interests and skills that I hope to demonstrate through these projects.

Recent Blog Posts Section:

In addition to my projects, I also enjoy writing about my experiences and insights. In the Recent Blog Posts section, you'll find cards that link to some of my recent blog posts on topics such as software development, game design, and technology trends.

Conclusion:

Thank you for taking the time to visit my portfolio website! I hope you find it informative and engaging. If you have any feedback or questions, please feel free to reach out to me through the Contact page. I look forward to sharing more projects and insights with you in the future.

Of course, feel free to customize the content and tone to fit your personal style and goals for the website. Good luck with your portfolio and happy blogging!"

If you check out the final blog post you'll probably find this first ChatGPT response got me about 75% of the way to the finished product. I decided to give it the information from the "about" section of my website to see if it could flesh out some more detail. It was moderately successful with that task. The problem was that it just copied the about section information word for word and injected it into the blog post. I told ChatGPT that I would prefer if it could reword the about section information to sound unique and interesting. Unfortunately it pretty much failed at that task, and remained determined to parrot back the about section information almost verbatim. It did alter some of the sentence structure but didn't really add anything "creatively". 
```
I then asked ChatGPT to work with me to try to spruce up each section individually. Once we iterated through each section I asked ChatGPT to merge all the revised sections together. This is where things started to fall apart as ChatGPT seemed to forget what it originally output and also what it output when we worked on each of the sections one at a time. But it wasn't all for naught. By that time I had collected enough scraps and pieces to cobble everything together on my own.

The last thing I asked ChatGPT was to generate a bunch of variations for possible blog post titles. I felt like most of them sounded a little too fanciful and over the top...although some of them were pretty interesting:

1. "Discover My Creative Journey: A Look into My Passion Projects on My Portfolio Website"
2. "My Portfolio Website: A Visual Story of My Skills and Projects"
3. "Unleashing My Creativity: A Showcase of My Skills and Projects on My Portfolio Website"
4. "From Electrical Engineering to Game Design: A Tour of My Portfolio Website"
5. "My Portfolio Website: A Testimonial to My Curiosity and Love for Learning"
6. "A Journey through My Portfolio Website: My Passion Projects and Technical Skills"
7. "Introducing My Personal Laboratory: A Tour of My Portfolio Website"

What do you think? Which blog post title would you have chosen?

In the end I did do some final editing and extra massaging of the text to fit my style a little better, but overall I would say ChatGPT wrote about 90% of the blog post. I think ChatGPT is definitely a valuable tool to have in your back pocket. At some point maybe I'll even get off my dime and splurge on access to the paid version...




My experience using ChatGPT to help write my first blog article

Using ChatGPT To Write My Blog Articles

As I was designing my profile website, I had the feeling the "hero" section the user sees when first navigating to the site needed a little something extra. It needed something to indicate to the user that there was more information to be found down below. So I brainstormed ideas. Should I just use a simple downward pointing arrow? Or something more dynamic - a flashing downward pointing arrow? Then something came to mind that I thought was clever...

A pull-down resistor circuit! It's a simple enough design that sort of looks like an arrow (GND symbol at the bottom) and also symbolically indicates the need to pull down the web page (scroll down). In the electrical engineering world, a pull-down resistor is a way to make sure the input signal to a logic circuit is logic '0' when inactive instead of floating around indeterminately. 

So the plan was to implement a pull-down resistor as an SVG and put it at the bottom of the hero section. It would function as a button that when pressed would scroll the user down to the first section of the website. I wanted a little dynamic flair so I decided on including a switch component opening/closing. When the switch is in the open state, the input voltage is pulled down by the resistor to GND (represented by gray wire). When the switch closes, the wire is powered by supply voltage (represented by orange wire). It proved to be a little trickier than I expected to animate these behaviors.

I implemented the SVG in Inkscape by tracing over a schematic I quickly put together in KiCAD. I made sure to break the SVG down in to individual paths that I could later animate in react. The 4 main parts are:

- top (supply voltage)
- switch group
- resistor
- GND

The top never changes -- the supply voltage is always applied to it so it will be a nice orange color at all times. The switch group is arguably the most complex -- it needs to rotate from an open position to closed position, then back to open. The resistor and gnd paths aren't too complicated but they need to change color to represent the sudden flow of current through them when the switch is closed.

To begin the process, I exported the SVG from Inkscape and opened it up with Visual Studio Code. Tip: save the file as Plain SVG in Inkscape otherwise you'll end up with a bunch of Inkscape namespaces that have to be removed else you'll get an error 'JSX Namespace is disabled by default because react does not support it yet'. I created a react function component called `CircuitSVG` that returns the SVG XML data. At this point I ran into my first hurdle - the XML data formats the style in a way that is incompatible with react:


```xml
<path
       id="gnd-bottom"
       d="m 119.07376,232.75528 v 2"
       style="display:inline;fill:none;stroke:#000000;stroke-width:6;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
```

In order to render with react, this needs to change to:

```xml
<path
      id="gnd-bottom"
      d="m 119.07376,232.75528 v 2"
      style={{
        display: 'inline',
        fill: 'none',
        stroke: '#000000',
        strokeWidth: 6,
        strokeLinecap: 'butt',
        strokeLinejoin: 'miter',
        strokeMiterlimit: 4,
        strokeDasharray: 'none',
        strokeOpacity: 1,
      }}
    />
```

Fair enough, but I am using SCSS in my project so I added a `className='svg-circuit-item'` attribute to all my SVG path elements and moved the styles into that class:

```css
.svg-circuit-item{
    display: inline;
    opacity: 1;
    fill: none;
    fill-opacity: 1;
    fill-rule: nonzero;
    stroke: gray;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-miterlimit: 4;
    stroke-dasharray: none;
    stroke-opacity: 1;
    stroke-width: 2;
}
```
I kept any attributes that need to be customized (e.g. stroke width) in the react code. This allows the customized element style to override the `svg-circuit-item` class style. With the basic styles configured and the paths in place, it was time to animate the SVG.

To animate the paths, I chained a total of 6 animations together using each path's `onAnimationEnd` attribute and assigning a `handleAnimationEnd` function to it. Each animation has a state determined by the `useState()` react hook that indicates whether the animation is running or not. When the animation ends the `handleAnimationEnd` function kicks off the next animation by setting the animation state of the next animation to `true`. For every path that needs to be animated, I assign an animation name in its style attribute. The animation name is conditionally set by a ternary operator to be `undefined` when the animation state is set to `false`:

```javascript
// State variables to determine animation run state
  const [animation1, setAnimation1] = useState(false);
  const [animation2, setAnimation2] = useState(false);
  
  // Handles launching animation 2 when animation 1 ends
  const handleAnimation1End = () => {
    setAnimation2(true);
  };
   
// The animation of the SVG element is determined
// by the animation name and onAnimationEnd event
  <circle
          r="2.999"
          cy="146.12494"
          cx="119.14196"
          id="svg-switch-bottom"
          className='svg-circuit-item'
          style={{
            animationName: animation1 ? 'powerUp' : undefined,
          }}
          onAnimationEnd={handleAnimation1End}
  />
 ```
 
 The `powerUp` animation handles setting the stroke color of the path to simulate voltage flowing in the path. Overall there are 4 total animations:
 
-  powerUp
-  draw
-  rotator
-  reverse-rotator
 
 ```css
 @keyframes rotator {
  0% { transform: rotate(0); }
  100% { transform:  rotate(-17deg);}
}
@keyframes reverse-rotator {
  0% { transform: rotate(-17deg); }
  100% { transform:  rotate(0deg);}
}
@keyframes draw{
  0%{ stroke-dashoffset: 130.01345825195312;}
  100%{stroke-dashoffset: 0;}
}
@keyframes powerUp{
  0%{ 
  stroke: gray}
  100%{
  stroke: $primary-color;}
}
```

The `draw` animation follows the path of the resistor filling the color with orange to simulate current flow. I duplicated the resistor path so that the powered up path simply draws on top of the static gray resistor path. The difficult part there is determining the path length which we'll need to input for the animation `stroke-dashoffset` value. I found the length by finding the path element in the DOM and calling the `getTotalLength()` function on it:
 
 ```javascript
   const path = document.getElementById('svg-resistor');
   const length = path.getTotalLength();
 ```
 
Perhaps the trickiest animation was the switch gate animation. It needs to rotate from open to closed position and back to open. To do this I defined two animations `rotator` and `reverse-rotator`. The `rotator` animation plays 2 seconds after page load via the `useEffect()` React hook. Once the entire chain of animations finishes, the switch's animation name changes to the `reverse-rotator` which launches causes the switch gate to reopen. To make the animation more dynamic, I configured it animation to loop by resetting the animation name to `rotator` 1 second after the `reverse-rotator` animation ends.
 
Last but not least, I set the entire SVG button to fade in 0.5 seconds after the page loads and applying an opacity transition for the button. Of course the button needs an `onClick` method which handles the scrolling into view of the desired section of the web site. I passed this `handleSvgCircuitClick` function in as a prop from the parent component.
 
 ```javascript
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => {
    const showButton = setTimeout(() => {
      setIsLoaded(true);
    }, 500);
    return () => {
      clearTimeout(showButton);
    };
  }, []);
  ```
 
 ```html
  <button className={`svg-button ${isLoaded ? "svg-button-show" : ""}`} onClick={handleSvgCircuitClick}>
        <CircuitSVG isLoaded={isLoaded}/>
  </button>
 ```
 ```css
 .svg-button{
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.svg-button-show{
    opacity: 1;
}
```
So that's about it, you can check out the final code [here](link). Let me know down below in the comments if you know of any fancy React/JS libraries that handle SVG animation. 


Explore how I made the animated circuit SVG found on my portfolio website home page

Animating a Scalable Vector Graphic (SVG)

Welcome to my portfolio website! I'm Kyle Swanson, an electrical engineer from San Diego, California, with a passion for software development and game design. This website is where I share my projects and thoughts, and in this blog post, I'll take you on a tour of the site and highlight some of its key features. As an engineer and developer, I thrive on tackling complex technical challenges, and I look forward to exploring these topics in future blog posts. Specifically, I plan to delve into the design and development of this website, sharing nuggets of wisdom and lessons learned along the way.

## Showcase Section

When you first visit my website, the "Showcase" section is where you'll land. It features a background image that represents my love for technology and creativity. You'll also see my name and my three main areas of focus: electrical engineering, software development, and game design. Within these focus areas I've acquired a diverse set of skills and interests that I hope to showcase through this website.

## About Section

If you're curious to learn more about my background and skills, be sure to check out the About section. There, you'll find more information about my professional experience, and take a glimpse into my personal interests and hobbies.

## My Recent Projects

One of the main purposes of this website is to showcase the various projects I've been working on. In the "My Recent Projects" section, several of my projects are shown with a brief description and a link to the full project page. The dedicated "Projects" page contains a complete list of all my projects. From desktop applications to mobile apps and video games, I have a wide range of interests and skills that I hope to demonstrate through these projects.

## My Recent Blog Posts

In addition to my projects, I also enjoy writing about my experiences and insights. In the "My Recent Blog Posts" section, you'll find links to my latest articles. You can also find all my blog posts on the dedicated "Blog" page. I plan to use this blog to share my experiences in designing and building this website, as well as other technical challenges I encounter in my work. Through these posts, I hope to provide readers with valuable information and practical tips that they can apply to their own projects. In addition, I will use this platform to share my thoughts on topics related to electrical engineering, software development, game design, as well as any other interesting projects or events that I come across.
## Conclusion

Thank you for visiting my website and reading this introductory blog post. I hope you enjoy exploring the site and learning more about me and my projects. Don't hesitate to share your thoughts or ask questions down below in the Comments section!

Introducing My Portfolio Website: A Showcase of My Blog and Passion Projects

Kyle Swanson | Electrical Engineer, Software Developer & Game Designer

## Overview
This project is simply the result of following Unity's [John Lemon's Haunted Jaunt: 3D Beginner](https://learn.unity.com/project/john-lemon-s-haunted-jaunt-3d-beginner) tutorial. The tutorial stepped through most of the basics of game development. Prefabricated assets are used to build out the game environment and level design. The end result is a playable 3D game where the character stealthily makes its way to the end goal.

## Objective
The main objective was simply to complete the tutorial, gaining familiarity with the various aspects of creating a game (camera, lighting, sound, gameplay loop, etc).

## Description
I probably need to revisit this project at some point as a refresher. Essentially, I learned how to put prefab game objects into the scene, move the character based on player input, perform object collision detection and some basic UI/audio effects. 




Lemon 3D

## Overview
This project is my first original game. I admit -- it's pretty terrible. But at least it's something. The goal of the game is to maneuver around rocks without hitting them. If you hit the rocks 3 times you sink. The controls use the keyboard up/down/left/right keys. You can combine vertical/horizontal movement to move diagonally (e.g. left arrow + up arrow moves you diagonally up and to the left).

## Objective
The main objective was to build a game from scratch with Unity. The previous game I built was based on a Unity tutorial so this was my time to shine building something of my own with what I'd learned.

## Description
This game uses prefab assets from the Unity store. For the rocks and the boat. Inside the boat sits a guy based on the Mixamo "Brute" character. The hardest part of the project was probably the animation of the rowing motion. I tried to implement physics-based rowing motion with inverse kinematics but ended up animating with forward kinematics. Some basic particle effects are used for the splashes. The rock hazards that you must avoid are generated from an object pool of several random rock types. As time goes by the number of instantiated rocks increases. Object colliders keep the player in view of the camera. When the player hits a rock, basic impact audio is played and player health is decremented by 1. When the player reaches 0 lives, the boat is sunk below the water level out of view and the "Sunk" UI element pops up momentarily before asking if you want to start a new game.

Yes, the hearts indicating player health are too large because I didn't set the Canvas Scaler UI Scale Mode to "Scale With Screen Size"...it's on the todo list if I ever revisit this project.


Paddle Harder

## Overview
This is a hobby project to create an IoT motion sensor/camera. Basically the motion sensor should trigger the camera to turn on, record some video, and then upload to a cloud provider. The device is supposed to be low power enough that it can stay in operation perpetually using a rechargeable lithium battery.

## Objective
The main objective was to build a complete hardware and software system. The hardware/PCB would be custom built to meet project requirements. The software would have frontend components for displaying images/video captured from the IoT device, as well as backend components to handle the MQTT communications between the IoT device and server.

## Description
This project was a lot of fun to work on because I had never built a custom PCB from scratch before. Up front I spent some time defining requirements and searching the best components to use for the project. The design consists primarily of a device called the ESP32-CAM mounted to a PCB that handles USB and solar charging. The ESP32-CAM is hooked up to a PIR motion sensor that triggers the camera to turn on. I used KiCAD to draw up the schematic, as well as to do the trace layout and routing. Once I had the PCBs in hand I did PCB assembly, soldering all the components (including SMD). The device unfortunately draws too much power in its current configuration so the solar charging features are inadequate and battery life is insufficient. If I revisit this project, I definitely need to figure out how to get the ESP32-CAM to operate in sleep mode until PIR senses motion in order to conserve power.



Kyle Swanson

Electrical Engineer, Software Developer & Aspiring Game Designer

Hello there! I'm Kyle.

My Recent Projects

Latest Blog Posts