CyberNotesDev.github.io/index.html at master · CyberNotesDev/CyberNotesDev.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!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" />
    <meta
      name="description"
      content="Welcome to my page, my name is Elijah Littell-Sivley and this is my portfolio. I like to program, edit photos/videos on Photoshop and Premiere pro. I love to learn new things!" />
    <link rel="stylesheet" href="./css/styles.css" />
    <title>Elijah Littell-Sivleys' Portfolio</title>
  </head>
  <body>
    <!-- Header -->
    <header class="header">
      <h1 class="header-title">Elijah Littell-Sivley <span> - Junior Developer</span></h1>
      <p class="header-description">I'm a Frontend Web Developer</p>
      <button onclick="slide()">Learn more</button>
    </header>
    <!-- Main Content -->
    <main class="main">
      <!-- About Me -->
      <section id="about" class="about">
        <h2>About Me</h2>
        <section class="about-content">
          <p>I'm <span class="age"></span> years old and I reside in Michigan. I'm attending KVCC, summer of 2024 to major in Computer Science and a minor in Chemistry.</p>
          <p>I'm a Junior Web Developer that knows HTML5/CSS/JS, ReactJS, ReactNative, Qt, C++, and Python. Some others things that I have experience with is Adobe Photoshop, Adobe XD, Adobe Illustrator, and Adobe Premier Pro.</p>
          <p>
            In my free time I love to learn advance chemistry, and mathamatics. My
            favorite personal project is programming an Arduino to use the LCD library!
          </p>
          <section class="links">
            <nav class="links-content">
              <a href="https://www.linkedin.com/in/elijah-littell-sivley-3194b21a7/"><img src="./images/Icon awesome-linkedin.png" /></a>
              <a href="https://github.com/CyberNotesDev"><img src="./images/Icon awesome-github-square.png" /></a>
              <a href="https://instagram.com/CyberNotesDev"><img src="./images/Icon awesome-instagram.png" /></a>
            </nav>
          </section>
        </section>
      </section>

      <!-- Certs -->
      <section id="certifications" class="certifications">
        <section class="certificates">
          <h2>My Certifications</h2>
          <!-- CERTIFIED FRONTEND DEV -->
          <details class="frontend-certification">
            <summary>Certified Frontend Web Developer</summary>
            <!-- CERTIFIED HTML DEV -->
            <details>
              <summary>Certified HTML Developer</summary>
              <p>I have fundemental knowledge of web development using HTML5!</p>
              <p>
                <a href="https://verify.w3schools.com/1N3158UOT2">W3Schools Certificate</a>
              </p>
            </details>
            <!-- CERTIFIED CSS DEV -->
            <details>
              <summary>Certified CSS Developer</summary>
              <p>I have fundemental knowledge of web development using HTML5!</p>
              <p>
                <a href="https://verify.w3schools.com/1N3158UOT2">W3Schools Certificate</a>
              </p>
            </details>
            <!-- CERTIFIED JS DEV -->
            <details>
              <summary>Certified Javascript Developer</summary>
              <p>I have fundemental knowledge of web development using HTML5!</p>
              <p>
                <a href="https://verify.w3schools.com/1N3158UOT2">W3Schools Certificate</a>
              </p>
            </details>
          </details>
          <!-- CERTIFIED C++ DEV -->
          <details>
            <summary>Certified C++ Developer</summary>
            <p>I have fundemental knowledge of programming using C++!</p>
            <p>
              <a href="https://verify.w3schools.com/1N4ZM6OAC7">W3Schools Certificate</a>
            </p>
          </details>
          <!-- CERTIFIED IN A+ -->
          <details>
            <summary>CompTIA A+</summary>
            <p>Currently studying</p>
          </details>
        </section>
      </section>

      <!-- Projects -->
      <section id="projects" class="projects">
        <h2 class="project-title">My Projects</h2>
        <section class="projects-gallary">
          <article>
            <p class="hide">My first ever client is a website that I made for a friend of a friend. I used ReactJS for the application and I had to connect Frontend to Backend for Google Authorization that was implimented. <a href="#">NeekyByNails</a></p>
            <button onclick="readMoreButton(this)">Read More</button>
          </article>
        </section>
      </section>

      <!-- Footer -->
      <footer>
        <section>
          <p>
            <span class="copyright">©</span> <span id="year"></span>
            <span>CyberNotesDev</span>
          </p>
        </section>
      </footer>
    </main>
  </body>
  <script>

    function slide() {
      let top = 750;
      if (navigator.userAgentData.mobile) {
        top = 600;
      }
      let certificationSectionScrollHeight = document.getElementById("certifications").scrollHeight + top;
      setTimeout(() => {
        scrollTo({
          top: certificationSectionScrollHeight,
          behavior: "smooth",
        });
      }, 500);
    }

    function readMoreButton(element) {
      const paraText = element.previousElementSibling;
      paraText.className = paraText.className === "hide" ? "show" : "hide";
      element.innerHTML = element.innerHTML === "Read More" ? "Show Less" : "Read More";
    }

    console.log(
      "Hello! How are you doing today? :)\nSo... Why are you looking at my beautiful code?!\nIt's my precious sancturary! >:(\nNah I'm kidding, take a look! And maybe txt me what you think about it or how I can improve :D"
    );
  </script>
  <script src="js/birthday.js"></script>
  <script src="js/year.js"></script>
</html>