Joseph Danny

Back

This Portfolio (2021)

UX Website Design Website Development

I take pride in how I present my work, so I use my portfolio to show my love of layout, minimalism, photography, typography, and unobtrusive design. For this version of my portfolio I show both commercial and personal work.

Responsibilities

  • Design
  • Development (CSS, HTML, jQuery)
  • UX

Tools

  • Illustrator
  • Photoshop
  • SketchBook Pro
  • Sublime Text

Milestones / Process

Sketch

Initially, I wanted to create a home page that would feature up to six case studies of my work. (In Google's "Design Portfolio Tips" document they recommend three to five case studies.) But I also envisioned a scalable page that would accommodate a higher number in case I decided to add more. (Something likely to happen.)

Home page sketch

Home page sketch

Wireframes

It didn't take long for me to change the home page from a 100% full width three column configuration more narrow. With screen resolutions now at crazy widths, reducing the main content area from 100% to 50–60% would make it more legible on larger screens. (The responsive styles switch this to 100% on smaller resolutions.)

I created wireframes for critical pages: The home page; project details page; and an internal, text-based page. The rest of the pages would likely be derivatives of those pages, as I wanted to keep the site simple and not take away from the work I was thinking of displaying.

Home page wireframe

Home page wireframe

Project details page wireframe

Project details page wireframe

Internal, text-based page wireframe

Internal, text-based page wireframe

Code

While I'll create sketches and wireframes for how I think I want the portfolio to look, I flesh out the majority of its characteristics while working on the code and design simultaneously. This lets me experiment wildly with layouts, styling, and coding methodologies without worrying if I'm adhering to any particular sketch, wireframe, or requirements list.

I wrote the pages in HTML and CSS, along with a few basic jQuery functions. The CSS is parsed from an SCSS file written in BEM form, divided into sections: Theme (i.e., variables at top), Base / Defaults, Utility, Layout, Components, Standalone, and Responsive Styles.

001 /*Colors*/
002 $color-arrowBack: #c5114c;
003 $color-arrowBreadcrumb: #ccc;
004
005 $color-bg: #fff;
006
007 $color-border: #ccc;
008 $color-borderHover: #c5114c;
009
010 $color-btn: #fcd9e5;
011 $color-bullet: #c511a7;
012
013 $color-linkDefault: #c5114c;
014 $color-linkDefaultHover: #000;
015 $color-linkHome: #c5114c;



195 /*--------------------------------------------------*/
196 /*Layout*/
197 /*--------------------------------------------------*/
198 .footer {
199 box-sizing: border-box;
200 height: 70px;
201 margin-bottom: 50px;
202 padding: 10px 50px;
203 width: 100%;
204
205 &--home {
206 bottom: 0;
207 margin-bottom: 0;
208 position: fixed;
209 }
210
211 &__text {
212 color: $color-textFooterCopy;
213 font-size: $fontSize-Base;
214 line-height: 50px;
215 }
216 }
217
218 .header {
219 align-items: center;
220 box-sizing: border-box;
221 display: flex;
222 height: 100px;
223 padding-left: 50px;
224 padding-right: 50px;
225 position: sticky;
226 top: 0;
227 width: 100%;
228 z-index: 999;
229
230 &__site-logo {
231 display: block;
232 height: 50px;
233 left: calc(50% - 25px);
234 position: absolute;
235 width: 50px;
236
237 img {
238 height: 100%;
239 width: auto;
240 }
241 }
242
243 &__site-name {
244 float: left;
245 font-family: $fontFam-Header;
246 font-size: $fontSize-Base * .875;
247 font-weight: 400;
248 letter-spacing: 5px;
249 text-transform: uppercase;
250 width: auto;
251 }
252 }



582 /*--------------------------------------------------*/
583 /*Standalone*/
584 /*--------------------------------------------------*/
585 .arrow {
586 border-bottom: 5px solid transparent;
587 border-left: 5px solid $color-arrowBreadcrumb;
588 border-top: 5px solid transparent;
589 display: inline-block;
590 margin-left: 5px;
591 margin-right: 5px;
592
593 &--back {
594 border-left: none;
595 border-right: 5px solid $color-arrowBack;
596 margin-left: 0;
597 }
598 }
599
600 .branch {
601 border-right: 1px solid $color-border;
602 display: inline-block;
603 height: 50px;
604 margin: 10px auto 20px;
605 width: 1px;
606 }
607
608 .btn {
609 background: $color-btn;
610 border-radius: 10px;
611 padding: 0 10px;
612 }

I alphabetize all of my properties so they're easier to maintain

Layout

For the home page, I usually waffle between showing recent work, featuring a single project, or just including a few words about myself. Another option, which is the one I used for this version, is to include a catchy (and not presumptuous) action statement related to my line of work.

I looked for fonts that were stylish, easy to read, and not distracting in any way. The home page and page titles use Transat ↗; the body copy uses a non-fussy Source Sans Pro ↗; and the header uses Soleil ↗, which stays crisp at smaller sizes.

The case study details page and each project-related landing page—Web, Logo, Icon, etc.—have their own distinct layouts influenced by the type of content being displayed.

Home page design

Home page design

Finished structure of a text-based page

Finished structure of a text-based page (e.g., About page ↗ )

Finished structure of a case study detail page

Finished structure of a case study detail page (e.g., "Wine Cards" case study details page ↗ )

Finished structure of Logo landing page

Finished structure of Logo landing page

Finished structure of a photography page

Finished structure of a photography page (e.g., "Food Photography" page ↗ )

Responsive Design

With responsive design being the norm now, I made sure my portfolio displayed well on as many devices as possible, from phones and tablets to desktops and laptops.

On future updates to this version of the portfolio, I plan to incorporate more animation, especially on the mobile side.

Testing the mobile navigation on an iPhone 6s

Testing the mobile navigation on an iPhone 6s

Testing pages on an iPhone 6s

Testing pages on an iPhone 6s

Testing pages on an iPad Pro

Testing pages on an iPad Pro