DESIGNER - UI & UX Designers Portfolio HTML Templa

The Designer is a professional HTML portfolio template what build specially for designers. It builds on all modern web technologies and it has 3 different versions you could use which one is fit for you. With self-hosted/custom version you could host any project you want. With Behance version, you could showcase your Behance portfolio using BEHANCE API. With Dribbble version you could show your Dirbbble portfolio using DRIBBLE API. Use this template to show the world about your creativity and get hired.

Stracture

HTML Structure

Every section start with a comment like this:

<!-- ========== Section Name start ========== -->
Some HTML codes for this section
<!-- ========== Section Name end ========== -->

 

CSS structure

Every point of CSS content you will find start with a comment like this:

/*  ----------------------------------------------------

#. CSS point name

-------------------------------------------------------- */

some CSS codes here

 

JS structure

Every point of JS content you will find start with comments like below in app.js file under js folder.

It's comes with two diffrent codes stracture.

/* =================================

   # JQUERY FUNCTION METHOD

=================================== */

/******************** # Javascript point name ********************/

 

General

Font family:

All fonts used from <a href="https://fonts.google.com/">google web font </a>directory. We used it by import in <strong>css/style.css</strong> file. There called 2 fonts as like below structure. You could change these fonts very easily. Follow google web font document <a href="https://developers.google.com/fonts/docs/getting_started">here </a>to see how to do.

/*  ----------------------------------------------------

1. IMPORT GOOGLE FONTS

-------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i');

General fonts style

All general typography used in css/style.css file. You can manage them easily. Every code organized and commented very nicely.

Logo text

You can change current logo text to your own text. See image below: 

Custom portfolio

If you wish to use custom portfolio you could use custom.html file. You can add per project there and link it. Here is the screenshot for better understand. 

Behance portfolio

If you want to show Behance portfolio it's in behance.html file. You have to set API at first for automatically embed the portfolio items from your Behance portfolio. Go https://www.behance.net/dev and register an app with the information they need. Then you will get an API key. Take the API key and open behance.js file into our HTML files js folder. Open that file in your text editor and at first add your username in beUsername parameters semicolons and put API key into beApiKey. You could set per page how many posts you want to show. 

The screenshot where you could put username and API key to show your Behance posts. 

Dribbble portfolio

If you want to show Behance portfolio it's in dribbble.html file. You have to set access Token at first for automatically embed the portfolio items from your Dribbble portfolio. Go http://developer.dribbble.com/ and register an app with the information they need. Then you will get an access Token. Take the access Token and open behance.js file into our HTML files js folder. Open that file in your text editor and at first add your access Token in setToken parameters semicolons and put userId into userId. You could set per page how many posts you want to show. 

The screenshot where you could put Dribbble access Token and set the username to show Dribbble posts:

Contact form

Manage contact form:

The contact for we used is totally dynamic. It's working with some ajax and php. You can receive e-mails from your customer. You need to adjust something to work it with you e-mail address. Just go php folder and open sendmail.php file in your text editor. Replace yourmail@gmail.com with your own email address. See screenshot below:

Support

Support:

If you need to know anything else don't hesitate to ask us by our <a href="https://themeforest.net/user/themeatelier">ThemeForest profile</a> or our email thmeatelierbd@gmail.com.

Credit:

The whole web community.