-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
138 lines (119 loc) · 8.75 KB
/
index.html
File metadata and controls
138 lines (119 loc) · 8.75 KB
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
134
135
136
137
138
<!--
* staxed.github.io
* Copyright 2016-2017 by Daniel B. Barr <daniel.b.barr@gmail.com>
* This file is part of staxed.github.io and is governed by The MIT License (MIT)
* Full License at https://staxed.github.io/license.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StaxFolio</title>
<meta name="description" content="Homepage and Portfolio of Daniel Barr">
<meta name="author" content="Daniel Barr - daniel.b.barr@gmail.com">
<!-- Normalize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" integrity="sha256-HxaKz5E/eBbvhGMNwhWRPrAR9i/lG1JeT4mD6hCQ7s4=" crossorigin="anonymous" />
<!-- Include Font Awewome 4.7 -->
<link rel="stylesheet" href="https://use.fontawesome.com/aa51507dfa.css">
<link rel="stylesheet" href="css/style.css?v=1.1">
<!-- Include scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!-- jquery -->
</head>
<body>
<!-- Navigation -->
<!-- End Navigation -->
<!-- Header -->
<header class="header headerBG flex-container-vert">
<div class="header-flexitem"></div><!--Invisible Flex Item for alignment balance-->
<div class="header-flexitem header-title">Daniel Barr</div>
<div class="header-flexitem header-phrase">"Life's true gift is the capacity to enjoy enjoyment"</div>
<div class="header-flexitem header-button-space">
<a href="https://www.facebook.com/staxed" class="button main"><i class="fa fa-facebook fa-fw" aria-hidden="true"></i> Facebook</a>
<a href="https://twitter.com/DanBBarr" class="button main"><i class="fa fa-twitter fa-fw" aria-hidden="true"></i> Twitter</a>
<a href="https://github.com/Staxed" class="button main"><i class="fa fa-github fa-fw" aria-hidden="true"></i> Github</a>
<a href="https://www.linkedin.com/in/daniel-barr-67291331" class="button main"><i class="fa fa-linkedin fa-fw" aria-hidden="true"></i> Linkedin</a>
</div>
<div class="header-flexitem">
<!-- Unsplash image attribution code -->
<a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px;" href="http://unsplash.com/@erezattias?utm_campaign=photographer-credit" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Erez Attias"><span style="display:inline-block;padding:2px 3px;"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-1px;fill:white;" viewBox="0 0 32 32"><title></title><path d="M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z"></path></svg></span><span style="display:inline-block;padding:2px 3px;">Erez Attias</span></a>
<!-- End Unsplash image attribution code -->
</div>
</header>
<!-- End Header -->
<!-- About -->
<a name="about"></a>
<section class="about">
<div class="about-flex-container">
<div id="about-header">
<h1>Who am I?</h1>
<p>I am a creative graphic designer and experienced web developer focused on modern eye catching designs and ease of use. One of my main areas of interest and experience is in the social aspect of the web, community forums, social media, blogging, etc.</p>
</div>
<div id="flex-about">
<div class="qualification">
<p><img src="./img/design_200.jpg"></p>
<h2>Graphic Designer</h2>
<p class="justify">I have been doing graphics design for as long as I can remember. From simple logos, stationary and banners, to full magazine layouts and complete website redesigns. I can do it all! If you are in need of any type of graphics, I’m your man.</p>
</div>
<div class="qualification">
<p><img src="./img/development_200.jpg"></p>
<h2>Web Developer</h2>
<p class="justify">While my main area of expertise is community site development (forums, blogs, content management systems, etc), I am also well versed in HTML and CSS. I am also in the process of increasing my skills with JavaScript, Ruby, and PHP.</p>
</div>
<div class="qualification">
<p><img src="./img/community_200.jpg"></p>
<h2>Technology Expert</h2>
<p class="justify">I end up being the "Tech Geek" pretty much anywhere I go. Software or Hardware makes no difference to me. I can setup scripted web applications, secure a server, or build a PC from scratch. I am also skilled in many desktop applications.</p>
</div>
</div>
<div id="about-footer"><a href="./resume.html">Check Out My Resume</a></div>
</div>
</section>
<!-- End About -->
<!-- Portfolio -->
<a name="portfolio"></a>
<section class="portfolio portfolioBG">
<div class="portfolio-flex-container">
<div id="portfolio-header">
<h1>Recent Projects</h1>
</div>
<div id="flex-portfolio">
<div class="portfolio-item"><a href="https://codepen.io/Staxed/full/YQzwWM/" target="_blank"><img src="./img/portfolio/sheldon-web-thumb.jpg" alt="sheldon cooper tribute image"></a></div>
<div class="portfolio-item"><a href="http://hctownes.com" target="_blank"><img src="./img/portfolio/hctownes.jpg"></a></div>
<div class="portfolio-item"><a href="https://122media.com" target="_blank"><img src="./img/portfolio/122media.jpg"></a></div>
<div class="portfolio-item"><img src="./img/portfolio/more.jpg"></div>
<div class="portfolio-item"><img src="./img/portfolio/more.jpg"></div>
<div class="portfolio-item"><img src="./img/portfolio/more.jpg"></div>
<div class="portfolio-item"><img src="./img/portfolio/more.jpg"></div>
<div class="portfolio-item"><img src="./img/portfolio/more.jpg"></div>
</div>
</div>
<!-- Unsplash image attribution code
<a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px;" href="http://unsplash.com/@timtrad?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Tim Trad"><span style="display:inline-block;padding:2px 3px;"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-1px;fill:white;" viewBox="0 0 32 32"><title></title><path d="M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z"></path></svg></span><span style="display:inline-block;padding:2px 3px;">Tim Trad</span></a>
End Unsplash image attribution code -->
</section>
<!-- End Portfolio -->
<!-- Contact -->
<a name="contact"></a>
<section class="contact ">
<div><p>There's a few ways to get in touch with me, please feel free to pick the one you prefer.</p><br></div>
<div>
<a href="mailto:daniel.b.barr@gmail.com" class="button main"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i> Email Me</a>
<a href="https://www.facebook.com/staxed" class="button main"><i class="fa fa-facebook fa-fw" aria-hidden="true"></i> Facebook</a>
<a href="https://twitter.com/DanBBarr" class="button main"><i class="fa fa-twitter fa-fw" aria-hidden="true"></i> Twitter</a>
<a href="https://github.com/Staxed" class="button main"><i class="fa fa-github fa-fw" aria-hidden="true"></i> Github</a>
<a href="https://www.linkedin.com/in/daniel-barr-67291331" class="button main"><i class="fa fa-linkedin fa-fw" aria-hidden="true"></i> Linkedin</a>
</div>
</section>
<!-- End Contact -->
<!-- Footer -->
<footer>
<div><hr></div>
<div class="footer-horizontal">
<div><a href="#home">Home</a> | <a href="#about">About</a> | <a href="#portfolio">Portfolio</a> | <a href="#contact">Contact</a></div>
<div class="footer-right">scrivened and ciphered by <a href="https://github.com/Staxed">Daniel Barr</a></div>
</div>
</footer>
<!-- End Footer -->
</body>
</html>