jessle101.github.io/index.html at main · Jessle101/jessle101.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!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="styles.css" />
    <title>Portfolio | Jessie Osti</title>
  </head>
  <body>
    <main>
      <div class="sectionWrapper">
        <!-- Landing Section  -->
        <section class="sectionWrapper__landing">
          <h1 class="text--title">
            Jessie Osti
            <p class="text--subtitle">Young & ambitious Software Developer</p>
          </h1>
          <div class="sectionWrapper__landing__card">
            <p>
              "Natural abilities to navigate issues
              <p>through probelm solving!"</p>
            </p>
            <img
              id="img"
              src="./Images/coding.gif"
              alt="computer symbol with code"
            />
          </div>
        </section>

        <!-- About Me Section -->
        <section class="sectionWrapper__about-me">
          <h1 class="text--title">
            About Me
            <p class="text--subtitle">Who am I?</p>
          </h1>
          <div class="sectionWrapper__about-me__card">
            <p>
              I'm a software developer located in Adelaide, South Australia.
              <p>I took an interest in programming back in 2015 when I was eleven.
                <p>I specialise in web development! :)</p>
              </p>
            </p>
            <img
              id="img"
              src="./Images/webdev.gif"
              alt="computer with code"
            />
          </div>
        </section>

        <!-- Tech stacks/skills Section -->
        <section class="sectionWrapper__tech-skills">
          <h1 class="text--title">
            Skills & Experience
            <p class="text--subtitle">What am I experienced in?</p>
          </h1>
          <div class="sectionWrapper__tech-skills__card">
            <p>
              I have experience with multiple languages, including:
              <ul class="sectionWrapper__tech-skills__card--list">
                <li>HTML</li>
                <li>Java</li>
                <li>JavaScript</li>
                <li>JSON formatting</li>
                <li>SCSS</li>
                <li>...and more!</li>
              </ul>
            </p>
            <img
              id="img"
              src="./Images/javascript.png"
              alt="computer with code"
            />
          </div>
        </section>

        <!-- Projects Section -->
        <section class="sectionWrapper__projects">
          <h1 class="text--title">
            Portfolio
            <p class="text--subtitle">What projects have I developed?</p>
          </h1>
          <div class="projects__container">
            <section class="projects__container__timestop">
              <h2>Time Stop Mod</h2>
              <p>An addon that can control time in minecraft!</p>
              <article
              class="projects__container__timestop projects__container__timestop--btn">
                <a href="https://github.com/Jessle101/time-stop-addon" target=”_blank”><button class="btnStyle">Github</button></a>
                <a href="https://youtu.be/ONbPZmmRSj4" target=”_blank”><button class="btnStyle">Video</button></a></article></section>

                <section class="projects__container__cmdblocks">
                  <h2>Command Block Tutorial World</h2>
                  <p>Over 30+ command block creations!</p>
                  <article
                  class="projects__container__cmdblocks projects__container__cmdblocks--btn">
                    <a href="" target=”_blank”><button class="btnStyle">Github</button></a>
                    <a href="https://www.pixelsperfect.net/post/jessie101-s-tutorial-world-demo" target=”_blank”><button class="btnStyle">Site</button></a></article></section>

                <section class="projects__container__morse">
                   <h2 id="morseTitle">Morse Code Translator</h2>
                   <p id="morseText">Fake Operating system of the iPhone 4!</p>
                   <article
                      class="projects__container__morse projects__container__morse--btn">
                      <a href="https://github.com/Jessle101/FakeOS" target=”_blank”><button class="btnStyle">Github</button></a>
                      <a href="" target=”_blank”><button class="btnStyle">View Demo</button></a></article></section>

                <section class="projects__container__fakeos">
                  <h2 id="fakeosTitle">FakeOS</h2>
                  <p id="fakeosText">Fake Operating system of the iPhone 4!</p>
                  <article
                  class="projects__container__fakeos projects__container__fakeos--btn">
                    <a href="https://github.com/Jessle101/FakeOS" target=”_blank”><button class="btnStyle">Github</button></a>
                    <a href="" target=”_blank”><button class="btnStyle">View Demo</button></a></article></section>
          </div>
        </section>
      </div>
    </main>
  </body>
  <footer id="footer">
    <a href="./contact.html"><img class="contactMe" src="./Images/contactme.png" alt="contact me button"/></a><p>© Jessie Osti, 2022 - all rights reserved</p></footer>
</html>

<button></button>