Virtual-Resume-LandingPage/src/glenntyson/index.html at 734c1206cdc0fe6afbca647101bdeb241196fee9 · code-differently/Virtual-Resume-LandingPage · 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glenn Tyson | Student Portfolio</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <canvas id="cursorEffectCanvas" class="cursor-effect-canvas"></canvas>

  <header class="site-header">
    <div class="page-width header-layout">
      <div class="identity-block">
        <h1>Glenn Tyson</h1>
        <p class="site-subtitle">Student Portfolio & Resume</p>
      </div>

      <div class="header-actions">
        <nav class="site-nav" id="siteNav">
          <a href="#about">About</a>
          <a href="#education">Education</a>
          <a href="#certifications">Certifications</a>
          <a href="projects.html">Projects</a>
          <a href="#skills">Skills</a>
          <a href="#contact">Contact</a>
          <span class="nav-indicator" id="navIndicator"></span>
        </nav>

        <div class="ui-controls">
          <button id="themeToggle" class="theme-toggle" type="button" aria-label="Toggle dark mode">🌙</button>

          <div class="music-controls">
            <button class="music-toggle" id="musicToggle" type="button" aria-label="Toggle background music">
              Music Off
            </button>

            <label class="volume-control" for="volumeSlider">
              <span>Volume</span>
              <input
                type="range"
                id="volumeSlider"
                min="0"
                max="100"
                value="35"
                aria-label="Music volume"
              >
            </label>
          </div>
        </div>
      </div>
    </div>
  </header>

  <div id="youtubePlayerWrap" class="youtube-player-wrap" aria-hidden="true">
    <div id="youtubePlayer"></div>
  </div>

  <main class="page-width">
    <section class="intro-layout">
      <div class="profile-photo-panel">
        <img src="images/headshot.png" alt="Professional headshot of Glenn Tyson">
      </div>

      <div class="profile-summary-panel">
        <p class="section-label">Hello</p>
        <h2>I'm Glenn Tyson</h2>
        <p class="intro-lead">
          I am an entry-level software developer who is focused on learning, building strong projects,
          and growing into a dependable member of a professional development team.
        </p>
        <p>
          I enjoy working with Java, web development, backend systems, and problem solving.
          I like taking what I learn and applying it through real hands-on projects that help me grow.
        </p>

        <div class="button-row">
          <a class="button-main" href="#contact">Contact Me</a>
          <a class="button-alt" href="projects.html">See My Projects</a>
        </div>
      </div>
    </section>

    <section id="about" class="resume-section">
      <p class="section-label">About Me</p>
      <h2>Who I Am</h2>
      <p>
        I am an aspiring software developer building a foundation in programming,
        frontend development, backend development, and software problem solving.
      </p>
      <p>
        My goal is to continue improving through hands-on experience, strengthen my technical skills,
        and contribute to projects that solve real problems and support real users.
      </p>
    </section>

    <section id="education" class="resume-section">
      <p class="section-label">Education</p>
      <h2>My Learning Journey</h2>

      <div class="education-entry">
        <h3>Software Development Studies</h3>
        <p class="education-meta">Current Student / Developer in Training</p>
        <p>
          I am developing a strong foundation in software development through project-based learning
          and consistent hands-on coding practice.
        </p>
        <p>
          My work includes Java, HTML, CSS, JavaScript, SQL, backend logic, debugging,
          and building applications that strengthen both my technical skills and confidence as a developer.
        </p>
        <p>
          I am continuing to improve in coding, problem solving, and software design while preparing
          for professional opportunities in technology.
        </p>
      </div>
    </section>

    <section id="certifications" class="resume-section">
      <p class="section-label">Certifications</p>
      <h2>Certifications</h2>

      <div class="skills-list">
        <div class="skill-item">HTML — Pursuing</div>
        <div class="skill-item">Google AI — Pursuing</div>
        <div class="skill-item">CompTIA — Pursuing</div>
        <div class="skill-item">Scrum — Earned</div>
        <div class="skill-item">Java — Earned</div>
      </div>
    </section>

    <section id="skills" class="resume-section">
      <p class="section-label">Skills</p>
      <h2>What I'm Working With</h2>

      <div class="skills-list">
        <div class="skill-item">Java</div>
        <div class="skill-item">HTML</div>
        <div class="skill-item">CSS</div>
        <div class="skill-item">JavaScript</div>
        <div class="skill-item">SQL</div>
        <div class="skill-item">GitHub</div>
        <div class="skill-item">Spring Boot</div>
        <div class="skill-item">Teamwork</div>
        <div class="skill-item">Communication</div>
      </div>
    </section>

    <section class="resume-section">
      <p class="section-label">Goals</p>
      <h2>What I’m Building Toward</h2>

      <div class="goal-list">
        <div class="info-card">
          <h3>Keep Learning</h3>
          <p>
            Continue improving my programming, debugging, and development skills through practice,
            coursework, and project work.
          </p>
        </div>

        <div class="info-card">
          <h3>Build Strong Projects</h3>
          <p>
            Create projects that show my growth, technical ability, and understanding of
            real software development concepts.
          </p>
        </div>

        <div class="info-card">
          <h3>Start My Career</h3>
          <p>
            Grow into a professional developer role where I can contribute to a team,
            continue learning, and keep improving over time.
          </p>
        </div>
      </div>
    </section>

    <section id="contact" class="resume-section contact-section">
      <p class="section-label">Contact</p>
      <h2>Get In Touch</h2>
      <p>
        I would be glad to connect about opportunities, projects, or networking.
      </p>

      <div class="contact-grid">
        <div class="contact-card">
          <h3>Email</h3>
          <p><a href="mailto:gatyson261@gmail.com">gatyson261@gmail.com</a></p>
        </div>

        <div class="contact-card">
          <h3>GitHub</h3>
          <p><a href="https://github.com/GTyson261" target="_blank">github.com/GTyson261</a></p>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <p>© Glenn Tyson</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>