paulWebsite2016/index.html at master · phackbarth/paulWebsite2016 · 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<html><head>
        <meta name="keywords" content="web development, user experience, information architecture">
        <meta name="description" content="Junior web developer web site for potential employers">
        <title>paul hackbarth, web developer, user experience, cool guy</title>
        <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
            <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
            <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
            <link href="paulWebsite.css" rel="stylesheet" type="text/css">
    </head><body>
        <div class="cover">
            <div class="background-image-fixed cover-image" style="background-image : url('https://unsplash.imgix.net/reserve/MTuhqSiPQbeVnaIYU16X_P1160798_adj.jpg?w=1024&amp;q=50&amp;fm=jpg&amp;s=ede6dca4fff55fa0cc6ec27bcd3480d9')"></div>
            <div class="container">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <h1 class="text-inverse">Paul Hackbarth</h1>
                        <p class="text-inverse">Web Developer | UX Designer | Information Architect</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="section">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <img src="https://ununsplash.imgix.net/photo-1423753623104-718aaace6772?w=1024&amp;q=50&amp;fm=jpg&amp;s=1ffa61419561b5c796bca3158e7c704c" class="img-responsive img-rounded">
                    </div>
                    <div class="col-md-6">
                        <h1 class="text-primary">/ Bio</h1>
                        <p id="instagramLink" class="text-primary">Hey!&nbsp;
                            <br>Thanks for finding my website!
                            <br>
                            <br>I am a creative UX|UI designer with a business and design background specializing in coding such as JavaScript and SQL. I attended the
                            College of St. Scholastica, &nbsp;graduating in 2014 with a B.A. in Computer
                            Information Systems. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
                            <br>
                            <br>I've worked from&nbsp;simple help desk support, interning at one of the
                            largest HMOs in Minnesota(<a href="#">HealthPartners</a>), to being a teaching assistant in computer science
                            at the first liberal arts college in China(HKBNU-UIC). &nbsp;
                            <br>
                            <br>Follow me on&nbsp;
                            <a href="https://www.instagram.com/nom_est_paul/"><u>Instagram</u> </a>or catch up with my latest work on
                            <a href="https://github.com/phackbarth"><u>Github</u></a>.
                            <br>
                            <br>Click
                            <a class="resume" href="resume.html"><u>here</u></a>&nbsp;for CV/Resumé</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="section">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="text-center">
                            <u>What I do</u>
                        </h1>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <img src="sun.png" class="img-responsive">
                        <h2>User Experience&nbsp;</h2>
                        <p>Creating experiences that make peoples lives better. Having empathy and
                            awareness are key. Treat all people like users, put their needs into context
                            and let them help you.</p>
                    </div>
                    <div class="col-md-3">
                        <img src="chart.png" class="img-responsive">
                        <h2>Information Architect</h2>
                        <p contenteditable="true">Opitimizing information on the web to keep things from getting to overbearing.
                            This broad field with many of its founders &nbsp;still trying to pin down
                            what it actually means. Each IA has their own definition.&nbsp;</p>
                    </div>
                    <div class="col-md-3">
                        <img src="mobile.png" class="img-responsive img-rounded">
                        <h2>Web Design</h2>
                        <p>Designing for the web used to be for just for mobile and desktop use.
                            Nowadays, web design can be on your wrist , your glasses or even in virtual
                            reality.&nbsp;
                            <br>
                        </p>
                    </div>
                    <div class="col-md-3">
                        <img src="webpage.png" class="img-responsive">
                        <h2>Coding</h2>
                        <p>HTML/CSS
                            <br>SQL
                            <br>Javascript
                            <br>Ruby on Rails</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="section">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="text-center text-primary">Case Studies</h1>
                        <p class="text-center">Click to look at some of my projects</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <a href="redesign/redesign.html" id="redesign" class="redesignclass">
            <img src="projectOnephoto.jpg" class="center-block img-circle img-responsive">
            <h3 class="text-center">Personal Website Redesign</h3>
            <p class="text-center">Feb 2016</p>
          </a>
                    </div>
                    <div class="col-md-4">
                        <img src="placeKitten2.jpg" class="center-block img-circle img-responsive">
                        <h3 class="text-center">Web Project</h3>
                        <p class="text-center">Underdevelopment</p>
                    </div>
                    <div class="col-md-4">
                        <img src="placeKitten2.jpg" class="center-block img-circle img-responsive">
                        <h3 class="text-center">Web Publishing Project</h3>
                        <p class="text-center">Underdevelopment</p>
                    </div>
                </div>
            </div>
        </div>
        <footer class="section section-primary">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <h1 class="text-right">Find me at:</h1>
                        <p>
                            <a href="phackbarth@css.edu"></a>
                        </p>
                    </div>
                    <div class="col-sm-6">
                        <p class="lead text-left">phackbarth@css.edu</p>
                        <div class="row">
                            <div class="col-md-12 hidden-lg hidden-md hidden-sm text-left">
                                <a href="res">
                </a>
                                <a href="#"><i class="fa fa-3x fa-fw fa-instagram text-inverse"></i></a>
                                <a href="#">
                  <i class="fa fa-3x fa-fw fa-facebook text-inverse"></i></a>
                                <a href="#">
                    <i class="fa fa-3x fa-fw fa-github text-inverse"></i></a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 hidden-xs text-left">
                                <a href="https://www.instagram.com/nom_est_paul/">
                         <i class="fa fa-3x fa-fw fa-instagram text-inverse"></i></a>
                                <a href="https://www.facebook.com/paul.hackbarth">
                             <i class="fa fa-3x fa-fw fa-facebook text-inverse"></i></a>
                                <a href="https://github.com/phackbarth">
                               <i class="fa fa-3x fa-fw fa-github text-inverse"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>


</body></html>