Add Projects page

This commit is contained in:
Augusto Gunsch 2022-03-30 09:22:10 -03:00
parent 861b36ec32
commit d6fd7fc108
5 changed files with 106 additions and 30 deletions

View File

@ -44,11 +44,12 @@ def index():
@app.route('/<page>') @app.route('/<page>')
def page(page): def page(page):
md = CONTENT_DIR + '%s_%s.md' % (page, lang) md = CONTENT_DIR + '%s_%s.md' % (page, lang)
html = 'page_%s.html' % lang
if os.path.isfile(md): if os.path.isfile(md):
body = read_md(md) body = read_md(md)
return body return render_template(html, body=body)
else: else:
return not_found() return not_found()

View File

@ -4,12 +4,12 @@
* #17466E - Blue * #17466E - Blue
*/ */
html { #html {
height: 100%; height: 100%;
display: flex; display: flex;
} }
body { #body {
background-color: #F2F2FF; background-color: #F2F2FF;
background-image: url("duck.png"); background-image: url("duck.png");
background-size: 50%; background-size: 50%;
@ -22,13 +22,13 @@ body {
flex-direction: column; flex-direction: column;
} }
header { #header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 2rem; padding: 2rem;
} }
header h1 { #title {
font-family: "Noto Serif Display", "American Typewriter", serif; font-family: "Noto Serif Display", "American Typewriter", serif;
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
@ -36,12 +36,17 @@ header h1 {
margin: 0; margin: 0;
} }
header nav { #title a {
text-decoration: none;
color: black;
}
#links {
display: flex; display: flex;
align-items: center; align-items: center;
} }
nav a { #links a {
margin: 1rem; margin: 1rem;
font-size: 1.2rem; font-size: 1.2rem;
text-decoration: none; text-decoration: none;
@ -49,7 +54,7 @@ nav a {
padding: 1rem; padding: 1rem;
} }
.button { #links .button {
background-color: #17466E; background-color: #17466E;
color: #F2F2FF; color: #F2F2FF;
border-radius: 20px; border-radius: 20px;
@ -73,11 +78,11 @@ nav a {
margin: .5em 0; margin: .5em 0;
} }
#social a img { #social .icon {
width: 100%; width: 100%;
} }
main { #main {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -85,48 +90,47 @@ main {
flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
} }
main figure { #quote {
max-width: 30%; max-width: 30%;
display: block; display: block;
font-size: 1.5rem; font-size: 1.5rem;
margin: 0; margin: 0;
} }
main figure figcaption { #quote figcaption {
text-align: right; text-align: right;
} }
main span { #slogan {
text-align: right; text-align: right;
font-size: 3rem; font-size: 3rem;
} }
mark { #slogan mark {
background-color: #17466E; background-color: #17466E;
color: #F2F2FF; color: #F2F2FF;
position: relative; position: relative;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
#body {
body {
background-image: none; background-image: none;
} }
main { #main {
margin-bottom: 0; margin-bottom: 0;
} }
header { #header {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
main figure { #quote {
max-width: 100%; max-width: 100%;
} }
mark { #slogan mark {
background-color: #EDAF1F; background-color: #EDAF1F;
color: black; color: black;
} }

View File

@ -0,0 +1,42 @@
#wrapper {
display: flex;
justify-content: center;
padding: 3rem 1rem 5rem;
}
#content {
background-color: white;
padding: 2rem;
box-shadow: 1px 0px 10px black;
text-align: justify;
}
@media only screen and (max-width: 600px) {
#content {
max-width: 90%;
}
}
@media only screen and (min-width: 600px) {
#content {
max-width: 80%;
}
}
@media only screen and (min-width: 768px) {
#content {
max-width: 70%;
}
}
@media only screen and (min-width: 992px) {
#content {
max-width: 60%;
}
}
@media only screen and (min-width: 1200px) {
#content {
max-width: 50%;
}
}

View File

@ -1,16 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html id="html">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>Augusto Gunsch</title> <title>Augusto Gunsch</title>
<link rel="stylesheet" href="{{ url_for('static', filename='stylesheet.css') }}"/> <link rel="stylesheet" href="{{ url_for('static', filename='stylesheet.css') }}"/>
<link rel="icon" href="{{ url_for('static', filename='icon.png') }}"/> <link rel="icon" href="{{ url_for('static', filename='icon.png') }}"/>
</head> </head>
<body> <body id="body">
<header> <header id="header">
<h1>Augusto<br>Gunsch</h1> <h1 id="title"><a href='/'>Augusto<br>Gunsch</a></h1>
<nav> <nav id="links">
<a href='contact'>Contact</a> <a href='contact'>Contact</a>
<a href='about'>About</a> <a href='about'>About</a>
<a href='projects' class='button'>Projects</a> <a href='projects' class='button'>Projects</a>
@ -20,20 +20,20 @@
<div id="page"> <div id="page">
<div id="social"> <div id="social">
<a href="https://github.com/augustogunsch" target="_blank"> <a href="https://github.com/augustogunsch" target="_blank">
<img src="{{ url_for('static', filename='github.png') }}"> <img class="icon" src="{{ url_for('static', filename='github.png') }}">
</a> </a>
<a href="https://www.linkedin.com/in/augusto-gunsch-210b17218" target="_blank"> <a href="https://www.linkedin.com/in/augusto-gunsch-210b17218" target="_blank">
<img src="{{ url_for('static', filename='linkedin.png') }}"> <img class="icon" src="{{ url_for('static', filename='linkedin.png') }}">
</a> </a>
</div> </div>
<main> <main id="main">
<figure> <figure id="quote">
<blockquote> <blockquote>
{{ quote }} {{ quote }}
</blockquote> </blockquote>
<figcaption>{{ author }}</figcaption> <figcaption>{{ author }}</figcaption>
</figure> </figure>
<span> <span id="slogan">
I turn <mark>ideas</mark><br>into<br><mark>software</mark>. I turn <mark>ideas</mark><br>into<br><mark>software</mark>.
</span> </span>
</main> </main>

29
templates/page_en.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="utf-8"/>
<title>Augusto Gunsch</title>
<link rel="stylesheet" href="{{ url_for('static', filename='stylesheet.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='stylesheet_page.css') }}"/>
<link rel="icon" href="{{ url_for('static', filename='icon.png') }}"/>
</head>
<body id="body">
<header id="header">
<h1 id="title"><a href='/'>Augusto<br>Gunsch</a></h1>
<nav id="links">
<a href='contact'>Contact</a>
<a href='about'>About</a>
<a href='projects' class='button'>Projects</a>
</nav>
</header>
<article id="wrapper">
<div id="content">
{% autoescape false %}
{{ body }}
{% endautoescape %}
</div>
</article>
</body>
</html>