What do you guys think of my design?

I need a fresh pair of eyes to tell me what I should change on my portfolio.

Here's my portfolio page: DavidCardoso.org

Things I already know I have to work on:
*I'm totally aware I need to add thumbnails to the portfolio page to replace the full size images. I'll get that done soon.
*I'm currently using JQuery for the simple toggle animation of the navbar, and I will be converting that to raw Javascript momentarily.
*The homepage is a boring wall of text. I'll be adding images and other content later on.

Other than that, what do you guys think? I am working towards becoming a Web Developer in the future, and I want to know if my works are even worthy of a full-time position.

 

*** WARNING ***

I'm going to tell you exactly how I see it. I don't rap, I don't jive, I don't sugar coat things. You are about to get the Gordon Ramsey treatment. If you are a thin skinned wussy that can't handle ACTUAL criticism, just stop reading now!

I really don't think your sidebar warrants a scripted show/hide in the first place. The only reason to do that would be for small screen mobile, in which case you don't need scripting to implement that thanks to CSS3's "target" attribute, the only thing to do with scripting there being to override the anchor so it doesn't fill up the history.

The background image is STILL a bit too bright to read the white text clearly. Generally speaking that's why having images behind text is accessibility trash -- in addition to being and utter and complete waste of bandwidth.

The small footer-like text in your sidebar is FAR below accessibility minimums. This is semi-acceptable as it's not exactly important stuff, but it's still something I wouldn't do given what's available to us for modern layout methods. (only reason I used to do it was for the OLD 100% min-height layout methods pre flex-box)

Your document structure is pure gibberish. You've got three H1 which makes no sense whatsoever... (since a H1 is the heading under which EVERYTHING on the page is subsections) and multiple H5 when there are no H4, H3 or H2 for those to indicate being the start of subsections of. This screws up keyboard accessibility much less what braille readers or screen readers would make of that.

ALSO not a big fan of the sticky header and fixed sidebar -- waste of screen space that could be better leverage to show what's important, your CONTENT. As a USER of websites I just hate it when designs do that.

I also HATE that stupid malfing "open sans" webfont since it renders like ass on Winblows or Linsux, particularly since it kerns like a sweetly retarded rhesis monkey on crack. (The whole reason I can't use linux as a desktop OS in the first place, I'd sooner eat a bullet than deal with what Freetype has the cojones to call kerning). It's so close to "segoe ui" I'd probably say screw it and just use that instead of the goofy bandwidth wasting webfont crap. (NOT a fan)

Your layout concept is remarkably clean and simple - that's a good thing... but it leaves me wondering what the blazes it needs 700k in 17 separate files for? Admittedly the steaming pile of manure known as jquery has a lot to do with that, as does the massive background that I'd NEVER put on a website in the first place... but even just the markup; you've got 3.25k of plaintext and NOTHING I'd even consider being a content image (so there should be no IMG tags) so what's it got 10k of markup for?

Popping the bonnet to actually look at the code... bandwidth wasting comment asshattery BEFORE the doctype, great way to get the doctype ignored. HTML 4 charset declaration in a 5 document, META like AUTHOR that nothing gives a flying purple fish about, keywords with little if any relevance to the page content, garbage viewport META that breaks zooming on non-desktop systems (WAY to piss off users), png favicon so kiss off legacy support, no media targets on the stylesheet LINK, invalid placement of the GA script in the HEAD...

... and that's before we even get into the BODY. GIBBERISH use of two H1 for ONE heading, (this is NOT two separate documents), abuse of INPUT tags outside of forms (since technically they have no business outside of a form since they are "form elements"), endless pointless DIV for christmas only knows what, endless pointless ID's for christmas only knows what, double breaks doing paragraph's job, single breaks doing padding's job, again H5 where they make no sense whatsoever (lemme guess, you chose them based on their appearance and not their meaning?), and some form of "overlay" DIV that almost look like they are doing RGBA or generated content's job. (at least on modern browsers. Legacy browsers don't get the transparency, OH WELL).

