From 505472abcd01ee533fb93c8b6341b1df80b2a11b Mon Sep 17 00:00:00 2001 From: sanvit Date: Wed, 20 Nov 2024 21:10:04 +0400 Subject: [PATCH] code cleanup + deploy test week 3 --- .gitignore | 3 + Week 3: Final Project Development/.gitignore | 2 - Week 3: Final Project Development/PROJECT.md | 0 Week 3: Final Project Development/README.md | 1 - Week 3: Final Project Development/comments.db | Bin 16384 -> 0 bytes Week 3: Final Project Development/setup_db.py | 23 - .../src/FINALCODE..md | 84 ++ .../README.md | 1151 +++++++++++++++++ .../src/FINALCODE.md | 363 ++++++ .../src}/app/static/css/style.css | 0 .../src}/app/static/images/blue_mountain.jpg | Bin .../src}/app/templates/index.html | 8 +- .../src}/requirements.txt | 0 .../src}/run.py | 0 14 files changed, 1605 insertions(+), 30 deletions(-) delete mode 100644 Week 3: Final Project Development/.gitignore delete mode 100644 Week 3: Final Project Development/PROJECT.md delete mode 100644 Week 3: Final Project Development/README.md delete mode 100644 Week 3: Final Project Development/comments.db delete mode 100644 Week 3: Final Project Development/setup_db.py create mode 100644 docs/Week 2: HTML CSS JS (Frontend)/src/FINALCODE..md create mode 100644 docs/Week 3: Final Project Development/README.md create mode 100644 docs/Week 3: Final Project Development/src/FINALCODE.md rename {Week 3: Final Project Development => docs/Week 3: Final Project Development/src}/app/static/css/style.css (100%) rename {Week 3: Final Project Development => docs/Week 3: Final Project Development/src}/app/static/images/blue_mountain.jpg (100%) rename {Week 3: Final Project Development => docs/Week 3: Final Project Development/src}/app/templates/index.html (87%) rename {Week 3: Final Project Development => docs/Week 3: Final Project Development/src}/requirements.txt (100%) rename {Week 3: Final Project Development => docs/Week 3: Final Project Development/src}/run.py (100%) diff --git a/.gitignore b/.gitignore index 7b058dd..12da418 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,6 @@ .vscode *__pycache__* .venv +.DS_Store +instance/ +*.db diff --git a/Week 3: Final Project Development/.gitignore b/Week 3: Final Project Development/.gitignore deleted file mode 100644 index a303665..0000000 --- a/Week 3: Final Project Development/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -acm_final_env/ -.env \ No newline at end of file diff --git a/Week 3: Final Project Development/PROJECT.md b/Week 3: Final Project Development/PROJECT.md deleted file mode 100644 index e69de29..0000000 diff --git a/Week 3: Final Project Development/README.md b/Week 3: Final Project Development/README.md deleted file mode 100644 index 32d7c99..0000000 --- a/Week 3: Final Project Development/README.md +++ /dev/null @@ -1 +0,0 @@ -# Session Overview \ No newline at end of file diff --git a/Week 3: Final Project Development/comments.db b/Week 3: Final Project Development/comments.db deleted file mode 100644 index cc523e22f28ec94eaae9bb6d98a8ea29b5ea2baf..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 16384 zcmeI(&u$Vy90%}O{**sfM#N@=O_Sfj7&aiOdZ`y9wi_h^Mch_7nPC}WE$p`J(v)NS zBtC*yAHj$41w8r$&LU7~jCaX*U}kn_=J(6YhtnK*_qOH)l0JE(p$O3(6MH-jSw1mF1qg|QH=l5rO z@*^u*=A(*$W@SlYdApS(>#*8T!F97?l@_a~K&$6m%q@Jv`RkCs>P&--@NTXy{U{KC z00bZa0SG_<0uX=z1Rwwb2&}OH?*D82!5f8iH=kC*uaHHZQM2tWV=5P$##AOHafKmY;|SbKqFI?g!fwrwX<)2B|S zlT1#Zgb>dYai$mF*C&2o?2n`foO4NaSM=nlN@7SI83b}fL0`Bu@y2Cp4y5oU^<+SO zIXHc|q2di=DEf{YNW1SkwiuASkoLJ8O{nL2T~hybkePU#<#M^v_~g%5kHuL&pI0dc np1<7QjjDuOTc3q}LSYluTah@+X0v@K{M^&j0$rcRTsOY~P~Xs| diff --git a/Week 3: Final Project Development/setup_db.py b/Week 3: Final Project Development/setup_db.py deleted file mode 100644 index e8511e1..0000000 --- a/Week 3: Final Project Development/setup_db.py +++ /dev/null @@ -1,23 +0,0 @@ -import sqlite3 - -# Connect to the database (creates the file if it doesn't exist) -conn = sqlite3.connect('comments.db') - -# Create a cursor object to execute SQL commands -cursor = conn.cursor() - -# Create the comments table -cursor.execute(''' - CREATE TABLE IF NOT EXISTS comments ( - id INTEGER PRIMARY KEY AUTOINCREMENT, - name TEXT NOT NULL, - position TEXT, - comment TEXT NOT NULL - ) -''') - -# Commit the changes and close the connection -conn.commit() -conn.close() - -print("Database and table created successfully.") diff --git a/docs/Week 2: HTML CSS JS (Frontend)/src/FINALCODE..md b/docs/Week 2: HTML CSS JS (Frontend)/src/FINALCODE..md new file mode 100644 index 0000000..ba5bec2 --- /dev/null +++ b/docs/Week 2: HTML CSS JS (Frontend)/src/FINALCODE..md @@ -0,0 +1,84 @@ +# A Simple Counter Application + +### HTML/CSS: + +```html + + + + + + + Basketball Score + + + + + +
+

