Portfolio/index.html at main · SilverCodeC/Portfolio · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SilverSniper | Main Page V6</title>
    <meta name="description" content="SilverSniper: Virtualization Expert, DJ, Gamer, and Web Designer. Explore projects, main pages, disclaimers, and services including PC building, virtualization, DJing, and web design.">
    <meta name="keywords" content="SilverSniper, Portfolio, Virtualization, Proxmox, ESXi, DJ, Gamer, Web Design, HTML, CSS, PC Building, FL Studio, Music, Consulting, Projects, Main Pages, Disclaimers, Services">
    <meta name="author" content="SilverSniper">
    <link rel="canonical" href="https://silversnipers.com/">
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="SilverSniper | Main Page V6">
    <meta property="og:description" content="SilverSniper: Virtualization Expert, DJ, Gamer, and Web Designer. Explore projects, main pages, disclaimers, and services.">
    <meta property="og:image" content="https://silversnipers.com/assets/MasterUntitled.jpg">
    <meta property="og:image:alt" content="SilverSniper Portfolio Banner">
    <meta property="og:url" content="https://silversnipers.com/">
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="SilverSniper | Main Page V6">
    <meta name="twitter:description" content="SilverSniper: Virtualization Expert, DJ, Gamer, and Web Designer. Explore projects, main pages, disclaimers, and services.">
    <meta name="twitter:image" content="https://silversnipers.com/assets/MasterUntitled.jpg">
    <meta name="twitter:image:alt" content="SilverSniper Portfolio Banner">
    <link rel="stylesheet" href="style.css">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
    <link rel="manifest" href="assets/site.webmanifest">
    <link rel="shortcut icon" href="assets/favicon.ico">
    <meta name="msapplication-TileColor" content="#00c3ff">
    <meta name="theme-color" content="#181c24">
