portfolio/web.html at master · faooful/portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" ***Website Description Here*** "/>

<meta name="author" content="Joseph Williams"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

<title>Joseph Williams | Multimedia Designer</title>

<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/mobile.css" type="text/css" media="screen" />

<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>

<link rel="shortcut icon" href="images/favicon.ico">

<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->

</head>

<body>
  <div class="page-wrapper">

    <header>

      <div class="container">

        <aside>
          <ul class="social">
            <li>
              <a href="https:/facebook.com/faooful">
                <span class="social_icon"><img src="images/webicon-facebook-s.png">
              </a>
            </li>
            <li>
              <a href="https:/twitter.com/faooful">
                <span class="social_icon"><img src="images/webicon-twitter-s.png">
              </a>
            </li>
            <li>
              <a href="https:/github.com/faooful">
                <span class="social_icon"><img src="images/GitHub-Mark-32px.png">
              </a>
            </li>
            <li>
              <a href="https:/faooful.tumblr.com">
                <span class="social_icon"><img src="images/webicon-tumblr-s.png">
              </a>
            </li>
          </ul>
        </aside>

        <nav>
          <ul>
            <li> <a href="index.html">Home</a></li>
            <li> <a href="design.php">Design</a></li>
            <li> <a href="web.html">Web</a></li>
            <li> <a href="index.html#contact">Contact</a></li>
          </ul>
      </nav>
      </div>
    </header>

    <section class="container">
      <div class="name-info">
        <span class="designtitle">Web</span>
        <img class="designicon" src="images/webicon.png"></img>
        <span class="designbio">Here are some of the projects that I have worked on.</span>
      </div>

      <div class="project">
        <div class="projecttitle">Dota2 Quest</div>
        <div class="projectdetails">I wanted to practice with .json files and returning randomised strings so I created this simple tool which is now used in the Dota gaming community.</div>
        <a href="http://www.faooful.com/dotaquest/index2.html" target="_blank"><img class="projectimg" src="images/dotaquestwebsiteimg.jpg"></div>
      </div>

      <div class="project">
        <div class="projecttitle">Peterbatten.co.uk</div>
        <div class="projectdetails">A portoflio website for a camera man. He needed to be able to update the website himself with his videos so it dynamically pulls in videos from his Vimeo account.</div>
        <a href="http://www.peterbatten.co.uk/" target="_blank"><img class="projectimg" src="images/peterbattenwebsiteimg.jpg"></a></div>
      </div>

      <div class="project">
        <div class="projecttitle">Faooful.com</div>
        <div class="projectdetails">This is my own personal site that I built from the ground up. Fully resonsive with HTML5 and CSS3. It also pulls in images that I upload to photobucket.</div>
        <a href="http://www.faooful.com/" target="_blank"><img class="projectimg" src="images/faoofulwebsiteimg.jpg"></a></div>
      </div>

      <div class="project">
        <div class="projecttitle">Legolandholidays.co.uk</div>
        <div class="projectdetails">I recently finished an internship at Short Breaks where I worked on maintaining and updating all the Merlin websites.</div>
        <a href="http://www.legolandholidays.co.uk/" target="_blank"><img class="projectimg" src="images/legolandwebsiteimg.jpg"></div>
      </div>

    </section>

    <footer class="container">
      <p>Copyright © 2014 Joseph Williams.</p>
    </footer>

  </div>
</body>

<script src="js/jquery-1.9.1.min.js" charset="utf-8"></script>

<script src="js/headroom.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
// grab an element
var myElement = document.querySelector("header");
// construct an instance of Headroom, passing the element
var headroom  = new Headroom(myElement);
// initialise
headroom.init();
</script>

<!-- Lazy Load -->
<script src="js/jquery.lazyload.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    $(function() {
        $("img.lazy").show().lazyload({
            effect      : "fadeIn",
            failurelimit : 0
        });
    });
</script>
<!-- Lazy Load End -->

</html>