neksodebe.github.io/index.html at main · neksodebe/neksodebe.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
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
<!--

PLEASE IGNORE THIS FILE!!
This is my really old and bad portfolio, so I made it that when you go on the website it redirects you to my website.

-->


<body>
    Hi! Thanks for visiting my page. You will be redirected to my studio's website shortly.
</body>

<script>
    setTimeout(() => {
        document.location.href = "https://nikostechlabs.com/";
    }, 300)

</script>


<!--
<!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">
    <title>Niko - Portfolio</title>

    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="effects.css">
</head>

<body>
    <pre id="bg-pre">
        <code id="bg-code" data-text="interface Particle {
            x: number;
            y: number;
            radius: number;
            color: string;
            speed: number;
            velocity: {
              x: number;
              y: number;
            };
          }

          class ParticleGenerator {
            private canvas: HTMLCanvasElement;
            private ctx: CanvasRenderingContext2D;
            private particleCount: number;
            private particles: Particle[];
            private colors: string[];

            constructor(canvas: HTMLCanvasElement, particleCount: number) {
              this.canvas = canvas;
              this.ctx = canvas.getContext('2d');
              this.particleCount = particleCount;
              this.particles = [];
              this.colors = ['#0A1F34', '#066E7B', '#FFD15C', '#FF8811', '#FF4E00'];
            }

            private init(): void {
              for (let i = 0; i < this.particleCount; i++) {
                const radius = Math.random() * 2 + 1;
                const x = Math.random() * (this.canvas.width - radius * 2) + radius;
                const y = Math.random() * (this.canvas.height - radius * 2) + radius;
                const color = this.colors[Math.floor(Math.random() * this.colors.length)];
                const speed = Math.random() * 2 + 1;
                const angle = Math.random() * Math.PI * 2;
                const velocity = {
                  x: Math.cos(angle) * speed,
                  y: Math.sin(angle) * speed,
                };

                this.particles.push({ x, y, radius, color, speed, velocity });
              }
            }

            private animate(): void {
              requestAnimationFrame(() => this.animate());

              this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

              this.particles.forEach((particle) => {
                particle.x += particle.velocity.x;
                particle.y += particle.velocity.y;

                if (particle.x + particle.radius > this.canvas.width || particle.x - particle.radius < 0) {
                  particle.velocity.x = -particle.velocity.x;
                }

                if (particle.y + particle.radius > this.canvas.height || particle.y - particle.radius < 0) {
                  particle.velocity.y = -particle.velocity.y;
                }

                this.ctx.beginPath();
                this.ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
                this.ctx.fillStyle = particle.color;
                this.ctx.fill();
              });
            }

            public start(): void {
              this.init();
              this.animate();
            }
          }

          const canvas = document.getElementById('background') as HTMLCanvasElement;
          const particleGenerator = new ParticleGenerator(canvas, 100);
          particleGenerator.start();
          "></code>
    </pre>

    <span id="warning">This portfolio is still a work in progress :)</span>
    <div id="container">
        <div class="title">
            <div id="rightaligned-content-div">
                <p>
                    Hi, I'm Niko.
                </p>
                <span class="subtitle">and I specialize in back-end, and front-end scripting</span>

                <span class="sectiontitle">I am experienced with:</span>

                <section class="languages">
                    <div class="language-box">
                      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" alt="NodeJS logo">
                      <span>NodeJS</span>
                    </div>
                    <div class="language-box">
                      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JavaScript logo">
                      <span>JavaScript</span>
                    </div>
                    <div class="language-box">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" alt="TypeScript logo">
                        <span>TypeScript</span>
                    </div>
                    <div class="language-box">
                      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg" alt="PostgreSQL logo">
                      <span>MySQL</span>
                    </div>
                    <div class="language-box">
                      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="React logo">
                      <span>React</span>
                    </div>
                  </section>
                  <a href="./languages/"><p class="span more-link">Show more..</p></a>

                  <span class="sectiontitle">My past projects:</span>

                <section class="languages">
                    <div class="language-box">
                        <img src="parottu.png" alt="Parottu logo">
                        <a href="https://www.parottu.me" target="_blank"><span>Parottu</span></a>
                    </div>
                    <div class="language-box">
                      <img src="roomber-logo.png" alt="Roomber logo">
                      <a href="https://github.com/roomber-dev/roomber" target="_blank"><span>Roomber</span></a>
                    </div>
                  </section>

                <br>
                <span>I am looking to work and collaborate with companies or individuals, and provide them with a safe and reliable back-end.<br><br>I also provide a variety of front-end functionality, including:</span>
                <br><br><hr>
                <ul>
                    <li>Creating interactive and responsive user interfaces using modern web technologies such as HTML, CSS, and JavaScript.</li>
                    <li>Integrating third-party APIs and services to extend website functionality and improve user experience.</li>
                </ul><hr>
                <br>
                <span>With my strong problem-solving skills and attention to detail, I am committed to delivering high-quality work and meeting project deadlines. Contact me to discuss how we can work together to bring your project to life.</span>
            </div>


        </div>

        <div id="popup"></div>
        <script src="effects.js"></script>
</body>

</html>

-->