<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="alternate" href="https://billyfagan.co.uk" hreflang="x-default" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Billy Fagan, Aberdeen based web developer</title>
    <meta name="Description" content="Billy Fagan, Aberdeen's trusted freelance web developer.">

    <link rel="shortcut icon" href="favicon.ico">
            
    <link href='//fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic'
          rel='stylesheet' type='text/css'>
        <link href='//fonts.googleapis.com/css?family=Alegreya+Sans+SC' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>

    <link href="https://billyfagan.co.uk/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="https://billyfagan.co.uk/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://billyfagan.co.uk/css/animate.css" rel="stylesheet" type="text/css">
    <link href="https://billyfagan.co.uk/css/creative-brands.css" rel="stylesheet" type="text/css">
    <link href="https://billyfagan.co.uk/css/vertical-carousel.css" rel="stylesheet" type="text/css">
    <link href="https://billyfagan.co.uk/css/app.css" rel="stylesheet" type="text/css">


    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

</head>
<body id="page-top">
<a href="#page-top" class="scroll-up scroll"><i class="fa fa-chevron-up"></i></a>
<h1><a href="https://billyfagan.co.uk">Billy Fagan</a></h1>


<header>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
                <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavigation"><i
                        class="fa fa-bars"></i></button>
            <img src="https://billyfagan.co.uk/image/Fortytwo_studio_Billy_Fagan_BW.jpg" class="navbar-logo pull-left img-circle" alt=""/>
            <a href="https://billyfagan.co.uk" class="navbar-brand animated flipInX scroll">Billy Fagan</a>
        </div>

                <div class="collapse navbar-collapse" id="myNavigation">
            <ul class="nav navbar-nav navbar-right animated flipInX">
                <li><a href="#about" class="scroll">About me</a></li>
                <li><a href="#testimonials" class="scroll">Testimonials</a></li>
                <li><a href="#showcase" class="scroll">My Work</a></li>
                <li><a href="#pricing" class="scroll">Pricing</a></li>
                <li><a href="#contact" class="scroll">Contact</a></li>
                            </ul>
        </div>    </div></nav>
        <div class="jumbotron">
    <img src="image/bf-inverted.png"
         class="img-responsive scrollpoint sp-effect3" alt="Billy Fagan"/>
    <div class="social-wrapper">
        <ul class="brands brands-inline hidden-xs scrollpoint sp-effect1">
            <li><a target="_blank" href="https://bitbucket.org/cowboyecosse/"><i
                            class="fa fa-bitbucket hi-icon-effect-8"></i></a></li>
            <li><a target="_blank" href="https://twitter.com/cowboyecosse"><i class="fa fa-twitter"></i></a></li>
        </ul>
        <h2 class="scrollpoint sp-effect3">Billy Fagan</h2>
        <ul class="brands brands-inline hidden-xs scrollpoint sp-effect2">
            <li><a target="_blank" href="https://github.com/billythekid"><i class="fa fa-github"></i></a>
            </li>
            <li><a target="_blank" href="https://www.linkedin.com/in/billy-fagan-907b4972"><i
                            class="fa fa-linkedin"></i></a></li>
        </ul>
    </div>
        <div id="slideshow" class="carousel slide vertical scrollpoint sp-effect3" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active"><h3>I <i class="fa fa-heart icon-first"></i> code <i
                            class="fa fa-code icon"></i></h3></div>
            <div class="item"><h3>PHP Development <i class="fa fa-laptop icon"></i></h3></div>
            <div class="item"><h3>Formula 1 <i class="fa fa-flag-checkered icon"></i></h3></div>
            <div class="item"><h3>Aberdeen PHP user group <i class="fa fa-blind icon"></i><i class="fa fa-blind icon"></i></h3></div>
            <div class="item"><h3>Laravel Framework <i class="fa fa-desktop icon"></i></h3></div>
            <div class="item"><h3>JavaScript <i class="fa fa-child icon"></i></h3></div>
            <div class="item"><h3>Snooker <i class="fa fa-circle-thin icon"></i></h3></div>
            <div class="item"><h3>Coffee <i class="fa fa-coffee icon"></i></h3></div>
            <div class="item"><h3>Craft CMS <i class="fa fa-pencil-square-o icon"></i></h3></div>
            <div class="item"><h3>HTML <i class="fa fa-laptop icon"></i></h3></div>
            <div class="item"><h3>Craft Beer <i class="fa fa-beer icon"></i></h3></div>
            <div class="item"><h3>APIs <i class="fa fa-desktop icon"></i></h3></div>
        </div>
    </div>
        <a href="#about" class="btn btn-reference btn-lg scroll scrollpoint sp-effect1" role="button"><i
                class="fa fa-user-secret"></i> Get to know me</a>
    <a href="#contact" class="btn btn-reference btn-lg btn-active scroll scrollpoint sp-effect2" role="button"><i
                class="fa fa-comment-o"></i> Drop me a message</a>
