kckushal.com.np/index.html at master · kessikushal/kckushal.com.np · 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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Kushal KC | Geomatics Engineer & Satellite Data Analyst</title>

    <!-- Canonical URL -->
    <link rel="canonical" href="https://www.kckushal.com.np/" />

    <!-- SEO Meta Tags -->
    <meta name="description"
        content="Official portfolio of Kushal KC — Geomatics Engineer and Satellite Data Analyst from Nepal. Specializes in GIS, Remote Sensing, Google Earth Engine, Web GIS, and Spatial Data Visualization. Explore projects, research, and maps." />

    <meta name="keywords"
        content="Kushal KC, Kessi, Geomatics Engineer Nepal, Satellite Data Analyst Nepal, GIS Specialist, Remote Sensing, Google Earth Engine, Web GIS Developer, Mapping, Kathmandu University, Nepal GIS Portfolio" />

    <meta name="author" content="Kushal KC" />
    <meta name="robots" content="index, follow" />

    <!-- Open Graph (Social Sharing) -->
    <meta property="og:title" content="Kushal KC | Geomatics Engineer & Satellite Data Analyst" />
    <meta property="og:description"
        content="Explore GIS, Remote Sensing, Google Earth Engine projects, and portfolio of Kushal KC, a Geomatics Engineer and Satellite Data Analyst from Nepal." />
    <meta property="og:image" content="https://www.kckushal.com.np/image/pp_size.jpg" />
    <meta property="og:url" content="https://www.kckushal.com.np" />
    <meta property="og:type" content="website" />

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Kushal KC | Geomatics Engineer & Satellite Data Analyst" />
    <meta name="twitter:description"
        content="Explore the projects, research, and GIS mapping portfolio of Kushal KC from Nepal." />
    <meta name="twitter:image" content="https://www.kckushal.com.np/image/pp_size.jpg" />
    <meta name="twitter:site" content="@kessikushal" />

    <!-- Schema Markup (JSON-LD for structured data) -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Person",
        "name": "Kushal KC",
        "alternateName": ["Kessi", "KC Kushal", "Kushal"],
        "jobTitle": "Geomatics Engineer & Satellite Data Analyst",
        "description": "Kushal KC (Kessi) is a Geomatics Engineer and Satellite Data Analyst from Nepal specializing in GIS, Remote Sensing, Google Earth Engine, and Web GIS development.",
        "url": "https://www.kckushal.com.np",
        "image": "https://www.kckushal.com.np/image/pp_size.jpg",
        "sameAs": [
            "https://github.com/kessikushal",
            "https://www.linkedin.com/in/kessikushal/",
            "https://x.com/kessikushal"
        ],
        "knowsAbout": ["GIS", "Remote Sensing", "Google Earth Engine", "Web GIS", "Spatial Data Visualization"],
        "address": {
            "@type": "PostalAddress",
            "addressLocality": "Panauti",
            "addressRegion": "Kavrepalanchok",
            "addressCountry": "NP"
        }
    }
    </script>


    <!-- Favicons -->
    <link rel="icon" type="image/x-icon" href="image/apn_chair.jpg" />

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" />

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

    <!-- Stylesheet -->
    <link rel="stylesheet" href="css/styles.css" />

    <!-- Supabase -->
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>

</head>


