wbrawner/flask-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed mobile styles

Browse source
This commit is contained in:
William Brawner 2016-03-27 11:52:05 -07:00
parent 1a7376cdb2
commit ae69ee60bf
10 changed files with 161 additions and 176 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
flask_site.py
View file

@ -6,6 +6,7 @@ from flask_debugtoolbar import DebugToolbarExtension
from admin import admin from admin import admin
from flask.ext.mail import Mail, Message from flask.ext.mail import Mail, Message
from wtforms import Form, TextField, TextAreaField, validators from wtforms import Form, TextField, TextAreaField, validators
from datetime import datetime
app = Flask(__name__) app = Flask(__name__)
app.config.from_pyfile('config.py') app.config.from_pyfile('config.py')
@ -34,6 +35,10 @@ class ContactForm(Form):
email = TextField('Email Address', [validators.Length(min=6, max=35)]) email = TextField('Email Address', [validators.Length(min=6, max=35)])
message = TextAreaField('Message', [validators.Length(min=6, max=5000)]) message = TextAreaField('Message', [validators.Length(min=6, max=5000)])
@app.context_processor
def get_current_year():
return dict(current_year=datetime.now().year)
@app.route('/') @app.route('/')
def home(): def home():
g.db.execute('SELECT * FROM blog_posts ORDER BY updated_on DESC LIMIT 3') g.db.execute('SELECT * FROM blog_posts ORDER BY updated_on DESC LIMIT 3')

111
static/css/style.css
View file

