redesigned front page

Mole1424 · Jun 14, 2024 · e712a90 · e712a90
1 parent 7d793d4
commit e712a90
Show file tree

Hide file tree

Showing 11 changed files with 152 additions and 186 deletions.
diff --git a/app.py b/app.py
@@ -66,20 +66,7 @@ def wrapper(*args, **kwargs):
 @app.route("/")
 @app.route("/home")
 def home():
-    return render_template(
-        "home.html", homepage=True, projects=get_projects_from_db(False)
-    )
-    # hompeage is used to determine whether to show the long about me or not
-
-
-@app.route("/aboutme")
-def about_me():
-    return render_template("aboutmepage.html", homepage=False)
-
-
-@app.route("/projects")
-def projects():
-    return render_template("projectspage.html", projects=get_projects_from_db(False))
+    return render_template("home.html", projects=get_projects_from_db(False))
 
 
 @app.route("/projects/smallprojects")
@@ -308,30 +295,37 @@ def add_photo(
     dog: bool = False,
 ):
     if (
+        # pre=checks
         check_password_hash(password, request.form["password"])
         and "photo" in request.files
         and request.files["photo"].filename != ""
     ):
         photo = request.files["photo"]
 
+        # only allow png, jpg, jpeg files
         if not photo.filename.endswith((".png", ".jpg", ".jpeg")):
             return "<h1>Invalid file type</h1>"
 
+        # get filename and extension
         file_name, ext = path.splitext(secure_filename(photo.filename))
         if dog:
             file_name = "bear"
 
+        # split path
         base_path = path.join(getcwd(), upload_folder[1:], file_name)
         file_path = base_path + ext
 
+        # create directory if it doesn't exist
         if not path.exists(path.dirname(file_path)):
             makedirs(path.dirname(file_path))
 
+        # stop duplicate file names
         i = 1
         while path.exists(file_path) or (dog and i == 1):
             file_path = f"{base_path}{i}{ext}"
             i += 1
 
+        # save photo
         photo.save(file_path)
 
         info(f"{request.remote_addr} uploaded photo {file_name} to {file_path}")
@@ -350,19 +344,10 @@ def dog():
     return send_from_directory("static/img/dog", dog_image)
 
 
-@app.route("/dog/<int:dog_id>")
-def specific_dog(dog_id: int):
-    # get specific dog image from /static/img/dog/ folder
-    dog_images = listdir("static/img/dog")
-    if dog_id < 0 or dog_id >= len(dog_images):
-        return "<h1>Invalid dog id</h1>"
-    dog_image = dog_images[dog_id]
-    return send_from_directory("static/img/dog", dog_image)
-
-
 @app.route(DOG_URL, methods=["GET", "POST"])
 @login_required
 def add_dog():
+    # add a dog
     if request.method == "POST":
         return add_photo(request, f"{app.config['UPLOAD_FOLDER']}dog/", True)
     return render_template("uploadphoto.html", action=DOG_URL)
diff --git a/static/css/aboutme.css b/static/css/aboutme.css
@@ -1,16 +1,8 @@
 .aboutmecontainer {
-    height: 92vh;
+    height: 192vh;
     width: 100%;
 }
 
