Merge branch 'master' into 'main'

Master

See merge request !1

.gitignore

+__pycache__/
+venv/
\ No newline at end of file

app.py

+from flask import Flask, render_template, request, redirect, url_for
+import sqlite3
+
+app = Flask(__name__)
+
+# i made a function to create a connection to the database
+def get_db_connection():
+    conn = sqlite3.connect('messages.db')
+    conn.row_factory = sqlite3.Row
+    return conn
+
+# i then created a function to initialise the database if it doesn't exist
+def init_db():
+    with app.app_context():
+        conn = get_db_connection()
+        with app.open_resource('messages.sql', mode='r') as f:
+            conn.executescript(f.read())
+        conn.commit()
+
+# afterwards i initialised the database when the application starts
+init_db()
+
+# routes to my website pages are created  
+@app.route("/")
+def home():
+    return render_template("index.html")
+
+@app.route('/experience')
+def experience():
+    return render_template('experience.html')
+
+@app.route('/cv')
+def cv():
+    return render_template('cv.html')
+
+@app.route('/about_me')
+def about_me():
+    return render_template('about_me.html')
+
+#i created a created a contact me route which includes both the get and post to request and post data 
+
+@app.route('/contact_me', methods=['GET', 'POST'])
+def contact_me():
+    if request.method == 'POST':
+        name = request.form['name']
+        email = request.form['email']
+        message = request.form['message']
+#database is connected 
+        conn = get_db_connection()
+        conn.execute('INSERT INTO messages (Name, email, message) VALUES (?, ?, ?)',
+                     (name, email, message))
+        conn.commit()
+        conn.close()
+#input of message will lead to the redirection to the confirmation html page 
+        return redirect(url_for('confirmation'))
+
+    return render_template('contact_me.html')
+
+@app.route('/confirmation')
+def confirmation():
+    return render_template('confirmation.html')
+
+if __name__ == '__main__':
+    app.run(debug=True)
+

messages.sql

+
+CREATE TABLE IF NOT EXISTS messages (
+   ID INTEGER PRIMARY KEY AUTOINCREMENT,
+   Name TEXT NOT NULL,
+   email TEXT NOT NULL,
+   message TEXT NOT NULL
+);

static/style.css

+
+/*-----index.html-----*/
+*{
+    margin: 0;
+    padding: 0;
+    font-family:Arial, Helvetica, sans-serif;
+    box-sizing: border-box;
+}
+
+body{
+    background: #000000;
+    color: #ffff;
+}
+
+#header{
+    width: 100%;
+    height: 100vh;
+    background-image: url(images/IMG_1071.jpg);
+    background-size: cover;
+    background-position: center;
+}
+
+
+.container{
+    padding: 10px 5%;
+}
+
+nav{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.logo{
+    width: 160px
+}
+
+nav ul li{
+    display: inline-block;
+    list-style: none;
+    margin: 10px 20px;
+
+
+}
+
+nav ul li a{
+
+    color: white;
+    text-decoration: none;
+    font-size: 18px;
+    position: relative;
+}
+
+nav ul li a::after{
+    content: " ";
+    width: 0;
+    height: 4px;
+    background: #00ffea;
+    position: absolute;
+    left: 0;
+    bottom: -5px;
+    transition: 0.5s;
+
+}
+nav ul li a:hover::after{
+    width: 100%;
+}
+
+.header-text{
+    margin-top: 15%;
+    font-size: 30px;
+}
+
+.header-text h1{
+    font-size: 60px;
+    margin-top: 15px;
+}
+
+.header-text h1 span{
+    color: #00ffea;
+}
+
+/*-----contacts.html-----*/
+
+#contact-form {
+    margin-top: 30px;
+}
+
+#contact-form form {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+#contact-form label {
+    display: block;
+    margin-bottom: 10px;
+    color: #00ffea;
+}
+
+#contact-form input,
+#contact-form textarea {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 20px;
+    border: 1px solid #00ffea;
+    border-radius: 5px;
+}
+
+#contact-form button {
+    background-color: #00ffea;
+    color: #000;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+#contact-form button:hover {
+    background-color: #007b8e;
+}
+
+.btn{
+    display: block;
+    margin: 20px auto;
+    position: center;
+    border: 2px solid #fff;
+    padding: 4px 20px;
+    border-radius: 4px;
+    text-decoration: none;
+    color: #fff;
+    transition: 0.3s;
+}
+.btn:hover{
+    background:#007b8e;
+}
+ 
\ No newline at end of file

