twiston-7.github.io/about.html at main · twiston-7/twiston-7.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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <title>About me</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
    <link rel="stylesheet" href="styles/global.css" />
    <link rel="stylesheet" href="styles/space.css" />
    <link rel="stylesheet" href="styles/navbar.css" />
    <link rel="stylesheet" href="styles/about.css" />

    <script>
      (function () {
        var theme = localStorage.getItem('theme');
        if (!theme) theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        document.documentElement.setAttribute('data-theme', theme);
      })();
    </script>

    <script src="scripts/navbar.js" defer></script>
    <script src="scripts/stars.js" defer></script>
    <script src="scripts/about.js" defer></script>
  </head>

  <body>

    <button class="hamburger" aria-label="Mobile menu">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </button>

    <nav class="nav-links mobile-menu">
      <a href="/">Home</a>
      <a href="/projects">Projects</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>

      <div class="theme-selector">
        <input type="checkbox" id="theme-toggle" class="theme-checkbox" />
        <label for="theme-toggle">
          <svg id="moon" class="theme-icons visible" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278M4.858 1.311A7.27 7.27 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.32 7.32 0 0 0 5.205-2.162q-.506.063-1.029.063c-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286"/></svg>
          <svg id="sun" class="theme-icons invisible" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8"/></svg>
        </label>
      </div>
    </nav>

    <main class="about">

      <header class="about-hero reveal">
        <img src="assets/avatar.png" alt="Nick avatar" class="avatar" />
        <h1>About Nick</h1>
        <p class="tagline">Student software developer</p>

        <div class="meta">
          <span class="chip"><i class="fa-solid fa-location-dot"></i> Netherlands</span>
          <span class="chip"><i class="fa-solid fa-code"></i> Java · Kotlin · Web</span>
        </div>

        <div class="links">
          <a href="mailto:twiston7@proton.me" aria-label="Email"><i class="fa-solid fa-envelope"></i></a>
          <a href="https://github.com/twiston-7" target="_blank" aria-label="GitHub"><i class="fa-brands fa-github"></i></a>
        </div>
      </header>

      <section id="summary" class="prose reveal">
        <h2>Summary</h2>

        <div class="summary-quick" aria-label="Quick summary">
          <ul class="bullets bullets-tight">
            <li><strong>Backend focus:</strong> Java/Kotlin; pragmatic web when needed.</li>
            <li><strong>Learning:</strong> C#/.NET now; C/C++ next.</li>
            <li><strong>Workflow:</strong> reviews, testing, iterative delivery.</li>
            <li><strong>Interest:</strong> security-minded, clear communication.</li>
          </ul>
        </div>

        <br />

      <p>
        I'm Nick, a third-year HBO-ICT student studying software development. Based in the Netherlands with a strong backend focus using Java and Kotlin.
        I care about delivering clean, maintainable and stable code, and can cover pragmatic frontend work when the team needs it.
        I'm currently learning C# and plan to explore C/C++ next.
        <br/>
        For my internship, I'm looking for a place where reviews, testing and iterative delivery are standard practice, and where simplicity and readability are valued over cleverness.
        Most of my experience sits in the JVM ecosystem, with occasional web development.
        I'm particularly interested in teams which value cyber security, even if my internship scope is primarily limited to software development.
        <br/>
        While Dutch is my mother tongue, my English is of near-native level. My communication is clear and straight forward.
        Project highlights and code are on the Projects tab, and availability details are on the Contact tab.
      </p>

        <button type="button" class="summary-toggle" aria-expanded="false" data-target="#summary">
          Show more
        </button>
      </section>

      <div class="section-bridge">
        <a class="scroll-indicator" href="#highlights" aria-label="Scroll to highlights">
          <span class="scroll-indicator__icon" aria-hidden="true"><i class="fa-solid fa-chevron-down"></i></span>
          <span class="sr-only">Scroll down</span>
        </a>
      </div>

      <section id="highlights" class="grid reveal">
        <article class="card">
          <h3>Core skills</h3>
          <ul class="chips">
            <li>Java</li>
            <li>Kotlin</li>
            <li>Git</li>
            <li>JUnit</li>
            <li>Scrum</li>
            <li>Javascript</li>
            <li>HTML</li>
            <li>CSS</li>
          </ul>
        </article>

        <article class="card">
          <h3>Currently learning</h3>
          <ul class="chips">
            <li>C# / .NET</li>
            <li>C / C++ (exploring)</li>
          </ul>
        </article>

        <article class="card">
          <h3>Values</h3>
          <ul class="bullets">
            <li>Simplicity and readability over cleverness</li>
            <li>Code reviews, testing, and iterative delivery</li>
            <li>Security-minded engineering</li>
            <li>Clear, straightforward communication</li>
          </ul>
        </article>
      </section>
    </main>

    <div class="space-background" id="starfield"></div>
  </body>
</html>