πŸ€ Basketball Score

+ + +
0
+ + +
+ + + + +
+
+ + + + + + + +``` + +### JavaScript: + +```javascript +// Initialize the counter variable +let count = 0; + +// Select the display element +const counterDisplay = document.getElementById("counter"); + +// Function to update the display +function updateDisplay() { + counterDisplay.innerText = count; +} + +// Increase count +document.getElementById("increase-2").addEventListener("click", () => { + count += 2; + updateDisplay(); +}); + +// Increase count +document.getElementById("increase-3").addEventListener("click", () => { + count += 3; + updateDisplay(); +}); + +// Decrease count +document.getElementById("decrease").addEventListener("click", () => { + count--; + updateDisplay(); +}); + +// Reset count +document.getElementById("reset").addEventListener("click", () => { + count = 0; + updateDisplay(); +}); +``` \ No newline at end of file diff --git a/docs/Week 3: Final Project Development/README.md b/docs/Week 3: Final Project Development/README.md new file mode 100644 index 0000000..38d5299 --- /dev/null +++ b/docs/Week 3: Final Project Development/README.md @@ -0,0 +1,1151 @@ +# Building a Simplified Flask-Based Portfolio Website + +In this workshop, we'll be building a simple portfolio website with Flask and a MySQL database. We'll cover everything from setup to integrating the database and creating a user-friendly front end with Bootstrap. + +## Introduction to Front-End and Back-End + +Before diving into building the project, it's crucial to understand the foundational concepts of web development: + +- **Front-End (Client-Side)**: This is the part of the application that users interact with directly. It includes everything a user experiences on the browser, such as HTML (structure), CSS (styling), and JavaScript (functionality). +- **Back-End (Server-Side)**: This is the behind-the-scenes functionality of the application. It handles data processing, server communication, database management, and more. Back-end code is run on the server and interacts with the front-end via HTTP methods like **GET** (fetch data) and **POST** (send data). +- **Full Stack Development**: This refers to working on both the front-end and back-end, providing a complete, well-rounded skill set for building web applications. + + + +![What is Backend Developer? Skills Need for Web Development](https://www.guru99.com/images/1/091318_0717_WhatisBacke1.png) + +### Prerequisites + +- **Python** installed (version 3.7+ recommended) + +- Download **[A Nice Blue Mountain](https://drive.google.com/uc?export=download&id=1TEvoW63wJaOR3k5o91gmDl6EgZxOzSot)** + + +--- + +# 1. Project Setup + +### 1.1 Setting up a Virtual Environment + +To ensure we have an isolated workspace, let's create and activate a virtual environment. Open CMD and type + +```bash +python3 -m venv myenv +``` + +after this we can activate our environment by typing out + +```bash +myenv\Scripts\activate + +OR + +source myenv/bin/activate +``` + +### 1.2 Installing Flask and Dependencies + +With the virtual environment activated, install Flask and other dependencies. + +```bash +pip install Flask==2.1.2 +pip install Flask-SQLAlchemy==2.5.1 +pip install SQLAlchemy==1.4.46 +``` + +--- + +# 2. Building the Basic Front-End Layout + +To start, we will focus on building the initial structure of the front-end using **HTML** and **CSS**. This section will guide you through understanding the provided `index.html` and `style.css` files.Β Β Β Β  + +```textile +portfolio/ +β”œβ”€β”€ app/ +β”‚ β”œβ”€β”€ templates/ +β”‚ β”‚ └── index.html +β”‚ └── static/ +β”‚ └── css/ +β”‚ └── style.css +β”œβ”€β”€ run.py +``` + +--- + +**`run.py`**: This will initialize and run the Flask app. + +```python +from flask import Flask, render_template + +# Initialize the Flask app +app = Flask(__name__, static_folder='app/static', template_folder='app/templates') + +# Route for the homepage +@app.route('/') +def index(): + return render_template('index.html') + +if __name__ == '__main__': + app.run(debug=True) +``` + +Let us start of by creating the `index.html` for our portfolio website followed by the `style.css` and run the app to see what we have + +--- + +### The HTML File (`index.html`) + +```html + + + + + + My Portfolio + + + + +
+ + +
+ + +
+
+