@ -4,14 +4,14 @@ body {
padding:0; padding:0;
background-color:#fff; background-color:#fff;
overflow-x: hidden; overflow-x: hidden;
text-shadow: 0.5px 0 0 #000, -0.5px 0 0 #000, 0 0.5px 0 #000, 0 -0.5px 0 #000, 0.5px 0.5px #000, -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6, #menu-icon {
font-family: 'Ubuntu', sans-serif; font-family: 'Ubuntu', sans-serif;
text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
} }
a { * {
-webkit-transition: all 0.5s; /* Safari */ -webkit-transition: all 0.5s; /* Safari */
transition: all 0.5s; transition: all 0.5s;
} }
@ -57,10 +57,11 @@ input[type='submit'] {
position:fixed; position:fixed;
top:0; top:0;
margin:0; margin:0;
background-color:#002900; background: linear-gradient(#F5F5F5, #CCCCCC);
height:60px; height:60px;
width:100vw; width:100vw;
z-index: 999; z-index: 999;
box-shadow: 0 1px 10px #000;
} }
.main-nav { .main-nav {
@ -120,7 +121,7 @@ input[type='submit'] {
.main-nav li a:link, .main-nav li a:visited { .main-nav li a:link, .main-nav li a:visited {
text-decoration:none; text-decoration:none;
text-align:center; text-align:center;
color:white; color: #000;
padding:5px; padding:5px;
margin:0 auto; margin:0 auto;
font-size:16px; font-size:16px;
@ -131,7 +132,8 @@ input[type='submit'] {
} }
.main-nav li a:hover, .main-nav li a:active { .main-nav li a:hover, .main-nav li a:active {
background-color: #5C995C; /*background-color: #5C995C;*/
background: linear-gradient(#CCCCCC, #F5F5F5);
} }
.main-nav p { .main-nav p {
@ -219,6 +221,9 @@ input[type='submit'] {
.section:first-of-type { .section:first-of-type {
margin-top: 30px; margin-top: 30px;
} }
.section p {
text-shadow: 0 0 30px #000;
}
.blog-entry { .blog-entry {
margin: 5px 20px 15px; margin: 5px 20px 15px;
padding: 0 20px; padding: 0 20px;
@ -306,20 +311,6 @@ div#instafeed {
overflow: hidden; overflow: hidden;
} }
#home img {
border-radius:50%;
height:auto;
width:150px;
display:inline-block;
float:none;
margin:10px;
}
#about {
background-color:white;
padding:1px 15px 15px 15px;
}
.desktop { .desktop {
display:inline-block; display:inline-block;
width:70%; width:70%;
@ -340,17 +331,11 @@ div#instafeed {
} }
#projects { #projects {
background-color:#002900;
color:white; color:white;
margin:50px auto; margin:50px auto;
overflow: hidden; overflow: hidden;
} }
#projects h2 {
color: #ffffff;
border-bottom: 1px solid white;
}
#projects h3 { #projects h3 {
margin: 10px auto; margin: 10px auto;
} }
@ -426,13 +411,14 @@ div#instafeed {
margin-right: 20px; margin-right: 20px;
} }
footer { #contact p {
display: block; width: 50%;
width: 100%; display: inline-block;
background-color: #002900; }
text-align: center;
overflow: hidden; p.contact-btns {
color: #fff; float: right;
text-align: right;
} }
a#menu-icon { a#menu-icon {
@ -445,7 +431,7 @@ a.social-link {
} }
a.social-link:link, a.social-link:visited { a.social-link:link, a.social-link:visited {
color: #fff; color: #000;
} }
a.social-link:hover, a.social-link:active { a.social-link:hover, a.social-link:active {
@ -499,17 +485,12 @@ a.social-link:hover, a.social-link:active {
.admin-table th:first-child, .admin-table td:first-child { .admin-table th:first-child, .admin-table td:first-child {
width: 50%; width: 50%;
}
}
@media screen and (max-width:1024px) { @media screen and (max-width:1024px) {
* {
z-index: 99;
position: relative;
}
.main-nav, #nav { .main-nav, #nav {
position: absolute; position: absolute;
} }
#menu { #menu {
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
@ -518,12 +499,11 @@ a.social-link:hover, a.social-link:active {
top: 60px; top: 60px;
left: 0; left: 0;
padding:0; padding:0;
background-color:#002900; background-color:#CCCCCC;
float:none; float:none;
-webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s ease;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
#menu-icon { #menu-icon {
position:absolute; position:absolute;
right:30px; right:30px;
@ -532,35 +512,33 @@ a.social-link:hover, a.social-link:active {
margin: 2px 10px; margin: 2px 10px;
font-size: 24px; font-size: 24px;
} }
.main-nav li { .main-nav li {
display:block; display:block;
margin:0 auto; margin:0 auto;
padding:0; padding:0;
background-color:#002900; background-color:#CCCCCC;
width:100%; width:100%;
} }
.main-nav li a { .main-nav li a {
width:90%; width:90%;
margin: 0 auto; margin: 0 auto;
} }
.desktop { .desktop {
display:none; display:none;
} }
.content {
position: relative;
z-index: 9;
}
.glance { .glance {
width:95%; width:95%;
margin:auto; margin:auto;
} }
.project { .project {
display:block; display:block;
width:95%; width:95%;
margin:auto; margin:auto;
} }
.project-logo { .project-logo {
display: block; display: block;
float:none; float:none;
@ -572,10 +550,12 @@ a.social-link:hover, a.social-link:active {
.container, .section { .container, .section {
background-image: none; background-image: none;
} }
.section {
background: rgba(0, 41, 0, 0.75);
}
.mobile-bg { .mobile-bg {
display: block; display: block;
position: fixed; position: fixed;
z-index: 0;
height: 100%; height: 100%;
top: 0; top: 0;
width: 100%; width: 100%;
@ -588,26 +568,6 @@ a.social-link:hover, a.social-link:active {
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
.section-bg {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 40px;
}
.section-wrapper {
overflow: hidden;
position: relative;
}
.section-bg img {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
} }
@media all and (max-width: 768px) { @media all and (max-width: 768px) {
@ -640,4 +600,15 @@ a.social-link:hover, a.social-link:active {
width: 90%; width: 90%;
margin: 5px 5% 40px; margin: 5px 5% 40px;
} }
}
@media all and (max-width: 440px) {
.blog-entry {
padding: 0 5px;
}
#contact p {
float: none !important;
width: 100%;
text-align: center;
}
} }

10
templates/bio.html
View file

@ -1,8 +1,10 @@
{% extends 'master.html' %} {% extends 'master.html' %}
{% block body %} {% block body %}
<div class="section" id="bio"> <div class="section-wrapper">
<h2>about me</h2> <div class="section" id="bio">
<p>I have work experience using HTML, CSS, JavaScript, jQuery, AngularJS, NodeJS, PHP, Laravel, WordPress, Magento. Shopify, Ruby on Rails, Python, Linux, Ubuntu Server 14.04, and I have the Certified System Administrator certification from the Linux Foundation. As far as software goes, I'm proficient in git, GIMP, and vim. All of my learning so far has been from self-study, so I am very independent and self-motivated; little to no direction isn’t a problem for me. I’m also a very quick learner and I’m detail-oriented. I tend to stay up late at night working and wake up early the next day to continue working when I have a big project. I love Open Source software, and I use Arch Linux as my primary operating system. I have made a few minor contributions to open source software, as seen on my GitHub profile. </p> <h2>about me</h2>
<p>When I was 16 years old I decided to go on a foreign exchange trip, and I wanted to go to Europe. I wasn’t too particular about where exactly though and I ended up going to Finland. Finnish is a very difficult language to learn and the people there are more reserved than most Americans. Add to that mix a nearly 6 month winter with temperatures as low as -24 F (-31 C) and you can see how this was quite a life-changing experience. I left Finland fluent in Spanish and conversational in Finnish. The Finns were rather shy, at least with me, so I spent most of my time with Latin American exchange students and actually met my current fiancée there. When I returned to the US, I finished my last year of high school and then moved to Mexico, precisely for my fiancée, who was only my girlfriend at the time. When I got to Mexico, I had a couple thousand dollars saved up, I had no visas or permissions to work, but I at least spoke Spanish. Within 2 weeks of being there I was able to find work teaching English, and I later found a better teaching position and got my visa situation taken care of. Prior to teaching I had only gained experience in sales and retail, so teaching was a completely new experience for me. It wasn’t my favorite thing to do, however, so I decided that I needed to get some more education in order to get into a field that I actually would enjoy. I began to teach myself HTML/CSS, JavaScript, and Python in my free time since I’ve always been a tech junkie. At 20 years old, I began my first job in web development, only 4 months after I began studying programming. In the 6 months that I've been there, I've learned PHP, Laravel, WordPress, some Magento, some Ruby on Rails, and Shopify development. I am also conversational in German, since German is a pretty popular language around the tech world from what I’ve seen. I’m currently 21 years old, I speak English, Spanish, Finnish, and German, and can code in HTML, CSS, JavaScript, PHP, Ruby and Python, am a certified Linux System Administrator, and I’d like to think that I’ve overcome more difficulties and had more life experiences than most people twice my age have.</p> <p>I have work experience using HTML, CSS, JavaScript, jQuery, AngularJS, NodeJS, PHP, Laravel, WordPress, Magento. Shopify, Ruby on Rails, Python, Linux, Ubuntu Server 14.04, and I have the Certified System Administrator certification from the Linux Foundation. As far as software goes, I'm proficient in git, GIMP, and vim. All of my learning so far has been from self-study, so I am very independent and self-motivated; little to no direction isn’t a problem for me. I’m also a very quick learner and I’m detail-oriented. I tend to stay up late at night working and wake up early the next day to continue working when I have a big project. I love Open Source software, and I use Arch Linux as my primary operating system. I have made a few minor contributions to open source software, as seen on my GitHub profile. </p>
<p>When I was 16 years old I decided to go on a foreign exchange trip, and I wanted to go to Europe. I wasn’t too particular about where exactly though and I ended up going to Finland. Finnish is a very difficult language to learn and the people there are more reserved than most Americans. Add to that mix a nearly 6 month winter with temperatures as low as -24 F (-31 C) and you can see how this was quite a life-changing experience. I left Finland fluent in Spanish and conversational in Finnish. The Finns were rather shy, at least with me, so I spent most of my time with Latin American exchange students and actually met my current fiancée there. When I returned to the US, I finished my last year of high school and then moved to Mexico, precisely for my fiancée, who was only my girlfriend at the time. When I got to Mexico, I had a couple thousand dollars saved up, I had no visas or permissions to work, but I at least spoke Spanish. Within 2 weeks of being there I was able to find work teaching English, and I later found a better teaching position and got my visa situation taken care of. Prior to teaching I had only gained experience in sales and retail, so teaching was a completely new experience for me. It wasn’t my favorite thing to do, however, so I decided that I needed to get some more education in order to get into a field that I actually would enjoy. I began to teach myself HTML/CSS, JavaScript, and Python in my free time since I’ve always been a tech junkie. At 20 years old, I began my first job in web development, only 4 months after I began studying programming. In the 6 months that I've been there, I've learned PHP, Laravel, WordPress, some Magento, some Ruby on Rails, and Shopify development. I am also conversational in German, since German is a pretty popular language around the tech world from what I’ve seen. I’m currently 21 years old, I speak English, Spanish, Finnish, and German, and can code in HTML, CSS, JavaScript, PHP, Ruby and Python, am a certified Linux System Administrator, and I’d like to think that I’ve overcome more difficulties and had more life experiences than most people twice my age have.</p>
</div>
</div> </div>
{% endblock %} {% endblock %}

10
templates/blog-post.html
View file

@ -1,10 +1,12 @@
{% extends 'master.html' %} {% extends 'master.html' %}
{% block body %} {% block body %}
{% for data in post %} {% for data in post %}
<div class="section"> <div class="section-wrapper">
<h2>{{ data.title }}</h2> <div class="section">
<em>{{ data.updated }}</em> <h2>{{ data.title }}</h2>
{{ data.text | safe }} <em>{{ data.updated }}</em>
{{ data.text | safe }}
</div>
</div> </div>
{% endfor %} {% endfor %}
{% endblock %} {% endblock %}

14
templates/blog.html
View file

@ -1,15 +1,17 @@
{% extends "master.html" %} {% extends "master.html" %}
{% block body %} {% block body %}
<div class="section"> <div class="section-wrapper">
<h2>blog</h2> <div class="section">
{% for entry in entries %} <h2>blog</h2>
{% for entry in entries %}
<div class="blog-entry"> <div class="blog-entry">
<h3><a href="{{ url_for('blog') }}/{{ entry.url }}">{{ entry.title }}</a></h3> <h3><a href="{{ url_for('blog') }}/{{ entry.url }}">{{ entry.title }}</a></h3>
<h5>{{ entry.updated }}</h5> <h5>{{ entry.updated }}</h5>
{{ entry.text|safe }} {{ entry.text|safe }}
</div> </div>
{% else %} {% else %}
<em>Sorry, I still haven't gotten around to moving my blog posts over!</em> <em>Sorry, I still haven't gotten around to moving my blog posts over!</em>
{% endfor %} {% endfor %}
</div> </div>
</div>
{% endblock %} {% endblock %}

64
templates/contact.html
View file

@ -1,36 +1,38 @@
{% extends 'master.html' %} {% extends 'master.html' %}
{% block body %} {% block body %}
<div class="section" id="contact"> <div class="section-wrapper">
<h2>contact</h2> <div class="section" id="contact">
{% from "_formhelper.html" import render_field %} <h2>contact</h2>
<form method="post" action="{{ url_for('contact') }}"> {% from "_formhelper.html" import render_field %}
<dl> <form method="post" action="{{ url_for('contact') }}">
{{ render_field(form.name) }} <dl>
{{ render_field(form.email) }} {{ render_field(form.name) }}
{{ render_field(form.message) }} {{ render_field(form.email) }}
</dl> {{ render_field(form.message) }}
<p style="margin-left: 40px;"><input type="submit" value="Send"> </dl>
</form> <p style="margin-left: 40px;"><input type="submit" value="Send">
<div class="one-half"> </form>
<a class="twitter-timeline" href="https://twitter.com/BillyBrawner1" data-widget-id="706308392311136256">Tweets by @BillyBrawner1</a> <div class="one-half">
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <a class="twitter-timeline" href="https://twitter.com/BillyBrawner1" data-widget-id="706308392311136256">Tweets by @BillyBrawner1</a>
</div> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div class="one-half">
<!-- Facebook Badge START --><a href="https://www.facebook.com/wpbrawner" title="Billy Brawner" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" target="_TOP">Billy Brawner</a><span style="font-family: &#039;lucida grande&#039;,tahoma,verdana,arial,sans-serif;font-size: 11px;line-height: 16px;font-variant: normal;font-style: normal;font-weight: normal;color: #555555;text-decoration: none;">&nbsp;|&nbsp;</span><a href="https://www.facebook.com/badges/" title="Make your own badge!" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" target="_TOP">Create Your Badge</a><br /><a href="https://www.facebook.com/wpbrawner" title="Billy Brawner" target="_TOP"><img class="img" src="https://badge.facebook.com/badge/1058965332.287.1992111354.png" style="border: 0px;" alt="" /></a><!-- Facebook Badge END -->
<div id="instafeed">
<script type="text/javascript">
{% raw %}
var feed = new Instafeed({
get: 'user',
userId: 2113424423,
limit: 6,
accessToken: '2113424423.467ede5.2a622e2c959943169a932f91a1972302',
template: '<a class="insta-link" href="{{link}}" target="_blank"><span class="insta-caption-bg"></span><span class="insta-caption">{{caption}}</span><img class="insta-foto" src="{{image}}" /></a>'
});
feed.run();
{% endraw %}
</script>
</div> </div>
</div> <div class="one-half">
<!-- Facebook Badge START --><a href="https://www.facebook.com/wpbrawner" title="Billy Brawner" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" target="_TOP">Billy Brawner</a><span style="font-family: &#039;lucida grande&#039;,tahoma,verdana,arial,sans-serif;font-size: 11px;line-height: 16px;font-variant: normal;font-style: normal;font-weight: normal;color: #555555;text-decoration: none;">&nbsp;|&nbsp;</span><a href="https://www.facebook.com/badges/" title="Make your own badge!" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" target="_TOP">Create Your Badge</a><br /><a href="https://www.facebook.com/wpbrawner" title="Billy Brawner" target="_TOP"><img class="img" src="https://badge.facebook.com/badge/1058965332.287.1992111354.png" style="border: 0px;" alt="" /></a><!-- Facebook Badge END -->
<div id="instafeed">
<script type="text/javascript">
{% raw %}
var feed = new Instafeed({
get: 'user',
userId: 2113424423,
limit: 6,
accessToken: '2113424423.467ede5.2a622e2c959943169a932f91a1972302',
template: '<a class="insta-link" href="{{link}}" target="_blank"><span class="insta-caption-bg"></span><span class="insta-caption">{{caption}}</span><img class="insta-foto" src="{{image}}" /></a>'
});
feed.run();
{% endraw %}
</script>
</div>
</div>
</div>
</div> </div>
{% endblock %} {% endblock %}

9
templates/home.html
View file

@ -5,9 +5,6 @@
</h1> </h1>
<div class="section-wrapper"> <div class="section-wrapper">
<div class="section" id="blog"> <div class="section" id="blog">
<div class="section-bg">
<img src="{{ url_for('static', filename='img/bg-blur.jpg') }}">
</div>
<h2 style="margin-top: 0;">from my blog</h2> <h2 style="margin-top: 0;">from my blog</h2>
{% for entry in entries %} {% for entry in entries %}
<div class="blog-entry"> <div class="blog-entry">
@ -23,9 +20,6 @@
</div> </div>
<div class="section-wrapper"> <div class="section-wrapper">
<div class="section" id="projects"> <div class="section" id="projects">
<div class="section-bg">
<img src="{{ url_for('static', filename='img/bg-blur.jpg') }}">
</div>
<h2>projects</h2> <h2>projects</h2>
<div class="one-third"> <div class="one-third">
<a href="http://wbrawner.com/interval-timer" target="_blank"><img class="project-logo" style="max-width: 102px; border-radius: 50%;" src="{{ url_for('static', filename='img/interval-timer.png') }}"></a> <a href="http://wbrawner.com/interval-timer" target="_blank"><img class="project-logo" style="max-width: 102px; border-radius: 50%;" src="{{ url_for('static', filename='img/interval-timer.png') }}"></a>
@ -76,9 +70,6 @@
</div> </div>
<div class="section-wrapper"> <div class="section-wrapper">
<div class="section" id="bio"> <div class="section" id="bio">
<div class="section-bg">
<img src="{{ url_for('static', filename='img/bg-blur.jpg') }}">
</div>
<h2>quick facts</h2> <h2>quick facts</h2>
<table> <table>
<tbody> <tbody>

18
templates/login.html
View file

@ -1,10 +1,14 @@
{% extends "master.html" %} {% extends "master.html" %}
{% block body %} {% block body %}
<h2>Login</h2> <div class="section-wrapper">
{% if error %}<p class=error><strong>Error:</strong> {{ error }}{% endif %} <div class="section" id="contact">
<form action="{{ url_for('login') }}" method=post id="login-form"> <h2>Login</h2>
<input type="text" name="username" placeholder="username"> {% if error %}<p class=error><strong>Error:</strong> {{ error }}{% endif %}
<input type="password" name="password" placeholder="password"> <form action="{{ url_for('login') }}" method=post id="login-form">
<input type="submit" value="login"> <input type="text" name="username" placeholder="username">
</form> <input type="password" name="password" placeholder="password">
<input type="submit" value="login">
</form>
</div>
</div>
{% endblock %} {% endblock %}

88
templates/master.html
View file

@ -12,7 +12,7 @@
<script type="text/javascript" src="{{ url_for('static', filename='js/highlight.pack.js') }}"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/highlight.pack.js') }}"></script>
<link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.ico') }}"> <link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
<link rel="shortcut icon" href="{{ url_for('static', filename='css/styles/zenburn.css') }}"> <link rel="shortcut icon" href="{{ url_for('static', filename='css/styles/zenburn.css') }}">
<link rel="apple-touch-icon" href="{{ url_for('static', filename='img/favicon.png') }}"> <link rel="apple-touch-icon" href="{{ url_for('static', filename='img/apple-favicon.png') }}">
<script> <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (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].q=i[r].q||[]).push(arguments)
@ -66,47 +66,51 @@
<div class=flash>{{ message }}</div> <div class=flash>{{ message }}</div>
{% endfor %} {% endfor %}
{% block body %}{% endblock %} {% block body %}{% endblock %}
<div class="section-wrapper">
<div class="section" id="footer">
<div class="section-content" id="contact">
<p>William Brawner {{ current_year }}</p>
<p class="contact-btns">
<a class="social-link" href="mailto:contact@wbrawner.com?subject=Let's Work Together"><i class="fa fa-envelope-o"></i></a>
<a target="_blank" class="social-link" href="https://www.facebook.com/wpbrawner"><i class="fa fa-facebook"></i></a>
<a target="_blank" class="social-link" href="https://twitter.com/BillyBrawner1"><i class="fa fa-twitter"></i></a>
<a target="_blank" class="social-link" href="https://www.linkedin.com/profile/view?id=AAIAABAr3PgB2QY4LrVuT2tCxni4S7Rdi2FC3MY&trk=nav_responsive_tab_profile"><i class="fa fa-linkedin"></i></a>
<a target="_blank" class="social-link" href='http://stackexchange.com/users/6090478/billy-brawner'><i class="fa fa-stack-overflow"></i></a>
<a target="_blank" class="social-link" href='https://github.com/wbrawner'><i class="fa fa-github"></i></a>
</p>
</div>
</div>
</div>
</div> </div>
</div> </div>
<footer> <script>
<div class="one-third" id="contact"> $(document).ready(function() {
<p>contact</p> changeText()
<p class="contact-btns"><a class="social-link" href="mailto:contact@wbrawner.com?subject=Let's Work Together"><i class="fa fa-envelope-o"></i></a> var minHeight = window.innerHeight - 60 - $('body > footer').height();
<a target="_blank" class="social-link" href="https://www.facebook.com/wpbrawner"><i class="fa fa-facebook"></i></a> $('.container').css('min-height', minHeight);
<a target="_blank" class="social-link" href="https://twitter.com/BillyBrawner1"><i class="fa fa-twitter"></i></a> })
<a target="_blank" class="social-link" href="https://www.linkedin.com/profile/view?id=AAIAABAr3PgB2QY4LrVuT2tCxni4S7Rdi2FC3MY&trk=nav_responsive_tab_profile"><i class="fa fa-linkedin"></i></a> $(function() {
<a target="_blank" class="social-link" href='http://stackexchange.com/users/6090478/billy-brawner'><i class="fa fa-stack-overflow"></i></a> var menuVisible = false;
<a target="_blank" class="social-link" href='https://github.com/wbrawner'><i class="fa fa-github"></i></a></p> $('#menu-icon').click(function() {
</div> if (menuVisible) {
</footer> $('#menu').css({'max-height':'0'});
<script> menuVisible = false;
$(document).ready(function() { return;
changeText() }
var minHeight = window.innerHeight - 60 - $('body > footer').height(); $('#menu').css({'max-height':'200px'});
$('.container').css('min-height', minHeight); menuVisible = true;
}) });
$(function() { });
var menuVisible = false; var titles = ["certified linux system administrator.","web developer.", "linguist.", "traveller."];
$('#menu-icon').click(function() { function changeText() {
if (menuVisible) { var current = $("#changing-text").data("title") || 0;
$('#menu').css({'max-height':'0'}); $("#changing-text").data("title", current == titles.length -1 ? 0 : current + 1).text(titles[current])
menuVisible = false; .fadeIn().delay(2000).fadeOut(500, changeText);
return; }
} $(window).resize(function() {
$('#menu').css({'max-height':'200px'}); var minHeight = window.innerHeight - 60 - $('body > footer').height();
menuVisible = true; $('.container').css('min-height', minHeight);
}); })
}); </script>
var titles = ["certified linux system administrator.","web developer.", "linguist.", "traveller."];
function changeText() {
var current = $("#changing-text").data("title") || 0;
$("#changing-text").data("title", current == titles.length -1 ? 0 : current + 1).text(titles[current])
.fadeIn().delay(2000).fadeOut(500, changeText);
}
$(window).resize(function() {
var minHeight = window.innerHeight - 60 - $('body > footer').height();
$('.container').css('min-height', minHeight);
})
</script>
</body> </body>
</html> </html>

8
templates/projects.html
View file

@ -1,8 +1,9 @@
{% extends 'master.html' %} {% extends 'master.html' %}
{% block body %} {% block body %}
<div class="section"> <div class="section-wrapper">
<h2>projects</h2> <div class="section">
<div class="project-description"> <h2>projects</h2>
<div class="project-description">
<h3>interval timer app</h3> <h3>interval timer app</h3>
<p><a href="http://wbrawner.com/interval-timer" target="_blank" class="logo-link"><img class="project-logo" style="max-width: 102px; border-radius: 50%;" src="{{ url_for('static', filename='img/interval-timer.png') }}"></a>The interval timer app was a little experiment of mine to learn AngularJS and try something new. When I wrote it, I was using FirefoxOS on my phone, and working out from my apartment. While there were apps that ran an interval timer, there was no app that allowed you to customize the intervals for the timer. All of them basically gave you the times and cycles, and you had to comply. I decided that that wasn't good enough for me, so I threw together this app and published it to the Firefox Marketplace. Later, once FirefoxOS was discontinued, I migrated back to Android, and published the app in the Google Chrome Webstore. </p> <p><a href="http://wbrawner.com/interval-timer" target="_blank" class="logo-link"><img class="project-logo" style="max-width: 102px; border-radius: 50%;" src="{{ url_for('static', filename='img/interval-timer.png') }}"></a>The interval timer app was a little experiment of mine to learn AngularJS and try something new. When I wrote it, I was using FirefoxOS on my phone, and working out from my apartment. While there were apps that ran an interval timer, there was no app that allowed you to customize the intervals for the timer. All of them basically gave you the times and cycles, and you had to comply. I decided that that wasn't good enough for me, so I threw together this app and published it to the Firefox Marketplace. Later, once FirefoxOS was discontinued, I migrated back to Android, and published the app in the Google Chrome Webstore. </p>
<p>The interval timer app is completely open source, but as of this moment, I'm the only contributor. If you're interested, you can find the code on <a href="https://github.com/wbrawner/interval-timer">GitHub</a></p> <p>The interval timer app is completely open source, but as of this moment, I'm the only contributor. If you're interested, you can find the code on <a href="https://github.com/wbrawner/interval-timer">GitHub</a></p>
@ -23,5 +24,6 @@
<p><a href="http://wbrawner.com/" target="_blank" class="logo-link"><img class="project-logo" style="max-width: 102px; border: 0;" src="{{ url_for('static', filename='img/favicon.png') }}"></a>This site that you're looking at right now was also built by yours truly. It began as a basic HTML/CSS single-page website, then I decided to charge it up with WordPress and move a few things to their own pages. The motivation behind this move was that I had been using WordPress quite a bit in my work at the time, so I wanted to learn the ins and outs in order to do my job better. Some time later, I stopped getting so many WordPress tasks and so my desire to learn it faded a bit. I have nothing against WordPress, but I wanted to get back to my Python roots, and have a bit more control over everything running. Thus, I rewrote my website in Python using Flask, not for work or any other professional necessity, but simply for the joy of writing code in a language I'm more familiar with.</p> <p><a href="http://wbrawner.com/" target="_blank" class="logo-link"><img class="project-logo" style="max-width: 102px; border: 0;" src="{{ url_for('static', filename='img/favicon.png') }}"></a>This site that you're looking at right now was also built by yours truly. It began as a basic HTML/CSS single-page website, then I decided to charge it up with WordPress and move a few things to their own pages. The motivation behind this move was that I had been using WordPress quite a bit in my work at the time, so I wanted to learn the ins and outs in order to do my job better. Some time later, I stopped getting so many WordPress tasks and so my desire to learn it faded a bit. I have nothing against WordPress, but I wanted to get back to my Python roots, and have a bit more control over everything running. Thus, I rewrote my website in Python using Flask, not for work or any other professional necessity, but simply for the joy of writing code in a language I'm more familiar with.</p>
<p>I decided to make my personal website open source as well. If you're interested, you can find the code on <a href="https://github.com/wbrawner/flask-site">GitHub</a></p> <p>I decided to make my personal website open source as well. If you're interested, you can find the code on <a href="https://github.com/wbrawner/flask-site">GitHub</a></p>
</div> </div>
</div>
</div> </div>
{% endblock %} {% endblock %}