My Portfolio - Front-End Engineer Path | Landing Page animated with GSAP

Thanks for coming to share your portfolio Project with other learners!

  • Your review of the Project. Was it easy, difficult, just right?

The mission itself looks simple at a glance, but once you sit down and start planning the clock starts ticking and you start noticing time fly while you’re standing still on the middle of the road figuring out where I should go.

I had to build probably 3 to 4 different iterations of my “to-be” page just to have them scraped after a day working on it.

I want to say that I didn’t quite follow all the guidelines to the letter in this project because I was trying to do something different. But I guess in a way, I went further than what the project required me to do.

  • An estimate of how long it took you to complete
    TL:DR: I started this repo on the 11th of July 2022 and deployed the website has “ready” on the 21th of July 2022 - so… 10 days.

Even though I deployed this project as ready I don’t feel like it’s a finished version, there’s still so much to do and to improve. I will continue improving and expanding this page through out the next few days. I had to come to a conclusion date otherwise I’d be spending numerous days on this project and I really needed to compromise in order to continue my career path here.

My goal with this page was not to to just have a page for a portfolio but to create THE page that is going to hold my future portfolio projects. I wanted (still want) a one page website that is super interactive and dynamic. I wanted something with crossfades and animations, so I started researching about freeware libraries that I could use with JavaScript in order to achieve this.

That’s when I found GSAP.
I know this will sound funny but GSAP is super EASY WHEN YOU LEARN HOW TO WORK WITH IT. Before that it’s a turmoil of frustration. But the people on their forum are super active and ready to help. They have a really well made documentation page and there’s some pretty good insightful videos on youtube if you just look for them.

It took me a total of around 16 hours, spread out through 2-3 days to learn how to properly use GSAP (Greensock Library). I was always bumping against a bug, a problem and issue, nothing ever seemed to really worked.

I persisted and delved deeper and deeper into the documentation page, assisted with youtube videos and random heros answering questions on the forum.

After a few days I was able to start making things work the way I intended them to work.

So in this case GreenSock allowed me to (after learning) easily apply crossfade background videos and animate objects within my grid.

With all this I’ve:
:hammer: Built a website using various technologies;
:joystick: Added interactive features like triggerscrolling mechanisms;
:mag_right: Used Git Version control has I’ve Developed this project;
:microscope: Learned how to use GSAP in Web Applications.

I will continue to improve and extend this page, so do let me know, if there’s anything you think it’d be cool adding into it!

And if you’re interested in GSAP feel free to chat, I’m more than happy than share what I’ve learned. :v::grin: Feel free to follow me on LinkedIn (you can find it on my page).

We hope you enjoyed this project!
I did. I wish I had more time… time time time time… I feel like a quacking duck asking for mOrE tImE!!! :joy:

1 Like

NEW LINK

Super cool site! The scrolling feature is really cool. Definitely thought outside the box for this one.

1 Like

That’s some pretty impressive animation. Nice work. I’m sure the site will get better and better as you continue to revise and add to it. Thanks for sharing.

1 Like

Thank you so much. Yeah I want to make sure I will keep working on this. I’m currently learning React so I can refactor the whole thing.

Thank you for your feedback it means a lot to me.

wow, that a pure galaxy! very nice… looks cool

1 Like

Keep working at it. I’m sure you will make some really cool stuff.
I am also working on learning React. Seems pretty useful and I see it mentioned fairly often in Software Developer job postings.