Timot05.github.io/drops.html at master · Timot05/Timot05.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drops - Modular Dining Pendant Lamp - SARK</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        'sans': ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-50 font-sans">
    <!-- Header -->
    <header class="bg-white shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-6">
                <a href="index.html" class="hover:opacity-80 transition-opacity"><img src="logo.svg" alt="SARK" class="h-12"></a>

            </div>
        </div>
    </header>

    <!-- Content -->
    <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="bg-white rounded-lg shadow-md p-8">
            <h1 class="text-4xl md:text-5xl font-light text-gray-900 mb-8">Drops - Modular Dining Pendant Lamp</h1>
            <div class="prose prose-lg max-w-none">
                <img src="static/images/Drops/drops_module_side.jpeg" alt="Drops Lamp Hero" class="w-full rounded-lg mb-8">
                <p class="text-lg text-gray-700 mb-8">
                    The concept for drops came while thinking about a modular version of Photon, my other pendant lamp. Here is the result:
                </p>

                <img src="static/images/Drops/drops_installed.jpg" alt="Picture of Drops" class="w-full rounded-lg mb-8">

                <p class="text-lg text-gray-700 mb-8">
                    Each "droplet" consists of a module that supports an LED. Similarly to Photon, the light can shine directly onto the table surface but is also reflected to the ceiling by the reflector beneath the LED. The reflector prevents light from directly shining into people's eyes. Here is what a module looks like:
                </p>

                <img src="static/images/Drops/drops_module_top.jpeg" alt="Picture of Drops" class="w-full rounded-lg mb-8">

                <p class="text-lg text-gray-700 mb-8">
                    The LED is mounted on an aluminum support that also pulls heat away from the LED and into the fins and the reflector.
                </p>

                <img src="static/images/Drops/droplet_explanation.png" alt="Picture of Drops" class="w-full rounded-lg mb-8">

                <p class="text-lg text-gray-700 mb-8">
                    The LEDs are from Cree with a CRI of 90+ at 2700k temperature. That is some of the best stuff I could find and they look great.
                </p>

                <p class="text-lg text-gray-700 mb-8">
                    Just for fun, here is an early prototype of a droplet module:
                </p>

                <img src="static/images/Drops/early_droplet_off.jpeg" alt="Picture of Drops" class="w-full rounded-lg mb-8">

                <p class="text-lg text-gray-700 mb-8">
                    And a rendered view of the housing:
                </p>

                <img src="static/images/Drops/housing.jpeg" alt="Picture of Drops" class="w-full rounded-lg mb-8">
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-8 mt-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <p>&copy; 2025 SARK. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>