MyProfile/index.html at main · danybyte/MyProfile · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DanyByte</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="danybyte.png" type="icon">
</head>
<body>
    <div class="bg-blur bg-blur-1" aria-hidden="true"></div>
    <div class="bg-blur bg-blur-2" aria-hidden="true"></div>

    <div class="app-shell">
        <aside id="site-sidebar" class="sidebar glass">
            <div class="sidebar-top">
                <div class="brand">
                    <h1>DanyByte Explorer</h1>
                </div>
                <button
                    id="menu-toggle"
                    class="menu-toggle"
                    type="button"
                    aria-label="Toggle navigation menu"
                    aria-controls="primary-menu"
                    aria-expanded="false"
                >
                    <span class="menu-toggle-bar"></span>
                    <span class="menu-toggle-bar"></span>
                    <span class="menu-toggle-bar"></span>
                </button>
            </div>

            <nav id="primary-menu" class="menu" aria-label="Primary tabs">
                <button id="tab-home-btn" class="tab-btn is-active" data-tab-target="home" type="button">Home</button>
                <button id="tab-activity-btn" class="tab-btn" data-tab-target="activity" type="button">Activity</button>
                <button id="tab-links-btn" class="tab-btn" data-tab-target="links" type="button">Links</button>
            </nav>
        </aside>

        <main class="main-content">
            <section id="tab-home" class="tab-panel is-active" aria-labelledby="tab-home-btn">
                <article class="glass about-card">
                    <p class="eyebrow">About Profile</p>
                    <h2 id="profile-name">Daniel asadi</h2>
                    <p id="profile-title" class="profile-title">Front-end developer</p>
                    <div id="about-content" class="about-copy">
                        <p>Write your bio from <code>data/content.json</code>.</p>
                    </div>
                    <div id="profile-status-list" class="status-list">
                        <p id="profile-status" class="status-chip">Open to collaboration</p>
                    </div>
                </article>
            </section>

            <section id="tab-activity" class="tab-panel" aria-labelledby="tab-activity-btn">
                <article class="glass panel-card">
                    <div class="panel-head">
                        <p class="eyebrow">Latest Updates</p>
                        <h2>Activity</h2>
                    </div>
                    <ul id="activity-list" class="activity-list"></ul>
                    <p id="activity-empty" class="empty-state hidden">No activity yet.</p>
                </article>
            </section>

            <section id="tab-links" class="tab-panel" aria-labelledby="tab-links-btn">
                <article class="glass panel-card">
                    <div class="panel-head">
                        <p class="eyebrow">Contact Links</p>
                        <h2>Links</h2>
                    </div>
                    <ul id="links-list" class="links-list"></ul>
                    <p id="links-empty" class="empty-state hidden">No links yet.</p>
                </article>
            </section>

        </main>

        <aside class="meta-panel glass">
            <p class="eyebrow">System</p>
            <h3>Quick Snapshot</h3>
            <ul class="meta-list">
                <li>
                    <span>Last activity date</span>
                    <strong id="meta-last-update">-</strong>
                </li>
                <li>
                    <span>Activity items</span>
                    <strong id="meta-activity-count">0</strong>
                </li>
                <li>
                    <span>Links count</span>
                    <strong id="meta-link-count">0</strong>
                </li>
            </ul>
        </aside>
    </div>

    <script src="app.js" defer></script>
</body>
</html>