diff --git a/flask_site.py b/flask_site.py index f5f41fe..0fa5a8c 100644 --- a/flask_site.py +++ b/flask_site.py @@ -7,6 +7,7 @@ app.config.from_pyfile('config.py') def connect_db(): return sqlite3.connect(app.config['DATABASE']) + @app.before_request def before_request(): g.db = connect_db() @@ -18,10 +19,28 @@ def teardown_request(exception): db.close() @app.route('/') -def show_entries(): +def home(): cur = g.db.execute('select title, text from entries order by id desc') entries = [dict(title=row[0], text=row[1]) for row in cur.fetchall()] - return render_template('show_entries.html', entries=entries) + return render_template('home.html', entries=entries) + +@app.route('/bio') +def bio(): + return render_template('bio.html') + +@app.route('/blog') +def blog(): + cur = g.db.execute('select title, text from entries order by id desc') + entries = [dict(title=row[0], text=row[1]) for row in cur.fetchall()] + return render_template('blog.html', entries=entries) + +@app.route('/projects') +def projects(): + return render_template('projects.html') + +@app.route('/contact') +def contact(): + return render_template('contact.html') @app.route('/add', methods=['POST']) def add_entry(): diff --git a/static/css/style.css b/static/css/style.css index cbe4564..d2eb966 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,18 +1,473 @@ -body { font-family: sans-serif; background: #eee; } -a, h1, h2 { color: #377ba8; } -h1, h2 { font-family: Georgia, serif; margin: 0; } -h1 { border-bottom: 2px solid #eee; } -h2 { font-size: 1.2em; } +body { + font-family:'Open Sans', Tahoma, Geneva, sans-serif; + margin:0; + padding:0; + background-color:#fff; +} -.page { margin: 2em auto; width: 35em; border: 5px solid #ccc; - padding: 0.8em; background: white; } -.entries { list-style: none; margin: 0; padding: 0; } -.entries li { margin: 0.8em 1.2em; } -.entries li h2 { margin-left: -1em; } -.add-entry { font-size: 0.9em; border-bottom: 1px solid #ccc; } -.add-entry dl { font-weight: bold; } -.metanav { text-align: right; font-size: 0.8em; padding: 0.3em; - margin-bottom: 1em; background: #fafafa; } -.flash { background: #cee5F5; padding: 0.5em; - border: 1px solid #aacbe2; } -.error { background: #f0d6d6; padding: 0.5em; } +h1, h2, h3, h4, h5, h6 { + font-family: 'Ubuntu', sans-serif; +} + +a { + -webkit-transition: color 0.5s, background-color 0.5s; /* Safari */ + transition: color 0.5s, background-color 0.5s; +} + +pre { + max-width: 565px; + white-space: pre-wrap; + width: 95%; + margin: auto; +} + +td { + padding: 5px 20px; +} + +td ul { + display: inline-block; +} + +#nav { + position:fixed; + top:0; + margin:0; + background-color:#002900; + height:60px; + width:100vw; + z-index:99; +} + +.main-nav { + position:fixed; + top:0; + left: 0; + right: 0; + height:50px; + width:100vw; + max-width: 1100px; + margin:auto; + padding:12px 0; + z-index:99; +} + +.main-nav h1 { + top:20px; + color:white; + text-align:left; + display:inline; + padding:10px; + width:200px; + font-size:30px; +} + +.main-nav h1 a:link, .main-nav h1 a:visited, .main-nav h1 a:hover, .main-nav h1 a:active { + color:white; + text-decoration:none; +} + +.main-nav ul { + float:right; + margin-top:-5px; + margin:0; + padding:0; + list-style-type:none; +} + +.main-nav li { + display:inline-block; + margin:0 auto; + padding:0; + width: 120px; +} + +.main-nav li a { + display:block; +} + +.main-nav li a:link, .main-nav li a:visited { + text-decoration:none; + text-align:center; + color:white; + padding:5px; + margin:0 auto; + font-size:16px; + font-weight:bold; + border-radius: 40px; + width: 80%; +} + +.main-nav li a:hover, .main-nav li a:active { + background-color:#5C995C; +} + +.main-nav p { + margin:0 0 0 15px; + padding:0; + color:white; + font-size:12px; +} + +.main-nav p a { + text-decoration:none; + color:white; +} + +#menu { + display:inline-block; +} + +#menu-icon { + display:none; +} + +.nav-spacer { + width: 100%; + height: 100px; +} + +.container { + min-height: 100vh - 60px; + padding-top: 60px; +} + +.content { + width:90%; + max-width:1100px; + margin:auto; +} + +.content h1, .content h2 { + color:#002900; + text-align:left; + padding: 5px; + border-bottom: 1px solid #002900; +} + +.section { + border-radius: 40px; + padding:1px 15px 15px 15px; +} + +.one-third { + width: 30%; + margin: 5px 1.5%; + float: left; + text-align: center; +} + +h1.entry-title { + padding: 5px; + border-bottom: 1px solid black; + text-align: left; +} + +a.view-more { + display: block; + float: right; +} + +#home { + color:white; +} +a.insta-link { + display: inline-block; + float: left; + position: relative; +} + +a.insta-link span { + border-radius: 50%; + color: #fff; + opacity: 0; + position: absolute; + -webkit-transition:opacity 0.25s linear; + transition:opacity 0.25s linear; +} + +a.insta-link:hover span { + opacity: 1; +} + +span.insta-caption-bg { + background-color: rgba(0, 0, 0, 0.75); + top: 0; + bottom: 0; + left: 0; + width: 150px; + height: 150px; + right: 0; + margin: 10px; +} + +span.insta-caption { + text-align: center; + position: absolute; + top: 50%; + left: 0; + right: 0; + width: 130px; + margin: 0 20px; + height: auto; + max-height: 130px; + font-size: 14px; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); +} + +div#instafeed { + overflow: hidden; + width: 95%; + max-width: 1100px; + margin: 60px auto; +} + +#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 { + display:inline-block; + width:70%; +} + +.glance { + display:inline-block; + width:20%; +} + +.glance p { + text-align:center; +} + +.glance ul { + margin:auto; + display:inline-block; +} + +#projects { + background-color:#002900; + color:white; + margin:50px auto; + overflow: hidden; +} + +#projects h2 { + color: #ffffff; + border-bottom: 1px solid white; +} + +#projects h3 { + margin: 10px auto; +} + +#projects p { + margin: 5px auto; +} + +.project { + width:75%%; + margin: 0 auto 10px; + text-align: left; + overflow: hidden; +} + +.project li { + float:left; + width:50%; + +} + +.project-logo { + height: auto; + width: 95%; + max-width: 200px; + max-height: 100px; + margin: auto; + border: 1px solid white; +} + +.ff-store-link { + height: auto; + width: 40%; + margin: auto; +} + +.chrome-webstore-link { + height: auto; + width: 51%; + margin: auto; +} + +.project h4 { + text-align:center; +} + +footer { + display: block; + width: 100%; + background-color: #002900; + border-top: 3px solid #fff; + text-align: center; + overflow: hidden; + color: #fff; +} + +a#menu-icon { + color: #fff; +} + +a.social-link { + font-size: 20px; + margin: 0 5px; +} + +a.social-link:link, a.social-link:visited { + color: #fff; +} + +a.social-link:hover, a.social-link:active { + color: #476C47; +} + +.section a:link, .section a:visited { + color: #476C47; +} + +.section a:hover, .section a:active { + color: #000; +} + +.entry-footer { + border-radius: 50px; +} + +.entry-footer span { + margin: auto 5px; +} + +.entry-footer a:link, .entry-footer a:visited { + color: #5C995C; +} + +.entry-footer a:hover, .entry-footer a:active { + color: #fff; +} + +@media all and (max-width: 1192px) { + div#instafeed { + max-width: 510px; + } +} + +@media screen and (max-width:1024px) { + .main-nav, #nav { + position: absolute; + } + + #menu { + display:none; + width:100vw; + position: absolute; + top: 60px; + left: 0; + padding:0; + background-color:#002900; + float:none; + } + + #menu-icon { + position:absolute; + right:30px; + display:inline; + height:20px; + width:auto; + margin:10px; + } + + .main-nav li { + display:block; + margin:0 auto; + padding:0; + background-color:#002900; + width:100%; + } + + .main-nav li a { + width:90%; + margin: 0 auto; + } + + .desktop { + display:none; + } + + .glance { + width:95%; + margin:auto; + } + + .project { + display:block; + width:95%; + margin:auto; + } + + .project-logo { + display: block; + float:none; + margin:auto; + } + .social-link { + font-size: 30px; + } +} + +@media all and (max-width: 768px) { + div#instafeed { + max-width: 340px; + } +} + +@media all and (max-width: 870px) { + .one-third { + width: 45%; + margin: 5px 2.5% 40px; + } +} + +@media all and (max-width: 782px) { + .customize-support #nav, .customize-support .main-nav { + top: 46px; + } +} + +@media all and (max-width: 700px) { + .one-third { + width: 90%; + margin: 5px 5% 40px; + } +} + +@media all and (max-width: 596px) { + div#instafeed { + max-width: 340px; + } +} + +@media all and (max-width: 414px) { + div#instafeed { + max-width: 170px; + } +} diff --git a/static/img/chrome-webstore.png b/static/img/chrome-webstore.png new file mode 100644 index 0000000..bcf2e28 Binary files /dev/null and b/static/img/chrome-webstore.png differ diff --git a/static/img/ff-marketplace.png b/static/img/ff-marketplace.png new file mode 100644 index 0000000..b004b5d Binary files /dev/null and b/static/img/ff-marketplace.png differ diff --git a/static/img/interval-timer.png b/static/img/interval-timer.png new file mode 100644 index 0000000..ddb3eab Binary files /dev/null and b/static/img/interval-timer.png differ diff --git a/static/img/sinconsa.png b/static/img/sinconsa.png new file mode 100644 index 0000000..ea96fbe Binary files /dev/null and b/static/img/sinconsa.png differ diff --git a/static/img/workout-generator.png b/static/img/workout-generator.png new file mode 100644 index 0000000..7c95d6e Binary files /dev/null and b/static/img/workout-generator.png differ diff --git a/static/js/instafeed.min.js b/static/js/instafeed.min.js new file mode 100644 index 0000000..62d8662 --- /dev/null +++ b/static/js/instafeed.min.js @@ -0,0 +1,2 @@ +// Generated by CoffeeScript 1.9.3 +(function(){var e;e=function(){function e(e,t){var n,r;this.options={target:"instafeed",get:"popular",resolution:"thumbnail",sortBy:"none",links:!0,mock:!1,useHttp:!1};if(typeof e=="object")for(n in e)r=e[n],this.options[n]=r;this.context=t!=null?t:this,this.unique=this._genKey()}return e.prototype.hasNext=function(){return typeof this.context.nextUrl=="string"&&this.context.nextUrl.length>0},e.prototype.next=function(){return this.hasNext()?this.run(this.context.nextUrl):!1},e.prototype.run=function(t){var n,r,i;if(typeof this.options.clientId!="string"&&typeof this.options.accessToken!="string")throw new Error("Missing clientId or accessToken.");if(typeof this.options.accessToken!="string"&&typeof this.options.clientId!="string")throw new Error("Missing clientId or accessToken.");return this.options.before!=null&&typeof this.options.before=="function"&&this.options.before.call(this),typeof document!="undefined"&&document!==null&&(i=document.createElement("script"),i.id="instafeed-fetcher",i.src=t||this._buildUrl(),n=document.getElementsByTagName("head"),n[0].appendChild(i),r="instafeedCache"+this.unique,window[r]=new e(this.options,this),window[r].unique=this.unique),!0},e.prototype.parse=function(e){var t,n,r,i,s,o,u,a,f,l,c,h,p,d,v,m,g,y,b,w,E,S,x,T,N,C,k,L,A,O,M,_,D;if(typeof e!="object"){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"Invalid JSON data"),!1;throw new Error("Invalid JSON response")}if(e.meta.code!==200){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,e.meta.error_message),!1;throw new Error("Error from Instagram: "+e.meta.error_message)}if(e.data.length===0){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"No images were returned from Instagram"),!1;throw new Error("No images were returned from Instagram")}this.options.success!=null&&typeof this.options.success=="function"&&this.options.success.call(this,e),this.context.nextUrl="",e.pagination!=null&&(this.context.nextUrl=e.pagination.next_url);if(this.options.sortBy!=="none"){this.options.sortBy==="random"?M=["","random"]:M=this.options.sortBy.split("-"),O=M[0]==="least"?!0:!1;switch(M[1]){case"random":e.data.sort(function(){return.5-Math.random()});break;case"recent":e.data=this._sortBy(e.data,"created_time",O);break;case"liked":e.data=this._sortBy(e.data,"likes.count",O);break;case"commented":e.data=this._sortBy(e.data,"comments.count",O);break;default:throw new Error("Invalid option for sortBy: '"+this.options.sortBy+"'.")}}if(typeof document!="undefined"&&document!==null&&this.options.mock===!1){m=e.data,A=parseInt(this.options.limit,10),this.options.limit!=null&&m.length>A&&(m=m.slice(0,A)),u=document.createDocumentFragment(),this.options.filter!=null&&typeof this.options.filter=="function"&&(m=this._filter(m,this.options.filter));if(this.options.template!=null&&typeof this.options.template=="string"){f="",d="",w="",D=document.createElement("div");for(c=0,N=m.length;cy&&(b="landscape"),E=0,l&&!this.options.useHttp&&(v=v.replace(/https?:\/\//,"//")),d=this._makeTemplate(this.options.template,{model:h,id:h.id,link:h.link,type:h.type,image:v,width:E,height:y,orientation:b,caption:this._getObjectProperty(h,"caption.text"),likes:h.likes.count,comments:h.comments.count,location:this._getObjectProperty(h,"location.name")}),f+=d}D.innerHTML=f,i=[],r=0,n=D.childNodes.length;while(r=0,l&&!this.options.useHttp&&(v=v.replace(/https?:\/\//,"//")),g.src=v,this.options.links===!0?(t=document.createElement("a"),t.href=h.link,t.appendChild(g),u.appendChild(t)):u.appendChild(g)}_=this.options.target,typeof _=="string"&&(_=document.getElementById(_));if(_==null)throw o='No element with id="'+this.options.target+'" on page.',new Error(o);_.appendChild(u),a=document.getElementsByTagName("head")[0],a.removeChild(document.getElementById("instafeed-fetcher")),S="instafeedCache"+this.unique,window[S]=void 0;try{delete window[S]}catch(P){s=P}}return this.options.after!=null&&typeof this.options.after=="function"&&this.options.after.call(this),!0},e.prototype._buildUrl=function(){var e,t,n;e="https://api.instagram.com/v1";switch(this.options.get){case"popular":t="media/popular";break;case"tagged":if(!this.options.tagName)throw new Error("No tag name specified. Use the 'tagName' option.");t="tags/"+this.options.tagName+"/media/recent";break;case"location":if(!this.options.locationId)throw new Error("No location specified. Use the 'locationId' option.");t="locations/"+this.options.locationId+"/media/recent";break;case"user":if(!this.options.userId)throw new Error("No user specified. Use the 'userId' option.");t="users/"+this.options.userId+"/media/recent";break;default:throw new Error("Invalid option for get: '"+this.options.get+"'.")}return n=e+"/"+t,this.options.accessToken!=null?n+="?access_token="+this.options.accessToken:n+="?client_id="+this.options.clientId,this.options.limit!=null&&(n+="&count="+this.options.limit),n+="&callback=instafeedCache"+this.unique+".parse",n},e.prototype._genKey=function(){var e;return e=function(){return((1+Math.random())*65536|0).toString(16).substring(1)},""+e()+e()+e()+e()},e.prototype._makeTemplate=function(e,t){var n,r,i,s,o;r=/(?:\{{2})([\w\[\]\.]+)(?:\}{2})/,n=e;while(r.test(n))s=n.match(r)[1],o=(i=this._getObjectProperty(t,s))!=null?i:"",n=n.replace(r,function(){return""+o});return n},e.prototype._getObjectProperty=function(e,t){var n,r;t=t.replace(/\[(\w+)\]/g,".$1"),r=t.split(".");while(r.length){n=r.shift();if(!(e!=null&&n in e))return null;e=e[n]}return e},e.prototype._sortBy=function(e,t,n){var r;return r=function(e,r){var i,s;return i=this._getObjectProperty(e,t),s=this._getObjectProperty(r,t),n?i>s?1:-1:i +

about me

+

extended bio coming soon...

+ +{% endblock %} diff --git a/templates/show_entries.html b/templates/blog.html similarity index 73% rename from templates/show_entries.html rename to templates/blog.html index 25042d8..87bc4fe 100644 --- a/templates/show_entries.html +++ b/templates/blog.html @@ -11,11 +11,12 @@ {% endif %} -
    +
    {% for entry in entries %} -

  • {{ entry.title }}

    {{ entry.text|safe }} +

    {{ entry.title }}

    + {{ entry.text|safe }} {% else %} -
  • Unbelievable. No entries here so far + Sorry, I still haven't gotten around to moving my blog posts over! {% endfor %} -
+ {% endblock %} diff --git a/templates/contact.html b/templates/contact.html new file mode 100644 index 0000000..77c2e49 --- /dev/null +++ b/templates/contact.html @@ -0,0 +1,57 @@ +{% extends 'master.html' %} +{% block body %} +

+ web developer. +

+ +
+

from my blog

+
+
+

projects

+
+ +

interval timer app

+

languages/technologies used:

+
    +
  • English
    • +
  • HTML/CSS
    • +
  • JavaScript
    • +
  • AngularJS
    • +
  • GIMP
    • +
+ + +
+
+ +

workout generator app

+

languages/technologies used:

+
    +
  • English
    • +
  • HTML/CSS
    • +
  • JavaScript
    • +
  • JQuery
    • +
  • PHP
    • +
  • Laravel
    • +
  • GIMP
    • +
  • VIM
    • +
  • MySQL
    • +
+
+
+ +

sinconsa consultores

+

languages/technologies used:

+
    +
  • Spanish
    • +
  • HTML/CSS
    • +
  • JavaScript
    • +
  • JQuery
    • +
  • CPanel
    • +
  • GIMP
    • +
  • VIM
    • +
+
+
+{% endblock %} diff --git a/templates/home.html b/templates/home.html new file mode 100644 index 0000000..554ecc4 --- /dev/null +++ b/templates/home.html @@ -0,0 +1,128 @@ +{% extends 'master.html' %} +{% block body %} +

+ web developer. +

+ +
+

from my blog

+ {% for entry in entries %} +

{{ entry.title }}

+ {{ entry.text|safe }} + {% else %} + Sorry, I still haven't gotten around to moving my blog posts over! + {% endfor %} + Read more » +
+
+

projects

+
+ +

interval timer app

+

languages/technologies used:

+
    +
  • English
    • +
  • HTML/CSS
    • +
  • JavaScript
    • +
  • AngularJS
    • +
  • GIMP
    • +
+ + +
+
+ +

workout generator app

+

languages/technologies used:

+
    +
  • English
    • +
  • HTML/CSS
    • +
  • JavaScript
    • +
  • JQuery
    • +
  • PHP
    • +
  • Laravel
    • +
  • GIMP
    • +
  • VIM
    • +
  • MySQL
    • +
+
+
+ +

sinconsa consultores

+

languages/technologies used:

+
    +
  • Spanish
    • +
  • HTML/CSS
    • +
  • JavaScript
    • +
  • JQuery
    • +
  • CPanel
    • +
  • GIMP
    • +
  • VIM
    • +
+
+ See more » +
+
+

quick facts

+ + + + + + + + + + + + + + + + + + + + + + + +
+ current employer: + + White Rabbit +
+ current occupation: + + web developer +
+ previous occupations: + + cashier, front desk receptionist, gym membership salesman, personal trainer, efl teacher +
+ background: + +
    +
  • 13 years old: first time out of the USA - trip to Japan
    • +
  • 16 years old: first experience living in another country - foreign exchange student program in Finland
    • +
  • 18 years old: graduated high school and moved to Mexico
    • +
+
+ languages: + +
    +
  • English
    • +
  • Spanish
    • +
  • Finnish
    • +
  • German
    • +
+
    +
  • HTML/CSS
    • +
  • JavaScript
    • +
  • PHP
    • +
  • Python
    • +
+
+ Learn more » +
+{% endblock %} diff --git a/templates/master.html b/templates/master.html index 169b578..0dd55aa 100644 --- a/templates/master.html +++ b/templates/master.html @@ -1,17 +1,108 @@ - -Flask Site - -
-

Flask Site

-
- {% if not session.logged_in %} - log in - {% else %} - log out - {% endif %} -
- {% for message in get_flashed_messages() %} -
{{ message }}
- {% endfor %} - {% block body %}{% endblock %} -
+ + + + William Brawner + + + + + + + + + + + + + + +
+
+ {% for message in get_flashed_messages() %} +
{{ message }}
+ {% endfor %} + {% block body %}{% endblock %} +
+
+
+ +
+ + + diff --git a/templates/projects.html b/templates/projects.html new file mode 100644 index 0000000..3412db5 --- /dev/null +++ b/templates/projects.html @@ -0,0 +1,7 @@ +{% extends 'master.html' %} +{% block body %} +
+

projects

+

extended projects info coming soon...

+
+{% endblock %}