-.aboutmefull {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
 .aboutme {
     height: 90%;
     width: 100%;
@@ -22,21 +14,28 @@
 .aboutmelogocontainer {
     height: 100%;
     width: 50%;
+    margin-top: 8vh;
     display: flex;
     justify-content: center;
-    align-items: center;
-    overflow: hidden;
+    align-items: flex-start;
 }
 
 .aboutmelogo {
-    height: auto;
     width: 80%;
     border-radius: 10%;
 }
 
+.aboutmetextcontainer {
+    height: 192vh;
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
+}
+
 .aboutmetext {
     height: 100%;
-    width: 50%;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -64,6 +63,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    transform: translateY(-100vh);
 }
 
 .downarrow {
@@ -74,23 +74,40 @@
 
 @media screen and (max-width: 500px) {
 
-    .aboutme,
-    .aboutmefull {
+    .aboutme {
         flex-direction: column;
     }
 
+    .aboutmecontainer {
+        height: auto;
+    }
+
     .aboutmelogocontainer {
         height: auto;
         margin-top: 10vh;
         overflow: visible;
     }
 
+    .aboutmetextcontainer {
+        width: 100%;
+        height: 100%;
+    }
+
     .aboutmetext {
         width: 100%;
     }
 
+    .aboutmedescription:nth-child(1) {
+        height: auto;
+        font-size: 2vh;
+    }
+
     .aboutmename {
         text-align: center;
         font-size: 15vw;
     }
+
+    .downarrowcontainer {
+        display: none;
+    }
 }
diff --git a/templates/aboutme.html b/templates/aboutme.html
diff --git a/templates/aboutmepage.html b/templates/aboutmepage.html
diff --git a/templates/base.html b/templates/base.html
@@ -22,27 +22,21 @@
     <nav class="navbar">
         <a href="/" class="logo"><img src="{{config['UPLOAD_FOLDER']}}logo.png" alt="logo"></a>
         <ul class="navlinksleft">
-            <li class="navlink"><a href="/aboutme">About Me</a></li>
-            <li class="navlink"><a href="/projects">Projects</a></li>
+            <li class="navlink"><a href="/#aboutme">About Me</a></li>
+            <li class="navlink"><a href="/#projects">Projects</a></li>
         </ul>
         <ul class="navlinksright">
             <li class="navlink">
                 <a href="https://github.com/Mole1424">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="navsvg" viewBox="0 0 100 100">
-                        <path fill-rule="evenodd" clip-rule="evenodd"
-                            d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-                            fill="#fff" />
-                        <title>GitHub</title>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="navsvg" fill="#fff" viewBox="0 0 256 256">
+                        <path d="M208.31,75.68A59.78,59.78,0,0,0,202.93,28,8,8,0,0,0,196,24a59.75,59.75,0,0,0-48,24H124A59.75,59.75,0,0,0,76,24a8,8,0,0,0-6.93,4,59.78,59.78,0,0,0-5.38,47.68A58.14,58.14,0,0,0,56,104v8a56.06,56.06,0,0,0,48.44,55.47A39.8,39.8,0,0,0,96,192v8H72a24,24,0,0,1-24-24A40,40,0,0,0,8,136a8,8,0,0,0,0,16,24,24,0,0,1,24,24,40,40,0,0,0,40,40H96v16a8,8,0,0,0,16,0V192a24,24,0,0,1,48,0v40a8,8,0,0,0,16,0V192a39.8,39.8,0,0,0-8.44-24.53A56.06,56.06,0,0,0,216,112v-8A58.14,58.14,0,0,0,208.31,75.68ZM200,112a40,40,0,0,1-40,40H112a40,40,0,0,1-40-40v-8a41.74,41.74,0,0,1,6.9-22.48A8,8,0,0,0,80,73.83a43.81,43.81,0,0,1,.79-33.58,43.88,43.88,0,0,1,32.32,20.06A8,8,0,0,0,119.82,64h32.35a8,8,0,0,0,6.74-3.69,43.87,43.87,0,0,1,32.32-20.06A43.81,43.81,0,0,1,192,73.83a8.09,8.09,0,0,0,1,7.65A41.72,41.72,0,0,1,200,104Z"/>
                     </svg>
                 </a>
             </li>
             <li class="navlink" id="lastnavlink">
                 <a href="mailto: [email protected]">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="navsvg" viewBox="13 12 100 100">
-                        <path
-                            d="M 0,27.283 V 24 a 8,8 0 0 1 8,-8 h 112 a 8,8 0 0 1 8,8 v 3.283 l -64,40 z m 66.12,48.11 a 4.004,4.004 0 0 1 -4.24,0 L 0,36.717 V 104 a 8,8 0 0 0 8,8 h 112 a 8,8 0 0 0 8,-8 V 36.717 Z"
-                            fill="#fff" />
-                        <title>Email</title>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="navsvg" fill="#fff" viewBox="0 0 256 256">
+                        <path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z"/>
                     </svg>
                 </a>
             </li>

diff --git a/templates/editproject.html b/templates/editproject.html
@@ -7,24 +7,24 @@
 {% block content %}
 <form action="{{ action }}" method="post" class="projectform">
     {% if delete %}
-    <p>WARNING!!!! This cannot be undone</p>
+        <p>WARNING!!!! This cannot be undone</p>
     {% else %}
-    <div class="field">
-        <label for="title">Title</label><br>
-        <input type="text" id="title" name="title" value="{{ title }}">
-    </div>
-    <div class="field">
-        <label for="description">Description</label><br>
-        <textarea id="description" name="description">{{ description }}</textarea>
-    </div>
-    <div class="field">
-        <label for="image">Image</label><br>
-        <input type="text" id="image" name="image" value="{{ image }}">
-    </div>
-    <div class="field">
-        <label for="blog">Blog</label><br>
-        <textarea id="blog" name="blog">{{ blog }}</textarea>
-    </div>
+        <div class="field">
+            <label for="title">Title</label><br>
+            <input type="text" id="title" name="title" value="{{ title }}">
+        </div>
+        <div class="field">
+            <label for="description">Description</label><br>
+            <textarea id="description" name="description">{{ description }}</textarea>
+        </div>
+        <div class="field">
+            <label for="image">Image</label><br>
+            <input type="text" id="image" name="image" value="{{ image }}">
+        </div>
+        <div class="field">
+            <label for="blog">Blog</label><br>
+            <textarea id="blog" name="blog">{{ blog }}</textarea>
+        </div>
     {% endif %}
     <div class="field">
         <label for="password">Password</label><br>

diff --git a/templates/home.html b/templates/home.html
@@ -8,10 +8,80 @@
 <meta property="og:url" content="https://joelcoulon.com/">
 {% endblock %}
 {% block content %}
-{% with homepage=homepage %}
-{% include 'aboutme.html' %}
-{% endwith %}
-{% with projects=projects %}
-{% include 'projects.html' %}
-{% endwith %}
+<div class="aboutmecontainer">
+    <div class="aboutme">
+        <div class="aboutmelogocontainer">
+            <img src="{{config['UPLOAD_FOLDER']}}logo.png" alt="logo" class="aboutmelogo">
+        </div>
+        <div class="aboutmetextcontainer">
+            <div class="aboutmetext">
+                <h1 class="aboutmename">Hi, I'm Joel</h1>
+                <p class="aboutmedescription">A computer science student at the University of Warwick</p>
+            </div>
+            <div class="aboutmetext" id="aboutme">
+                <p class="aboutmedescription">My passion for computer science started in 2015 with my first proper computer science lessons at secondary school. As a tech officer at <a href="https://uwcs.co.uk" class="aboutmelink">UWCS</a>, I help maintain various projects such as servers, discord bots, and websites (such as this one). I also have a <a href="/dog/">dog</a> called Bear</p>
+            </div>
+        </div>
+    </div>
+    <div class="downarrowcontainer">
+        <svg xmlns="http://www.w3.org/2000/svg" class="downarrow" fill="#fff" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm45.66-109.66a8,8,0,0,1,0,11.32l-40,40a8,8,0,0,1-11.32,0l-40-40a8,8,0,0,1,11.32-11.32L128,140.69l34.34-34.35A8,8,0,0,1,173.66,106.34Z"></path></svg>
+    </div>
+</div>
+<div class="projects" id="projects">
+    <div class="projectsintro">
+        <h2>Projects</h2>
+        <p class="projectsdescription">Here are some of the projects I've worked on. Click on a project to learn more about it.</p>
+        <p>I also have a list of <a href="/projects/smallprojects">smaller projects</a> which I think are cool but aren't big enough to have their own full blog.</p>
+    </div>
+    <div class="projectcards">
+        {% for project in projects %}
+            <a href="/projects/{{project.id}}" class="project">
+                <div class="imgtitle">
+                    <div class="backgroundcontainer">
+                        <img class="background" src="{{config['UPLOAD_FOLDER'] if not project.image.startswith('https://')}}{{ project.image }}" alt="{{ project.title }} background">
+                    </div>
+                    <div class="foregroundcontainer">
+                        <img class="foreground" src="{{config['UPLOAD_FOLDER'] if not project.image.startswith('https://')}}{{ project.image }}" alt="{{ project.title }} foreground">
+                    </div>
+                    <div class="overlay">
+                        <h1>{{ project.title }}</h1>
+                    </div>
+                </div>
+                <p class="projectdescription">{{ project.description }}</p>
+            </a>
+        {% else %}
+            <div class="noitem">
+                <p class="noproject">No projects found, please check back soon™</p>
+            </div>
+        {% endfor %}
+    </div>
+</div>
+<script>
+    //keep image in place on scroll until projects comes into view
+    window.addEventListener('scroll', function() {
+        if (window.innerWidth > 500){
+            var imageContainer = document.querySelector('.aboutmelogocontainer');
+            var projects = document.querySelector('.projects');
+            var aboutme = document.querySelector('.aboutmetextcontainer');
+            var downarrow = document.querySelector('.downarrowcontainer');
+
+            if (window.scrollY <= projects.offsetTop - window.innerHeight) {
+                // Image is in view
+                imageContainer.style.position = 'fixed';
+                imageContainer.style.top = '5%';
+                aboutme.style.margin = '0 0 0 auto';
+                downarrow.style.transition = 'opacity 0.5s';
+                if (window.scrollY > 0) {
+                    downarrow.style.opacity = '0';
+                } else {
+                    downarrow.style.opacity = '1';
+                }
+            } else {
+                // Image is out of view
+                imageContainer.style.position = 'absolute';
+                imageContainer.style.top = (projects.offsetTop - window.innerHeight) + 'px';
+            }
+        }
+    });
+</script>
 {% endblock %}