Mustafa Fatehi

+

Welcome to my personal portfolio!

+
+
+ + +
+
+

About Me

+

Hello! I'm Mustafa, a web developer experienced in Flask, Python, and front-end technologies.

+
+
+ + +``` + +### Explanation of the HTML Structure + +- **``**: Declares the document type and version of HTML (HTML5 in this case). +- **``**: The root element of the HTML document, with `lang="en"` specifying the language as English. +- **``**: Contains meta-information about the document, such as character encoding, viewport settings for responsive design, title, and linked resources (like CSS). +- **``**: Links to the `style.css` file using `url_for()` to serve the static file. +- **``**: Contains the main content of the web page. +- **`
`**: A container for introductory content and navigation links. +- **``**: An anchor element used for navigation; it can link to sections within the page or external pages. +- **`
`**: Defines sections in a document, used to group thematic content. +- **`
`**: A generic container element that can be used to group content for styling or layout purposes. +- **`

` and `

`**: Header and paragraph tags, respectively, used for headings and regular text. + +#### Detailed Explanation of the Header Section + +```html +

+ + +
+``` + +#### 1. **`
`**: + +- The `
` element is used to group introductory content, navigation links, or other elements that appear at the beginning of a web page or a section. +- The `class="header"` assigns a CSS class to the `
` element, allowing it to be styled specifically through the CSS rules associated with `.header`. + +#### 2. **``**: + +- **`` (Anchor tag)**: This tag is used for hyperlinks. It can navigate to another page, a different section within the same page, or an external site. +- **`href="#home"`**: The `href` attribute sets the link's destination. In this case, `#home` is an **internal link** that points to an element with the `id="home"` on the same page, facilitating smooth scrolling navigation. +- **`class="logo"`**: This assigns a CSS class `logo` to the anchor tag, which can be styled separately to create a distinct appearance (e.g., different font size or color). +- **Content ("My Portfolio")**: This is the clickable text displayed as the link, often styled prominently to act as a branding or main title link. + +#### 3. **`

+
+ + +
+
+

Contact

+

Phone: +1234567890

+

Email: your.email@example.com

