Hey, my name is Davey Brown, I’m a Freelance Web Developer. I build clean/professional websites for people and businesses.
I specialise in responsive websites and build engaging designs/layouts. I use WordPress, this means that it is super easy to update/manage content.
When I’m not wearing my coding cap and reading the latest web blogs/articles/magazines/newsletters I enjoy spending my free time walking outdoors/learning Welsh/with family/learning permaculture.
I’ve just moved to Cardiff, go me! I’m open to hearing about freelance web development opportunities; Cardiff Bay, city centre or Penarth would be ideal. Scroll down to find out more.
As a web developer I’m conscious of my responsibility to reduce my impact on the environment. I am a proud owner of solar panels with the capacity to generate 306KWh per year. That’s enough to power my laptop, monitor and desk lamp (with cool energy saving bulb) for the whole year with some left over (206KWh) to help offset the servers.
For the past year I’ve been working in Angel, London as part of the cookie and coffee loving team that is Pixeled Eggs. I’ve worked on exciting builds such as the Rochambeau Smart Jacket for evrythng.com and high profile websites for MacMillan (Game Changers and Summer Lights).
The work that I've done at Pixeled Eggs varies from building complete websites from scratch to completing additional phases of work on existing websites.
In many cases I worked as part of a team with other developers, usually 2 splitting the workload 50/50, or working on websites where I was responsible for everything. Most projects were agile; with progress discussed in daily stand-ups and tracked online with Jira.
I’ve also worked on several freelance projects including websites for charities and small businesses.
Below are a few examples, check out the tabs for a preview of what my work looks like and some of the code behind the scenes.
.hero {
position: relative;
color: $white;
// Rounded hero
// ----------------
&.rounded {
h1 {
text-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}
.carousel {
overflow: hidden;
}
@include breakpoint(xlarge) {
max-width: rem-calc(1600);
}
// Curve at bottom
// ----------------
.curve {
&:before {
content: '';
display: block;
position: absolute;
// avoid background image leaking through
bottom: rem-calc(-2);
left: 50%;
width: 100%;
z-index: 20;
// set height by padding
height: 0;
padding-top: 25px;
padding-bottom: 11%; /* curve image file ratio */
transform: translate(-50%, 0%);
background: url(../img/concave_curve.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
}
// Gradient left and right
// ----------------------
&.row:before,
&.row:after {
content: ' ';
display: block;
position: absolute;
z-index: 12;
right: 0;
top: 0;
height: 100%;
width: 150px;
opacity: 0;
transition: opacity 400ms ease;
}
&.row:before {
left: 0;
background: linear-gradient(to left, rgba(255, 255, 255, 0), $white);
}
&.row:after {
right: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0), $white);
}
@include breakpoint(xxlarge) {
&.row:before,
&.row:after {
opacity: 1;
}
}
}
}
.nine-icon-unit__details {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 500ms, max-height 0ms 500ms;
// pure css fade in and fade out of element
// better than jQuery hide - uses native browser transitions
&.active {
opacity: 1;
max-height: 9999px;
transition: opacity 500ms 500ms, max-height 0ms 500ms;
}
}
// Increase stats from zero on pg_in_action_header module
// Used on how-we-do-it page
function doStat(statNumber) {
if (statNumber == 4) {
return false;
}
var element = $('#stat-' + statNumber);
var dataTo = (element.data('to') + ',' ).replace(/,/g, '');
element.removeClass('stat-hide');
element.countTo({
from: 0,
to: dataTo,
speed: 1000,
refreshInterval: 50,
formatter: function (value, options) {
return value.toFixed(options.decimals).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},
onUpdate: function (value) {
//do nothing;
},
onComplete: function (value) {
doStat(statNumber + 1);
}
});
}
// hire me :)
I worked as part of a 2 developer team to build a flexible website for the the employee benefit company Personal Group. The flexibility that was built into the custom WordPress template meant that the team at Personal Group had the freedom to build pages from modules in any arrangement; without the constrains of a typical rigid template.
<!-- Tags for Facebook sharing -->
<meta property="og:url" content="https://brightbmbr.nyc/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="BRIGHT BMBR" />
<meta property="og:description" content="The limited edition Rochambeau smart jacket with one-of-a-kind digital experiences." />
<meta property="og:image" content="https://brightbmbr.nyc/wp-content/themes/rochambeau/assets/img/facebook_share.png" />
<!-- Tags for Twitter sharing -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="BRIGHT BMBR" />
<meta name="twitter:description" content="The limited edition Rochambeau smart jacket with one-of-a-kind digital experiences." />
<!-- Responsive Vimeo video -->
<section class="wrap--video-cta">
<div class="row row--full row--video-cta collapse" data-equalizer data-equalize-by-row="true">
<div class="small-12 medium-6 medium-push-6 columns split-video" data-equalizer-watch >
<div class="bg" style="background-image: url(https://brightbmbr.nyc/wp-content/uploads/2016/10/face.jpg)"></div>
<img src="https://brightbmbr.nyc/wp-content/uploads/2016/10/face.jpg" />
<a href="#" alt="Play" data-open="reveal--video"></a>
</div>
<div class="small-12 medium-6 medium-pull-6 columns split-cta text-center" >
<div class="wrap--cta-split" data-equalizer-watch >
<div class="middle--cta-split" >
<h1>BRIGHT BMBR</h1>
<p>The limited edition Rochambeau smart jacket with one-of-a-kind digital experiences.</p>
<a class="button button--roch" href="https://shop.thenewstand.com/collections/frontpage/products/rochambeau-evrythng-jacket">Order</a>
<a class="button button--roch" href="/app">Jacket Owners</a>
</div>
</div>
</div>
</div>
</section>
<div class="reveal small-no-fullscreen reveal--video large" id="reveal--video" data-reveal data-reset-on-close="true">
<div class='embed-container'>
<iframe data-src="https://player.vimeo.com/video/189112049?autoplay=1"
width="100%" height="360"
frameborder="0"
webkitallowfullscreen=""
mozallowfullscreen=""
allowfullscreen="">
</iframe>
</div>
<button class="page-close page-close--white" data-close aria-label="Close modal" type="button"></button>
</div>
// Video - use canvid to animate sprite sheet for video on mobile
var canvidControl = canvid({
selector : '.video',
videos: {
clip1: { src: '/wp-content/themes/rochambeau/assets/video/0140frames.jpg', frames: 40, cols: 6, loops: 1, onEnd: function(){
canvidControl.play('clip2');
}},
clip2: { src: '/wp-content/themes/rochambeau/assets/video/4180frames.jpg', frames: 40, cols: 6, loops: 1, onEnd: function(){
canvidControl.play('clip3');
}},
clip3: { src: '/wp-content/themes/rochambeau/assets/video/81120frames.jpg', frames: 40, cols: 6, loops: 1, onEnd: function(){
canvidControl.play('clip4');
}},
clip4: { src: '/wp-content/themes/rochambeau/assets/video/121147frames.jpg', frames: 26, cols: 6, loops: 1, onEnd: function(){
canvidControl.play('clip1');
}},
},
width: 414,
height: 736,
loaded: function() {
canvidControl.play('clip1');
}
});
BRIGHTBMBR is an exploration into wearable smart technology. Building the website was an exciting opportunity to be part of something so new and unique. I was responsible for the front-end build (including the homepage), and worked closely with the backend developer to integrate our work seamlessly. The result is a product (website & web app) that has been successfully demo’d at conferences to promote the technology behind it, and is an integral part of the BRIGHTBMBR experience (video).
.microsite {
.columns {
margin-bottom: rem-calc(20);
overflow: hidden;
.micro-bg {
position: absolute;
opacity: 0.4;
// browser prefixes are added by autoprefixer
transition: all 400ms;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
&:hover {
// background image zoom in effect on hover
.micro-bg {
opacity: 1;
transform: scale(1.1);
}
}
}
}
<div class="microsite">
<div class="row expanded squares small-up-1 medium-up-2 large-up-3 xxlarge-up-4">
<div class="columns">
<!-- tiles are organised into template parts -->
<?php include('micro-about.php'); ?>
</div>
<div class="columns" style="position: relative;">
<?php include('micro-signup.php'); ?>
</div>
<div class="columns">
<?php include('micro-publications.php'); ?>
</div>
<div class="columns">
<?php include('micro-events.php'); ?>
</div>
<!-- more tiles ... -->
</div>
<!-- /.row -->
</div>
<!-- /.microsite -->
Food Foundation’s brief asked for a micro site (think one main page with some secondary pages) to convey all information regarding their new (Autumn 2016) project. I was supplied with the logo (it had a twirly, curved and colourful hand drawn look to it) and was tasked with the design and build of a micro site with a look and feel that complimented the logo.
<nav class="top-bar" data-topbar="">
<ul class="title-area">
<li class="name middle-box">
<a class="middled" href="/"><img class="top-bar__logo" src="https://evrythng.com/wp-content/themes/evrythng/img/logo-2x.png" alt="Evrythng"></a>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="has-dropdown menu-item not-click">
<a href="https://evrythng.com/platform/">Platform</a>
<ul class="dropdown">
<li class="title back js-generated">
<h5><a href="javascript:void(0)">Back</a></h5>
</li>
<li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="https://evrythng.com/platform/">Platform</a></li>
<li class="menu-item first"><a href="/platform">Overview</a></li>
<li class="menu-item"><a href="https://evrythng.com/platform/features/">Features</a></li>
<li class="menu-item"><a href="https://evrythng.com/activate-digital-identities-for-products/">Digital Identities</a></li>
<li class="menu-item"><a href="https://evrythng.com/platform/ecosystems/">Ecosystems</a></li>
<li class="menu-item"><a href="https://evrythng.com/platform/enterprise-data/">Enterprise Data</a></li>
<li class="menu-item"><a href="https://evrythng.com/securing-the-internet-of-things/">Security</a></li>
<li class="menu-item last"><a href="https://evrythng.com/platform/developer-tools/">Developer Tools</a></li>
</ul>
</li>
<li class="has-dropdown menu-item not-click">
<a href="https://evrythng.com/solutions/">Solutions</a>
<ul class="dropdown">
<li class="title back js-generated">
<h5><a href="javascript:void(0)">Back</a></h5>
</li>
<li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="https://evrythng.com/solutions/">Solutions</a></li>
<li class="menu-item first"><a href="/solutions">Overview</a></li>
<li class="menu-item"><a href="https://evrythng.com/solutions/connected-devices/">Connected Devices</a></li>
<li class="menu-item"><a href="https://evrythng.com/solutions/consumer-engagement/">Consumer Engagement</a></li>
<li class="menu-item"><a href="https://evrythng.com/solutions/brand-protection/">Brand Protection</a></li>
<li class="menu-item"><a href="https://evrythng.com/solutions/inventory-management/">Inventory Management</a></li>
<li class="menu-item"><a href="https://evrythng.com/solutions/product-registration/">Product Registration</a></li>
<li class="menu-item"><a href="https://evrythng.com/solutions/product-reordering/">Product Reordering</a></li>
<li class="menu-item last"><a href="https://evrythng.com/solutions/evrythng-services/">EVRYTHNG Services</a></li>
</ul>
</li>
<li class="has-dropdown menu-item not-click">
<a href="https://evrythng.com/partners/">Partners</a>
<ul class="dropdown">
<li class="title back js-generated">
<h5><a href="javascript:void(0)">Back</a></h5>
</li>
<li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="https://evrythng.com/partners/">Partners</a></li>
<li class="menu-item first"><a href="https://evrythng.com/partners/">Overview</a></li>
<li class="menu-item last"><a href="https://evrythng.com/partners/become-a-partner/">Become a Partner</a></li>
</ul>
</li>
<li class="has-dropdown menu-item not-click">
<a href="https://evrythng.com/about/">About Us</a>
<ul class="dropdown">
<li class="title back js-generated">
<h5><a href="javascript:void(0)">Back</a></h5>
</li>
<li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="https://evrythng.com/about/">About Us</a></li>
<li class="menu-item first"><a href="https://evrythng.com/about/">Mission</a></li>
<li class="menu-item"><a href="https://evrythng.com/about/team/">Team</a></li>
<li class="menu-item"><a href="https://evrythng.com/about/investors/">Investors</a></li>
<li class="menu-item"><a href="https://evrythng.com/about/news/">News</a></li>
<li class="menu-item"><a href="https://evrythng.com/about/events/">Events</a></li>
<li class="menu-item"><a href="https://evrythng.com/about/jobs/">Jobs</a></li>
<li class="menu-item last"><a href="https://evrythng.com/locations/">Locations</a></li>
</ul>
</li>
<li class="menu-item top-bar__seperator-left"><a href="https://evrythng.com/contact-us/">Contact Us</a></li>
<li class="menu-item"><a href="https://dashboard.evrythng.com/login">Login</a></li>
</ul>
</section>
</nav>
// AJAX pagination
// Anon function - source https://premium.wpmudev.org/blog/load-posts-ajax/
(function($) {
$( document ).ready(function() {
// Detect click
var flag = false;
$('.pagination a').bind('touchstart click', function(){
if (!flag) {
flag = true;
setTimeout(function(){ flag = false; }, 100);
var year = $(this).data('year');
var press_category = $(this).data('post-category');
var post_type = $(this).closest('[data-post-type]').data('post-type');
var part = $(this).closest('[data-part]').data('part');
var $clickedElement = $(this);
var $targetElement = $('.press-coverage .press-cover-container');
var $overlayElement = $('.press-coverage');
//console.log(part);
event.preventDefault();
$.ajax({
url: ajaxpagination.ajaxurl,
type: 'post',
data: {
action: 'ajax_pagination',
post_type: post_type,
part: part,
year: year,
press_category: press_category
//page: page
},
beforeSend: function() {
$overlayElement.addClass('loading');
// Scroll to the top of the press release section
$('html, body').animate({
scrollTop: $overlayElement.offset().top
}, 500);
},
success: function( html ) {
// Source - http://stackoverflow.com/posts/9671016/revisions
$targetElement
.data('oHeight',$targetElement.height())
.html(html) // Update content
.css('height','auto')
.data('nHeight',$targetElement.height())
.height($targetElement.data('oHeight'))
.animate({
height: $targetElement.data('nHeight')
},
400,
function(){
// Run match height script on new elements
$('.press-coverage .press-cover-container [data-mh="press-cover"]').matchHeight({
byRow: true,
property: 'height',
target: null,
remove: false
});
$targetElement.css('height','auto');
// Set height of target to auto after match height has run
$overlayElement.removeClass('loading');
// Add class of current to clicked pagination element
$clickedElement.closest('li').addClass('current').siblings().removeClass('current');
}
);
}
})
}
return false;
});
});
})(jQuery);
Evrythng is a super innovative internet of things company, they’re pushing boundaries of what can be achieved with IoT devices (evrythng in 100 seconds). The website was built with over 30 modules (that can be used to build any page) offering truly flexible and scalable content management without compromising brand identity or design. Dynamic (AJAX) loading of stories on the news page is a smooth example of seamlessly browsing through news pages (built by yours truly).
$(document).ready(function() {
// On slide initialisation
$('.carousel').on('init', function(event, slick){
// Remove hide class from relevant slides
// Sildeshow loads smoothly without flash of un-styled content
$(this).find('.show-on-load').removeClass('hide').removeClass('show-for-medium ');
});
});
// Queries for events
// Date is past
$meta_query_past = array(
array(
'key' => 'event_date',
'value' => date('Ymd'),
'type' => 'DATE',
'compare' => '<='
)
);
$meta_query_future = array(
'relation' => 'OR',
// Date is future
array(
'key' => 'event_date',
'value' => date('Ymd'),
'type' => 'DATE',
'compare' => '>='
),
// Date is empty
array(
'key' => 'event_date',
'value' => '',
'compare' => '='
)
);
<section class="vertical-margin">
<div class="row">
<div class="large-4 large-push-2 medium-6 columns">
<!-- schma.org markup for contact details -->
<div itemscope itemtype="http://schema.org/Organization">
You can contact <span itemprop="name">The Food Foundation</span> at:<br>
Tel: <span itemprop="telephone">020 3805 4670</span>,<br>
E-mail: <a href="mailto:office@foodfoundation.org.uk" itemprop="email">office@foodfoundation.org.uk</a>
</div>
</div>
<div class="large-4 medium-6 columns">
<div itemscope itemtype="http://schema.org/Organization">
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="name"><strong>The Food Foundation</strong></span><br>
<span>The Rain Cloud Victoria</span><br>
<span itemprop="streetAddress">76 Vincent Square</span><br>
<span itemprop="postalCode">SW1P 2PD</span><br>
<span itemprop="addressLocality">London, UK</span><br>
</div>
</div>
</div>
</div>
</section>
Bold design with expanses of full width images (mostly news posts and delicious looking fruit and veg) and strong brand identity running throughout. An interesting and fun website to design and build; I worked closely with Alex from Food Foundation to deliver a website that did exactly what she needed. A responsive website that works well across all devices and with some nice extra touches; like schema.org markup for address and contact details and an events page that automatically moves events from ‘Upcoming’ to ‘Past Events’ after they’ve happened.
<?php
// use skrollr plugin on non touch devices
// use more basic scroll position detection on touch devices
if ( !is_handheld() && is_front_page() && !defined('TY_PAGE') ) : ?>
<script type="text/javascript" src="<?php echo SITEURL; ?>/assets/js/skrollr.min.js"></script>
<script type="text/javascript">
$('#menu-topbar2-menu .topbar-item--home a')
.attr('data-anchor-target', '.Site-content').attr('data-0', 'width: 287px').attr('data-100', 'width: 130px')
.append('<div class="logo-white-text" data-0="opacity: 1" data-100="opacity: 0" ></div>');
var s = skrollr.init({
forceHeight: false
});
</script>
<?php endif; ?>
<?php
// before form part 1 submission
// add dob valid status to form data
// and set session variable for thank you page variation
// if older than 30 show sorry page
add_action( 'gform_pre_submission_1', 'pre_submission_handler' );
function pre_submission_handler( $form ) {
$status = 'Invalid';
if (valid_age( rgpost( 'input_4' ) )) {
$status = 'Valid';
$_SESSION['show_sorry'] = false;
} else {
$_SESSION['show_sorry'] = true;
}
$_POST['input_23'] = $status;
}
function valid_age($date) {
$d = DateTime::createFromFormat('d/m/Y', $date);
$n = new DateTime('NOW');
$age = $d->diff($n)->format('%R%y');
$s = false;
if ($age < 30) {
$s = true;
}
return $s;
}
<?php
// query string data for represent.me iframe
$data = array( 'showComments'=>'true',
'maxHeight'=>'325',
'cacheBust' => time()
);
if (REPRESENT_STYLESHEET_URL) :
$data['stylesheet'] = REPRESENT_STYLESHEET_URL;
endif;
?>
<!-- represent.me iframe -->
<div class="represent single--represent">
<div class="row">
<div class="large-8 small-centered columns text-center">
<div class="wrap--represent-iframe">
<iframe src="<?php the_field('frame_url'); ?>?<?php echo http_build_query($data); ?>"></iframe>
</div>
</div>
</div>
</div>
<!-- / represent iframe -->
A youth led organisation with a hugely important and politically relevant message. I was responsible for the build of their website. Work included smooth transitions and animations on the home page (logo and tiles), multi part forms with age verification, and seamless integration of represent.me platform.
In the last year alone I’ve been involved in over 20 web development projects (as part of an awesome team), while the majority of projects helped build my Wordpress skill set I’ve also had the opportunity to turn my hand to: responsive emails, building a whiskey label printing solution, writing a custom IAT test for behavioural insights, and working on Bono’s iPad app (One Campaign).
I use the majority of these tools the majority of the time, in fact I've used 19 of them on this website. These tools help me make better websites faster; if it doesn't do that then, it's not on the list! Hover or tap the icons to find out why I use each one.
This is an evolving list, as I'm always looking to improve my workflow. So don't be surprised to see new additions or changes.
Take a look at my blog posts about the technical side of what I do, please feel free to comment and let me know your take on the subject.
Hi, these are the notes to go along with the lightning talk that I gave a couple of days ago (21st Nov 2017). If you’ve forgotten the name of a plugin or want to copy and paste some code that I mentioned, sweet – you’ve come to the right place. If you didn’t catch the… read more
Ok, so what does the blog title actually mean? Well it’s my conclusion to some of today’s research, it means the following: gzip compression with a WordPress install and a sprinkle of magic equals… put your feet up, you’ve just made your pages load faster, and you’re in google’s good books Quick pointers on using gzip with WordPress This post is a… read more
For me, subtle interaction animations can be a sweet touch and can breathe life into static looking page. For a recent project, I was asked to build some fancy toggle switches as part of a form, the result turned out fairly nicely so I thought I’d share a quick how to of how I styled the switches with… read more
Happy customers mean that I’m doing my job properly, this is the ultimate objective of every project. Alex from Food Foundation: Davey has totally transformed our WordPress website making it more professional and eye catching. He has been easy to contact, professional and has a ‘can do’ attitude, we are extremely pleased with his ability and professionalism.
Btw… I’ve just moved to Cardiff! I’m open to hearing about freelance web development opportunities; Cardiff Bay, city centre or Penarth would be ideal.
Also, do you have a great idea for a website!? Awesome, let’s talk. What I do works best when we can meet face to face to discuss things. If you’re based in Cardiff, great, give me a shout, please include the brief and a ballpark figure for how much you have to spend.
Are you a freelance web designer based in Cardiff? If you have a strong design skill set but don’t specialise in coding we could make a great team. Get in touch to talk about collaborating on small to medium size web projects, don’t forget to include a link to your portfolio.
Thanks for taking time to read about Web Shed.
Davey