subwiz.github.com/index.html at master · subwiz/subwiz.github.com · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Subhash's Personal Homepage</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Courier New', Courier, monospace;
            display: flex;
            min-height: 100vh;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .navigation {
            width: 200px;
            padding: 20px;
            min-height: 100vh;
            border-right: 1px solid #444;
        }

        .navigation h2 {
            margin-bottom: 20px;
            font-size: 1.2em;
        }

        .navigation ul {
            list-style-type: none;
        }

        .navigation li {
            margin-bottom: 10px;
        }

        .navigation a {
            text-decoration: none;
            color: inherit;
            display: block;
            padding: 5px 0;
        }

        .navigation a:hover {
            text-decoration: underline;
        }

        .main-content {
            flex: 1;
            padding: 40px;
            max-width: 800px;
        }

        .main-content h1 {
            margin-bottom: 30px;
            font-size: 2em;
        }

        .main-content p {
            margin-bottom: 20px;
            line-height: 1.6;
        }

        /* Light mode (default) */
        .light-mode {
            background-color: #ffffff;
            color: #000000;
        }

        /* Dark mode */
        .dark-mode {
            background-color: #000000;
            color: #ffffff;
        }

        .dark-mode .navigation {
            border-right-color: #ccc;
        }

        .dark-mode a {
            color: #66B2FF;
        }

        .dark-mode a:visited {
            color: #99CCFF;
        }

        .dark-mode a:hover {
            color: #FFFFFF;
        }

        .indented {
            margin-left: 40px;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <nav class="navigation">
        <p><br/></p>
        <h2>Find Me</h2>
        <ul>
            <li><a href="mailto:sc@mvn.me">Email Me</a></li>
            <li><a href="https://github.com/wiztools/">GitHub</a></li>
            <li><a href="https://www.wiztools.org/">WizTools.org</a></li>
            <li><a href="https://medium.com/good-night-stories">Good Night Stories</a></li>
            <li><a href="https://www.linkedin.com/in/subwiz/">LinkedIn</a></li>
        </ul>
    </nav>

    <main class="main-content">
        <h1>Subhash Chandran's Homepage</h1>

        <p>Subhash Chandran here, a Chennai-based software engineer, and a proud son, husband, and father. Welcome!</p>

        <p>I enjoy coding and have made some contributions to open source projects at <a href="https://www.wiztools.org/">WizTools.org</a>.</p>

        <p>The easiest way to reach me is via email, sc@mvn.me. I answer all emails by myself. Any other mode of communication doesn't guarantee my response ;-)</p>

        <hr/><p></p>

        <p>The source of this page was generated by Claude. This is the prompt:</p>

        <p class="indented">Please generate a pure HTML5 page with inline CSS & JavaScript (if any) for my personal home page. Have a left navigation for links, and the main body with lorem ipsum text that I'll replace. Have JavaScript code to set the page background (black / white) based on the user's OS configuration. Let the text font be a fixed length code like font.</p>
    </main>

    <script>
        // Function to set theme based on OS configuration
        function setTheme() {
            const body = document.body;

            // Check if user prefers dark mode
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                body.classList.add('dark-mode');
                body.classList.remove('light-mode');
            } else {
                body.classList.add('light-mode');
                body.classList.remove('dark-mode');
            }
        }

        // Set theme on page load
        setTheme();

        // Listen for changes in OS theme preference
        if (window.matchMedia) {
            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', setTheme);
        }
    </script>
</body>
</html>