Of course your comment says this started life as a PSD, and that explains why it's an accessibility train wreck of scripttardery and gibberish HTML. As I've said many times I've rarely if ever seen a website that started out with someone dicking around in Photoshop that was worth a flying purple fish. That's putting the cart before the horse and a completely back-assward way of developing a website.

Hence why what you have is ENTIRELY what I expect from people who view photoshop as an actual design tool, and brackets as actually being practical for web development... and no, that's not a good thing.

Basically, the page reeks of having been built design first, content later -- and it's paying for it with a lack of graceful degradation, little if anything resembling document structure, massive page bloat, yada, yada, yada.

... and that's just the home page, I didn't dig deeper; but given how blasted long that profile page takes to load, well... have you heard of thumbnails?

 

At some point I want to be a professional so yeah I definitely need the criticism. Thanks for the help.

Well my aim was to kinda follow what some modern sites do like this example (http://bjoernmeier.com/) that places an image behind white text with a dark overlay. I thought it would make it look modern. But yeah I also want to achieve extremely low load times, so I might change this. Yeah JQuery is definitely adding to the size of this site for something as simple as a navbar toggle so I'm going to try to switch that up.

As far as the structure of the HTML is concerned, I specifically styled the heading tags for specific font sizes, I didn't think it would mess up the code's structure. I'm pretty sure that you can place the GA script liberally in your source, but preferably in the head so it fires immediately. Not sure whats the problem with a PNG favicon is, it shows on every device I tested on (iPhone, Android, an HP Stream 7 tablet, and various PC's and browsers). I intended to break the zoom with meta. I don't really want to change this, since there isn't much to zoom into anyways. I definitely agree that I have to avoid having <br> tags in my code. You are definitely right about the overlay. I can just make the image darker to begin with for compatibility. I'm going to style the footer contact information, I agree its too small compared to the rest of the pages typography.

I like the layout, I don't really want to change it. In my personal opinion, I enjoy having a navbar on the left. If a user wants to view the content, they can freely minimize it at will so it shouldn't be an issue. I think you might have a personal bias towards it, but I just really enjoy having a navbar on the left. Same goes for the sticky header.

For the design process, I'm not sure how else people would design a webpage. You come up with a basic design on paper (if you'd like), come up with a way to bring the pages together. Then design the page as a .psd to give you a blueprint of what its supposed to look like. Then develop it in the editor of your choice (Whether it be Sublime or Brackets). I thought that was the industry standard way of doing it. What other development process do you have in mind?

All in all, thanks for your criticism. I would like to enter the industry one day, and I need to understand what my weaknesses are.

 

Poster child for everything WRONG with the artsy fartsy garbage people call "design" today. That page is such a train wreck of how NOT to build a website, there's nothing there I'd even consider trying to emulate.

I mean it starts out as a useless splash page, with "narrow glyph" fonts over an image in illegible contrasts -- double whammy of "useless artist crap" -- It's got that parallax scrolling asshattery that just chews on mobile battery and makes the entire site a useless train wreck at ANY size -- quite literally what happens when some "artists" thinks they know anything about "design", when terms like "accessibility" or "usability" would result in the creator going "what's that?"

Changing the sizes from the CSS is fine and has no impact on the structure -- but you have to HAVE that structure in the first point.

Just as in professional writing, headings are numbered with levels for a REASON. A H1 is the start of a document and the heading under which EVERYTHING on the page is a subsection, that's why when possible it should be your first CDATA containing semantic tag. Just like on a newspaper or book, how the top of every page or fold-pair is the title of that paper or book. Just how on a term paper you should have the title of the paper in that top corner. Same thing.

An H2 indicates the start of a subsection of the H1. H3's indicate the start of subsections of the h2 before them, and so forth -- These tags do NOT mean "text in different sizes" even if that's the default behavior. Likewise an HR (horizontal rule) indicates a change in topic or subject where heading text is unwanted/unwarranted, typically treated as level equivalent to a H2. It does NOT mean "draw a line across the screen" no matter how many people incorrectly use it as such.

