ntuli-foundation/what-we-do.html at main · joelsondotdesign/ntuli-foundation · 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en" class="loading">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>What we do — The Ntuli Foundation</title>
  <meta name="description" content="A public-benefit cultural and educational institution dedicated to African Indigenous Knowledge Systems." />
  <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=Alegreya+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>

  <div class="loader" aria-hidden="true"><div class="arch-mark"></div></div>

  <div class="page-hero-wrap">
    <header class="nav">
      <div class="container nav-inner">
        <a class="nav-logo" href="index.html" aria-label="The Ntuli Foundation — home">
          <img src="assets/img/logo.png" alt="The Ntuli Foundation" />
        </a>
        <nav class="nav-links" aria-label="Primary">
          <a href="what-we-do.html" class="active">What we do</a>
          <a href="our-team.html">Our team</a>
          <a href="studio.html">Studio</a>
          <a href="news.html">News</a>
        </nav>
        <a class="btn btn-outline" href="studio.html">Visit the studio</a>
      </div>
    </header>

    <section class="page-hero">
      <div class="container">
        <span class="eyebrow">What we do — The philosophy</span>
        <h1 class="display">Knowledge, kept<br /><em>living and moving.</em></h1>
        <p class="lead">The Ntuli Foundation is a public-benefit cultural and educational institution dedicated to African Indigenous Knowledge Systems. Our work spans art, heritage, research, education, and community engagement.</p>
      </div>
    </section>
  </div>

  <main>

    <!-- UBuSuSu portal — pinned until the arches merge -->
    <section class="portal-section">
      <div class="portal-stage">
        <div class="portal-arches">
          <div class="arch arch--left">
            <img src="assets/img/arch-bone-1.svg" alt="" aria-hidden="true" />
            <span class="arch-label">Ubuntu</span>
          </div>
          <div class="arch arch--right">
            <img src="assets/img/arch-bone-2.svg" alt="" aria-hidden="true" />
            <span class="arch-label">Sunsun</span>
          </div>
          <div class="arch arch--center">
            <img src="assets/img/arch-bone-1.svg" alt="" aria-hidden="true" />
            <img class="arch-ochre-overlay" src="assets/img/arch-ochre.svg" alt="" aria-hidden="true" />
            <span class="arch-label">Sumud</span>
          </div>
          <div class="portal-wordmark">UbuSuSu</div>
        </div>
        <div class="portal-copy">
          <h3>Our triadic philosophy.</h3>
          <p>It reframes education as re-membering, and positions artistic expression as a method of research, pedagogy, and social transformation.</p>
        </div>
      </div>
    </section>

    <!-- Six commitments — pinned while the cards light up -->
    <section class="commitments">
      <div class="commitments-stage">
        <div class="container">
          <div class="commitments-head">
            <span class="eyebrow">Strategic objectives</span>
            <h2 class="h2">Six commitments, one direction.</h2>
          </div>
          <div class="commitments-grid">
            <div class="commit-card"><span class="num">01</span><p>Promote artistic and cultural heritage as living knowledge.</p></div>
            <div class="commit-card"><span class="num">02</span><p>Preserve the documents and materials that anchor artistic and cultural heritage.</p></div>
            <div class="commit-card"><span class="num">03</span><p>Support research, education, and public engagement grounded in AIKS — through mentorship, fellowships, and training.</p></div>
            <div class="commit-card"><span class="num">04</span><p>Foster local, continental, and global cultural exchange and diplomacy.</p></div>
            <div class="commit-card"><span class="num">05</span><p>Leverage digital technologies to expand access to heritage and learning.</p></div>
            <div class="commit-card"><span class="num">06</span><p>Advocate for the sustainability of the cultural and heritage sector.</p></div>
          </div>
        </div>
      </div>
    </section>

    <!-- Education & global alignment -->
    <section class="education">
      <div class="container">
        <div class="grid">
          <div class="col reveal">
            <h3>Education sits at the centre of our work.</h3>
            <p>Re-membering through school outreach, archival training, short courses and university partnerships — our programmes include research workshops across South Africa, Zimbabwe, Ghana, and Tunisia, as well as fellowships, mentorship, object-based learning, university seminars, and open-access digital resources.</p>
          </div>
          <div class="col reveal">
            <h3>Aligned with the frameworks that carry knowledge across borders.</h3>
            <p>Our work aligns with UNESCO priorities, the African Union&rsquo;s Agenda 2063, and global frameworks for protecting intangible cultural heritage and advancing more equitable knowledge systems.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Programmes -->
    <section class="programmes">
      <div class="container">
        <span class="eyebrow">Programmes</span>
        <h2 class="h2 navy">Seen through the door.</h2>
        <div style="height:48px"></div>
        <div class="prog-grid">
          <div class="prog-card reveal">
            <img src="assets/img/prog-school.jpg" alt="Learners holding artworks at a school outreach workshop" />
            <h3>School &amp; outreach</h3>
            <p>Hands-on art labs, curriculum-aligned projects, and youth fellowships.</p>
          </div>
          <div class="prog-card reveal">
            <img src="assets/img/prog-archival.jpg" alt="An archival training session inside the studio" />
            <h3>Archival &amp; digital heritage training</h3>
            <p>Teaching preservation methods, digital cataloguing, and community archive management.</p>
          </div>
          <div class="prog-card reveal">
            <img src="assets/img/prog-fellowship.jpg" alt="A community circle gathered among the sculptures" />
            <h3>Fellowship &amp; resources</h3>
            <p>Preservation methods, metadata standards, and community-run digital catalogues.</p>
          </div>
        </div>
      </div>
    </section>

  </main>

  <footer class="footer">
    <div class="container">
      <div class="cols">
        <div class="brand">
          <img src="assets/img/logo-light.png" alt="The Ntuli Foundation" />
          <p>A South African cultural institution grounded in the life, work, and philosophy of Prof Pitika Ntuli.</p>
        </div>
        <div>
          <div class="k">Contact</div>
          <ul><li><a href="mailto:info@ntulifoundation.org">info@ntulifoundation.org</a></li><li><a href="tel:+27834593423">+27 83 459 3423</a></li></ul>
        </div>
        <div>
          <div class="k">Visit</div>
          <ul><li>146 10th Road, Kew</li><li>Johannesburg, South Africa</li></ul>
        </div>
        <div>
          <div class="k">Newsletter</div>
          <ul><li>Letters from the threshold</li></ul>
          <a class="subscribe" href="mailto:info@ntulifoundation.org?subject=Subscribe">Subscribe <span aria-hidden="true">→</span></a>
        </div>
      </div>
      <div class="bottom">
        <span>© 2026 The Ntuli Foundation. All rights reserved.</span>
        <span class="motto">I am because we are.</span>
      </div>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
  <script src="assets/js/main.js"></script>
</body>
</html>