Codevember day 21 : Star Wars IV crawl

Posted on

So I’ve been wanting to recreate the Star Wars title crawl in CSS for quite a long time now, so I finally decided to stop wanting and start getting. So here you go guys!

The text isn’t Franklin Gothic like the original crawl, and the font-size is a bit off, but hey, this is supposed to be fun and non-perfect, right? RIGHT?! Someone tell my OCD it doesn’t have to be perfect.

(Also, how the fuck did it get to be after midnight?)

See the Pen #codevember day 21 : star wars crawl by Smokie Lee (@xtoq) on CodePen.

I made the CodePen front page!

Posted on

So, I’ve been participating in Codevember over at CodePen (basically you write code for everyday of November) and one of my pens made the front page! I’m not usually about “putting myself out there” – hence the sparse portfolio stuff I have here – but this was too cool not to share! I’m really enjoying participating in this design prompt, and I might even write about my experience later. Or not. I don’t fucking know.


CodePen front page

Codevember day 16: CSS Maze

Posted on

I’m going to learn an HTML preprocessor and I thought a maze might be a good thing to try to build programmatically. First though, I had to make sure I could do it in CSS and HTML without a preprocessor…

Obviously this isn’t much of a maze, but it’s a good proof of concept. I’ll probably figure out how to do an animation to auto-solve it later, but first things first!

See the Pen #codevember day 16: CSS maze by Smokie Lee (@xtoq) on CodePen.

Codevember day 14 : Fallout TV

Posted on

I made the husband a Fallout inspired map to lead him to his birthday present and I decided to try to recreate the overlay effect of a cathode ray tv in CSS. Not super thrilled with the scan animation, but since I’m still learning CSS animation I’m not too annoyed. I’m going to look into making the “gloss” look a bit more realistic, or use it again in another project and make it look more real there.

Then I got a little crazy and was like, I can make this look like a TV set too! Just thrown together mostly, I feel bad spending so much time on these little experiments when I have so little time to spare, but then again they’re great practice for front-end work and just creativity in general. Such is life. Happy Codevember!

See the Pen #codevember day 14 : Fallout TV by Smokie Lee (@xtoq) on CodePen.

Codevember day 13 : mountain header

Posted on

A little something I cooked up for #codevember today. It’s a mountain header with a serene little cloud passing by. Combination of #codevember 11 and #codevember 5. Yeah, it should be #16 but I was never very good at math.*

See the Pen #codevember day 13 : mountain header by Smokie Lee (@xtoq) on CodePen.

*Totally funny story: I had this originally listed as a combination of #12 and #5 equaling #16. I TOLD YOU I WAS BAD AT MATH.

Codevember #4 : Fitbit moon

Posted on

I saw the moon from the sleep tracking section of the Fitbit app and I thought to myself, “Hey, that would be easy to do for Codevember!” Sure, it is easy, when you’re not distracted by homework you forgot you needed to do…so I rushed a little and didn’t clean things up the way I’d like. I also want to go back and add the stars at some point. It was still fun. Enjoy!

See the Pen codevember #5 : Fitbit Moon by Smokie Lee (@xtoq) on CodePen.