Your markup is about saying what things ARE. "This is a paragraph", "This is a list", "This is a heading indicating substructure".

There's a handy tool in the "Web developer toolbar extension" for Firefox called "Document outline" -- we pull that up for your site:



See those missing headings? See the multiple H1 that are not the starts of SEPARATE documents? That's a problem.

See, not all users are sighted, not all user agents are intended for people with vision, and that's why starting out -- PARTICULARLY with your HTML -- on what the page is going to look like, most always results in sites that are broken or have accessibility failings. It can even impact search since, well... think about it; Search engines don't have eyeballs. (which is why Layout means jack **** to search too no matter what some SEO scam artists out there might try to tell you with their made-up fairy tales)

"Web Developer/davidcardoso" should be a SINGLE h1. Contact would be a H2, and since "My workflow" and "current projects" are NOT subsections of "contact" they too would be H2.

In the same way this:

                <p>
                   I'm a web developer and an FAU student based in Coconut Creek, Florida. I have over 3 years in web-related experience
                   with 2 roles in E-commerce storefronts. I've been doing work for clients over the last 5 years, and can provide web development
                   services to give your business an online presence. I can give clients: Responsive design, high compatibility, intuitive user-friendly experiences,
                   e-Commerce storefronts, and WordPress sites.
                   <br>
                   <br>
                   Take time to browse my portfolio and resumé. Feel free to contact me if your interested in my services.
                   If your a fellow developer, take some time to check out the source of this site on my <a href="http://github.com/tinman47">Github</a> along with my other projects. 
                </p>
                <br>

Code (markup):

Is gibberish nonsense. Those are MULTIPLE separate paragraphs, so end the bloody paragraph.

		<p>
			I'm a web developer and an FAU student based in Coconut Creek, Florida. I have over 3 years in web-related experience with 2 roles in E-commerce storefronts. I've been doing work for clients over the last 5 years, and can provide web development services to give your business an online presence. I can give clients: Responsive design, high compatibility, intuitive user-friendly experiences, e-Commerce storefronts, and WordPress sites.
		</p><p>
			Take time to browse my portfolio and resumé. Feel free to contact me if your interested in my services. If your a fellow developer, take some time to check out the source of this site on my <a href="http://github.com/tinman47">Github</a> along with my other projects. 
		</p>

Code (markup):

You want that gap after the last paragraph or between them, that's MARGIN's job. Paragraphs job is to mark up your GRAMMATICAL Paragraphs. That double-break makes it pretty darned clear that's NOT a single paragraph! That's two paragraphs, MARK THEM UP THAT WAY!

Semantics done properly is pretty simple - so long as you start with content instead of trying to shoe-horn content into an already built layout.

