hstatsep · Jairop2409 · Oct 3, 2023 · Oct 3, 2023 · Oct 3, 2023 · Oct 3, 2023
diff --git a/img/Aframe.png b/img/Aframe.png
diff --git a/img/Candy.png b/img/Candy.png
diff --git a/img/Logo-jairo-png.png b/img/Logo-jairo-png.png
diff --git a/img/SEP10 Dating Simulator Storyline.png b/img/SEP10 Dating Simulator Storyline.png
diff --git a/img/logo.png b/img/logo.png
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <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>
@@ -43,7 +43,7 @@
     <!-- 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">
+        <img src="img/logo.png" class="img-fluid" alt="Logo" id="logo">
     </div>
 
     <!-- Second Container -->
@@ -53,19 +53,41 @@ <h3 class="margin">Projects</h3>
         <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>
+                            <h5 class="card-title"> movie-webpage</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>
+                            <p class="card-text">Html and Css review .</p>
+                            <a href="projects/movie-webpage.html" class="card-link"> View More</a>
                         </div>
                     </div>
                 </div>
-                -->
 
+
+                <div class="col-sm-4">
+                    <div class="card">
+                        <div class="card-body">
+                            <h5 class="card-title">Dating sim project</h5>
+                            <h6 class="card-subtitle mb-2 text-muted">10th Grade</h6>
+                            <p class="card-text"> Using links in ide .</p>
+                            <a href="projects/cyoasim.html" class="card-link">More</a>
+                        </div>
+                    </div>
+                </div>
+
+
+
+                <div class="col-sm-4">
+                    <div class="card">
+                        <div class="card-body">
+                            <h5 class="card-title"> Freedom Project</h5>
+                            <h6 class="card-subtitle mb-2 text-muted">10th Grade</h6>
+                            <p class="card-text">In this project I learned how to do a website using what I learned in 10th grade </p>
+                            <a href="projects/freedomproject.html" class="card-link"> View More</a>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         </a>
@@ -76,13 +98,13 @@ <h6 class="card-subtitle mb-2 text-muted">10th Grade</h6>
         <h3 class="margin">About Me</h3><br>
         <div class="row">
             <div class="col-sm-4">
-                <p>Lorem ipsum.</p>
+                <p> My name is Jairo, I'm from brooklyn and peru. I am in the Sep program and I love to code..</p>
             </div>
             <div class="col-sm-4">
-                <p>Lorem ipsum.</p>
+                <p>My favorite things to do on free time is listen to music, play video games, hangout with friends and go to the gym or excerise outside .</p>
             </div>
             <div class="col-sm-4">
-                <p>Lorem ipsum.</p>
+                <p>I love the color red </p>
             </div>
         </div>
     </div>

