diff --git a/IntroToPython.ipynb b/IntroToPython.ipynb
new file mode 100644
index 0000000..fee0ebf
--- /dev/null
+++ b/IntroToPython.ipynb
@@ -0,0 +1,395 @@
+{
+  "nbformat": 4,
+  "nbformat_minor": 0,
+  "metadata": {
+    "colab": {
+      "provenance": [],
+      "authorship_tag": "ABX9TyPOGUr6KJA2sDhU+eE3jOjr",
+      "include_colab_link": true
+    },
+    "kernelspec": {
+      "name": "python3",
+      "display_name": "Python 3"
+    },
+    "language_info": {
+      "name": "python"
+    }
+  },
+  "cells": [
+    {
+      "cell_type": "markdown",
+      "metadata": {
+        "id": "view-in-github",
+        "colab_type": "text"
+      },
+      "source": [
+        "<a href=\"https://colab.research.google.com/github/TeeMajesty12/Portfolio/blob/main/IntroToPython.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": 2,
+      "metadata": {
+        "id": "4r0sFwcRHllQ"
+      },
+      "outputs": [],
+      "source": [
+        "# Python Basics "
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "source": [
+        "# Strings # the \"print()\""
+      ],
+      "metadata": {
+        "id": "zInCUU31NLJa"
+      }
+    },
+    {
+      "cell_type": "code",
+      "source": [
+        "print(\"Hello World\")"
+      ],
+      "metadata": {
+        "colab": {
+          "base_uri": "https://localhost:8080/"
+        },
+        "id": "H3prvfmOI6eI",
+        "outputId": "33e47cdc-ee98-4ffe-bee7-07006c53d540"
+      },
+      "execution_count": 3,
+      "outputs": [
+        {
+          "output_type": "stream",
+          "name": "stdout",
+          "text": [
+            "Hello World\n"
+          ]
+        }
+      ]
+    },
+    {
+      "cell_type": "code",
+      "source": [
+        "print(\"\\n\\t This Is The Tab Line\\nThis Is A Regular Line\")"
+      ],
+      "metadata": {
+        "colab": {
+          "base_uri": "https://localhost:8080/"
+        },
+        "id": "IXccpuDVJzLi",
+        "outputId": "69018cda-c2a5-4def-fd8c-5281a0d92a27"
+      },
+      "execution_count": 4,
+      "outputs": [
+        {
+          "output_type": "stream",
+          "name": "stdout",
+          "text": [
+            "\n",
+            "\t This Is The Tab Line\n",
+            "This Is A Regular Line\n"
+          ]
+        }
+      ]
+    },
+    {
+      "cell_type": "code",
+      "source": [
+        "print(\"first name \" + 'last name')"
+      ],
+      "metadata": {
+        "colab": {
+          "base_uri": "https://localhost:8080/"
+        },
+        "id": "4IUMK5ogKNMl",
+        "outputId": "d70f2afe-80e9-48b8-9add-5554cbe6bf49"
+      },
+      "execution_count": 1,
+      "outputs": [
+        {
+          "output_type": "stream",
+          "name": "stdout",
+          "text": [
+            "first name last name\n"
+          ]
+        }
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "source": [
+        "Variables"
+      ],
+      "metadata": {
+        "id": "yrY9IlQYMI4n"
+      }
+    },
+    {
+      "cell_type": "markdown",
+      "source": [
+        "# Variable"
+      ],
+      "metadata": {
+        "id": "tBJPq-meMbMb"
+      }
+    },
+    {
+      "cell_type": "code",
+      "source": [
+        "dogs = 3\n",
+        "cats = \"Many Of These Cats\""
+      ],
+      "metadata": {
+        "id": "8E8N2GRAMju_"
+      },
+      "execution_count": null,
+      "outputs": []
+    },
+    {
+      "cell_type": "markdown",
+      "source": [
+        "## More Strings"
+      ],
+      "metadata": {
+        "id": "V6gnqTzqNy42"
+      }
+    },
+    {
+      "cell_type": "code",
+      "source": [
+        "greeting = \"Hello World!\" ; "
+      ],
+      "metadata": {
+        "id": "d4DilXBoN1p_"
+      },
+      "execution_count": 6,
+      "outputs": []
+    },
+    {
+      "cell_type": "code",
+      "source": [
+        "print(greeting[3])\n",
+        "print(greeting[6])\n",
+        "print(greeting[2])\n",
+        "\n",
+        "## This Prints Out The Individual Letter Of The Greeting"
+      ],
+      "metadata": {
+        "colab": {
+          "base_uri": "https://localhost:8080/"
+        },
+        "id": "cpQ3vBi8OAnE",
+        "outputId": "841aae61-61e4-4f4f-eff8-1b14ee31dea9"
+      },
+      "execution_count": 12,
+      "outputs": [
+        {
+          "output_type": "stream",
+          "name": "stdout",
+          "text": [
+            "l\n",
+            "W\n",
+            "l\n"
+          ]
+        }
+      ]
+    },
+    {
+      "cell_type": "code",
+      "source": [
+        "greeting[-1]\n",
+        "\n",
+        "## Using \"-1\" Will Automatically Print The Last Letter (Or Character) Of The Greeting.\n",
+        "## \"-1\" Basically Just Means To Start From The End"
+      ],
+      "metadata": {
+        "colab": {
+          "base_uri": "https://localhost:8080/",
+          "height": 35
+        },
+        "id": "fFKlEJcUOAdT",
+        "outputId": "764ed6ff-aa7e-4e90-ba9b-754c9d30dad0"
+      },
+      "execution_count": 13,
+      "outputs": [
+        {
+          "output_type": "execute_result",
+          "data": {
+            "text/plain": [
+              "'!'"
+            ],
+            "application/vnd.google.colaboratory.intrinsic+json": {
+              "type": "string"
+            }
+          },
+          "metadata": {},
+          "execution_count": 13
+        }
+      ]
+    },
+    {
+      "cell_type": "code",
+      "source": [],
+      "metadata": {
+        "id": "LCck0IOvOAPP"
+      },
+      "execution_count": null,
+      "outputs": []
+    },
+    {
+      "cell_type": "markdown",
+      "source": [
+        "## String Formatting"
+      ],
+      "metadata": {
+        "id": "opZ9pImUP1yr"
+      }
+    },
+    {
+      "cell_type": "code",
+      "source": [
+        "price = 59.99"
+      ],
+      "metadata": {
+        "id": "ieYmilwzP4Ic"
+      },
+      "execution_count": null,
+      "outputs": []
+    },
+    {
+      "cell_type": "code",
+      "source": [
+        "price\n",
+        "message = \"The Product Costs \" + str(price) + \"Dollars\"\n",
+        "print(message)\n",
+        "## I added \"str()\" to the price because float and srtings can't compile together"
+      ],
+      "metadata": {
+        "id": "yZ_nCeXgP-GG"
+      },
+      "execution_count": null,
+      "outputs": []
+    },
+    {
+      "cell_type": "markdown",
+      "source": [
+        "## The .format() method!!"
+      ],
+      "metadata": {
+        "id": "8q1_EpTHROuY"
+      }
+    },
+    {
+      "cell_type": "code",
+      "source": [
+        "price = 59.99\n",
+        "msg = \"The product cost {} dollars \" .format(price)\n",
+        "print(msg)"
+      ],
+      "metadata": {
+        "colab": {
+          "base_uri": "https://localhost:8080/"
+        },
+        "id": "eoGk35N6Qqwp",
+        "outputId": "b232184d-9a58-4101-cc70-8f6c590e6786"
+      },
+      "execution_count": 17,
+      "outputs": [
+        {
+          "output_type": "stream",
+          "name": "stdout",
+          "text": [
+            "The product cost 59.99 dollars \n"
+          ]
+        }
+      ]
+    },
+    {
+      "cell_type": "code",
+      "source": [
+        "amount = 3\n",
+        "total = amount * price\n",
+        "\n",
+        "msg2 = \"For {} Products at the price of {}, the total will be: {}\"\n",
+        "\n",
+        "print(msg2.format(amount, price, total))"
+      ],
+      "metadata": {
+        "colab": {
+          "base_uri": "https://localhost:8080/"
+        },
+        "id": "iUky-Z5FRUU8",
+        "outputId": "ac4f18f5-0c70-40a3-ced5-8d5a326ad8e5"
+      },
+      "execution_count": 19,
+      "outputs": [
+        {
+          "output_type": "stream",
+          "name": "stdout",
+          "text": [
+            "For 3 Products at the price of 59.99, the total will be: 179.97\n"
+          ]
+        }
+      ]
+    },
+    {
+      "cell_type": "code",
+      "source": [
+        "msg3 = \"For {2} products at the price of {0}, the total is {1}\"\n",
+        "\n",
+        "print(msg3.format(amount, price, total))"
+      ],
+      "metadata": {
+        "colab": {
+          "base_uri": "https://localhost:8080/"
+        },
+        "id": "YXAH1zmKSxri",
+        "outputId": "c12c1e90-a6ab-44d7-cf4a-fd19f51aeb8f"
+      },
+      "execution_count": 22,
+      "outputs": [
+        {
+          "output_type": "stream",
+          "name": "stdout",
+          "text": [
+            "For 179.97 products at the price of 3, the total is 59.99\n"
+          ]
+        }
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "source": [
+        "## The f-string method!!!\n"
+      ],
+      "metadata": {
+        "id": "Y7UxBECRTN6g"
+      }
+    },
+    {
+      "cell_type": "code",
+      "source": [
+        "price = 19.99\n",
+        "items = 3"
+      ],
+      "metadata": {
+        "id": "b5-k5jPBTUXN"
+      },
+      "execution_count": null,
+      "outputs": []
+    },
+    {
+      "cell_type": "code",
+      "source": [
+        "msg = f\"This indivu=idual product is {price}\""
+      ],
+      "metadata": {
+        "id": "PI0V0GAPTZS0"
+      },
+      "execution_count": 23,
+      "outputs": []
+    }
+  ]
+}
\ No newline at end of file
diff --git a/images/background.jpg b/images/background.jpg
new file mode 100644
index 0000000..5e2ca2c
Binary files /dev/null and b/images/background.jpg differ
diff --git a/images/profile.jpg b/images/profile.jpg
new file mode 100644
index 0000000..07f17bc
Binary files /dev/null and b/images/profile.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ed9aa33
--- /dev/null
+++ b/index.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tiffany Bogle - Porfolio</title>
+    <link rel="stylesheet" href="styles.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=Montserrat:wght@300&display=swap" rel="stylesheet">
+</head>
+
+<body>
+    <header>
+        <nav>
+            <a href="#home">Home</a>
+            <a href="#about">About</a>
+            <!-- <a href="#projects">Projects</a> -->
+            <a href="#contact">Contact</a>
+        </nav>
+    </header>
+    <main>
+        <section id="home">
+            <div class="fadeIn">
+                <h1>Tiffany Bogle</h1>
+                <div class="profile">
+                    <img src="images/profile.jpg" alt="Profile picture of Tiffany Bogle" width="200" height="200">
+                </div>
+                <p>Welcome to my portfolio, here I get to show you my skills, achievements, and projects.</p>
+            </div>
+        </section>
+        <section id="about">
+            <div class="container">
+                <div class="fadeIn">
+
+                    <h2>About Me</h2>
+                    <p>
+                        John Jay Computer Science Major, Class of 2024. <br>
+                        Specializing in Cyber Security, Web Development, and Penetration Testing.
+                    </p>
+                    <p>
+                        As a motivated computer science professional, I have a strong foundation in cybersecurity, web
+                        development, and software engineering. I am pursuing a Bachelor of Science in Computer Science
+                        and
+                        Information Security from John Jay College of Criminal Justice and have earned certifications in
+                        Digital Forensics and Dark Web Operations. My expertise includes digital evidence,
+                        steganography,
+                        Linux command-line interface, and intelligence gathering.
+                        <br><br>
+
+                        My diverse experiences range from serving as an Amnesty Associate at Amazon Warehouse, managing
+                        Amazon Robotics floor operations, to being an Air Traffic Controller in the United States Army,
+                        where I organized flight records and managed radar equipment. These experiences have equipped me
+                        with exceptional problem-solving skills, adaptability to new technologies, and a strong work
+                        ethic,
+                        making me a valuable asset in the fields of cybersecurity, web development, and software
+                        engineering.
+                    </p>
+                </div>
+            </div>
+            </div>
+        </section>
+        <!-- <section id="projects">
+            <div class="container">
+                <div class="fadeIn">
+                    <h2>Projects</h2>
+                    <div class="project">
+                        <img src="images/project1.jpg" alt="Project 1" width="200" height="200">
+                        <div class="project-title">
+                            <h3>Project 1</h3>
+                        </div>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
+                            Sed
+                            cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis
+                            sagittis
+                            ipsum.
+                            Praesent mauris.</p>
+                    </div>
+                    <div class="project">
+                        <img src="images/project2.jpg" alt="Project 2" width="200" height="200">
+                        <div class="project-title">
+                            <h3>Project 2</h3>
+                        </div>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
+                            Sed
+                            cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis
+                            sagittis
+                            ipsum.
+                            Praesent mauris.</p>
+                    </div>
+                </div>
+            </div>
+        </section> -->
+        <section id="contact">
+            <div class="container">
+                <div class="fadeIn">
+                    <h2>Contact</h2>
+                    <p>Email: <a href="mailto:TiffanyBogle23@gmail.com">TiffanyBogle23@gmail.com </a></p>
+                    <p>GitHub: <a href="https://github.com/TeeMajesty12" target="_blank">github.com/TeeMajesty12</a>
+                    </p>
+                    <p>LinkedIn: <a href="https://www.linkedin.com/in/tiffany-bogle-14b257271/"
+                            target="_blank">linkedin.com/in/tiffany-bogle-14b257271/</a>
+                    </p>
+                </div>
+            </div>
+        </section>
+    </main>
+    <footer>
+        <div class="container">
+            <p>&copy; 2023 Tiffany Bogle. All rights reserved.</p>
+        </div>
+    </footer>
+
+    <script src="scripts.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/scripts.js b/scripts.js
new file mode 100644
index 0000000..5108dfe
--- /dev/null
+++ b/scripts.js
@@ -0,0 +1,26 @@
+function toggleElement(id) {
+    const element = document.getElementById(id);
+    if (element.style.display === 'none') {
+      element.style.display = 'block';
+    } else {
+      element.style.display = 'none';
+    }
+  }
+  
+  document.addEventListener('DOMContentLoaded', function () {
+    const fadeInElements = document.querySelectorAll('.fadeIn');
+  
+    const observer = new IntersectionObserver((entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+          observer.unobserve(entry.target);
+        }
+      });
+    }, {threshold: 0.5});
+  
+    fadeInElements.forEach((element) => {
+      observer.observe(element);
+    });
+  });
+  
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..e18efb3
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,191 @@
+body {
+    /* font-family: Arial, sans-serif; */
+    line-height: 1.6;
+  }
+  
+  header {
+    background-color: #333;
+    color: #fff;
+    padding: 1rem;
+  }
+  
+  nav a {
+    color: #fff;
+    text-decoration: none;
+    margin-right: 1rem;
+  }
+  
+  nav a:hover {
+    color: #ccc;
+  }
+  
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Montserrat', sans-serif !important;
+  }
+  
+  body {
+    line-height: 1.6;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+  }
+  
+  header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 1rem 2rem;
+    background-color: #333;
+    z-index: 100;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  }
+  
+  nav {
+    display: flex;
+    justify-content: center;
+  }
+  
+  nav ul {
+    display: flex;
+    list-style-type: none;
+  }
+  
+  nav li {
+    margin-left: 1rem;
+  }
+  
+  nav a {
+    color: #fff;
+    text-decoration: none;
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    transition: background-color 0.2s ease-in-out;
+  }
+  
+  nav a:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  
+  
+  section {
+    padding: 5rem 2rem;
+    min-height: 100vh;
+  }
+  
+  section:nth-child(even) {
+    background-color: #f4f4f4;
+  }
+  
+  h1, h2, h3 {
+    margin-bottom: 1rem;
+  }
+  
+  p {
+    margin-bottom: 1rem;
+  }
+  
+  img {
+    display: block;
+    margin-bottom: 1rem;
+  }
+  
+  #home {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    /* use background image */
+    background: url('../images/background.jpg') no-repeat center center/cover;
+    color: whitesmoke;
+  }
+  
+  .footer {
+    text-align: center;
+    padding: 2rem;
+    background-color: #333;
+    color: #fff;
+  }
+  
+  .project {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+  
+  .project img {
+    flex: 1;
+    margin-right: 1rem;
+  }
+  
+  @media (max-width: 768px) {
+    .project {
+      flex-direction: column;
+    }
+    .project img {
+      margin-right: 0;
+      margin-bottom: 1rem;
+    }
+  }
+  
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+  }
+  
+  .project-title{
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+    
+  }
+
+  footer {
+    background-color: #333;
+    padding: 1rem 0;
+    color: #fff;
+    text-align: center;
+  }
+  
+  footer p {
+    margin: 0;
+  }
+  
+  .profile{
+    display: inline-block;
+    border-radius: 4px;
+    overflow: hidden;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
+    transition: box-shadow 0.3s ease-in-out;
+    border: 8px solid transparent;
+    border-image: linear-gradient(45deg, #989797 25%, transparent 25%, transparent 50%, #989797 50%, #989797 75%, transparent 75%, transparent);
+    border-image-slice: 1;
+  }
+
+  .profile img {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+  
+  .profile:hover {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.16);
+  }
+  .fadeIn {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 1s, transform 1s;
+  }
+  
+  .fadeIn.visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  
+  
\ No newline at end of file