+ +
+
+ + + + + + + + +``` + +Now your `run.py` should look like this + +```python +from flask import Flask, render_template, request, redirect +from flask_sqlalchemy import SQLAlchemy + + +app = Flask(__name__, static_folder='app/static', template_folder='app/templates') + +app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///comments.db' +app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False + +db = SQLAlchemy(app) + +# Define the Comment model +class Comment(db.Model): + id = db.Column(db.Integer, primary_key=True) + name = db.Column(db.String(80), nullable=False) + position = db.Column(db.String(120)) + comment = db.Column(db.Text, nullable=False) + + def __repr__(self): + return f"" + +# Create the database tables (if not already created) +with app.app_context(): + db.create_all() + +@app.route('/') +def index(): + comments = Comment.query.all() + return render_template('index.html', comments=[{'NAME': c.name, 'POSITION': c.position, 'COMMENT': c.comment} for c in comments]) + +@app.route('/add_comment', methods=['POST']) +def add_comment(): + name = request.form['name'] + position = request.form['position'] + comment_text = request.form['comment'] + + new_comment = Comment(name=name, position=position, comment=comment_text) + db.session.add(new_comment) + db.session.commit() + return redirect('/') + +if __name__ == '__main__': + app.run(debug=True) + +``` + +Now making changes to the `style.css` , add these to the style .css + +```css +/* Comments Section Styling */ +.comments-section { + background-color: #302b2b; + padding: 40px 20px; + text-align: center; +} + +.comments-section h2, .comments-section h3 { + margin-bottom: 20px; + color: #ffffff; +} + +/* Carousel Styling */ +.carousel { + width: 100%; + margin-bottom: 30px; +} + +.carousel-inner { + max-width: 800px; + margin: 0 auto; +} + +.comment-box { + background-color: #494545; /* Dark gray background */ + color: #ffffff; /* White text color */ + padding: 20px; + border-radius: 10px; + font-size: 1.1rem; + text-align: left; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Added shadow for depth */ +} + +/* Carousel Controls */ +.carousel-control-prev, .carousel-control-next { + color: #ffffff; +} + +.carousel-control-prev-icon, +.carousel-control-next-icon { + background-color: #ffffff; /* White icons */ + border-radius: 50%; +} + +/* Comment Form Styling */ +.comment-form { + max-width: 600px; + margin: 0 auto; + padding: 20px; /* Padding for better spacing */ + background-color: #383838; /* Background color for form */ + border-radius: 10px; /* Rounded corners */ +} + +.comment-form .form-group { + margin-bottom: 15px; +} + +.comment-form .form-control { + font-size: 1rem; + padding: 10px; + background-color: #494949; /* Darker input background */ + color: #ffffff; /* White text color */ + border: none; /* Removed default border */ + border-radius: 5px; /* Rounded corners */ +} + +.comment-form .form-control::placeholder { + color: #b0b0b0; /* Lighter placeholder color */ +} + +.btn-submit { + background-color: #ff6b6b; + border: none; + color: #fff; + padding: 10px 20px; + font-size: 1rem; + cursor: pointer; + width: 100%; + border-radius: 5px; /* Rounded corners */ + transition: background-color 0.3s; /* Smooth transition for hover */ +} + +.btn-submit:hover { + background-color: #ff8566; +} +``` + +--- + +# 4. Javascript Popup + +This is just a small bit of javascript which will show a popup everytime a new comment is added. + +```html + +``` + +This script runs when the page is fully loaded: + +- **`document.addEventListener("DOMContentLoaded", function() { ... })`**: Ensures the code inside runs only after the DOM (web page) is fully loaded. + + +- **`const form = document.querySelector('.comment-form')`**: Selects the form element with the class `comment-form`. + + +- **`form.addEventListener('submit', function(event) { ... })`**: Adds an event listener to the form that triggers when it is submitted. + + +- **`alert("Comment has been added!")`**: Displays an alert message saying "Comment has been added!" when the form is submitted. + +--- + +# 5. Running the App + +To run the flask app now , type the following command into the command shell and the site on http://127.0.0.1:5000 + +```bash +python run.py +``` + +--- + +# Conclusion + +In this project, we built a complete web application using Flask, showcasing the power of combining both front-end and back-end development to create a functional, interactive portfolio website. Here’s what we achieved step by step: + +1. **Understanding Front-End and Back-End**: + + - We explored the roles of front-end (HTML, CSS, JavaScript) and back-end (Flask, Python) technologies in building web applications. + - We discussed how HTTP methods like GET and POST allow communication between the front-end and back-end. + +2. **Building the Web Page**: + + - We structured the main `index.html` page, including sections for displaying portfolio details, user comments, and contact information. + - We added styling with CSS and used Bootstrap for a responsive design, making the page look clean and professional. + +3. **Creating the Database**: + + - We set up a SQLite database and created a `Comment` model with SQLAlchemy to store user comments. + - We ensured the database could store, retrieve, and manage user input efficiently. + +4. **Developing the Comment Form and Display Carousel**: + + - We integrated an input form that allows users to submit their comments and a Bootstrap carousel to display these comments dynamically. + - Using Jinja2 templating, we looped through the list of comments from the database and rendered them on the page. + +5. **Adding JavaScript for User Feedback**: + + - We added a simple JavaScript script that shows an alert to confirm when a comment is successfully submitted, enhancing user experience. + +6. **Connecting Front-End and Back-End**: + + - The form submissions were linked to the Flask back-end, which processed the data, stored it in the database, and displayed it in the carousel. + - This demonstrated the seamless interaction between the front-end and back-end of a full-stack application. + +![Jack of All Arts : r/ProgrammerHumor](https://preview.redd.it/9uduq0utbn071.jpg?auto=webp&s=ab7716056c252851d390bb2bb70570b784d5e387) diff --git a/docs/Week 3: Final Project Development/src/FINALCODE.md b/docs/Week 3: Final Project Development/src/FINALCODE.md new file mode 100644 index 0000000..b1d28db --- /dev/null +++ b/docs/Week 3: Final Project Development/src/FINALCODE.md @@ -0,0 +1,363 @@ +## HTML: + +```html + + + + + + My Portfolio + + + + + + + + + + +
+ + +
+ + +
+ +
+
+

