jessebot/tiny_personal_website
1
0
Fork 0
mirror of https://github.com/jessebot/tiny_personal_website.git synced 2025-10-01 01:48:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

seems to be printing okay, and is not AWFUL to look at

Browse source
This commit is contained in:
JesseBot 2022-10-05 13:40:09 +02:00
parent 8a0bd7f0cc
commit 753885d7dc
9 changed files with 114 additions and 609 deletions
Download patch file Download diff file Expand all files Collapse all files

23
config/config.yaml
View file

@ -2,32 +2,41 @@
# absolute path required
web_root: '/var/www/html'
# favicon, can take any image type
favicon: 'favicon_smile.gif'
favicon: 'favicon.ico'
# domain name, or whatever you want the tab in the browser to say
website_title: 'jessebot.work'
# the default image shown at the front of the page
image: './my_picture.png'
# image alt text
image_alt: 'Portrait selfie of a 30 year old person with an undercut and medium legnth blue hair parted to the side. They are smiling and wearing a black shirt.'
# Your name
name: 'Jesse Hitch'
# Job Title
occupation: 'DevOps Engineer'
# blurb about yourself
blurb: "I'm a DevOps engineer who's always looking for a fun project. I can get your CI/CD setup, create tool sets, and automate anything else you need. Python is my weapon of choice, and Linux remains my valiant companion. Together we navigate the ever changing waters of Kubernetes! I am excellent at relieving developer headaches due to tedious technical tasks, and I can also help your diversity and inclusion efforts!"
# Skills - what you're good at.
skills: ['linux', 'devops']
# things you like
likes: ['videogames', 'analogies', 'silly hair']
# social links you want to display on the profile
social_links:
- github
- gitlab
- linkedin
# Full URL to your github
github_URL: 'https://github.com/jessebot'
# Full URL to your gitlab
gitlab_URL: 'https://gitlab.com/jessebot'
# Full URL to your linkedin public profile
linkedin_URL: 'https://www.linkedin.com/in/jesse-hitch-8b5b023a/'
# complete google doc sharing URL, assuming this is public
resume_live_doc_URL: 'https://docs.google.com/document/d/blahblahblah'
linkedin_URL: 'https://www.linkedin.com/in/jesse-hitch'
# in your google doc, you can go to download as and right click copy that
# URL, or you can host a live copy at another URL
resume_pdf_URL: ''
resume_pdf_URL: "https://docs.google.com/document/d/1O-qsyVP444QeaBi9EwygDlGzIWvMMUJP80cPsk2Z6lg/export?format=pdf"
# setting to false will remove fork me corner banner
fork_me: True
fork_me: true
# Boolean, if set to True, will generate new panel with below info
optional_panel: True
optional_panel: true
# this could be social media, other conent, whatever suits you!
opt_panel_title: "Linux Newbie Class"
opt_panel_image: "penguin_copy.png"

22
routes.py
View file

@ -1,7 +1,7 @@
#!/usr/bin/env python3.10
# Jesse Hitch - JesseBot@Linux.com
from flask import Flask
from flask import render_template, url_for
from flask import render_template
import logging as log
import sys
import yaml
@ -22,27 +22,15 @@ def get_global_variables():
return doc
app = Flask(__name__)
app = Flask(__name__, static_folder='static')
@app.route('/')
def index():
"""
single page resume site with downloadable PDF for resume
"""
# Grab site specific information - YAML
log.info("Good morning, sunshine. It's index time.")
globals = get_global_variables()
return render_template('index.html', globals=globals)
@app.route('/static/images/<filename>')
def images(filename):
return url_for('static', filename=filename)
@app.route('/static/js/<filename>')
def js(filename):
return url_for('static', filename=filename)
@app.route('/static/css/<filename>')
def css(filename):
return url_for('static', filename=filename)

175
static/css/font-style.css
View file

File diff suppressed because one or more lines are too long

333
static/css/main.css
View file

