By
@aamosm
My Portfolio Page. Everyone here is making like complex hardware or writing their own compiler. so i made a.. website. And i tried to get the most out of what you can do with a website while keeping it simple.
This site started from a pretty simple motivation: I wanted the portfolio itself to be part of the work, not just a page containing it.
I wanted to see how far I could push a plain HTML, CSS and JavaScript site without a framework or build system, while still making it work properly across different devices.
The visual direction came from a lot of different sites and ideas I liked, but the final site ended up being its own thing.
The site tries to break all molds while being simple as well, If not a portfolio it serves as a learning experience.
So yeah, it’s done.
I think heith.me is done.
Everything I wanted to implement is in now. The full site, the effects, the different device cases, the lite mode, the mobile mode, the interactions, the performance fallbacks, all of it.
I’ve also finished the design process stuff I wanted to document, so the site isn’t just showing the final result. There is actually an explanation behind why I chose certain colours, fonts, layouts and effects.
I wanted to build the whole thing as one process instead of constantly adding random features forever.
So I’m stopping here.
I don’t really plan on committing changes later down the line unless something is actually broken or I absolutely need to change something. I wanted this to be a finished piece, not another project that keeps getting new features until the original idea is gone.
The only thing left is getting the domain.
I’m waiting for the website domain grant to go through so I can finally buy the domain I designed this site around.
So yeah.
here guys.
https://aamosm.github.io/heith.me/
..the attached image is the portfolio page. also a note i wanted to add.. : this website has taken much longer than what is timed. the actual pen paper designs. getting together failed projects in other folders. designing in figma etc. was not tracked. This happens a lot with the projects i do in missions but somehow it affected a chunk of this one too. also i just realised this project has been listed as hardware???? its software. and i cant change it now. ill have to get help from support
The site has changed quite a bit since the first version.
I’ve changed a lot of the actual interface and started pushing the visual direction much further.
I also added the custom cursor from xenobiota. I really liked how something that small could change the whole feel of the site, so I wanted to try it here too.
I’ve also been taking a lot of inspiration from Awwwards sites. One thing I’ve noticed is that the best sites aren’t just crazy because they have crazy effects. The really good ones make those effects work properly across devices.
That became a pretty big focus for me.
I added separate cases for different hardware.
If a device has hardware acceleration, it can use the full experience. If it doesn’t, the site falls back to a lighter version so the effects don’t completely destroy performance.
There’s also a separate lite mode and a mobile mode. I don’t want the site to only look good on the machine I built it on.
I’ve also been making the interactions a bit more obvious, especially around muting and unmuting.
There are still a lot of little things like this that I’m catching as I actually use the site instead of just looking at it.
I’m also working on something I want to add directly to the site: a breakdown of the design process.
I want to explain why certain colours, fonts, layouts and effects were chosen instead of just putting the finished site in front of someone and leaving them to guess.
The site is the portfolio piece, but the process behind making it should be part of it too.
I went into this with a pretty clear idea of what I wanted, I just didn’t expect the actual design to stay the same.
The main references were:
I liked how all of them had their own identity instead of looking like a normal portfolio template. That was the main thing I wanted here too.
Visually I was going for a Wes Anderson-ish kind of thing. Not copying it, more the controlled layouts, odd colour combinations and slightly theatrical feeling.
The idea behind heith.me is also kinda recursive. The site itself is one of my portfolio pieces, and I’m going to be breaking it down in my portfolio too.
I knew I wanted the opening to feel more like entering something than just seeing a hero section.
I went through multiple versions of the opening before landing on the torn-paper idea. The paper tear gave me a way to make the video feel like it was underneath the page instead of just sitting in a box.
I changed the tear quite a few times too, especially the shape and colours.
The video is an old render of mine, and one of my first animation attempts. I didn’t really want to make a completely new video just for the site, so I reused it and messed with the presentation instead.
I chopped it up, added the scanline treatment and made it more chaotic. It felt way more fitting than just putting the original render there normally.
I also originally had the text arranged diagonally.
It looked cool, but once everything was actually on the page it started fighting with the person in the centre, so I straightened it out.
A lot of the site has basically been this. I have an idea, build it, realise it doesn’t fit as well as I thought, change it.
The colours went through a lot of versions too. I have not even made a proper repo for this on github. or hosted it yet. The plan is to get the website to how i want it to look and finish it off in one commit. and ofc future changes will be committed, but i want something to show first. The entire thing is just pure html, css, and js. no frameworks.
