Inspiring

Answered

Developing a portfolio site

Forum|Forum|3 years ago
April 25, 2022
5 replies
702 views

Hello,

I could use some help on creating the title page of my portfolio site. DW is fairly new to me.

As you can see on my PS draft, I want to have the nav on the left side of the screen, with the an illustration on the right. I assume that I would be using the Inline-block decloration quite a bit. Is that correct?

The biggest question I have is how to go about including my arm/hand, since it covers the nav area, as well as the image. I really have no idea on how to go about that. Any advice would be much appreciated.

Matthew

This topic has been closed for replies.

Correct answer Nancy OShea

Images are just eye candy. Don't put too much importance on them -- you can and probably will change them later. Images are a distant second consideration to quality content, functionality and good usability on ALL devices.

The first impression people of have your site is often what they see on search engines (plain text only).

For responsive design ideas, below are examples built with Bootstrap framework.

https://themes.getbootstrap.com/

O

osgood_

Legend

Is this the complete homepage?

If so make your arm/hand a transparent png image then overlay it across the 2 columns, 1 column containing your side navigation, the other column your main image as a background image. That then gives you the option to reposition the elements for smaller screen mobile devices.

You could use css Grid or Flex for the 2 column layout and then position the arm/hand in another container absolutely positioned at the bottom/left of the screen or as Ben suggested overlay the container housing the arm/hand using css Grid 'layering' but its going to be simpler just to use an absolutely positioned container.

T

Trains1985Author

Inspiring

Yes, Osgood; it would be most likely the very similar to the final Homepage.

I already have a portfolio site, hosted by Weebly, that I increasingly dislike. I encourage you to visit it, www.matthewjablonski.com. All of my work was done using .AI. Creating a from-scrach website is a multi-year endeaver task for me that I have already spent huge time investments on it, that greatfully have learned invaluable facts, that I would not know otherwise.

Anyway, I think my idea of showing how can I transform photos into renditions has an enormous potential to it. I now need to think of how to show those qualities in a more efficant, unifide form. Nancy's note about of how thinking in a FUNCTION-OVER-FORM outllook is so vital is something I cannot agree with enough (Thank you, Nancy!).

Any additional comments/questions are highly welcomed!

Matthew

B

Ben M

Community Expert

First off, really nice work and I know my kids would love it too since they are really into trains.

That aside. The biggest thing missing for me is the disconnect of you in the design. Even if your proposed update, I would reconsider your logo and toss around a few ideas to better connect the digital illustration with the photography. While you do photography, the camera lens of color feels generic to an extent based on the overall portfolio of work that you have of the transformation to digital art.

To the earlier point of inspiration, I would also recommend browsing through Adobe's Behance ( https://www.behance.net ) or dribbble ( https://dribbble.com ). To the site Nancy pointed out sometimes its about seeing potential in a design functionally that you can style to your liking. For instance, in a quick browsing this one ( https://themes.getbootstrap.com/preview/?theme_id=55961 ) while simplistic, could feature your work nicely if styled to match your identity.

T

Trains1985Author

Inspiring

All great questions and recommendations.

To be up front about it, I would prefer to learn to code over having everything magically appear, because I can see that fully understanding it would pay itself off - in the long run. Am I correct in thinking that including my hand adds a whole new element of sophistication? What about omitting it?

To answer Nancy's question of seeing it on smaller devices, that is something I've given a lot of thought about. I think that I have quite a few options here that I have not fully put on paper (as of now).

Matthew

Nancy OShea

Correct answer

Community Expert

Images are just eye candy. Don't put too much importance on them -- you can and probably will change them later. Images are a distant second consideration to quality content, functionality and good usability on ALL devices.

The first impression people of have your site is often what they see on search engines (plain text only).

For responsive design ideas, below are examples built with Bootstrap framework.

https://themes.getbootstrap.com/

Nancy O'Shea— Product User & Community Expert

B

Ben M

Community Expert

I would second for learning the CSS grid, or at a minimum bootstrap to help you in this layout. Depending on your level of expertise and how much you want to go down the path of learning to code, you may want to consider purchasing a template that accomplishes the overall look and feel and then insert your imagery into the site. Moving from print layout to web layout is not always as simple as it seems, for instance, on mobile how would you expect this page to display?

Nancy OShea

Community Expert

You've shown us a desktop comp. But how do you envision this working on mobile and tablet devices that have far less real estate?

Can you show us your PS comps for those devices?

Nancy O'Shea— Product User & Community Expert

BenPleysier

Community Expert

No! No inline blocks. Instead use CSS Grid for the layout. CSS Grid can also be used for layering which will come in handy for your arm.

See https://learncssgrid.com/#layering-grid-items for more.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded