kckushal.com.np/gallery.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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Kushal KC | Portfolio</title>

    <!-- SEO Meta Tags -->
    <meta name="description"
        content="Kushal KC — Geomatics Engineer and Satellite Data Analyst specializing in GIS, Remote Sensing, Google Earth Engine, Web GIS and Spatial Data Visualization. Explore my projects, research, and portfolio.">
    <meta name="keywords"
        content="Kushal, KC, Kessi, kessikushal, Kushal KC, Geomatics Engineer, Satellite Data Analyst, GIS, Remote Sensing, Google Earth Engine, Kathmandu, Nepal, Web GIS, Spatial Analysis, QGIS, ArcGIS, Antarikchya Pratisthan Nepal, GIS Portfolio, Earth Observation, Mapping, Spatial Data Visualization">
    <meta name="author" content="Kushal KC">
    <meta name="robots" content="index, follow">

    <!-- Open Graph for better sharing -->
    <meta property="og:title" content="Kushal KC | Geomatics Engineer & Satellite Data Analyst">
    <meta property="og:description"
        content="Portfolio of Kushal KC — Geomatics Engineer specializing in GIS, Remote Sensing and Earth Observation projects in 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">


    <!-- 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: Pacifico (Cursive) -->
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">

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

    <link rel="stylesheet" href="css/styles.css" />
    <link rel="icon" type="image/x-icon" href="image/apn_chair.jpg" />
</head>

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

    <!-- Gallery Section -->
    <main class="container py-4">
        <h2 class="text-center mb-4">Photo Gallery</h2>
        <div class="row" id="gallery-row">
        </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>