Nay's Portfolio (v2)

The site is now more mobile friendly!!! Yippie!!!

5 commits later, after realizing that the inspect mobile looked vastly different than looking at the site on my own phone, and a little bit of patience.

i also added an under construction sign for the art and tech pages.

Added 2 more project tiles :D (they also flip, very cool, very cool!!)

I started work on the Art Portolio Section of my Site!!! This is very much “make it work first, then make it pretty.” I wanted to have cool flippable cards, which transition from the project asset board, to some basic info about the event/project.

I simplified the logic for my moving carosol. Each paper moves independently on a delay. It’s kinda a stupid fix to a stupid problem, but hey. If it works, dont touch it. Im just not going to breathe in its dirrection for a hot second.

I also added in a little footer with contact info :D

Fixed Fancy Paper Carosol!!! (it loops now :DDDD)

What went well:

• Changed hero image, i think its cuter now.
• Added more gsap animations cuz we extra here
• Began with Certifications and Contacts sections
• Did more mobile friendly ness for smaller screen sizes

What went bad:

• spent an unhealthy amount of time trying to get a cool infinite carosol for my fancy pieces of paper. TLDR. Its not working right now. I’ve got it to loop, but it doesnt have a smooth transition back into frame.

Now its a tomorrow problem.

Made my site marginally more mobile friendly! (also had to figure out gsap match media, so that the animations made more sense)

Its also now hosted on a domain!!! (TY HACKCLUB)

Today was GSAP day (a very pretty JS library for smooth animations, + a bunch of other cool stuffs, but mostly the smooth animations with
time lines and triggers, ect)
So unfortunately, past Nay had set up a lot of their css layout in a way that was incompatable (over-use of position: absolute) with GSAP’s smooth scrolling, so i spend a while refactoring that for it to
work. Yippie.
I also added in smooth scroll to for the different sections of my site, with the nav bar.
For transitions, i used GSAP Scroll Trigger to add subtle fade in to the work section, as well as the nav bar, which zipps across the screen when you pass over it. In the future, i want to add a plane to one of the buttons, so it looks more natural.

OK! Dev log time >:D

I wanted to make a personal portfolio this summer, before University starts to kick my butt, so here we are!!!

I started by drawing out the hero on procreate. This included individual clouds, and the penguin moon, you see featured in the center.

Then with some simple css animations, and 30 hand placed stars (there had gotta be a faster way to do that, but if there is i have no idea what it is…), The sky was coming together.

in order to have a smooth is transition to the about me section, I wanted to have hills which fade into the same color. I think the full layout for everything in this site is grid, (because grid be the goat). I drew out the profile picture, added in a quick description, and threw in a small blurb about drinking water, because i had a very pretty drawing of a cup of water lying around that i wanted to include.

Next up, i did the work experience section. Its fairly straight forwards, since i honestly took most of the text straight from my resume, and added an inset to the base so that the work cards popped a bit more.

My vision for the rest of the site, is to have 2 main path ways. One leads to an art portfolio, and the other leads to a tech portfolio, depending on which one you click on. The reason i choose cards, was 100% based on the hackclub counterspell’s site, but instead with cats!

I wanted them to have a holo-foil feel, so i added in a hover animation to them, that has a shine transform over the card. (its very cool, and took me a really long time so please praise it)

Then, i went back and added in abunch of hover animations to the rest of the site to make it feel more alive.

And, that’s about all for this log!! Thanks for scrolling if you got this far!!!