"Hubert Dungen Website Portfolio" is a personal project to publish online my professional skills: graphic design, photography, storyboard, vectorization, 3D modeling, hmtl5, css and javascript. The best way I idealized was to make an interactive website with a gallery and some info for clients.

I mostly used Brackets. For the sketch and all the graphic design I used Adobe Illustrator CC and Adobe Photoshop CC.

The website has 5 pages: Home, Portfolio, Services, About and Contact.

Home is simply the homepage where you can freely interact with the background and understand what is the website about.

Portfolio is where you can find the Gallery of my best projects, categorized by areas (Graphic Design, Photography, Concept Art, Storyboarding, Traditional Drawing, 3D Modeling).

Services is the page to inform how is my method of work and what kind of services I do.

About tells more about me.

Contact is the contact form (send emails to my personal email) and has my contacts information.

This website is inspired on Synthwave and Retro Futurism. While getting some flashy colors and being animated, it's still clean and breathable. Each page have a character represented by a vector silhouette, all characters are military themed. The characters should be on synthwave inspired backgrounds. With this, the website should be interactive, and instead of just flat common website (webstores, forums, wikis, etc...) we should experience something with this one, we should feel that there is actually something behind the buttons and behind all information. The background must contain independent layers of image objects that will build an interactive illusory 3D world (synthwave inspired) applying motion to them. As you can see, if you go take a look at the background folder and at the CSS code, it has independent layers for each piece of the background.

Background - Starting on the background to continue the last topic. The first interactivity on the website should be the motion of the background as it was kind of 3D, the parallax effect. The farthest objects should move slower, and the closest should move faster. But "what will trigger the motion of these objects?", you may ask. Well, my first hunch was to make the mouse/cursor movement to influence the background motion. It would be nice for the website client to feel that he can actually interact with the background by moving is cursor around. If this is too much motion and if it get too flickered, I can change it to be a time to time loop motion but it lose all it's interaction with the user.

Buttons - The buttons should be clean and simple, but also futuristic and it's interaction should make a good feel of smooth floatation, like the hovercars.

Transitions - The transition between pages should also be animated. Each page has it's own character represented by a vector silhouette. What I want for a transition is to hide the character's silhouette (which you can see on the homepage) on that page, by moving it to the left or right accordingly to it's position, and then it should appear the next character.

Gallery - It should also be clean and simple. Two arrows, one small menu with the categories, and an interaction with the image to zoom it.

Besides being interactive and complex, the website should also be quick to load, of course it'll never be as quick as an ordinary website, but nevertheless I should think on the user side. For that almost all images will be vectorized, being the unique exception the blended texture layer applied on the background. The files should also be well organized and named.

I already have my own dominion. I just need to choose a good server host.

Start the website by downloading the project folder and running the index.html file.