PennDraken.github.io/index.html at main · PennDraken/PennDraken.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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PennDraken's Personal Website</title>
  <link rel="icon" type="image/x-icon" href="/favicon.png">
  <link rel="stylesheet" href="styles.css"> <!-- External CSS file -->
</head>
<body>
  <header>
    <a href="index.html">
      <img src="images/logo.svg" alt="PennDraken Logo" id="banner-logo">
    </a>
    <h1>PennDraken</h1>
    <p class="intro">Personal Website of Henry Strömgren.</p>
    <iframe src="https://penndraken.github.io/animated-clock" scrolling="no" title="Custom clock"></iframe>
  </header>
  <main>
    <section>
      <h2>Featured Projects</h2>
      <ul>
        <a class="project-div" href="https://penndraken.github.io/monthly_investment_ui/">
          <!-- Thumbnail -->
          <img src="https://penndraken.github.io/monthly_investment_ui/thumbnail.png" class="project-thumbnail">
          <div class="project-text">
            <h3>Monthly Investment Calculator</h3>
            <p>
              A simple investment calculator that differs from other calculators by having a monthly investment that can be modified on a month-to-month basis.
            </p>
          </div>
        </a>

        <a class="project-div" href="https://penndraken.github.io/elden-ring-full-checklist-site/">
          <!-- Thumbnail -->
          <img src="https://penndraken.github.io/elden-ring-full-checklist-site/thumbnail.png" class="project-thumbnail">
          <div class="project-text">
            <h3>Elden Ring Completionist Inventory Manager</h3>
            <p>
              A website that aids users in keeping track of their inventory in the video game Elden Ring. Armors and weapons can be checked and are shown in the same order as the in-game system, enabling a more intuitive workflow.
            </p>
          </div>
        </a>

        <a class="project-div" href="https://penndraken.github.io/dyn-building-generator/">
          <!-- Thumbnail -->
          <img src="https://penndraken.github.io/dyn-building-generator/thumbnail.png" class="project-thumbnail">
          <div class="project-text">
            <h3>2D-Polygon to 3D-Building</h3>
            <p>
              An interactive proof-of-concept of dynamical building generation from any non-intersecting 2D-polygon, using 3.js and self-made models in Blender.
            </p>
          </div>
        </a>

        <a class="project-div" href="https://github.com/penndraken">
          <div class="project-text">
            <h3 font-align="center">More on my Github</h3>
          </div>
        </a>
      </ul>

      <h2>Photo Gallery</h2>
      <div class="grid-div">
        <a class="gallery-div" href="p_norway.html">
          <div class="gallery-text">
            <h3>Camping Trip in Norway</h3>
            <img src="gallery/norway/7.JPG"></img>
          </div>
        </a>
        <a class="gallery-div" href="p_ammarnas.html">
          <div class="gallery-text">
            <h3>Ammarnäs, Sweden</h3>
            <img src="gallery/ammarnas/3.JPG"></img>
          </div>
        </a>
        <a class="gallery-div" href="p_gothenburg.html">
          <div class="gallery-text">
            <h3>Gothenburg</h3>
            <img src="gallery/gothenburg/1.JPG"></img>
          </div>
        </a>
        <a class="gallery-div" href="p_dubrovnik.html">
          <div class="gallery-text">
            <h3>Dubrovnik, Croatia</h3>
            <img src="gallery/dubrovnik/1.JPG"></img>
          </div>
        </a>
      </div>
      </div>
    </section>
  </main>
  <footer>
    <p>© 2025 Henry Strömgren. All Rights Reserved.</p>
  </footer>
</body>
</html>