hstatsep · gabriele4540 · Oct 1, 2025 · Oct 1, 2025 · Oct 1, 2025 · Oct 1, 2025
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 ##### Getting your own copy of the template
 
-* Click the **Fork** icon in the top-right corner. If you're able to rename it now, rename it to `yourGithubUsername.github.io`. For example, a student with the Github username of _johnd1234_ would change their **Repository name** to `johnd1234.github.io`
+* Click the **Fork** icon in the top-right corner. If you're able to rename it now, rename it to `Gabriele4540`. For example, a student with the Github username of _johnd1234_ would change their **Gabriele4540** to `johnd1234.github.io`
 * After you have your own copy, on the right sidebar, click the gear icon next to **About** and add a description!
   * For example, _This is a collection of all of my work._
 
@@ -14,7 +14,7 @@
 
 ##### Updating your username
 
-* If your repo is still named `portfolio-template`, click the **Settings** tab, then change the **Repository name** to `yourGithubUsername.github.io`. For example, a student with the Github username of _johnd1234_ would change their **Repository name** to `johnd1234.github.io`
+* If your repo is still named `portfolio-template`, click the **Settings** tab, then change the **Gabriele4540.github.io** to `yourGithubUsername.github.io`. For example, a student with the Github username of _johnd1234_ would change their **Gabriele4540.github.io** to `johnd1234.github.io`
 
 In the future, you will be editing these files using an IDE. For now, you will be editing these files directly on github.com
 

diff --git a/img/Screenshot 2025-09-30 9.45.49 PM.png b/img/Screenshot 2025-09-30 9.45.49 PM.png
diff --git a/index.html b/index.html
@@ -2,17 +2,17 @@
 <html lang="en">
 
 <head>
-    <title class="owner-name">#</title>
+    <title class="Gabriele4540">#</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
     <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="stylesheet" /> 
+    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="stylesheet" />
     <link rel="stylesheet" href="style.css" type="text/css">
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
-
+    <link rel="stylesheet" href="https:https://app.pickcode.io/project/cmhoy8fw33cwclwqkzf2lrpry
 </head>
 
 <body>
@@ -53,7 +53,7 @@ <h3 class="margin">Projects</h3>
         <div class="container">
             <div class="row">
 
-                <!--
+                                    <!--
                 <div class="col-sm-4">
                     <div class="card">
                         <div class="card-body">
@@ -65,6 +65,35 @@ <h6 class="card-subtitle mb-2 text-muted">10th Grade</h6>
                     </div>
                 </div>
                 -->
+                <div class="col-sm-4">
+                    <div class="card">
+                        <div class="card-body">
+                            <h5 class="card-title">My Portfolio Project</h5>
+                            <h6 class="card-subtitle mb-2 text-muted">10th Grade</h6>
+                            <p class="card-text">This is my portfolio project that ive been working on to help me get jobs and help me stay organized.</p>
+                            <a href="#" class="card-link">More</a>
+                        </div>
+                    </div>
+                </div>
+
+
+                <div class="col-sm-4">
+                    <div class="card">
+                        <div class="card-body">
+                            <h5 class="card-title">Sep10-freedom-project</h5>
+                            <h6 class="card-subtitle mb-2 text-muted">10th Grade</h6>
+                            <p class="card-text">For my Sep10-freedom-project
+                                I have made futuristic technology that can heal any skin irritation on your dog.</p>
+                                <p2>Some things I can takeaway from my project is to use more of a loud voice to attract more attention to me during my project and to use the microphone if I cant get my voice that high. next thing I can takeaway is to be more professional and say thank you instead of thats it. Another thing, I can takeaway is that I need to start not rushing and start preparing my project and have better time management. Finally, for my final takeaway I should taking my time with css and other coding areas instead of using ai or rushing.</p2>
+                                <p3>Some challenges I had while doing my project was the css section. I didnt really pay attention during the css part of this class which is why I struggled alot. To fix this problem I will be more focused and have a healthier sleeping schedule instead of having my sleep inside sep. </p3>
+                            <a href="https://gabriele4540.github.io/sep10-freedom-project/">
+            <a href="https://gabriele4540.github.io/sep10-freedom-project/" style="color: red;">My Link</a>
+                            <a href="#" class="card-link">More</a>
+                        </div>
+                    </div>
+                </div>
+
+
 
             </div>
         </div>
@@ -73,16 +102,16 @@ <h6 class="card-subtitle mb-2 text-muted">10th Grade</h6>
 
     <!-- Third Container (Grid) -->
     <div class="container-fluid bg-3 text-center">
-        <h3 class="margin">About Me</h3><br>
+        <h3 class="margin">I fear the deep ocean and I like to play video games.</h3><br>
         <div class="row">
             <div class="col-sm-4">
-                <p>Lorem ipsum.</p>
+                <p>I like to swim in my swim team.</p>
             </div>
             <div class="col-sm-4">
-                <p>Lorem ipsum.</p>
+                <p>This project helps my organizational skills.</p>
             </div>
             <div class="col-sm-4">
