Porfolio Development

Portfolio Development

UX/UI
Desktop
Mobile
XD
HTML
CSS
JS

I decided to integrate the development of the portfolio of my Projects shown, as I think it is a complete project, starting from the initial phase of the research and comes to an end with the development of the code.

Click here to see the full code on gitHub

Research

At this stage I looked for inspiration online, among other works, also taking into account my ideas and my development skills.

Path design and wireframe development

with clear ideas in mind I first decided which type of path to use, and then I started the first sketches of the site drawn by hand.

Mockup & Prototype

With all the wireframes ready, using Adobe XD, I designed all the pages, creating a prototype, also thinking about the animations.

Code development

Home

Inside the home, I inserted a visible menu and a photo of me, which with an animation moves to the left when you access the contact or about pages. To do this animation I had to do:

Insert Home-Contact-About in the same Index file, and insert an anchor for all of each.
Develop a show() function, which activates on body onload event, this function read the anchor on the URL and based on that, call the function openContact() or openAbout();
Develop openContact() and openAbout() functions that remove the home and insert the right page.
Develop openContactHome() and openAboutHome() functions which do the same things od openContact() and openAbout() but they add the photo animation.
Develop turnHome() function which read on the URL the anchor, remove the right section and add the home page and photo animation.

Contact

On the contact page, I wanted to show 2 links to reach me on social networks and a form to send me an email. At first I developed this module by writing a PHP file, but when I found out that tools like GitHub.io and Netlify do not support dynamic code, I switched to using the module tool present on Netlify.

About

Inside the about page I inserted a little description of me, and alo I inserted a link to contact page, and another to download my cv

Projects list

Within this page I have included a list of my best projects, of each of these, I wanted to show the name of the project, the list of tags, a small description and a main image that changes with the hover effect.

Single project page

For each project I maked a single project page, where I described the all phases of this, I wanted to show this phases, one for page using a scroll effect. To do the scroll effect and the other animations I used and edited the fullpage library.

Tool used

Adobe XD

to design, make animation and prototyping

Visual Studio Code

To code