<body>
    <!-- Navbar/ Header Section -->
    <div id="header"></div>

    <!-- Home Section -->
    <main>
        <div class="hero-section">
            <h1 class="fw-bold">Welcome to my Portfolio</h1>
            <h2 class="mt-4">
                <span id="typing" class="typing"></span>
            </h2>
            <h2 style="color: rgb(173, 190, 190);">🎓Geomatics Engineer Student | Satellite Data Analyst🛰️</h2>
        </div>

        <div class="container text-center mt-5">
            <p class="lead">
                Discover my experience, expertise and geospatial work.
            </p>

        </div>
    </main>


    <!-- About me Section -->
    <main class="py-3">
        <div class="container position-relative">
            <h2 class="text-center mb-4 fw-bold">About me</h2>
            <p style="line-height: 1.6;">
                I am <span style="font-weight: 700;">Kushal KC</span>, currently studying
                <span style="font-weight: 700;">Geomatics Engineering</span> at Kathmandu University.
                I previously worked as a <span style="font-weight: 700;">Satellite Data Analyst</span> at
                Antarikchya Pratisthan Nepal, where I worked on projects related to GIS, Remote Sensing,
                and Earth observation. I specialize in
                <span style="font-weight: 700;">Google Earth Engine, QGIS</span> and
                <span style="font-weight: 700;">Web GIS development</span>, focusing on flood mapping,
                landslide detection, air quality analysis, and multi-hazard assessment. Passionate about
                geospatial technology, I aim to use satellite data and spatial analysis to support
                <span style="font-weight: 700;">disaster management, urban planning</span> and
                <span style="font-weight: 700;">sustainable development in Nepal.</span>
            </p>
        </div>
    </main>

    <!-- Education Section -->
    <main class="py-3">
        <div class="container position-relative">
            <h2 class="text-center mb-4 fw-bold">Education</h2>
            <div id="education" class="timeline"></div>
        </div>
    </main>

    <!-- Experience Section -->
    <main class="py-3">
        <div class="container position-relative">
            <h2 class="text-center mb-4 fw-bold">Work Experience</h2>
            <div class="timeline" id="experience"></div>
        </div>
    </main>

    <!-- Projects Section -->
    <main id="projects" class="container py-3">
        <h2 class="text-center mb-4 fw-bold">Projects</h2>
        <div id="projects-container" class="row g-4"></div>
    </main>

    <!-- Container for Modals -->
    <div id="modals-container"></div>

    <!-- Publications Section -->
    <main class="container py-3">
        <h2 class="mb-4 fw-bold text-center">Paper & Publications</h2>
        <div id="Publications-box" class="Publications-box"></div>
    </main>

    <!-- Skills Section -->
    <main class="container py-3">
        <h2 class="mb-4 fw-bold text-center">Skills</h2>
        <div id="skills-box" class="skills-box"></div>
    </main>

    <!-- Honour and Awards Section -->
    <main id="honours" class="container py-3">
        <h2 class="mb-4 fw-bold text-center">Honours and Awards</h2>
        <div id="honours-container" class="row g-4"></div>
    </main>

    <!-- contact Section -->
    <main id="contact" class="container py-5">
        <h2 class="mb-4 fw-bold text-center">Contact</h2>

        <div class="contact-section">
            <!-- LEFT SIDE: CONTACT INFO -->
            <div class="contact p-4 mx-auto shadow-sm border rounded-4">

                <h3 class="text-center mb-4">Get in Touch</h3>

                <!-- Email -->
                <div class="contact-item mb-3">
                    <div class="d-flex justify-content-center align-items-center gap-2 mb-2">
                        <i class="bi bi-envelope flex-shrink-0 text-danger  "></i>
                        <p class="fw-bold mb-0">Email:</p>
                    </div>
                    <p><a href="mailto:kessikushal@gmail.com" class="text-reset">kessikushal@gmail.com</a></p>
                </div>
                <hr>

                <!-- Phone -->
                <div class="contact-item mb-3">
                    <div class="d-flex justify-content-center align-items-center gap-2 mb-2">
                        <i class="bi bi-phone flex-shrink-0 text-danger"></i>
                        <p class="fw-bold mb-0">Phone:</p>
                    </div>
                    <p><a href="tel:+9779823584057" class="text-reset">+977 9823584057</a></p>
                </div>
                <hr>

                <!-- Address -->
                <div class="contact-item">
                    <div class="d-flex justify-content-center align-items-center gap-2 mb-2">
                        <i class="bi bi-geo-alt flex-shrink-0 text-danger"></i>
                        <p class="fw-bold mb-0">Address:</p>
                    </div>
                    <p>Malpi-08, Panauti, Kavrepalanchok, Nepal</p>
                </div>
            </div>

            <!-- RIGHT SIDE: FORM -->
            <div class="contact p-4 mx-auto shadow-sm border rounded-4" style="width: 500px;">
                <h3 class="text-center mb-4">Send a Message</h3>

                <form id="contactForm">
                    <div class="mb-3">
                        <p class="fw-bold mb-1">Full Name: <span class="text-danger">*</span></p>
                        <input type="text" id="name" class="form-control" placeholder="Full Name" required />
                    </div>
                    <div class="mb-3">
                        <p class="fw-bold mb-1">Email: <span class="text-danger">*</span></p>
                        <input type="email" id="email" class="form-control" placeholder="Email" required />
                    </div>
                    <div class="mb-3">
                        <p class="fw-bold mb-1">Message: <span class="text-danger">*</span></p>
                        <textarea id="comment" class="form-control" placeholder="Comment" rows="3" required
                            minlength="50"></textarea>
                    </div>
                    <button type="submit" class="border rounded-4 px-3 py-2">Submit</button>
                    <p id="status" class="text-center mt-3"></p>
                </form>
            </div>
        </div>
    </main>

    <!-- Footer Section -->
    <div id="footer"></div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Include Header & Footer via JS -->
    <script>
        fetch('header.html')
            .then(response => response.text())
            .then(data => {
                document.getElementById('header').innerHTML = data;

                const navbarCollapse = document.getElementById('navbarNav');
                const navbarToggler = document.querySelector('.navbar-toggler');

                // Initialize Bootstrap collapse
                const bsCollapse = new bootstrap.Collapse(navbarCollapse, { toggle: false });

                // Function to set 5-second auto-collapse
                function autoCollapseTimer() {
                    setTimeout(() => {
                        if (window.getComputedStyle(navbarToggler).display !== 'none' &&
                            navbarCollapse.classList.contains('show')) {
                            bsCollapse.hide();
                        }
                    }, 5000);
                }

                // Collapse on link click
                const navLinks = document.querySelectorAll('.navbar-collapse .nav-link');
                navLinks.forEach(link => {
                    link.addEventListener('click', () => {
                        if (window.getComputedStyle(navbarToggler).display !== 'none') {
                            bsCollapse.hide();
                        }
                    });
                });

                // Start auto-collapse every time the navbar opens
                navbarToggler.addEventListener('click', () => {
                    if (window.getComputedStyle(navbarToggler).display !== 'none') {
                        // Only start timer if navbar is being opened
                        setTimeout(() => {
                            if (navbarCollapse.classList.contains('show')) {
                                bsCollapse.hide();
                            }
                        }, 5000);
                    }
                });
            });

        // Load footer
        fetch('footer.html')
            .then(response => response.text())
            .then(data => {
                document.getElementById('footer').innerHTML = data;
                document.getElementById("year").textContent = new Date().getFullYear();
            });
    </script>

    <!-- Link JS -->
    <script src="js/script.js"></script>

</body>

</html>