diff --git a/MyPortfolio/data.json b/MyPortfolio/data.json
index 9956065caf1ec3966747a029ade145f9591d468d..0704759ae4293a6103d1f3a94f5e9a68719f721d 100644
--- a/MyPortfolio/data.json
+++ b/MyPortfolio/data.json
@@ -61,7 +61,7 @@
},
{
"start_date": "2009-09-06",
- "short_description": "no",
+ "short_description": "no1",
"course_name": "HOHO",
"long_description": "no no no",
"group_size": 8,
@@ -77,5 +77,43 @@
"end_date": "2009-09-07",
"project_id": 4,
"big_image": "XXX"
+ },
+ {
+ "start_date": "2009-09-06",
+ "short_description": "no2",
+ "course_name": "HOHO",
+ "long_description": "no no no",
+ "group_size": 8,
+ "academic_credits": "WUT?",
+ "lulz_had": "over 9000",
+ "external_link": "YY",
+ "small_image": "X",
+ "techniques_used": [
+
+ ],
+ "project_name": ",",
+ "course_id": " \"",
+ "end_date": "2009-09-07",
+ "project_id": 5,
+ "big_image": "XXX"
+ },
+ {
+ "start_date": "2009-09-06",
+ "short_description": "no3",
+ "course_name": "HOHO",
+ "long_description": "no no no",
+ "group_size": 8,
+ "academic_credits": "WUT?",
+ "lulz_had": "over 9000",
+ "external_link": "YY",
+ "small_image": "X",
+ "techniques_used": [
+
+ ],
+ "project_name": ",",
+ "course_id": " \"",
+ "end_date": "2009-09-07",
+ "project_id": 6,
+ "big_image": "XXX"
}
]
diff --git a/MyPortfolio/data.py b/MyPortfolio/data.py
index a2f2f0e70de1e53c906188249fd4ba37cae3b584..0ed38f3a0861b847d297af586ff757e445964abe 100644
--- a/MyPortfolio/data.py
+++ b/MyPortfolio/data.py
@@ -326,7 +326,7 @@ def menu(data):
def main():
data = load('MyPortfolio/data.json')
- #menu(data)
+
if __name__ == "__main__":
diff --git a/MyPortfolio/myFlaskProject.py b/MyPortfolio/myFlaskProject.py
index 63e5c9aa55bbebd776f6d48093bdd32a5a4ff5f5..63c3209d7f4cb1ebaa91c52b89da2706fb04dd6e 100644
--- a/MyPortfolio/myFlaskProject.py
+++ b/MyPortfolio/myFlaskProject.py
@@ -1,7 +1,15 @@
from flask import Flask, render_template
+from data import *
app = Flask(__name__,template_folder='./templates')
+data = load('data.json')
+
@app.route("/")
def index():
- return render_template('index.html')
\ No newline at end of file
+ return render_template('index.html')
+
+@app.route("/list.html")
+def list():
+ return render_template('list.html',
+ projects = data)
\ No newline at end of file
diff --git a/MyPortfolio/static/style/main.css b/MyPortfolio/static/style/main.css
index 11fac95902e36e46b69d69a03a49cf76dbc3f2b2..8adfcaf454b78a18d5e60b91a32a156063ffee25 100644
--- a/MyPortfolio/static/style/main.css
+++ b/MyPortfolio/static/style/main.css
@@ -6,13 +6,16 @@ html, body {
color: whitesmoke;
font-family: "Afacad Flux", sans-serif;
font-optical-sizing: auto;
+
overflow-x: hidden;
- overflow-y: hidden;
+ overflow-y: scroll;
/* SIZING */
margin:0;
padding:0;
height:100%;
max-width: 100%;
+
+ position: relative;
}
@@ -30,6 +33,8 @@ header {
height: 80px;
width: 100%;
+ position: relative;
+
display: flex;
justify-content: center;
@@ -64,17 +69,76 @@ header a {
+
+
+
.content-container {
+ position: relative;
+ overflow: auto;
+
/* STYLING */
background:rgba(15,15,15,0.9);
/* SIZING */
- min-height: 60%;
- padding-bottom: 110px;
+ min-height: 75%;
+ width: 100%;
+}
+
+/* LIST.HTML */
+
+.project-table {
+
+ background:rgba(10,10,10,0.9);
+
+ height: 100vh;
+ width: 120vh;
+
+ margin-left: auto;
+ margin-right: auto;
+
+ display: flex;
+
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+ align-items: space-evenly;
+ align-content: flex-start;
+
+
+ padding: 10px;
+
+}
+
+.project {
+
+ flex-shrink: 1;
+
+ background:rgba(25,25,25,.1);
+
+ height: 175px;
+ width: 300px;
+
+ margin-top: 50px;
+}
+
+.project-img {
+ height: 50%;
width: 100%;
}
+.project-title {
+ padding: 0;
+ font-size: large;
+ margin-left: 10px;
+}
+
+.project-desc {
+ font-size: small;
+ margin-left: 10px;
+}
+
+/* INDEX.HTML */
+
.info-container {
height: 60vh;
@@ -123,6 +187,7 @@ header a {
resize: none;
}
+/* INDEX.HTML */
footer {
@@ -132,15 +197,13 @@ footer {
/* DEBUG */
/* SIZING */
- position: relative;
- right: 0;
+ position: relative;
+ bottom: 0;
+ left: 0;
+ z-index: 10;
- bottom:0;
width:100%;
- height:200px;
-
- margin-right: auto;
- margin-left: auto;
+ height:16.73%;
display: flex;
justify-content: space-evenly;
diff --git a/MyPortfolio/templates/index.html b/MyPortfolio/templates/index.html
index 1b3af43d570ae601d01ebdac5b82ab281289211b..0a0b23893cb86c4d1d5143ebdcbf70ffa60da551 100644
--- a/MyPortfolio/templates/index.html
+++ b/MyPortfolio/templates/index.html
@@ -9,7 +9,7 @@
<body>
<header>
<ul>
- <li><a href="index.html">Home</a></li>
+ <li><a href="/">Home</a></li>
<li><a href="techniques.html">Techniques</a></li>
<li><pre class="logo">
██████╗ ██╗ ██████╗
@@ -55,7 +55,7 @@
<a href="https://www.gnu.org/licenses/gpl-3.0.html">GPLv3 License</a>
</p>
<p>Links:<br>
- <a href="index.html">Home</a><br>
+ <a href="/">Home</a><br>
<a href="techniques.html">Techniques</a><br>
<a href="list.html">Projects</a><br>
<a href="https://github.com/olma957">GitHub</a>
diff --git a/MyPortfolio/templates/list.html b/MyPortfolio/templates/list.html
new file mode 100644
index 0000000000000000000000000000000000000000..a2361d09d022864b4579e13d47e0c2a524ef312c
--- /dev/null
+++ b/MyPortfolio/templates/list.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <link rel="stylesheet" href="../static/style/main.css">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap" rel="stylesheet">
+</head>
+<body>
+ <header>
+ <ul>
+ <li><a href="/">Home</a></li>
+ <li><a href="techniques.html">Techniques</a></li>
+ <li><pre class="logo">
+██████╗ ██╗ ██████╗
+██╔â•â•â–ˆâ–ˆâ•—██║██╔â•â•â•â–ˆâ–ˆâ•—
+██████╔â•â–ˆâ–ˆâ•‘██║ ██║
+██╔â•â•â•â• ██║██║ ██║
+██║██╗ ██║╚██████╔â•
+â•šâ•â•â•šâ•â• â•šâ•â• â•šâ•â•â•â•â•â•</pre></li>
+ <li><a href="list.html">Projects</a></li>
+ <li><a href="https://github.com/olma957">GitHub</a></li>
+ </ul>
+ </header>
+
+ <div class="content-container">
+ <div class="project-table">
+
+ {% for p in projects %}
+
+ <div class="project">
+
+
+
+ <img class="project-img" src={{ p['small_image'] }}>
+
+ <p class="project-title"> >{{ p['project_name'] }} </p>
+
+ <p class="project-desc"> {{ p['short_description'] }}</p>
+
+ </div>
+
+ {% endfor %}
+
+ </div>
+ </div>
+
+ <footer>
+ <p>Authors:<br>
+ <a href="mailto:olima957@student.liu.se">Oliwer Mattsson: olima957@student.liu.se</a><br>
+ <a href="mailto:taiku983@student.liu.se">Taif Kurji: taiku983@student.liu.se</a>
+ </p>
+ <p>License:<br>
+ <a href="https://www.gnu.org/licenses/gpl-3.0.html">GPLv3 License</a>
+ </p>
+ <p>Links:<br>
+ <a href="/">Home</a><br>
+ <a href="techniques.html">Techniques</a><br>
+ <a href="list.html">Projects</a><br>
+ <a href="https://github.com/olma957">GitHub</a>
+ </p>
+ </footer>
+</body>
+</html>
\ No newline at end of file