mEp3ii2.github.io/project.html at main · mEp3ii2/mEp3ii2.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
<!DOCTYPE html>
<html lang="en">
<head>
        <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-MJEYZTSHCP"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-MJEYZTSHCP');
    </script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project</title>
    <link rel="stylesheet" href="assets/css/main.css">
    <script>
        async function loadProject() {
            const params = new URLSearchParams(window.location.search);
            const projectId = params.get('id');
            if (!projectId) {
                document.body.innerHTML = "<h1>Project not found</h1>";
                return;
            }

            try {
                const response = await fetch('projects.json');
                const projects = await response.json();
                const project = projects.find(p => p.id === projectId);

                if (project) {
                    document.getElementById('project-title').innerText = project.title;
                    document.getElementById('project-description').innerText = project.description;
                    document.getElementById('project-image').src = project.image;
                    document.getElementById('project-link').href = project.link;
                } else {
                    document.body.innerHTML = "<h1>Project not found</h1>";
                }
            } catch (error) {
                document.body.innerHTML = "<h1>Error loading project data</h1>";
                console.error(error);
            }
        }

        document.addEventListener('DOMContentLoaded', loadProject);
    </script>
</head>
    <body>
        <header id="header">
            <div class="inner">
                <h1 id="project-title">Loading...</h1>
            </div>
            <div id="nav-menu" class="left-section">
                <ul class="actions stacked">
                    <li><a href="index.html" class="button">Home</a></li>
                    <li><a href="about.html" class="button">About Me</a></li>
                    <li><a href="portfolio.html" class="button">Portfolio</a></li>
                </ul>
            </div>
        </header>

        <div id="main">
            <section id="project-details">
                <img id="project-image" src="" alt="Project Image" style="max-width: 100%; height: auto;">
                <p id="project-description">Loading project description...</p>
                <a id="project-link" href="#" class="button">View Project</a>
            </section>
        </div>
    </body>
</html>