Create Portfolio Website Using Flask and Google sheets

#flask #portfolio #personal #javascript

I have built a new project from scratch including frontend and backend and decided to make it in the simplest way so here is the steps that I made to complete it.

tutorial

1- Choose frontend design and build it using html css and some javascript

./templates/layout.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <title>Developer Website</title>
    <link rel="stylesheet" href="{{url_for('static',filename='style.css')}}">
</head>

<body>

    <div class="container">
        <!-- SITE HEADER -->
        <div class="site-header">
            <!-- Site title -->
            <div class="site-title">
                <div class="circles">
                    <div class="circle red"></div>
                    <div class="circle yellow"></div>
                    <div class="circle green"></div>
                </div>
                {% if title %}
                <p>{{title}}</p>
                {%else%}
                <p>_developer site</p>
                {%endif%}
            </div>
            <!-- Navbar -->
            <nav class="navbar">
                <a href="{{url_for('_hello')}}" class="nav-link active">_hello</a>
                <a href="{{url_for('_projects')}}" class="nav-link">_projects</a>
                <a href="{{url_for('_contact')}}" class="nav-link">_contact</a>
            </nav>
        </div>

        <!-- CONTENT -->
        <div class="inner-container">
            {% block content %}
            {% endblock %}
        </div>
        <!-- SITE FOOTER -->
        <div class="site-footer">
            <nav>
                <a href="">
                    <i class="fab fa-github"></i>
                </a>
                <a href="">
                    <i class="fab fa-instagram"></i>
                </a>
                <a href="">
                    <i class="fab fa-youtube"></i>
                </a>
            </nav>
        </div>
    </div>

    <script src="{{url_for('static',filename='index.js')}}"></script>
</body>

</html>

./templates/projects.html

{% extends 'layout.html' %}

{% block content %}
<h3 class="section-title">My projects</h3>

<div class="projects">

    {% if projects %}
    {% for project in projects %}
    <!-- Project Card -->
    <article class="project">
        <div class="project-header">
            <h4 class="project-title">{{project.title}}</h4>
            <span class="commit-count">{{project.commit}}</span>
        </div>
        <div class="project-content">
            <p class="description">
                {{project.description}}
            </p>
            <a href="{{project.url}}" target="_blank" class="project-link">View project</a>
        </div>
    </article>
    {% endfor %}
    {% endif %}
</div>

{%endblock%}

./templates/contact.html

{% extends 'layout.html' %}

{% block content %}
<h3 class="section-title">Contact me</h3>

{% if status %}
<p class="status" style="color: white;">{{status}}</p>
{% endif %}

<div class="contact-me">
    <form action="{{url_for('_contact')}}" method="post">
        <input type="text" name="fullname" id="fullname" class="input" placeholder="full name">
        <input type="email" name="email" id="email" class="input" placeholder="email">
        <textarea name="message" id="message" cols="30" rows="5" class="input" placeholder="message content"></textarea>
        <input type="submit" value="Send" class="btn">
    </form>
</div>
{% endblock %}

in the server file or app.py file

from flask import Flask,render_template, request
from database import get_all_projects,create_message
app = Flask(__name__)


@app.route('/')
def _hello():
    return render_template('index.html')

@app.route('/projects')
def _projects():
    projects = get_all_projects()
    return render_template('projects.html',title='projects',projects=projects)

@app.route('/contact',methods=['GET','POST'])
def _contact():
    status = None
    if request.method == 'POST':
        full_name = request.form.get('fullname')
        email = request.form.get('email')
        message = request.form.get('message')
        status = create_message(full_name,email,message).get('status')
    return render_template('contact.html',title='contact',status=status)



if __name__ == '__main__':
    app.run(debug=True)

to save data in google sheets I used sheety api
import requests

def get_all_projects():
URL = '...'
response = requests.get(URL)
response.raise_for_status()
if response.status_code == 200:
print('connection success')
return response.json()['projects']

def create_message(fullname,email,content):
URL = '...'
message = {'fullname':fullname,'email':email,'content':content}
response = requests.post(URL,json={'message':message})
if response.status_code == 200:
return {'status':'message has sent successfully thank you.'}

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site