</div>
</header>

    <section id="about" class="content-first">
    <div class="container">
        <div class="row">
            <div class="col-sm-2 hidden-xs scrollpoint sp-effect1">
                <img src="https://billyfagan.co.uk/image/Fortytwo_studio_Billy_Fagan_BW.jpg" class="image-bordered img-responsive img-circle" alt=""/>
            </div>
            <div class="col-md-7 col-sm-6 scrollpoint sp-effect1">
                <h3>Who am I?</h3>
<p>I'm a father of four living and working out of Aberdeen who writes code, usually on the web, for a living.</p>
<p> I work for various agencies and clients in the area on projects as diverse as ecommerce sites, web apps, CMS
    integrations, charity sites, Laravel solutions, Craft CMS plugins and more. I also work on my own stuff from
    time to time and contribute to open source projects where I can.</p>
<p>If you think you could benefit from my expertise on your project, drop me a line below and I'll get back to
    you.</p>
                            </div>
            <div class="col-md-3 col-sm-4 scrollpoint sp-effect2 hidden-xs">
                <div class="timeline">

    <div class="event">
        <div class="event-info">
            <div class="date">2007</div>
        </div>
        <span>Open University</span>
    </div>

    <div class="event">
        <div class="event-info">
            <div class="date">2011</div>
        </div>
        <span>Freelancing</span>
    </div>

    <div class="event">
        <div class="event-info">
            <div class="date">2012</div>
        </div>
        <span>Developer, DEER/digital</span>
    </div>

    <div class="event">
        <div class="event-info">
            <div class="date">2014</div>
        </div>
        <span>Developer, Tide Studio</span>
    </div>

    <div class="event">
        <div class="event-info">
            <div class="date">2015</div>
        </div>
        <span>Freelancing</span>
    </div>

    <div class="event">
        <div class="event-info">
            <div class="date">2016</div>
        </div>
        <span>Developer, FortyTwo Studio<br>
                         and Freelancing</span>
    </div>
</div>
            </div>
        </div>
    </div>
    </section>                            
    <section id="contact" class="content-first">
    <div class="container">
        <h2 class="scrollpoint sp-effect3">Contact me</h2>
        <div class="contact-alert">
        </div>
        <div class="row">
            <div class="col-sm-12">
                <img src="image/macbook.png" class="img-responsive hidden-xs" alt="">

                <div class="macbook-inner black">
                    <div class="row scrollpoint sp-effect4">
                        <div class="col-sm-8">
                            <h3 class="hidden-xs">Leave a message</h3>

                            <form role="form" id="contactForm" action="https://billyfagan.co.uk/contact">
                                                                <input type="hidden" name="subject" value="">
                                <div class="form-group control-group">
                                    <div class="controls">
                                        <p class="help-block"></p>
                                        <input type="text" class="form-control" placeholder="First Name"
                                               id="firstname"
                                               data-validation-required-message="Please enter your first name."
                                               aria-invalid="false">
                                    </div>
                                </div>

                                <div class="form-group control-group">
                                    <div class="controls">
                                        <p class="help-block"></p>
                                        <input type="text" class="form-control" placeholder="Last Name"
                                               id="lastname"
                                               data-validation-required-message="Please enter your last name."
                                               aria-invalid="false">
                                    </div>
                                </div>

                                <div class="form-group control-group">
                                    <div class="controls">
                                        <p class="help-block"></p>
                                        <input type="email" class="form-control" placeholder="Email" id="email"
                                               data-validation-required-message="Please enter your email address."
                                               aria-invalid="false">
                                    </div>
                                </div>

                                <div class="form-group control-group">
                                    <div class="controls">
                                        <p class="help-block"></p>
<textarea class="form-control" placeholder="Message" id="message"
          data-validation-required-message="Please enter some message."
          aria-invalid="false"></textarea>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">Send message</button>
                                </div>
                            </form>

                        </div>
                        <div class="col-sm-4">

                            <img src="https://billyfagan.co.uk/image/Fortytwo_studio_Billy_Fagan_BW.jpg"
                                 class="contact-image image-responsive hidden-xs hidden-sm img-circle"
                                 alt=""/>
                            <div class="contact-info">
                                <p><i class="fa fa-fw fa-user"></i> Billy Fagan<br>
                                    Greenburn House <br>
                                    Aberdeen <br>
                                    AB21 9UA</p>
                                <p><i class="fa fa-fw fa-phone"></i> 01224 716559</p>
                                <p><i class="fa fa-fw fa-mobile"></i> 07754 087994</p>
                            </div>
                                                        
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
        <section id="quotes" class="content-second">
    <div class="container">
        <div class="row scrollpoint sp-effect3">
            <div class="col-sm-8 col-sm-offset-2">
                <blockquote class="blockquote-reverse">
                    <p><i class="fa fa-quote-left"></i> If a problem can be solved it will be. If it can not be solved there is no use worrying about it. <i class="fa fa-quote-right"></i></p>
                    <footer> Dalai Lama</footer>
                </blockquote>
            </div>
        </div>
    </div>
