thebridge-main/team.html at main · SiyaJNdzobs/thebridge-main · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Team Portfolio - The Bridge</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .cards {
            display: flex;
            flex-wrap: nowrap; /* keep all members in one row */
            justify-content: space-between;
            gap: 20px;
            overflow-x: auto; /* scroll if screen is too small */
            padding-bottom: 10px;
        }

        .card {
            background: #ffffff;
            padding: 15px;
            flex: 0 0 300px; /* fixed width so all fit nicely */
            min-height: 250px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: 0.3s ease;
        }

        .card:hover {
            background: #0a2540;
            color: white;
            transform: translateY(-5px);
        }

        .card h3 {
            color: #2e8b57;
            margin-bottom: 8px;
        }

        .card p {
            font-size: 14px;
            line-height: 1.4;
            margin-bottom: 6px;
        }

        .card a {
            color: #1a73e8;
            text-decoration: none;
            font-weight: bold;
        }

        .card a:hover {
            text-decoration: underline;
        }

        /* Scrollbar styling for horizontal scroll */
        .cards::-webkit-scrollbar {
            height: 8px;
        }

        .cards::-webkit-scrollbar-thumb {
            background: #0a2540;
            border-radius: 4px;
        }

        .cards::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
    </style>
</head>
<body>

<header>
    <h1>The Bridge Team Portfolio</h1>
    <p>Professional Portfolios of Team Members & Their Contributions</p>
</header>

<nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
    <a href="team.html">Team</a>
    <a href="privacy.html">Privacy</a>
</nav>

<div class="container">
    <div class="cards">

        <!-- Siyabonga -->
        <div class="card">
            <h3>Siyabonga Ndzobondzobo</h3>
            <p>Founder & Lead Coordinator, guiding The Bridge initiative professionally.</p>
            <p>Participated in 5 Web Dev, 3 App Dev, 2 Software Engineering, 4 IT Project Management projects.</p>
            <p>Experienced in mentoring and real project exposure for members.</p>
            <p>GitHub: <a href="https://github.com/SiyaJNdzobs/thebridge-main/blob/main/team/siyabonga-jose.md" target="_blank">siyabn</a></p>
        </div>

        <!-- Placeholder Member 1 -->
        <div class="card">
            <h3>Team Member 1</h3>
            <p>Project Coordinator, overseeing assignments and collaboration.</p>
            <p>Participated in 0 Web Dev, 0 App Dev, 0 Software Engineering, 0 IT Project Management projects.</p>
            <p>Learning and contributing to structured project workflows.</p>
            <p>GitHub: <a href="#" target="_blank">Portfolio Link</a></p>
        </div>

        <!-- Placeholder Member 2 -->
        <div class="card">
            <h3>Team Member 2</h3>
            <p>Tech Lead, focused on software design and system architecture.</p>
            <p>Participated in 0 Web Dev, 0 App Dev, 0 Software Engineering, 0 IT Project Management projects.</p>
            <p>Building professional skills and contributing to projects.</p>
            <p>GitHub: <a href="#" target="_blank">Portfolio Link</a></p>
        </div>

        <!-- Placeholder Member 3 -->
        <div class="card">
            <h3>Team Member 3</h3>
            <p>Marketing & Communications, responsible for outreach and visibility.</p>
            <p>Participated in 0 Web Dev, 0 App Dev, 0 Software Engineering, 0 IT Project Management projects.</p>
            <p>Developing professional experience and portfolio.</p>
            <p>GitHub: <a href="#" target="_blank">Portfolio Link</a></p>
        </div>

    </div>
</div>

<footer>
    <p>© 2026 The Bridge Initiative</p>
    <p>"Connecting Minds, Crafting Future Professionals"</p>
</footer>

</body>
</html>