templates/about_me.html

+
+{% extends 'index.html' %}
+
+{% block header  %}
+    
+    <h1>About me</h1>
+    
+    <h2><strong>Education</strong></h2>
+    <br>
+    <p>I am a BSc Biomedical science graduate who has transitioned into a masters in MSc computing. This transition was not an easy one to undertake as I was novel to the world of technology, however, Biomedical science has equipped me with the knowledge of understanding complex systems and reducing them into its most simple elements, which is a key skill that I had learnt in my first module in computing, called abstraction. This concept became a pivotal link between the two disciplines. Looking back, this was particularly evident in my dissertation, where I applied my understanding of complex systems to investigate the role of G protein-coupled receptors (GPCRs) in Type 2 diabetes.
+    </p>
+
+    <br>
+    <h2><strong>interests</strong></h2>
+    <br>
+    I enjoy a multitude of activities such as running, cycling and basketball. I am also 
+    learning how to code by myself, learning programming languages such as JavaScript 
+    and python, Which I am only a beginner level. Furthermore, I also enjoy playing 
+    football with my friends on the weekends. I was also the vice-captain of my sixth 
+    form football team, which demonstrates my ability to mentor others and how to lead 
+    others and help them improve.  
+      
+    
+        
+{% endblock %}

templates/confirmation.html

+
+{% extends 'index.html' %}
+
+{% block header  %}
+<h1>Form successfully submitted</h1>
+<p>Thank you very much.</p>
+        
+{% endblock %}

templates/contact_me.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ContactMukhtar Farah Aden</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+
+    <div id="header">
+        <div class="container">
+            <nav>
+                <img src="{{ url_for('static', filename='name.jpg') }}" class="logo" height="50" aria-label="for screen readers">
+                <ul>
+                    <li><a href="/">home</a></li>
+                    <li><a href="{{ url_for('cv') }}">CV</a></li>
+                    <li><a href="{{ url_for('experience') }}">My experience</a></li>
+                    <li><a href="{{ url_for('about_me') }}">about me</a></li>
+                    <li class="active"><a href="{{ url_for('contact_me') }}">contact me</a></li>
+                </ul>
+            </nav>
+            <div class="header-text">
+                <h1>Contact me</h1>
+                <p>You can reach out to me via email:</p>
+            </div>
+        </div>
+    </div>
+    <div class="container">
+        <div id="contact-form">
+            <form id="form" method="post">
+                <label for="name">Name:</label>
+                <input type="text" id="name" name="name" required>
+
+                <label for="email">Email:</label>
+                <input type="email" id="email" name="email" required>
+
+                <label for="message">Message:</label>
+                <textarea id="message" name="message" rows="4" required></textarea>
+
+                <button type="submit">Submit</button>
+            </form>
+        </div>
+    </div>
+
+</body>
+</html>
\ No newline at end of file