diff --git a/projects/cyoasim.html b/projects/cyoasim.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title class="owner-name">#</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>
+
+</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="../index.html#projects">Projects</a>
+                </li>
+            </ul>
+        </div>
+    </nav>
+
+    <!-- First Container -->
+    <div class="container-fluid bg-1">
+        <div class="container">
+
+            <h1 class="margin text-center">  Grade 10 Dating Simulator project(CYOA) </h1>
+            <p>  The prompt for this project was to make a storyline in our ide using links, images and content. The project was called cyoa(choose your own adventure) and it was a partner group work in my case where I worked with Luis and the purpose of this project was to test our knowledge on github commands and communicating with our partners because if someone pushes a commit then they have to tell the partner when they pushed so the partner can pull. </p>
+            <p>Once Mr Mueller gave us our group story based on a intrest form we did, we had to create  a dating simulator story where At first there is a player who is losing a game and is deciding to take a walk and rest their mind or stay and keep losing and is  based on what the choice  of the the user and the actions they take through two choices and the goal was to just get love and end the game, happyily  ever after.  </p>
+            <p> Finally, Mr mueller assigned this project to communicate with our partners and to practice what we learned in class.</p>
+              <ul>  Some challenges I faced was when I had to make images because I didn't remember how to link an image but then I looked at the readme.md and it explained the code to put an image and I was able to succeed</ul>
+              <p> MY final steps if I had more time would be doing the extra credit to get more knowledge about creating a html instead of using markdown</p>
+              <a href="http://github.com/urielh3191/sep10-dating-simulator">Preview</a><br>
+              <a href="https://github.com/urielh3191/sep10-dating-simulator">Github code </a><br>
+
+            <!--EXAMPLE OF PREVIEW LINK-->
+            <!--<a href="http://github.com/urielh3191/sep10-dating-simulator"
+                ">Preview</a><br>-->
+            <!--EXAMPLE OF GITHUB LINK-->
+            <!--<a href="https://github.com/urielh3191/sep10-dating-simulator">Github code </a><br>-->
+
+            <img src="../img/SEP10 Dating Simulator Storyline.png" class="img-fluid project-img">
+
+
+            <div class="row">
+
+                <!--
+                <div class="col-sm-6">
+                    Use this to...
+                </div>
+                <div class="col-sm-6">
+                    ...make two columns
+                </div>
+                -->
+
+            </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/projects/freedomproject.html b/projects/freedomproject.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title class="owner-name">#</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>
+
+</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="../index.html#projects">Projects</a>
+                </li>
+            </ul>
+        </div>
+    </nav>
+
+    <!-- First Container -->
+    <div class="container-fluid bg-1">
+        <div class="container">
+
+            <h1 class="margin text-center"> Freedom project</h1>
+            <p>This project was a all year project where we had to create a website based on the topic we chose in the beggining of the year. Over this period of time, this project was based on everything we have learned from september to may( such as CSS, html and bootstrap). After we finished researching our topic and had good information about what our topic was and how it relates to music, we had to pick a tool to study to add onto our website</p>
+            <ul>  The tool I chose was Aframe which  is an animation  to make your future innovations come to be displayed </ul>
+            <ul> The topic I chose was music</ul>
+            <h2> Content </h2>
+            <p>As I chose my topic which was music and the tool I decided to pick was aframe. Throughout the two weeks  I had to make an animation using aframe and think how to show readers about the effects of technology and it's relation with music. I made a navbar, carosel, collapse and some boxes with colors. At the  bottom of the website I made an animation that displays music notes which is about my future ideas and how it pertains to my future idea. </p>
+            <h3> Reflection</h3>
+            <p>The challenges I faced was making my aframe show on my website</p>
+            <p> The takeway of this was that  checking the website, youtube and asking for help is important because when I  asked my friend, he told me it was on the website so I looked and was able to find it </p>
+            <p> Another Problem I faced was centering element's but when I looked at the code I realized I  added an extra div so I had to delete a div after section and it worked </p>
+
+
+            <a href="https://jairop2409.github.io/sep10-freedom-project/#Music">Link about the project</a><br>
+            <a href="https://github.com/Jairop2409/sep10-freedom-project/tree/main/blog"> Blog</a><br>
+
+            <!--EXAMPLE OF PREVIEW LINK-->
+            <!--<a href="http://yourUserName.github.io/yourRepoName">Preview</a><br>-->
+            <!--EXAMPLE OF GITHUB LINK-->
+            <!--<a href="http://github.com/yourUserName/yourRepoName">Github</a><br>-->
+
+            <img src="../img/Aframe.png" class="img-fluid project-img">
+
+
+            <div class="row">
+
+                <!--
+                <div class="col-sm-6">
+                    Use this to...
+                </div>
+                <div class="col-sm-6">
+                    ...make two columns
+                </div>
+                -->
+
+            </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/projects/movie-webpage.html b/projects/movie-webpage.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title class="owner-name">#</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>
+
+</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="../index.html#projects">Projects</a>
+                </li>
+            </ul>
+        </div>
+    </nav>
+
+    <!-- First Container -->
+    <div class="container-fluid bg-1">
+        <div class="container">
+
+            <h1 class="margin text-center"> Movie Webpage Project</h1>
+            <p>  In sep, my teacher Mr Mueller had assigned an html project that consisted of what we learned( Html and Css). We worked in partners to finish this movie project. The title is called "Candy theif" both me and my partner decided to choose this name due to the plot and backstory.</p>
+            <p> Both of us made a movie about a thief who steals from kids on halloween. The amount of plots he discovers, we both put in half half to ensure the highest grade(100). .</p>
+            <p> Some challenges that occured throughout this process was trying to make our ideas flow and come into place by embedding it  with code. To add, we also had issues with gradient colors and/or colors that made sense in terms of the movie and the effects. </p>
+            <p> Lastly, some takeaways was to always remember where you put certain codes because they can affect the positiion and placement they are in. </p>
+            <a href="https://candy-thief-movie.jimmyl6413.repl.co">  Preview of the project</a><br>
+             <a href="https://replit.com/@jimmyl6413/candy-thief-movie">  The code</a><br>
+
+            <!--EXAMPLE OF PREVIEW LINK-->
+            <!--<a href="http://yourUserName.github.io/yourRepoName">Preview</a><br>-->
+            <!--EXAMPLE OF GITHUB LINK-->
+            <!--<a href="http://github.com/yourUserName/yourRepoName">Github</a><br>-->
+
+            <img src="../img/Candy.png" class="img-fluid project-img">
+
+
+            <div class="row">
+
+                <!--
+                <div class="col-sm-6">
+                    Use this to...
+                </div>
+                <div class="col-sm-6">
+                    ...make two columns
+                </div>
+                -->
+
+            </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/script.js b/script.js
@@ -1,5 +1,5 @@
-let ownerName = "Your Name"; // update the part BETWEEN the "quotes"
-let userName = "YourUsername"; // same here
+let ownerName = "jairo Pixabaj"; // update the part BETWEEN the "quotes"
+let userName = "jairop2409"; // jairop2409
 
 document.querySelectorAll(".owner-name").forEach((e) => {
     e.innerHTML = ownerName;