Heroes of Mine Day 7

Did you miss me? I’ve been away for a while or rather under the weather. When I’m sick my body goes into freak out mode and doesn’t know how to handle stuff. My eyes start tearing, my nose won’t stop running, I lose my voice, but the worst of them all, my self-doubt increases to a maximum [cry me a river]. I start doubting my abilities, and think to myself ‘can I really do this?’ ‘am I good enough?’ and much worse questions, but today I say ‘NO!’ ‘Stop doubting yourself Athoug! You can absolutely do it! Just be patient. Remember your heroes. Which sparked the idea of today’s website! I decided to make a site that toggles the images of my heroes when their buttons are clicked. The fun part of this project is that it’s art base [yay] It was really fun drawing them, and coloring them. I wish I did a fast sketch video, but I didn’t realize until I finished. I got the inspiration for colors and line art from Carolyn Zhang piece ‘coffee study’. So below are the colors I chose for my heroes.


I used illustrator to draw out my heroes, and color them. It took some time because I’m used to photoshop so vector graphics is still a learning process. (but Adwa was such an awesome help! I bugged her a lot so sorryAdwaa <I love you>) Here’s a screenshot of one of my heroes (Ada Lovelace)

I’m so happy how they turned out! Now I move on to the dev part. The structure and styling were fine. But I’ll be honest the jQuery messed my head a little, but regardless I had it working!  however, it requires structuring as you can see

So here’s where I face a dilemma, I’m arranging the images in a way that they all combine and make up the hero. However, if the screen size changes, it will mess up everything. Because the images are sliced up as you can see here

(again thank you Adwa so much for helping me slice them!) so when the screen size is wider or smaller it will not arrange properly 🙁 Mind you, it works but the alignment will be all mixed up. The wider screen size is not an issue I can fix that problem, however, smaller sized is where everything would turn out bad. It’s a problem because I’m using jQuery to generate the tags and HTML, so if I implement ajax it might be fixed. Regardless, I decided to fix it by alerting the user to adjust the screen size.

I know that’s a cheap trick, but I’m running out of time, and I have a midterm to prepare for [excuses, excuses I know] but look, guys, I love how it turned out

Check it out for yourself. What do you think? share your thoughts with me, I love reading comments if there’s anyone reading for that matter. Who are your heroes?


0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *