WilliamsGraphics

I think for what you're hoping to get out of your site, it looks absolutely fine. If you're looking to make some changes to the typefaces and don't want a whole lot of hassle, you can check out a great library of free, easy to use and high-quality typefaces over at https://www.google.com/fonts. Integrating them into your site should be an easy task.
 
As for which typefaces to use, you can use one, or two (one for headings and one for body). I like Lato and Merriweather, but for you, you may be best to go with something like Roboto Slab and Roboto.

For what you're after, wordpress is what I would recommend. I don't get where this annoying misconception keeps coming from that wordpress strips you of all control and design freedom in exchange for a CMS framework, it simply isn't true.
 
Wordpress will only limit you as much as your knowledge of how it works and your own design skills. My website is built on wordpress, for example.
 
You will need to look into the best solution for you, but if you're just a novice, does programming your own php login and MySQL database sound like something you'll want to attempt? You're right, wordpress isn't great for everything, and I'm sure lots of snooty web developers will come along and let you know how bloated it is and how its category system sucks, but generally speaking, you wont find any better support or wealth of plugins to quickly achieve what you're after (in my opinion) than with wordpress as your CMS.

Sounds like you may be able to do it yourself. If you've got the skills, there is a very handy plugin (Advance Custom Fields 5 PRO) that makes the nitty-gritty of custom fields an absolute joy to work with. This may help you manage if you've build your site with this in mind from the beginning.
 
Depending on how professional you'll want to seem though, a wordpress login panel isn't going to look the best for customers to be logged in to. It seems like you may need to look into creating a whole account panel for users to submit to the database which is a little above my expertise.

Round, outlined shapes are coming in I think. By that I mean, we're transitioning through what I believe to be the "flat-and-square" design trend into more rounded rectangles and transparent elements.
 
And you could take a look at modern 2015 colour pallets: http://www.elledecor.com/design-decorate/color/2015-pantone-color-of-year#slide-17
 
They're a bit of self-fulfilling prophecy since they just say "this is what is going to be in next year", and because they do it a few months in advance and most people will be interested in being fashionable, the colours generally do tend to show up.

Use a CMS. There are plenty out there and should be very easy to integrate into your site, depending which one you go for. Unfortunately for you I don't have any recommendations for what you're after since anything I could suggest would be massive overkill just to change some tables.
 
Search for a lightweight CMS that dosen't rely on a database (I feel like I've seen one somewhere before) and then follow the documentation to integrate it to your designs.

That's a really nice site. The tools used to create it are simple to use, but putting it all together is something else.

They're making good use of Skrollr and Transit
 
The landscape / garden effect at the top and bottom of the page are .png images stacked on top of each other moving at different speeds on scroll.

The vector graphics that are animated are .svg files created in Illustrator.
These again, are animated as you scroll down the page. (very basic example of svg animation with Skrollr).
 
The portfolio pieces are just video files.

Take a look at these..

http://css-tricks.com/svg-line-animation-works/
http://24ways.org/2013/animating-vectors-with-svg/

..and do a search for svg animation and parallax effects.

Good luck.

@@trapGOD - Yes, using the code inspector in chrome (F12) or any other code inspector in any other browser, I can see that flex is working as intended, but you've simply made a background colour mistake.
 
The Flex stretch will only apply to the child divs that are a step down from it. So where you've got your row, and then in that row you have your COL-MD-3 and COL-MD-9, those are being stretched evenly in height. But in your example, you then have in your sidebar "secondary" div with the background colour applied. You also seem to be styling COl-MD-3 with a white background. Style it with the grey background selector instead and you'll see results.
 
Edit: If this dosen't make sense, let me know and I'll see if I can rephrase it. And if you've found what I've said useful, please like, follow, and +1 where you can on my business pages

Haha, I encourage you to conduct your own research first using analytics or something similar, but regarding "price tagline" vs "just tagline" my analytics let me know the following:

Probability of Outperforming Original: 98.2%

When coding for wordpress themes, my general advice is to create a website as if you were a standard static html site, then after that you can reverse engineer it into a wordpress theme. Once you've done this a few times, you'll be able to create themes as you go and generally you'll be a bit quicker.
 
For responsive layouts, try looking into a css framework like bootstrap or foundation. Both are good choices, but you're not just limited to those two. Stick with one (and don't mix the two up) and you'll be making responsive sites in no time.
 