templates/cv.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact: Mukhtar Farah Aden</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+
+    <div id="header">
+        <div class="container">
+            <nav>
+                <img src="{{ url_for('static', filename='name.jpg') }}" class="logo" height="50" aria-label="for screen readers">
+                <ul>
+                    <li><a href="/">home</a></li>
+                    <li class="active"><a href="{{ url_for('cv') }}">CV</a></li>
+                    <li><a href="{{ url_for('experience') }}">My experience</a></li>
+                    <li><a href="{{ url_for('about_me') }}">about me</a></li>
+                    <li><a href="{{ url_for('contact_me') }}">contact me</a></li>
+    
+                </ul>
+
+            </nav>
+
+    <a href="static/Mukhtar_farah cv.pdf" download class="btn"> Download CV </a>
+    <br>
+    <p>My CV</p>
+    
+    <a href="static/C1939113_py.pdf" download class="btn"> CMT 120-PY</a>
+    <br>
+    <p>10 Python challenges set as part of our assessment</p>
+    
+    <a href="static/C1939113_js.pdf" download class="btn"> CMT 120-JS</a>
+    <br>
+    <p>10 JavaScript challenges set as part of our assessment</p>
+
+    <a href="static/LINK_[1939113].pdf" download class="btn"> CMT 119-Computational thinking</a>
+    <p>Website detailing the concepts of computational thinking alongside a biography of a prominent computer scientist</p>
+    <br>
+    <p> These are the projects that i have currently completed so far in this course  </p>
+
+</body>
+</html>
\ No newline at end of file

templates/experience.html

+
+{% extends 'index.html' %}
+
+{% block header  %}
+    
+    <h1>My Experience</h1>
+    
+<p>This page covers my overall experience with the course and what I have learnt thus far.</p>
+
+<br>
+CMT 119 - Computational thinking
+
+<p> At the start of this semester, I was introduced to the basics of HTML and CSS, which I learnt are the foundational languages for web development. HTML acts as the structure of a website, allowing users to define the content and alter the structure of elements within a webpage, whilst CSS is used to complement HTML files by handling the visual aspects of a website, which allowed me to customize the font, colours and the positioning of elements within the pages. This was a novel experience for me as I had never written a line of code prior to this conversion course. I really enjoyed manipulating the elements within the pages and styling them, which ultimately gave me the confidence to start coding my own websites by myself in my spare time. </p>
+
+<br>
+CMT 120 - Fundamentals of programming
+<p> 
+    Later in the semester, I was introduced to python and JavaScript, which were harder to learn than HTML and CSS. I enjoyed learning python syntax the most as it is the easier of the two languages to learn. Furthermore, we were tasked with completing ten challenging exercises in both python and JavaScript as part of our assessment. Overall, I found these exercises difficult, however it gave me an insight into how technical coding can become and has inspired me to learn both languages in more depth.
+</p>
+
+<br>
+CMT 313 - Software engineering
+
+<p>
+    The start of this semester I was put in a group of 7 that was tasked with creating an automated assessment tool for teachers to mark assessments. The aim of this tool would allow teachers to mark assessments quickly and provide personalised feedback. This module has developed my teamworking skills in more depth whilst also developing my communication skills and gave me an insight on how to contribute to a project effectively, being able to bounce ideas off other members of the group.
+</p>
+
+        
+{% endblock %}

templates/index.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mukhtar Farah Aden - Project</title>
+    <link rel="stylesheet" href="static/style.css">
+</head>
+<body>
+    
+        <div id="header">
+            <div class="container">
+                <nav>
+                    <img src="static/name.jpg" class="logo" height="50" aria-label="for screen readers">
+                    <ul>
+                        <li><a href="/">home</a></li>
+                        <li><a href="{{ url_for('cv') }}">CV</a></li>
+                        <li><a href="{{ url_for('experience') }}">My experience</a></li>
+                        <li><a href="{{ url_for('about_me') }}">about me</a></li>
+                        <li><a href="{{ url_for('contact_me') }}">contact me</a></li>
+                    </ul>
+                </nav>
+                {% block header %}
+                <div class="header-text">
+                    <p>Msc Computing Student</p>
+                    <h1>Hello, I'm <span>Mukhtar</span><br> from Bristol </h1>
+                </div>
+                {% endblock %}
+
+            </div>
+        </div>
+
+</body>
+</html>