</section>;


<section id="footer" class="footer">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">

                <ul class="brands brands-inline brands-swing">
                    <li><a href="https://www.facebook.com/billythekid.fagan"><i class="fa fa-facebook  hi-icon-effect-8"></i></a></li>
                    <li><a href="https://twitter.com/cowboyecosse"><i class="fa fa-twitter"></i></a></li>
                    <li><a href="https://github.com/billythekid"><i class="fa fa-github"></i></a></li>
                    <li><a href="https://play.spotify.com/user/cowboyecosse"><i class="fa fa-spotify"></i></a></li>
                    <li><a href="https://bitbucket.org/cowboyecosse/"><i class="fa fa-bitbucket"></i></a></li>
                    <li><a href="http://stackexchange.com/users/195291/billythekid"><i class="fa fa-stack-exchange"></i></a></li>
                    <li><a href="https://www.linkedin.com/in/billy-fagan-907b4972"><i class="fa fa-linkedin"></i></a></li>
                    <li><a href="https://plus.google.com/+BillyFagan1"><i class="fa fa-google-plus"></i></a></li>
                </ul>

                <p>� Billy Fagan 2017 All rights reserved. Designed by <a href="http://pixelized.cz" target="_blank">Pixelized
                        Studio</a></p>
            </div>
        </div>
    </div>
</section>

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': "mz6K2P1l5ERkMCPcxicAwCG1Grw5JTOWjnRTboln"
        }
    });
</script>
<script src="https://billyfagan.co.uk/js/bootstrap.min.js" async></script>
<script src="https://billyfagan.co.uk/js/creative-brands.min.js" async></script>
<script src="https://billyfagan.co.uk/js/modernizr.custom.min.js" async></script>
<script src="https://billyfagan.co.uk/js/waypoints.min.js" ></script>
<script src="https://billyfagan.co.uk/js/custom.min.js" async></script>

<script src="js/jqBootstrapValidation.min.js"></script>
<script>
    $(function () {
        $("input,textarea").jqBootstrapValidation({
            preventSubmit: true,

            submitSuccess: function ($form, event) {
                event.preventDefault(); // prevent default submit behaviour
                // get values from FORM
                var firstname = $("input#firstname").val();
                var lastname = $("input#lastname").val();
                var email = $("input#email").val();
                var message = $("textarea#message").val();
                var subject = $("input[name='subject']").val();

                $.ajax({
                    url: "https://billyfagan.co.uk/contact",
                    type: "POST",
                    data: {
                        subject: subject,
                        firstname: firstname,
                        lastname: lastname,
                        email: email,
                        message: message
                    },
                    cache: false,
                    success: function (response) {
                        // Success message
                        $('.contact-alert').html("<div class='alert alert-success'>");
                        $('.contact-alert > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'><i class='fa fa-times'></i></button><strong>" + response.message + "</strong></div>");
                        //clear all fields
                        $('#contactForm').trigger("reset");
                    },
                    error: function (response) {
                        var error = "Sorry, it seems that my mail server is not responding. Please try again later!";
                        $('#contactForm').trigger("reset");

                        if (response.status == 422) {
                            error = 'Please check your fields.';
                            $("input#firstname").val(firstname);
                            $("input#lastname").val(lastname);
                            $("input#email").val(email);
                            $("textarea#message").val(message);
                            error += (response.responseJSON.firstname !== undefined) ? "<p>" + response.responseJSON.firstname : '';
                            error += (response.responseJSON.lastname !== undefined) ? "<p>" + response.responseJSON.lastname : '';
                            error += (response.responseJSON.email !== undefined) ? "<p>" + response.responseJSON.email : '';
                            error += (response.responseJSON.message !== undefined) ? "<p>" + response.responseJSON.message : '';

                        }
                        $('.contact-alert').html("<div class='alert alert-danger'>");
                        $('.contact-alert > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'><i class='fa fa-times'></i></button><strong>" + error + "</strong></div>");
                    }
                })
            }
        });
    });
</script>

<script>
        (function (i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function () {
                        (i[r].q = i[r].q || []).push(arguments)
                    }, i[r].l = 1 * new Date();
            a = s.createElement(o),
                    m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-77106822-1', 'auto');
        ga('send', 'pageview');

    </script>
</body>
</html>