website/programming.html at main · GoldenD60/website · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/jpeg" href="media/profile.jpg" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>GoldenD60 - Programming</title>
  </head>
  <body style="background:#111;">
    <div id="loading-screen" style="position:fixed;backdrop-filter:blur(100px);opacity:0;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;justify-content:center">
      <div id="load-icon" style="margin:0;border-radius:100%;display:flex;padding:4px">
        <img src="/media/profile.jpg" alt="Profile Picture" draggable="false" width=100 style="border-radius:100%" />
      </div>
    </div>
    <div id="root" class="loading" style="overflow:hidden;opacity:0">
      <div class="main-content">
        <header>
          <a class="profile-button" href="/"><img src="/media/profile.jpg" alt="Profile Picture" draggable="false" width=50 /></a>
          <input type="checkbox" name="menu-button" id="menu-button__toggle">
          <div class="menu">
            <label for="menu-button__toggle" class="menu-button">
              <div class="hamburger"></div>
            </label>
            <div class="menu-nav">
              <a href="/">Home</a>
              <hr>
              <a href="/youtube">Content Creation</a>
              <hr>
              <a href="/music">Music Production</a>
              <hr>
              <a href="/minecraft">Minecraft Server</a>
              <hr>
              <a href="/programming">Programming</a>
            </div>
          </div>
        </header>
        <section class="header-section">
          <img src="/screenshots/programming.webp" alt="Programming Banner" draggable="false" class="banner" />
          <div class="gradient-overlay noisy"></div>
          <div class="content">
            <h1 id="header1" class="montserrat black">CREATING</h1>
            <h1 id="header2" class="montserrat black">INNOVATION.</h1>
            <p id="description" class="bio">
              Welcome to my programming side of what I do. Here, I share my passion for coding, software projects, and creative problem-solving.
              From building my own Minecraft tools and plugins to experimenting with software, websites and games,
              this is where you'll get a behind-the-scenes look at how I turn ideas into working programs.
              I love breaking down complex problems, pushing hardware to its limits, and exploring how code can bring ideas to life -
              whether that's a tool or a massive project.
              If you're curious about programming, game development, or tech creativity, you're in the right place.
            </p>
          </div>
        </section>
        <section class="content-section noisy">
          <div class="noisy"></div>
          <div class="content">
            <h2 class="montserrat black observe observe-slide-up">LATEST PROJECTS</h2>
            <br /><br />
            <div class="project-block">
                <div class="text observe observe-slide-up">
                  <h2 class="bold">Portfolio Website</h2>
                  <p>
                    Woah, is this the website you're looking at right now? It sure is! This is the biggest project I think I've ever worked on.
                    <br><br>Handcrafted, written solely in pure HTML, a little JavaScript and CSS to pull it all together.
                    I wanted to really test my ability in web development to see where my skills reach both ends of the spectrum - design and code.
                    <br><br>Behind the scenes, I've spent days planning design and different sections.
                    Fail to plan, then you're planning to fail. I've never really done "proper" planning before, but because I'm passionate in making this website, I decided to take it seriously.
                    Design is super easy when you're doing it from an artistic viewpoint.
                    If you're designing on the spot through code, it becomes much easier to make it more code friendly.
                    But, that usually means the design is much uglier.
                    So when you have a clear goal, the task is easier to approach because you know exactly where you're going and what the end result is instead of taking a shot in the dark.
                  </p>
                </div>
                <div class="figure observe observe-slide-left">
                  <img class="image" src="/screenshots/planning.webp" width=350>
                  <div class="caption">Planning using Figma</div>
                </div>
            </div>
            <div class="project-block">
                <div class="figure observe observe-slide-right">
                  <img class="image" src="/screenshots/code.webp" width=500 height=336>
                  <div class="caption">Programming in HTML, JavaScript and CSS</div>
                </div>
                <div class="text observe observe-slide-up">
                  <p>
                    Was this easy? Absolutely... not. This wasn't just a "task", this was a massive project.
                    The hardest part is just finishing it. Surprising isn't it? But that's what happens when you get too carried away with a good idea.
                    You start running with it, but then get too tired to continue.

                    <br><br>But I didn't give up on it. Every time I wanted to stop, I'd come back to it with a fresh idea or a cleaner approach.
                    The code went through dozens of rewrites - every animation, every transition, every decision refined until it felt right.
                    I didn't want this to just be another portfolio site that says, "Look what I can do." I wanted it to prove it.
                    Now, it's more than a website to me. It's a reflection of my style - my patience, creativity, and stubborn drive to make something that feels alive.
                    Every bug, every fix, every late night spent staring at glowing brackets, curly braces and flexboxes - it all built this.
                    So yeah, this is my portfolio. But it's also my story - written in code.
                  </p>
                </div>
            </div>
          </div>
        </section>
        <hr class="observe observe-fade">
        <footer>
          Copyright © 2026 David Skillman. All rights reserved.
          <div class="footer-links">
            <span>Contact (for business): <a href="mailto:business@goldend60.net">business@goldend60.net</a> | </span>
            <a href="https://www.youtube.com/@GoldenD60?sub_confirmation=1">
              <i class="fa-brands fa-youtube fa-lg"></i>
            </a>
            <a href="https://www.instagram.com/goldendsixty/">
              <i class="fa-brands fa-instagram fa-lg"></i>
            </a>
            <a href="https://www.facebook.com/goldendsixty/">
              <i class="fa-brands fa-facebook fa-lg"></i>
            </a>
            <a href="https://www.twitch.tv/goldend60">
              <i class="fa-brands fa-twitch fa-lg"></i>
            </a>
            <span> | </span>
            <a href="https://open.spotify.com/artist/2BHucjro5Yaq4WkrlgbPIM">
              <i class="fa-brands fa-spotify fa-lg"></i>
            </a>
            <a href="https://music.apple.com/us/artist/goldend60/1745162803">
              <i class="fa-brands fa-apple fa-lg"></i>
            </a>
            <a href="https://music.youtube.com/channel/UCGg0wca2ma0dS0--Eed5HlQ">
              <i class="fa-brands fa-square-youtube fa-lg"></i>
            </a>
            <a href="https://music.amazon.co.uk/artists/B0D3JHNQRX/goldend60">
              <i class="fa-brands fa-amazon fa-lg"></i>
            </a>
          </div>
        </footer>
      </div>
    </div>
    <script type="module" src="/src/js/main.js"></script>
    <script data-cfasync="false" type="module" src="/src/js/programming.js"></script>
  </body>
</html>