I am a sucker for interactive websites.
The developer portfolios that have stuck with me have always been the ones with bold designs and animations - the ones that give each user a personal and unique experience that they will remember for days, weeks, and even months down the line.
Despite having limited JavaScript knowledge, this (pun intended) desire to create something memorable is what lead me to build an interactive 3D photo display with JavaScript and Three.js
Chris Greening - Software Developer
Hey! My name's Chris Greening and I'm a software developer from the New York metro area with a diverse range of engineering experience - beam me a message and let's build something great!
christophergreening.com
And you may ask yourself, "Well... how did I get here?"
Ironically I never originally planned on including photography in my portfolio.
Although it was an important part of my time spent in quarantine, I figured software developers were software developers and no one was going to care about my photography...
... until I saw an example of an interactive periodic table of elements on Three.js' website
What does this have to do with photography?
Nothing!
But it gave me the inspiration and foundation I needed to build my photo display.
Standing on the shoulders of giants
I said it earlier and I'll say it again: I'm not that great at JavaScript.
The most important part of my development workflow has always been to just start working on a problem and figure things out as I go.
I knew I wanted to use Three.js - I just didn't know how so I went on their site looking for some sample code to hack away at.
Luckily the periodic table instantly caught my eye. I downloaded the source code, fired it up on localhost, and began learning what each piece did.
And then the thought struck me: wouldn't it be sick if this could display <img> tags?
So I tried it.
And it worked.
One Eternity Later
After many hours and an embarrassingly large amount of coffee (seriously don't get me started), I have come away with a product I'm proud of.
I've implemented a simple CMS with Flask so I can upload and edit photos as needed. I've added links to each photos respective Instagram post (cross-promoting content all day every day). And most importantly I have learned A LOT about JavaScript, Three.js, and UI/UX along the way.
It ain't much but it's honest work and I'd love for you to check it out and give feedback in the comments below!
Chris Greening - Software Developer
Hey! My name's Chris Greening and I'm a software developer from the New York metro area with a diverse range of engineering experience - beam me a message and let's build something great!
christophergreening.com
Let's get in touch
I LOVE connecting with other developers.
Drop a link to your portfolio so I can check it out π (and if you don't have a portfolio, tell me about a project you're proud of!)
If you want to see more of my work check out my JavaScript arcade game blog post:
or better yet...
Top comments (27)
Wow! That's really cool! Never really got around to learning Three.js - I always tend to get amazed of the level of cool stuff you can create with it!! I have my own portfolio at larsejaas.com/en/ - although it doesn't have anything this cool π
YES this is exactly the type of portfolio I love seeing; fantastic job Lars!!!
Absolutely love the floating phone animation - something like this is on my agenda of things to learn how to do
Ahh - glad you liked it! It's actually a couple of years old - I have burried myself in webdevelopment stuff like React, Typescript and Headless WordPress lately.
I actually feel I need to do something more on the creative side soon again! I have made the animation using GSAP and drawing the phone in InkScape - GSAP is nice! Although I feel it's a bit troublesome to work with in React at times!
Awesome! I really gotta pick up React or Vue or something - I don't know any frontend frameworks/libraries aside from working knowledge of jQuery π¬ endless list of things I wanna learn just not enough time lmao
It's awesome
thank you Namita!!! π
Crazy and amazing! Great work π₯
Thank you my friend!!!! Appreciate the feedback :D
I like 3D must learn it ;)
As always your support means the world Beckett, thank you!
It's love it, for me look like in SC diration, you wanna shared code for this?
Thank you!
I will share it open source sometime soon π
It's amazing ! Great work :D
Thank you so much Parth!
This is so cool ! β¨
Hey Garima, thanks so much π it means a lot!!
Really cool stuff
Thank you so much Rishov π
Great work Chris! It looks awesome and is a very cool concept for photographs.
Ayy thanks so much my friend!!