</head>
<body>
    <header>
        <div class="container">
            <h1>SilverSniper</h1>
            <p class="subtitle">Virtualization Expert, DJ & Gamer</p>
            <nav>
                <ul>
                    <li><a href="#about">About</a></li>
                    <li><a href="#skills">Skills</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                    <li><a href="#projects">Projects</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <section id="about" class="section">
        <div class="container">
            <h2>About Me</h2>
            <p id="about-typed"></p>
        </div>
    </section>
    <section id="skills" class="section styled-section">
        <div class="container">
            <h2>Skills & Hobbies</h2>
            <ul class="skills-list-professional">
                <li>Driving</li>
                <li>HTML</li>
                <li>CSS</li>
                <li>Proxmox</li>
                <li>ESXi</li>
                <li>Listening to Music</li>
                <li>Gaming</li>
                <li>Blender</li>
                <li>Networking</li>
                <li>Assembling PCs</li>
                <li>Curating Music</li>
                <li>DJing</li>
                <li>Electrician Skills</li>
                <li>FL Studio</li>
                <li>Web Design</li>
                <li>Airsoft</li>
            </ul>
        </div>
    </section>
    <section id="services" class="section">
        <div class="container">
            <h2>Services</h2>
            <ul class="services-list">
                <li class="fade-item" style="--animation-order:1;">Custom PC Building & Hardware Consulting</li>
                <li class="fade-item" style="--animation-order:2;">Virtualization Setup (Proxmox, ESXi)</li>
                <li class="fade-item" style="--animation-order:3;">DJing & Music Curation (FL Studio, Mixing)</li>
                <li class="fade-item" style="--animation-order:4;">Web Design & HTML/CSS Development</li>
            </ul>
        </div>
    </section>
    <section id="portfolio" class="section">
        <div class="container">
            <h2>Portfolio</h2>
            <div class="portfolio-items">
                <div class="portfolio-item fade-item" style="--animation-order:1;">
                    <h3>PC Building & Consulting</h3>
                    <p>Provided advice and consulting on PC building, hardware selection, and troubleshooting for friends and family. I build and upgrade PCs in my free time if its needed.</p>
                </div>
                <div class="portfolio-item fade-item" style="--animation-order:2;">
                    <h3>Virtualization Lab (Proxmox & ESXi)</h3>
                    <p>Experimented with home virtualization labs using Proxmox and ESXi, learning about networking, automation, and server management along the way.</p>
                </div>
                <div class="portfolio-item fade-item" style="--animation-order:3;">
                    <h3>DJing & Music Curation</h3>
                    <p>Enjoy mixing music, curating playlists, and exploring FL Studio. I like to blend genres and create fun audio experiences for friends and small gatherings.</p>
                </div>
                <div class="portfolio-item fade-item" style="--animation-order:4;">
                    <h3>Web Design & HTML/CSS Projects</h3>
                    <p>Built and improved personal and small websites using HTML and CSS. Focused on learning modern web design and making sites more user-friendly.</p>
                </div>
            </div>
        </div>
    </section>
    <section id="projects" class="section styled-section">
        <div class="container">
            <h2>Projects</h2>
            <div class="master">
                <div class="content2 fade-item" style="--animation-order:1;" onclick="window.open('https://randompage.netlify.app/','_blank')"><h1 style="--animation-order: 1;">Page 1</h1></div>
                <div class="content3 fade-item" style="--animation-order:2;" onclick="window.open('https://random-page-1-rework.netlify.app/','_blank')"><h1 style="--animation-order: 2;">Page 1 ver. 2</h1></div>
                <div class="content4 fade-item" style="--animation-order:3;" onclick="window.open('https://random-page2.netlify.app/','_blank')"><h1 style="--animation-order: 3;">Page 2</h1></div>
                <div class="content5 fade-item" style="--animation-order:4;" onclick="window.open('https://random-page-2-rework.netlify.app/','_blank')"><h1 style="--animation-order: 4;">Page 2 ver. 2</h1></div>
                <div class="content7 fade-item" style="--animation-order:5;" onclick="window.open('https://randompage3.netlify.app/','_blank')"><h1 style="--animation-order: 5;">Page 3</h1></div>
                <div class="content8 fade-item" style="--animation-order:6;" onclick="window.open('https://sebys-page-3-rework.netlify.app/','_blank')"><h1 style="--animation-order: 6;">Page 3 ver. 2</h1></div>
                <div class="content9 fade-item" style="--animation-order:7;" onclick="window.open('https://sebyrandompage4.netlify.app/','_blank')"><h1 style="--animation-order: 7;">Page 4</h1></div>
                <div class="content10 fade-item" style="--animation-order:8;" onclick="window.open('https://sebys-page-4-rework.netlify.app/','_blank')"><h1 style="--animation-order: 8;">Page 4 ver. 2</h1></div>
                <div class="content11 fade-item" style="--animation-order:9;" onclick="window.open('https://sebys-page5.netlify.app/','_blank')"><h1 style="--animation-order: 9;">Page 5</h1></div>
                <div class="content12 fade-item" style="--animation-order:10;" onclick="window.open('https://seby-page-5-rework.netlify.app/','_blank')"><h1 style="--animation-order: 10;">Page 5 ver. 2</h1></div>
                <div class="content13 fade-item" style="--animation-order:11;" onclick="window.open('https://random-page-6-just-a-test.netlify.app/','_blank')"><h1 style="--animation-order: 11;">Page 6</h1></div>
                <div class="content14 fade-item" style="--animation-order:12;" onclick="window.open('https://sebys-page-6-rework.netlify.app/','_blank')"><h1 style="--animation-order: 12;">Page 6 ver. 2</h1></div>
                <div class="content15 fade-item" style="--animation-order:13;" onclick="window.open('https://random-page-7.netlify.app/','_blank')"><h1 style="--animation-order: 13;">Page 7</h1></div>
                <div class="content16 fade-item" style="--animation-order:14;" onclick="window.open('https://sebys-page-7-rework.netlify.app/','_blank')"><h1 style="--animation-order: 14;">Page 7 ver. 2</h1></div>
                <div class="content17 fade-item" style="--animation-order:15;" onclick="window.open('https://random-page-8.netlify.app/','_blank')"><h1 style="--animation-order: 15;">Page 8</h1></div>
                <div class="content18 fade-item" style="--animation-order:16;" onclick="window.open('https://sebys-page-8-reworked.netlify.app/','_blank')"><h1 style="--animation-order: 16;">Page 8 ver. 2</h1></div>
                <div class="content19 fade-item" style="--animation-order:17;"><h1 style="--animation-order: 17;">Page 9 Rest in peace | php project lost</h1></div>
                <div class="content20 fade-item" style="--animation-order:18;" onclick="window.open('https://sebys-page-10-assets-page.netlify.app/','_blank')"><h1 style="--animation-order: 18;">Page 10</h1></div>
                <div class="content21 fade-item" style="--animation-order:19;" onclick="window.open('https://seby-page-11.netlify.app/','_blank')"><h1 style="--animation-order: 19;">Page 11</h1></div>
                <div class="content22 fade-item" style="--animation-order:20;" onclick="window.open('https://seby-page-12.netlify.app/','_blank')"><h1 style="--animation-order: 20;">Page 12 Old Main Page</h1></div>
                <div class="content23 fade-item" style="--animation-order:21;" onclick="window.open('https://sebys-page-13.netlify.app/','_blank')"><h1 style="--animation-order: 21;">Page 13</h1></div>
                <div class="content24 fade-item" style="--animation-order:22;" onclick="window.open('https://sebys-page-14.netlify.app/','_blank')"><h1 style="--animation-order: 22;">Page 14</h1></div>
                <div class="content25 fade-item" style="--animation-order:23;" onclick="window.open('https://seby-page-15.netlify.app/','_blank')"><h1 style="--animation-order: 23;">Page 15</h1></div>
                <div class="content26 fade-item" style="--animation-order:24;" onclick="window.open('https://sebys-page-16.netlify.app/','_blank')"><h1 style="--animation-order: 24;">Page 16 | Forgotten</h1></div>
            </div>
        </div>
    </section>
    <section id="mainpages" class="section styled-section">
        <div class="container">
            <h2>Main Pages</h2>
            <div class="master">
                <div class="not here fade-item" style="--animation-order:1;" onclick="window.open('https://sebys-test-mainpage.netlify.app/','_blank')"><h1 style="--animation-order: 26;">Main Page 1</h1></div>
                <div class="does it ? fade-item" style="--animation-order:2;" onclick="window.open('https://sebys-mainpage.netlify.app/','_blank')"><h1 style="--animation-order: 27;">Main Page 2</h1></div>
                <div class="this_classes_dont matter fade-item" style="--animation-order:3;" onclick="window.open('https://sebys-main-page-reworked.netlify.app/','_blank')"><h1 style="--animation-order: 28;">Main Page 3</h1></div>
                <div class="brrrr fade-item" style="--animation-order:4;" onclick="window.open('https://v3-main-page.netlify.app/','_blank')"><h1 style="--animation-order: 29;">Main Page 4</h1></div>
                <div class="main5 fade-item" style="--animation-order:5;" onclick="window.open('https://silversniper-era-mainpage.netlify.app/','_blank')"><h1 style="--animation-order: 33;">Main Page 5</h1></div>
            </div>
        </div>
    </section>
    <section id="disclaimers" class="section styled-section">
        <div class="container">
            <h2>Disclaimers</h2>
            <div class="master">
                <div class="blalala fade-item" style="--animation-order:1;" onclick="window.open('https://i-disclaimer.netlify.app/','_blank')"><h1 style="--animation-order: 30;">Disclaimer Page 1</h1></div>
                <div class="blahblah fade-item" style="--animation-order:2;" onclick="window.open('https://i-disclaimer-reworked.netlify.app/','_blank')"><h1 style="--animation-order: 31;">Disclaimer Page 2</h1></div>
                <div class="blah fade-item" style="--animation-order:3;" onclick="window.open('https://v3-sebys-disclaimer.netlify.app/','_blank')"><h1 style="--animation-order: 32;">Disclaimer Page 3</h1></div>

            </div>
        </div>
    </section>
    <footer>
        <div class="container">
            <p>&copy; 2025 SilverSniper. All rights reserved.</p>
            <button id="backToTop" title="Back to Top">↑</button>
        </div>
    </footer>
    <script src="script.js"></script>
    <script>
// Smooth scroll and center section title on navigation click
function scrollToSectionCenterTitle(sectionId) {
    const section = document.getElementById(sectionId);
    if (!section) return;
    const title = section.querySelector('h2');
    if (!title) return;
    const rect = title.getBoundingClientRect();
    const scrollY = window.scrollY || window.pageYOffset;
    // Calculate the offset to center the title in the viewport
    const offset = rect.top + scrollY - (window.innerHeight / 2) + (rect.height / 2);
    window.scrollTo({ top: offset, behavior: 'smooth' });
}
// Attach to nav links
window.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('nav a[href^="#"]').forEach(function(link) {
        link.addEventListener('click', function(e) {
            const href = this.getAttribute('href');
            if (href && href.startsWith('#')) {
                const sectionId = href.substring(1);
                if (document.getElementById(sectionId)) {
                    e.preventDefault();
                    scrollToSectionCenterTitle(sectionId);
                    // Optionally update URL hash
                    history.replaceState(null, '', href);
                }
            }
        });
    });
});
</script>
</body>
</html>