Though if I were a customer, I'd find it a little bit deceiving that you're hosting your portfolio on a website that you didn't build. Your best bet it to remake your portfolio site using your skills and refine it whenever you get the chance. It'll be the showcase of your skills which sets the bar for the type of quality you can produce, as well as attracting the right type of customers.

Flexbox (as suggested above) may not be the best tool for you to use for such simple requirements. Instead you could try building your site with CSS media queries. Imagine if your images are in a row on a large screen device and their width is 33% on inline-block, then when your CSS detects a smaller screen width they change to width 100% and display:block, or something similar.
 
This is how larger framework packages deal with responsive design. Alternatively, if you don't want to spend time developing a custom framework from scratch every time you start a site, just use Bootstrap3 or Foundation5 and learn how their systems work.
 
The flex model has uses but in my experience, the cross-platform compatibility (mostly with apple devices) is more trouble than its worth at the time of writing.

Sites like Fiverr, E-Lance, and other sites with a similar concept are what is basically dropping out the value in the design profession. People who are uneducated in the ways of design and the internet will simply see a price difference and not a whole lot else.
 
You can be familiar with code and still have no clue on how to create a good looking or functional design. If it's code that's your passion, try web development instead of design. That involves working with php and some other complicated web languages to make web-rich applications in a rapidly expanding market. You've only got to look on awwwards.com to see that all the top sites are coded in partnership with some very talented web developers.
 
Don't go on those work-auction sites, you'll only get abused and under valued and you'll simply be adding to the problem facing the industry.
 
Instead, get your skills to a level where you can justify a reasonable price to clients. If you're putting logo design work on fiverr for example, we know that what you're producing is worthless.
 
You can earn money online (without having to track down clients) by creating themes for different opensource platforms. If you're any good, you can make wordpress themes, prestashop themes, woo-commerce themes (same as wordpress, sort of) and then sell them.
 
Outside of that, work on a portfolio, get it online and get seen.

After looking at your pdf, it seems like you're trying to present tabular data without a table. It seems a little crazy to me.
 
To speed things along for you , you're going to need 23 rows (22 for data, 1 for the title) and what looks like 4 columns. Make it up in InDesign and give it some visual flare, then export as a PDF. It'll instantly become more readable and professional.
 
The more industrial and labour intensive work-sector is notoriously bad for presenting themselves, and a little bit of investment in your appearance will go a long way to getting you a more professional look and instant credibility. I should know, I used to work as a graphic designer/website designer in the access-hatch industry and I really blew away their cobwebs and got them more business by revolutionising their e-shots, brochures and flyers.
 
I know you're probably trying to save money by doing some of these jobs yourself, or it might not be in the budget, but I highly recommend you look into professional services to deal with this stuff until your skills are up to par. The extra space you gave your body text that I suggested you achieved with a blank <p> tag. This is poor practise and should really have been done with a simple (and site-wide) CSS modification of padding. Using EMs, you could have (possibly, this is just a guess) just added this to your CSS and solved the problem:
 
.columns{padding:1.5em 0;} If you are looking for help in either graphic design or website design from a professional, I offer both services at reasonable prices.

I don't see any chart on that link, but what I do see is: 2012 Stone Doctor which is giving a negative impression. You could also give your content a bit more padding and breathing room for the eye, titles and content don't seem to have much space around the tops and bottoms.

Site link is broken for me.

@@cheerry111 Your junky website doesn't work.
 
 
And @@Brandytistic, I forgot to say, if you've got time, give "How to win friends and influence people" (the book) a read. It's really useful for any freelancer to read and it's helping me a great deal. Don't let the title fool you, it's a book about business.

There are some clients that I work with that don't want me to design something for them, they want to dictate their ideas and basically have me create them for them, no matter how bad they may look. While I try to suggest otherwise and work around their poor suggestions, sometimes you'll just have to ask them exactly what they want and make that.
 
Also, this thread is more difficult if you don't post pictures because we can't tell what you're making or talking about.

Wow.. well that is complex indeed. I think HTML5 Canvas is going to be your best bet for this, however, if it's games you want to make, might I suggest you do some research into Construct2, the game maker which is fairly simple to code for, and then you can not only export as HTML5 canvas, but also android and iOS too. You'll be making better games using that tool than you will just trying to learn from scratch, I am sure.

