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

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

Kyle Swanson | Electrical Engineer, Software Developer & Game Designer