Mustafa Fatehi

+

Welcome to my portfolio! I am excited to share my work with you.

+
+
+ + +
+
+

About Me

+

Hello! I'm Mustafa, a web developer experienced in Flask, Python, and front-end technologies. I create responsive, user-friendly web applications.

+
+
+ + +
+
+

Comments

+ + + + + +

Add a Comment

+
+
+ +
+
+ +
+
+ +
+ +
+
+
+ + +
+
+

Contact

+

Phone: +1234567890

+

Email: your.email@example.com

+ +
+
+
+ + + + + + + + + + +``` + +## CSS: + +```css +/* Reset and Default Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, body { + scroll-behavior: smooth; + font-family: 'Orbitron', sans-serif; + overflow-x: hidden; +} + +body { + display: flex; + flex-direction: column; +} + +/* Header */ +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + font-size: 1rem; + color: #ffffff; + background-color: #1b263b; + position: fixed; + top: 0; + width: 100%; + z-index: 1000; +} + +.logo { + font-weight: bold; + text-decoration: none; + color: #ffffff; +} + +.nav-links a { + text-decoration: none; + color: #ffffff; + margin-left: 15px; +} + +.nav-links a:hover { + color: #a9d6e5; +} + +/* Section Styling */ +.section { + min-height: 100vh; + padding-top: 80px; /* Adjusted for fixed header */ + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} + +.content { + max-width: 600px; +} + +/* Section Background Colors */ +.red-section { + background-image: url('../images/blue_mountain.jpg'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + color: #121212; +} + +.white-section { + background-color: #ffffff; + color: #121212; +} + +.contact-section { + background-color: #f0f0f0; + color: #333; + padding: 40px 20px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; +} + +.social-links a { + font-weight: bold; + color: #007bff; + margin: 0 10px; +} + +.social-links a:hover { + text-decoration: underline; +} + +/* Comments Section Styling */ +.comments-section { + background-color: #302b2b; + padding: 40px 20px; + text-align: center; +} + +.comments-section h2, .comments-section h3 { + margin-bottom: 20px; + color: #ffffff; +} + +/* Carousel Styling */ +.carousel { + width: 100%; + margin-bottom: 30px; +} + +.carousel-inner { + max-width: 800px; + margin: 0 auto; +} + +.comment-box { + background-color: #494545; /* Dark gray background */ + color: #ffffff; /* White text color */ + padding: 20px; + border-radius: 10px; + font-size: 1.1rem; + text-align: left; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Added shadow for depth */ +} + +/* Carousel Controls */ +.carousel-control-prev, .carousel-control-next { + color: #ffffff; +} + +.carousel-control-prev-icon, +.carousel-control-next-icon { + background-color: #ffffff; /* White icons */ + border-radius: 50%; +} + +/* Comment Form Styling */ +.comment-form { + max-width: 600px; + margin: 0 auto; + padding: 20px; /* Padding for better spacing */ + background-color: #383838; /* Background color for form */ + border-radius: 10px; /* Rounded corners */ +} + +.comment-form .form-group { + margin-bottom: 15px; +} + +.comment-form .form-control { + font-size: 1rem; + padding: 10px; + background-color: #494949; /* Darker input background */ + color: #ffffff; /* White text color */ + border: none; /* Removed default border */ + border-radius: 5px; /* Rounded corners */ +} + +.comment-form .form-control::placeholder { + color: #b0b0b0; /* Lighter placeholder color */ +} + +.btn-submit { + background-color: #ff6b6b; + border: none; + color: #fff; + padding: 10px 20px; + font-size: 1rem; + cursor: pointer; + width: 100%; + border-radius: 5px; /* Rounded corners */ + transition: background-color 0.3s; /* Smooth transition for hover */ +} + +.btn-submit:hover { + background-color: #ff8566; +} +``` +## Flask/Python + +```python +from flask import Flask, render_template, request, redirect +from flask_sqlalchemy import SQLAlchemy + +# Initialize the Flask app +app = Flask(__name__, static_folder='app/static', template_folder='app/templates') + +# Configure the SQLite database +app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///comments.db' +app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False + +# Initialize SQLAlchemy +db = SQLAlchemy(app) + +# Define the Comment model +class Comment(db.Model): + id = db.Column(db.Integer, primary_key=True) + name = db.Column(db.String(80), nullable=False) + position = db.Column(db.String(120)) + comment = db.Column(db.Text, nullable=False) + + def __repr__(self): + return f"" + +# Create the database tables (if not already created) +with app.app_context(): + db.create_all() + +# Route for the homepage +@app.route('/') +def index(): + comments = Comment.query.all() + return render_template('index.html', comments=[{'NAME': c.name, 'POSITION': c.position, 'COMMENT': c.comment} for c in comments]) + +# Route for handling the form submission +@app.route('/add_comment', methods=['POST']) +def add_comment(): + name = request.form['name'] + position = request.form['position'] + comment_text = request.form['comment'] + + # Create a new comment instance and add it to the database + new_comment = Comment(name=name, position=position, comment=comment_text) + db.session.add(new_comment) + db.session.commit() + return redirect('/') + +if __name__ == '__main__': + app.run(debug=True) +``` diff --git a/Week 3: Final Project Development/app/static/css/style.css b/docs/Week 3: Final Project Development/src/app/static/css/style.css similarity index 100% rename from Week 3: Final Project Development/app/static/css/style.css rename to docs/Week 3: Final Project Development/src/app/static/css/style.css diff --git a/Week 3: Final Project Development/app/static/images/blue_mountain.jpg b/docs/Week 3: Final Project Development/src/app/static/images/blue_mountain.jpg similarity index 100% rename from Week 3: Final Project Development/app/static/images/blue_mountain.jpg rename to docs/Week 3: Final Project Development/src/app/static/images/blue_mountain.jpg diff --git a/Week 3: Final Project Development/app/templates/index.html b/docs/Week 3: Final Project Development/src/app/templates/index.html similarity index 87% rename from Week 3: Final Project Development/app/templates/index.html rename to docs/Week 3: Final Project Development/src/app/templates/index.html index 52acca6..da6c4bb 100644 --- a/Week 3: Final Project Development/app/templates/index.html +++ b/docs/Week 3: Final Project Development/src/app/templates/index.html @@ -5,7 +5,7 @@ My Portfolio - + @@ -101,9 +101,9 @@

Contact

- - - + + +