If it were me, I'd maybe add a little padding to the quote box. Just a tiny bit but it would help differentiate the quote from the main copy. Also, as cibgraphics said, grey, and quite possibly italics would go a long way.

Float:right would be the best property you could apply, assuming you used it right. You could also relatively/absolutely position your div with the nav in it, or given that it's at the top, fixed may also be an option.
 
I would recommend (off the top of my head with no experimentation, something like this:
 
<header> <div class="container"> <div id="logo">YOUR LOGO</div> <div class="floating-right"> <nav> Your navigation </nav> </div> <div class="clearfix"></div> </div> </header> Where clearfix is the property to clear all floats from potentially screwing up things down the line.
 
Floating-right is just whatever you want with float:right; applied to it.
 
ID Logo isn't anything in particular.
 
Hope this helps you out a little bit. Don't forget to use containers so you're not going full width.. unless that's what you want.
 
 
 
OH. And to style the way it looks. You'll probably want to use a <ul> and <li> elements for the actual nav part of it all. Style your <ul> with no padding or margins (if thats the look you want to go for, but make sure to put "display:table" in the <ul>s properties. Then, for each <li> element, have "Display:table-cell; width:1%;" and that should automatically size every <li> to fit your nav.
 
I'm sure i've missed out some properties but that'll set you on your way.

The best advice I can give for new wordpress themers is to make the site as if you were making a regular site. Make the website exactly as you would want it WITHOUT the wordpress hooks and data pieces, then once you're done, it's just a case of going in and reverse-engineering it as you would want using the excellent documentation of wordpress and its community.
 
Once you've learnt to do one, you'll soon learn how to build wordpress functionality into your site as you build it. It truly isn't as hard as some people would have you believe.

Maybe you could try building a blog with wordpress. You will soon learn the basics of "The Loop" and calling different commands and so on with PHP. Following that you'll understand how the file structure works and presumably just keep getting better from there.

The best advice I can give for new wordpress themers is to make the site as if you were making a regular site. Make the website exactly as you would want it WITHOUT the wordpress hooks and data pieces, then once you're done, it's just a case of going in and reverse-engineering it as you would want using the excellent documentation of wordpress and its community.
 
Once you've learnt to do one, you'll soon learn how to build wordpress functionality into your site as you build it. It truly isn't as hard as some people would have you believe.

Hi,
 
I've taken a look at what you're trying to replicate and I think I know what you want to do and how to do it. Without plugging my own site, you can see what I achieve with CSS on this page here by hovering over the icons (http://www.williamsgraphics.co.uk/portfolio/web/).
 
Thats a CSS hover effect with a transition applied to the scale. Pretty simple depending on which effect you want to achieve. For the effect on the site you linked to, they are possibly having a different background image applied to each element with a style, then when you hover over each, the padding is made larger with a transition, then when rolling off the padding returns to normal.
 
You could do this just by copying the "Active" class styles for the rollover. As for the fade, it's probably just a clever rgba background colour selector transition. At least thats how i'd do it. With something similar for the title.
 
Hope this makes sense, I didn't have much time to elaborate on each aspect.

As a developer you could use either WAMP or MAMP on your local computer and set up a placeholder database for your wordpress theme. Fill it with content and gibberish making sure that you have ALL things included that you're going to include in your theme (different post types, media, galleries, plugins etc) and then you can work on a local system without fear of making a mistake.
 
The advantage to this is that if you run a closed wordpress database locally, you can reuse it when developing themes to save having to enter dummy content for your temporary wordpress database every time.
 
When you're done editing your theme, just upload it to your wordpress install same as always.

To me, it looks a little bit dated.
 
I'm viewing on 1920x1200 resolution and it appears the background dosen't even fit the whole page. You can see what I mean if you visit your site then hold Ctrl and press the minus key on your keyboard. It'll scale the site down and you'll see how the background dosen't cover everything.
 
It's hard for me to tell if you're link baiting since this post is nearly 3 weeks old and nobody has commented, but what I'd say is that while the design functions properly (albeit with some arbitrary additions like "Today is the 18th of February" (As if people don't already know)) it looks dated to about 2006 or so.
 
Sorry. Try looking at modern and popular blogs and sites to get new ideas.