(Admittedly a lot of halfwit garbage like WYSIWYGs or preview panes will let you enter broken gibberish like that -- don't let them!)

Actually in the head fires LATER than in the body, sometimes failing to even load until after domdocumentready -- this can cause real headaches as in some legacy browsers it actually outputs markup or modifies the DOM, neither should be done until the DOM is loaded which means the best place for that script is right before </body>

NOT that I believe in using GA since it's bloated crap that anything USEFUL it provides you should be able to glean from your server logs with tools like analog or webalizer -- anything not provided by those tools typically being marketing scam artist bullshit used to let SEO hoodoo-voodoo witch doctors try and make their tissue of lies sound legitimate.

That's why I don't put that pile of crap on sites in the first place -- PARTICULARLY with Google Webmaster having gone from being useful stuff to just more advertising and marketing sleaze. (See PageSpeed which has gone all noodle-doodle since they added their "service" scam to it")

IE8/earlier doesn't like it, and some modern browsers won't record it or show it on tabs. (though that's increasingly rare stuff like Blazer or bleeding edge "tech previews" like Vivaldi)

WHY? What POSSIBLE reason could you have to piss all over accessibility? I've been seeing more and more people pulling that asshat stunt and I don't know who introduced it or is promoting it, but my size 9 boot is shined up real nice, sitting on it's side, more than ready to deliver an enema to someone's candied ass over this.

It's not about not having them, it's about using them for what they are for -- breaking up NON-paragraph content.

take this section:

            <!-- Add my contact information -->
            <div class="contactinfo-wrapper">
                <h1 id="contactinfo-header">Contact</h1>
                <p id="contactinfo-message">If you would like more information on my work, or a proposal request for my services, feel free to contact me.</p>
                <p id="contactinfo-phone">954.790.8054</p>
                <p id="contactinfo-email">davidcardoso93@gmail.com</p>
            </div>

Code (markup):

You have a perfectly good id, "contactInfo", what do you need the pointless comment for? Again, no reason for that to be a H1 it's not a new document/page. NO reason for ANY of those to have ID's on them when there's a perfectly good wrapping DIV, and what makes a phone number or e-mail address a grammatical paragraph? Markup is NOT typography, it's GRAMMAR. Those are just fragments...

That's why if I wrote that same section...

	<div id="contactInfo">
		<h2>Contact</h2>
		<p>
			If you would like more information on my work, or a proposal request for my services, feel free to contact me.
		</p>
		954.790.8054<br>
		davidcardoso93@gmail.com
	<!-- #contactInfo --></div>

Code (markup):

I like to have a comment to say what's being closed when it's a major DIV section. I put the comment before the close as comments (yes, the things browsers are supposed to ignore) between positioned, floated or other modified elements can trip rendering bugs in legacy IE and some builds of Firefox (and other Gecko based browsers).

H2 since it's the start of a major page subsection under the H1, paragraph because, well, a "complete thought" sentence qualifies as a GRAMMATICAL paragraph -- and then the two fragements don't really need anything extra so just use a BR between them as a delimiter.

Or use RGBA to set an alpha transparency, or use generated content instead of elements in the markup. PERSONALLY since I'd have a logical document order so the "footer" sidebar stuff would be AFTER the content (which might mean I'd never have a layout like that in the first place, though it's certainly possible to implement) I would probably be using "content first" or "menu>content>footer" column methods, meaning I could leverage box-shadow or even border to implement that.

Except that scripting off it's nonsense, and it's NOT really a useful way of doing things on mobile.

Small-screen wise that whole scripttard swap thing I would't even bother with. You've got a title and THREE menu items. Whoopedee doo... Just show those before the content and put the footer after. That's more compatible with logical document structure in the first place.

THOUGH -- that's why you do NOT see a lot of successful websites pulling those types of stunts; it's usually limited to artsy "designer" sites that are useless to anyone who isn't a designer. It's like something I went through about seven or eight years ago with a client who was DETERMINED to use this illegible green on black, because "It's the perfect branding, nobody else is using it" -- without asking the all important question "WHY isn't anybody using it?"

Well, lemme outline the process I use. It's called progressive enhacnement, and puts content and useability AHEAD of the goofy for screen artsy fartsy nonsense that quite possible will have nothign to do with what users will get anyways.

There is no "design on paper" or goofy dicking around in Photoshop to make a pretty picture and then CALL it design (when it clearly is not).

Step 1) Take your content or a reasonable facsimile of future content and put it into a flat text editor as if HTML, CSS, JS or anything else doesn't even EXIST!

Step 2) Mark up that content SEMANTICALLY -- Semantic markup being a sick euphemism for "using HTML properly". It means say what things ARE, or would be in a professionally written document. (hence why <b> and <i> are NOT presentational tags! You're not emphasizing a book title or adding "more emphasis" to a company name.)

Because this is the semantic markup step, semantically neutral tags (aka tags that do NOT change the meaning of their content) like DIV and SPAN have NO business being added to the markup at this step.

Also since HR and numbered headings break the page into sections with meaning, and should be leveraged by user agents for accessibility navigation, that's why I say HTML 5's SECTION, NAV, ARTICLE, HEADER and FOOTER tags are pointless code bloat and re-introduces redundancies HTML 4.0 STRICT was trying to get rid of!

Step 3) Create the first of the screen media layouts. First off, making sure that the <link> has target="screen,projection,tv" since some devices and browsers will report the latter two... even if for some jacktard reason they up and decided the pointless HTML 5 validation will throw an error on them. Crazy me, I thought media targets were supposed to be extensible by UA vendors, and not a fixed list.

It's best for that first layout to be the lowest common denominator that you then extend with media queries to make it responsive. A LOT of people seem to have tricked themselves into thinking that means mobile/small screen -- but that's what we CAN target with media queries so how in blazes does that make any sense as the starting point -- aka what should load if media queries AREN'T working? As such my starting point is legacy desktop browsers, aka IE8/earlier.

Said starting layout should use dynamic fonts (measured in EM's), elastic layout (any widths, padddings or other sizes measured in EM's) AND semi-fluid restriction. (min-width to prevent breakage, max-width to prevent long lines from being hard to read).

That layout then gets columns added or stripped off for different screen sizes or any other adjustments as needed with media queries to make it responsive. I do NOT base those breakpoints on some 'device' or specific resolutions as I set these too in EM's. That way it scales to the system metric or browser preference, and not some arbitrary pixel size that may or may not have anything to do with the needs of the content or the user. The values used being based entirely on adjusting "when the layout breaks"...

Which plays to the whole philosophy -- content dictates the markup, content and markup dictates the layout.

Then and only once I have the screen layout working and responsive would I go back to do a paintover with images, colours, backgrounds, etc. For the most part IMHO

Step 4) Create layouts and style for OTHER media targets. Typically the only one I do here is print, and for that I usually hide things that serve no purpose like menus to keep it simple. Sometimes the default markup appearance as browsers try to print it is more useful than anything you could design anyways.

