Goal:
Start working on my portfolio website finally. Put together the various things I've been learning and working on improving and see what I'm capable of!
Tech Stack:
- Barba.js
- WebGL
- HTML/CSS/Javascript
- GSAP
- Locomotive Scroll
- Three.js
- Sass
Ideation:
I had a bunch code templates, design ideas, website inspirations that I had part replicated in the past and gave up that I revisited to begin this project. I had and still have a couple ideas for what I could possibly do. Knowing that I'm typically paralyzed by fear when approaching this project I decided to just swing for the fences and make multiple websites if I have to and decide later. From a design perspective I wanted a stylized project first approach to my website. Show off a bunch of different projects and keep the rest of the site relatively simple from a content perspective. This being a portfolio site for front end developing and creative technology I don't want to add too much corporate fluff or jargon to 'sell' myself. I just want to show off my projects and show off my style and flare through the way I'm showing it off.
Recap:
Honestly a lot of the webgl stuff went quite smoothly, I also didn't have to write all the logic from scratch borrowing existing opensource frameworks and snippets for cursor tracking and tracking mouse position in 3D space to create 'draggable' 3D content. Very glad that those didn't need to be written from scratch to be honest, managing 2D vs 3D space and scroll offset and mouse position is frankly a massive pain in the butt. I had a lot more trouble with the 'basics' and 'fundamentals' of making scaleable fluid designs for 'static' pages. It was again a sobering realization that I struggle more with margins and padding then I do with 3D motion and animation. After making my pages I spent some time with parcel, bundling and optimizing my assets and focused on making things...'nicer'. I started with Barba.js a criminally underrated and under documented lightweight library for ajax page transitions. When I say under documented what I really mean is that there are literally 2 examples on their website with no markup. The actual documentation is fine, but as with pretty much all technical documentation a bit much to dive into without experience and or pre-requisite knowledge.
Barba.js makes your website act as if it was single page application. You're injecting your code back and forth so that transitions are seamless. The problem with this is that a lot of my code and website are generated via javascript. Pretty much my entire landing page is made with js and not traditional html elements. When injecting code and containers back and forth javascript doesn't get reloaded and events like Domcontentloaded don't get fired again etc. Videos won't autoplay because they don't know that the page they're located on is being viewed. It requires a hard refresh to re-initialize the js and autoplay the videos. Obviously this is a major problem and there's of course a solution within barba, enter global hooks! I'm not the person to explain hooks in general but they more or less run when barba animations begin and end etc. I fully know I don't know how to use them correctly to re-init the javascript. I ended up with a really bad bandaid solution of literally copying and pasting my initial js into my hook.
There's some irony that we had just talked about refactoring code and cleaning things up to cut down on repeated logic and unnecessary code. I'll raise you 50 lines and literally have two copies of my javascript in the same file nested within a hook. Frankly I'm just not knowledgeable enough with barba and ajax in general at the moment so this works. I do intend to fix it in the future and make it better.
After getting the page transitions to work I started exploring ways to add gsap and scroll animations to my website and to spice up my static pages. I went to locomotive scroll first since I had seen some really incredible demos and was really impressed. Scroll jacking and parallax is something I've played with before but never with locomotive scroll and not with a site this big / with so many moving parts and frameworks. Smooth scrolling is super easy with this library just add a bunch of data-scroll tags to just about everything and like 4 lines of boilerplate js. Side tangent, I'm starting to realize why so many advanced websites and templates are so hard to read and dissect if you haven't used the techstacks before. My section tags and body tags had like 4-6 framework specific classes and params being passed in. I don't know if it's the webgl or ajax...probably the ajax but when I was trying to add parallax and scroll triggered text animations my positioning for everything was getting all sorts of messed up. I think also because I had some level of scroll jacking / tracking occurring to map my 3D planes and cursor animations but elements were struggling to know when they were in frame, ie they were totally losing viewport context and animating or disappearing at all the wrong times and sometimes not at all. No errors thrown, just not working properly. There's a lot of moving parts being injected etc and being tracked so it makes sense that the integration would be difficult, without errors being thrown as well it feels pretty difficult for me to debug and since I'm not that miffed about it I'll just leave it as a potential tbd when I have more time to explore and experiment.
Continued Iteration:
The remaining major things is to add an about me / contact page which I've staved off because I once again, am too scared to think of a design. About me? Infinite possibilities and wrong choices that can be made. Other than that, perhaps smoothing out some transitions and animations and improving my ajax / barba implementation.
Link to live site:
