DEV Community

Cover image for Day 1 -  Lights!

Posted on

Day 1 - Lights!

Today marks the first day of my self-imposed #30projects30days code challenge! I created a holiday ornament light string that is animated to light up alternately. Check it out here or you can just see the gif below!


This project is suggested in the challenge side projects list and I thought it was a great way to start my month of challenges. I wanted to see if I can build it from scratch without looking at previous projects' codebases.

I started in Powerpoint, my drawing tool of choice when I need something quick and dirty, to draw up the facade for my lights.

powerpoint drawing

My PowerPoint drawing - call me Picasso

As you can see, there isn't much uniformity for the positioning across the elements for the bulbs and yes, I did set one for each individual bulbs. I like the whimsical look and definitely got to practice absolute and relative positioning as well as transformations.

What I Learned

This was an eye-opening project for SVGs. I am relatively new to using them and didn't really use them outside of icons. I discovered SVG path builders like this one and enjoyed making different shapes. Since SVGs are scalable, it makes responsive development much easier and editing much easier.

How This Can Help Me

My portfolio is in need of a design update and I found this as an opportunity to make a subtle, but meaningful change. I have different sections in my single page site and I decided to change to borders to something more fluid and curvy.

old portfolio

Old portfolio with straight lines

new portfolio

New portfolio with curved section borders

I will continue to tackle the excessive white space and add additional design elements with SVGs to the page but I think it is a good start!

Onto the next challenge!

Top comments (0)