Step 5) Enhance the page with scripting if desired. If you can't make your layout without scripting at least WORK, you're doing something wrong or just pissing off users. Aka, the "unwritten rule of JavaScript":

If you can't make a usable page without JavaScript FIRST, you likely have no business adding JavaScript to it!

A lesson lost on most of the hair-brained nitwits vomiting up jQuery train wrecks these days.

--------------------------------

That whole process is called "progressive enhancement" and it means as the fancy bits of tech go missing like CSS, JavaScript -- or even HTML -- the page will still deliver the content in a usable manner. The pinnacle of accessibility and the entire reason HTML even exists! That ability to handle things being missing or failing to work is called "Graceful degradation". CSS3 is built around graceful degradation in terms of older browser support -- old browsers don't get rounded corners, box shadows or webfonts, who gives ****? Even CSS font stacks are graceful degradation -- the perfect font you want doesn't exist, try the next, then the next, then drop through to the fallback-family.

... and yes, when you said this about PSD first:

You're not wrong... Sadly... You have to remember just because something is popular that doesn't make it good, or right. At the moment web development is FILLED with sleazeball scam artists and people running their mouths about design and development who don't know the first damned thing about HTML, CSS, accessibility, emissive colourspace, or any of the dozens of other things a website developer should actually understand. Just look at the endless horde of snake oil peddlers at the various template whorehouses like ThemeForest or TemplateMonster.

Now mind you, you can make REALLY GOOD money being a fly-by-night sleazeball scam artist; but you can make even BETTER money if you dot every i and cross every t.

But worse, is the number of users that will just flat out bounce off the inaccessible broken train wrecks that dicking around with PSD's and calling it "design" results in. Simple fact is that given the COMPLETE lack of the most basic of technical knowledge needed to be an ACTUAL designer common to the PSD jockey, the result is NOT a website, it's ART.

... and it doesn't matter how pretty it is if it actively gets in the way of users getting to your content, or search engines making sense of it to drive users to you.

Think of it this way; PSD first is your typical auto-tuned pop star that is such a flash in the pan they make one-hit-wonders look like mainstays. A "content first" site is like the White Album, people keep coming back year after year buying it again every time there's a new media format.

PSD first == Beyonce, Content First == Beck? No, that would make Adobe be Kanye, and that makes WAY too much sense.

 

Deathshadow comes with a warning now

*Parental discretion is advised*