@ -19,12 +19,18 @@
/**********BASE CONFIGURATIONS**********/
body {
background:#1f1f1f;
font-family: 'Open Sans', sans-serif;
background:#1f1f1f;
font-family: 'Open Sans', sans-serif;
text-align: center;
color: silver;
justify-content: center;
align-items: center;
display: flex;
}
h1 {
font-family: 'Raleway', sans-serif;}
font-family: 'Raleway', sans-serif;
}
h3, h4, h5 {
font-family: 'Open Sans', sans-serif;
@ -66,11 +72,19 @@ h5 {
.dash-unit {
margin-bottom: 30px;
padding-bottom:10px;
border: 1px solid #383737;
background-image:url('../images/sep-half.png');
background-color: #3d3d3d;
color:white;
/*--- height:290px; ---*/
width: 25rem;
border-radius: 4px;
-moz-border-radius: 4px;
border:1px solid #3d3d3d;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
-moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
opacity: 0.97;
filter: alpha(opacity=97);
}
.dash-unit:hover {
@ -174,6 +188,7 @@ h5 {
background-color: #3d3d3d;
color:white;
height:130px;
width: 18rem;
}
.half-unit:hover {
@ -308,7 +323,6 @@ input[type=text], textarea {
background: #cdcbcc;
font-size: 13px;
display: block;
width: 100%;
border: none;
box-shadow: none;
height: 30px;
@ -320,47 +334,10 @@ input[type=text], textarea {
textarea {
line-height: 18px;
padding: 18px;
width: 100%;
text-indent: 0;
}
.textarea-container { margin: 0 18px; }
.textarea-container textarea { margin-left: -18px; }
#contact textarea { width: 100%; height: 45px; }
.progress-bar {
background-color: #b2c831;
}
/***********LineIcons Styles***********/
.info-user {
text-align:center;
font-size: 24px;
color: #b2c831;
}
.fs1 {
padding:5px 5px 5px 5px;
position:relative;
}
.fs1:hover {
position:relative;
color: #fff;
cursor:pointer
}
.fs2 {
padding:5px 5px 5px 5px;
position:relative;
font-size:35px;
vertical-align: text-bottom
}
/**********Clock Configuration**********/
@ -377,122 +354,6 @@ digiclock {
}
/**********Mail Style Configuration**********/
.framemail {
cursor: default;
}
.framemail .window {
font-size: 0;
margin-top: -1px;
overflow: hidden;
margin-left: -18px;
}
.framemail .window .mail li {
background-color:#3d3d3d;
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
border-top: 1px solid #888;
position: relative;
margin-left:-18px;
}
.framemail .window .mail li:first-child {
border-top: none;
}
.framemail .window .mail li:hover {
background-color: #5d5b5b;
}
.framemail .window .mail li:after,
.framemail .window .mail li:before {
border-left: 8px solid transparent;
border-top: 8px solid #df6;
content: '';
height: 0;
position: absolute;
right: 0;
top: 0;
width: 0;
}
.framemail .window .mail li:before {
border-top-color: #bbb;
border-width: 9px;
}
.framemail .window .mail li:nth-child(1):after,
.framemail .window .mail li:nth-child(1):before {
border: none;
}
.framemail .window .mail li:nth-child(2):after {
border-top-color: #fa1d2d;
}
.framemail .window .mail li i {
display: inline-block;
height: 48px;
width: 6px;
}
.framemail .window .mail li .read {
background-color: #ddd;
}
.framemail .window .mail li .unread {
background: #b2c831;
}
.framemail .window .mail li img {
background: #819da2;
border-radius: 2px;
height: 36px;
left: 12px;
position: absolute;
top: 6px;
width: 36px;
}
.framemail .window .mail li p {
font: 13px/24px sans-serif;
left: 56px;
position: absolute;
top: 3px;
}
.framemail .window .mail li .sender {
color: #e9e8e8;
font-weight: bold;
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
}
.framemail .window .mail li .message {
color: #999;
overflow: hidden;
text-overflow: ellipsis;
top: 21px;
white-space: nowrap;
}
.framemail .window .mail li .message strong {
color: #999;
}
.framemail .window .mail li .actions {
height: 16px;
position: absolute;
right: 19px;
text-align: right;
top: 0;
width: 96px;
}
.framemail .window .mail li .actions img {
background: none;
display: inline-block;
height: 16px;
margin-left: 6px;
opacity: .1;
position: relative;
width: 16px;
}
.framemail .window .mail li:hover .actions img {
opacity: .25;
}
.framemail .window .mail li .actions img:hover {
opacity: .75;
}
/**********DONUT CHARTS STYLES**********/
#load {
width: 11.313em;
@ -641,109 +502,6 @@ ul#jstwitter li a{
background-image: linear-gradient(to bottom, #707070, #707070);*
}
/********** SWITCH BUTTON **********/
.switch {
position: relative;
margin: 20px auto;
height: 26px;
width: 120px;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 26px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.switch-label:active {
font-weight: bold;
}
.switch-label-off {
padding-left: 2px;
}
.switch-label-on {
padding-right: 2px;
}
/*
* Note: using adjacent or general sibling selectors combined with
* pseudo classes doesn't work in Safari 5.0 and Chrome 12.
* See this article for more info and a potential fix:
* http://css-tricks.com/webkit-sibling-bug/
*/
.switch-input {
display: none;
}
.switch-input:checked + .switch-label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
}
.switch-input:checked + .switch-label-on ~ .switch-selection {
left: 60px;
/* Note: left: 50% doesn't transition in WebKit */
}
.switch-selection {
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
width: 58px;
height: 22px;
background: #b2c831;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, #b6c753, #b2c831);
background-image: -moz-linear-gradient(top, #b6c753, #b2c831);
background-image: -o-linear-gradient(top, #b6c753, #b2c831);
background-image: linear-gradient(to bottom, #b6c753, #b2c831);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
.switch-blue .switch-selection {
background: #3aa2d0;
background-image: -webkit-linear-gradient(top, #4fc9ee, #3aa2d0);
background-image: -moz-linear-gradient(top, #4fc9ee, #3aa2d0);
background-image: -o-linear-gradient(top, #4fc9ee, #3aa2d0);
background-image: linear-gradient(to bottom, #4fc9ee, #3aa2d0);
}
.switch-yellow .switch-selection {
background: #fa1d2d;
background-image: -webkit-linear-gradient(top, #f93e4b, #fa1d2d);
background-image: -moz-linear-gradient(top, #f93e4b, #fa1d2d);
background-image: -o-linear-gradient(top, #f93e4b, #fa1d2d);
background-image: linear-gradient(to bottom, #f93e4b, #fa1d2d);
}
/**********Gauge Chart**********/
#canvas {
display: block;
width: 150px;
margin: 30px auto;
}
/**********Accordion Styling**********/
.accordion-group {
@ -778,7 +536,6 @@ a:hover {
/**********FooterWrap Section**********/
#footerwrap {
width: 100%;
background:#262626;
background-image:url('../images/sep-half.png');
padding-top:25px;
@ -796,58 +553,9 @@ a:hover {
}
/***********FULLCALENDAR STYLE***********/
#external-events {
padding: 0 10px;
border: 1px solid #8b8b8a;
background-color: #8b8b8a;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-align: left;
}
#external-events h4 {
font-size: 16px;
margin-top: 0;
padding-top: 1em;
}
.external-event { /* try to mimick the look of a real event */
margin: 10px 0;
padding: 2px 4px;
background: #b2c831;
color: #fff;
font-size: .85em;
cursor: pointer;
}
#external-events p {
margin: 1.5em 0;
font-size: 11px;
color: #b2c831;
}
#external-events p input {
margin: 0;
vertical-align: middle;
}
#calendar {
width:100%;
}
/**********Media Styles**********/
@media (max-width: 360px){
/*Calendar Adsjustments*/
.fc-header {margin-top:15px;}
.fc-header-title h2{font-size:10px; }
.fc-header-right {display:none}
}
/* portrait tablet */
@media (min-width: 767px) and (max-width: 768px) {
.info-aapl ul {
@ -888,4 +596,3 @@ a:hover {
padding: 30px 35px 10px 10px;
}
}

BIN
static/img/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 318 B

BIN
static/img/favicon_smile.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 93 B

BIN
static/img/my_picture.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 MiB

After

Width:  |  Height:  |  Size: 60 KiB

Before After
Before After

3
templates/header_main.html
View file

@ -16,10 +16,11 @@
<title>{{globals['website_title']}}</title>
<!-- bootstrap icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<!-- Custom styles for this template -->
<link href="/static/css/main.css" rel="stylesheet">
<link href="/static/css/tabs.css" rel="stylesheet">
<link href="/static/css/font-style.css" rel="stylesheet">
<body>
{% if globals['fork_me'] %}

167
templates/index.html
View file

@ -1,111 +1,86 @@
{% include('header_main.html') %}
<div class="container text-center">
<div class="container">
<div class="row">
<div class="col-xs-8 col-sm-4 col-md-3 col-lg-3">
<div class="dash-unit bhoechie-tab-container">
<div class="col-4">
<div class="rounded dash-unit shadow">
<dtitle>
<span aria-hidden="true" class="li_user fs1"></span>
{{ globals['name'] }}
<br />
<i class="bi bi-person-circle"
style="font-size: 1rem; color: cornflowerblue;"></i>
&nbsp; About {{ globals['name'] }}
</dtitle>
<hr style="margin-bottom: 0;">
<img class="img-responsive img-rounded center-block main-img"
src="/static/img/{{ globals['image'] }}"
alt="What I look like."
alt="{{ globals['image_alt'] }}"
style="width:250px;"
data-toggle="tooltip" data-placement="bottom"
title="{{ globals['name'] }}">
<br />
<p>{{ globals['blurb'] }}</p>
</div><!-- /.dash-unit -->
</div><!-- /.col -->
<div class="col-xs-10 col-sm-7 col-md-8 col-lg-8 col-xl-8">
<div class="dash-unit bhoechie-tab-container">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="col-lg-4 col-md-4 col-sm-4 col-xs-4 col-xl-4 active">
<a href="#resume" aria-control="resume" role="tab" data-toggle="tab" aria-expanded="true">
<img src="/static/img/googledocs.svg" style="width: 64px;">
</a>
</li>
<li role="presentation" class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<a href="#linkedin" aria-control="linkedin" role="tab" data-toggle="tab" aria-expanded="false">
<img src="/static/img/linkedin.svg" style="width: 64px;">
</a>
</li>
<li role="presentation" class="col-lg-4 col-md-4 col-sm-4 col-xs-4 col-xl-6">
<a href="#github" aria-control="github" role="tab" data-toggle="tab" aria-expanded="false">
<img src="/static/img/github-cat.svg" style="width: 64px;">
</a>
</li>
</ul>
<div class="tab-content">
<!-- Resume -->
<div role="tabpanel" class="tab-pane active" id="resume">
<center>
<dtitle>
<span aria-hidden="true" class="li_note fs1"></span>
resume
</dtitle>
<hr>
<h7>
<span aria-hidden="true" class="li_clip fs1"></span>
Download: <a href="{{ globals['resume_pdf_URL'] }}">PDF</a> or <a href="{{ globals['resume_docx_URL'] }}">Word Doc</a>
<br /><br />
<span aria-hidden="true" class="li_world fs1"></span>
Go to <a target="_blank" href="{{ globals['resume_live_doc_URL'] }}">Google Doc</a>
</h7>
</center>
</div><!-- tab panel-->
<!-- Linkedin -->
<div role="tabpanel" class="tab-pane" id="linkedin">
<center>
<dtitle>
<span aria-hidden="true" class="li_world fs1"></span>
linkedin
</dtitle>
<hr>
<h7>
<span aria-hidden="true" class="li_user fs1"></span>
<a target="_blank" href="{{ globals['linkedin_URL'] }}"
role="button" data-toggle="tooltip" data-placement="left"
title="Linkedin" style="box-shadow: none;">
LinkedIn Profile
</a>
</h7>
</center>
</div><!-- tab panel-->
<!-- Github section -->
<div role="tabpanel" class="tab-pane" id="github">
<center>
<dtitle>
<span aria-hidden="true" class="li_world fs1"></span>
github
</dtitle>
<hr>
<h7>
<span aria-hidden="true" class="li_user fs1"></span>
<a target="_blank" href="https://github.com/{{ globals['github_username'] }}"
role="button" data-toggle="tooltip" data-placement="right"
title="GitHub" style="box-shadow: none;">
{{ globals['github_username'] }}
</a>
</h7>
</center>
</div><!-- tab panel-->
</div><!-- tab-content -->
</div><!-- /.dash-unit -->
</div><!-- /.col -->
<div class="col-xl-11 col-lg-11 col-md-11 col-sm-11 col-xs-12">
<div class="dash-unit bhoechie-tab-container">
<dtitle>
<span aria-hidden="true" class="li_star fs1"></span>
About
</dtitle>
<hr>
<div class="aboutText">
{{ globals['profile_blurb'] }}
</div>
</div><!-- /.dash-unit -->
</div><!-- /.col -->
</div><!-- /.row ALL CARDS-->
</div><!-- /.container MAIN-->
</div><!-- /.row -->
<!-- links on their own row -->
<div class="row">
<div class="col-4">
<div class="dash-unit rounded shadow">
<br />
<center>
<dtitle>Social Links</dtitle>
<hr>
</center>
<br />
<center>
<p>
&nbsp;
<!-- Linkedin -->
<a target="_blank"
href="{{ globals['linkedin_URL'] }}"
data-toggle="tooltip" data-placement="left"
title="Linkedin">
<i class="bi bi-linkedin"
style="font-size: 2rem; color: cornflowerblue;">
</i>
</a>
&nbsp;
<!-- Github section -->
<a target="_blank"
href="{{ globals['github_URL'] }}"
data-toggle="tooltip" data-placement="top"
title="GitHub">
<i class="bi bi-github"
style="font-size: 2rem; color: cornflowerblue;">
</i>
</a>
&nbsp;
<!-- Gitlab section -->
<a target="_blank"
href="{{ globals['gitlab_URL'] }}"
data-toggle="tooltip" data-placement="right"
title="GitLab">
<i class="bi bi-git"
style="font-size: 2rem; color: cornflowerblue;">
</i>
</a>
&nbsp;
</p>
<hr>
<dtitle>
<a href="{{ globals['resume_pdf_URL'] }}"
data-toggle="tooltip" data-placement="bottom"
title="Download Resume as a PDF"
style="box-shadow: none;">
Download Resume
</a>
</dtitle>
</center>
</div><!-- /.dash-unit -->
</div><!-- /.col -->
</div><!-- /.row links card-->
</div><!-- /.container MAIN-->
{% include('footer_main.html') %}