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>')
def page(page):
md = CONTENT_DIR + '%s_%s.md' % (page, lang)
html = 'page_%s.html' % lang
if os.path.isfile(md):
body = read_md(md)
return body
return render_template(html, body=body)
else:
return not_found()

View File

@ -4,12 +4,12 @@
* #17466E - Blue
*/
html {
#html {
height: 100%;
display: flex;
}
body {
#body {
background-color: #F2F2FF;
background-image: url("duck.png");
background-size: 50%;
@ -22,13 +22,13 @@ body {
flex-direction: column;
}
header {
#header {
display: flex;
justify-content: space-between;
padding: 2rem;
}
header h1 {
#title {
font-family: "Noto Serif Display", "American Typewriter", serif;
font-weight: normal;
text-align: center;
@ -36,12 +36,17 @@ header h1 {
margin: 0;
}
header nav {
#title a {
text-decoration: none;
color: black;
}
#links {
display: flex;
align-items: center;
}
nav a {
#links a {
margin: 1rem;
font-size: 1.2rem;
text-decoration: none;
@ -49,7 +54,7 @@ nav a {
padding: 1rem;
}
.button {
#links .button {
background-color: #17466E;
color: #F2F2FF;
border-radius: 20px;
@ -73,11 +78,11 @@ nav a {
margin: .5em 0;
}
#social a img {
#social .icon {
width: 100%;
}
main {
#main {
width: 100%;
display: flex;
align-items: center;
@ -85,48 +90,47 @@ main {
flex-wrap: wrap-reverse;
}
main figure {
#quote {
max-width: 30%;
display: block;
font-size: 1.5rem;
margin: 0;
}
main figure figcaption {
#quote figcaption {
text-align: right;
}
main span {
#slogan {
text-align: right;
font-size: 3rem;
}
mark {
#slogan mark {
background-color: #17466E;
color: #F2F2FF;
position: relative;
}
@media only screen and (max-width: 600px) {
body {
#body {
background-image: none;
}
main {
#main {
margin-bottom: 0;
}
header {
#header {
flex-direction: column;
align-items: center;
}
main figure {
#quote {
max-width: 100%;
}
mark {
#slogan mark {
background-color: #EDAF1F;
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>
<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="icon" href="{{ url_for('static', filename='icon.png') }}"/>
</head>
<body>
<header>
<h1>Augusto<br>Gunsch</h1>
<body id="body">
<header id="header">
<h1 id="title"><a href='/'>Augusto<br>Gunsch</a></h1>
<nav>
<nav id="links">
<a href='contact'>Contact</a>
<a href='about'>About</a>
<a href='projects' class='button'>Projects</a>
@ -20,20 +20,20 @@
<div id="page">
<div id="social">
<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 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>
</div>
<main>
<figure>
<main id="main">
<figure id="quote">
<blockquote>
{{ quote }}
</blockquote>
<figcaption>{{ author }}</figcaption>
</figure>
<span>
<span id="slogan">
I turn <mark>ideas</mark><br>into<br><mark>software</mark>.
</span>
</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>