Codinglog/index.html at main · Coder-Connections/Codinglog · 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>CodingLog - Developer Project Documentation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header" id="dynamic-header">
        <!-- Header will be dynamically loaded -->
    </header>

    <main class="main">
        <section class="hero">
            <div class="container">
                <h1 class="hero-title">
                    <span class="code-comment">// Documenting Developer Projects</span>
                    <span class="hero-main">Break Down & Learn</span>
                </h1>
                <p class="hero-description">
                    A platform dedicated to documenting and breaking down developer projects
                    from a programmer's perspective. Learn by exploring real-world implementations.
                </p>
            </div>
        </section>

        <section id="projects" class="projects-section">
            <div class="container">
                <h2 class="section-title">
                    <span class="code-keyword">const</span>
                    <span class="code-variable">projects</span>
                    <span class="code-operator">=</span>
                    <span class="code-bracket">[</span>
                </h2>

                <div class="projects-grid" id="projectsGrid">
                    <!-- Projects will be dynamically loaded here -->
                </div>

                <div class="section-closer">
                    <span class="code-bracket">];</span>
                </div>
            </div>
        </section>

        <section id="about" class="about-section">
            <div class="container">
                <h2 class="section-title">
                    <span class="code-keyword">function</span>
                    <span class="code-function">about</span>
                    <span class="code-bracket">()</span>
                    <span class="code-bracket">{</span>
                </h2>
                <div class="about-content">
                    <p>
                        CodingLog is an educational platform designed for developers who want to
                        understand how projects are built from the ground up. Each project breakdown
                        includes technical details, architecture decisions, code explanations, and
                        lessons learned.
                    </p>
                    <p>
                        Whether you're a beginner looking to learn or an experienced developer
                        seeking inspiration, CodingLog provides clear, structured documentation
                        of real-world development projects.
                    </p>
                </div>
                <div class="section-closer">
                    <span class="code-bracket">}</span>
                </div>
            </div>
        </section>
    </main>

    <footer class="footer" id="dynamic-footer">
        <!-- Footer will be dynamically loaded -->
    </footer>

    <script src="components.js"></script>
    <script src="script.js"></script>
</body>
</html>