-                <p>Lorem ipsum.</p>
+                <p>I am having a lot of fun coding my portfolio.</p>
             </div>
         </div>
     </div>

diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title class="Gabriele4540">#</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="stylesheet" />
+    <link rel="stylesheet" href="style.css" type="text/css">
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="https:https://app.pickcode.io/project/cmhoy8fw33cwclwqkzf2lrpry
+</head>
+
+<body>
+
+    <!-- Navbar -->
+
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <a class="navbar-brand owner-name" href="#"></a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav mr-auto">
+                <li class="nav-item">
+                    <a class="nav-link" href="index.html">Home</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#" id="github" target="_blank">Github</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#projects">Projects</a>
+                </li>
+            </ul>
+        </div>
+    </nav>
+
+    <!-- First Container -->
+    <div class="container-fluid bg-1 text-center">
+        <!--<h1 class="margin">Name</h1>-->
+        <img src="img/avatar.png" class="img-fluid" alt="Logo" id="logo">
+
+    </div>
+
+    <!-- Second Container -->
+    <div class="container-fluid bg-2 text-center" id="projects">
+        <h3 class="margin">Projects</h3>
+        <p>Here is where my projects will be</p>
+        <a href="https://gabriele4540.github.io/sep10-freedom-project/">
+            <a href="https://gabriele4540.github.io/sep10-freedom-project/" style="color: red;">My Link</a>
+
+
+    Open My Project
+</a>
+        <div class="container">
+            <div class="row">
+
+                <!--
+                <div class="col-sm-4">
+                    <div class="card">
+                        <div class="card-body">
+                            <h5 class="card-title">Project Name</h5>
+                            <h6 class="card-subtitle mb-2 text-muted">10th Grade</h6>
+                            <p class="card-text">A brief explanation of the project.</p>
+                            <a href="#" class="card-link">More</a>
+                        </div>
+                    </div>
+                </div>
+                -->
+
+            </div>
+        </div>
+        </a>
+    </div>
+
+    <!-- Third Container (Grid) -->
+    <div class="container-fluid bg-3 text-center">
+        <h3 class="margin">About Me</h3><br>
+        <div class="row">
+            <div class="col-sm-4">
+                <p>I like swimming.</p>
+            </div>
+            <div class="col-sm-4">
+                <p>I like playing video games.</p>
+            </div>
+            <div class="col-sm-4">
+                <p>I like money.</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <footer class="container-fluid bg-4 text-center">
+        <a href="#" target="_blank" id="fork"><img src="img/fork.png"></a><br>
+        <a href="https://hstatsep.github.io" target="_blank"><img src="https://hstatsep.github.io/img/hstatsep-logo-small.png" id="sep"></a>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/portfolio/portfolio.html b/portfolio/portfolio.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title class="Gabriele4540">#</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="stylesheet" />
+    <link rel="stylesheet" href="style.css" type="text/css">
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="https:https://app.pickcode.io/project/cmhoy8fw33cwclwqkzf2lrpry
+</head>
+
+<body>
+
+    <!-- Navbar -->
+
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <a class="navbar-brand owner-name" href="#"></a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav mr-auto">
+                <li class="nav-item">
+                    <a class="nav-link" href="index.html">Home</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#" id="github" target="_blank">Github</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#projects">Projects</a>
+                </li>
+            </ul>
+        </div>
+    </nav>
+
+    <!-- First Container -->
+    <div class="container-fluid bg-1 text-center">
+        <!--<h1 class="margin">Name</h1>-->
+        <img src="img/avatar.png" class="img-fluid" alt="Logo" id="logo">
+    </div>
+
+    <!-- Second Container -->
+    <div class="container-fluid bg-2 text-center" id="projects">
+        <h3 class="margin">Projects</h3>
+        <p>Coming soon!</p>
+        <div class="container">
+            <div class="row">
+
+                <!--
+                <div class="col-sm-4">
+                    <div class="card">
+                        <div class="card-body">
+                            <h5 class="card-title">Project Name</h5>
+                            <h6 class="card-subtitle mb-2 text-muted">10th Grade</h6>
+                            <p class="card-text">A brief explanation of the project.</p>
+                            <a href="#" class="card-link">More</a>
+                        </div>
+                    </div>
+                </div>
+                -->
+
+            </div>
+        </div>
+        </a>
+    </div>
+
+    <!-- Third Container (Grid) -->
+    <div class="container-fluid bg-3 text-center">
+        <h3 class="margin">About Me</h3><br>
+        <div class="row">
+            <div class="col-sm-4">
+                <p>Lorem ipsum.</p>
+            </div>
+            <div class="col-sm-4">
+                <p>Lorem ipsum.</p>
+            </div>
+            <div class="col-sm-4">
+                <p>Lorem ipsum.</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <footer class="container-fluid bg-4 text-center">
+        <a href="#" target="_blank" id="fork"><img src="img/fork.png"></a><br>
+        <a href="https://hstatsep.github.io" target="_blank"><img src="https://hstatsep.github.io/img/hstatsep-logo-small.png" id="sep"></a>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>
+    <script src="script.js"></script>
+</body>
+
+</html>