PROJECT AURA
Autonomous edge-computing camera module engineered for real-time spatial object tracking without cloud latency.
EXPLORE CASE STUDY ↗CODE
/* ==========================================================================
01. DESIGN SYSTEM & MOBILE-FIRST BASE
========================================================================== */
:root {
--bg: #080808;
--bg-surface: #0e0e0e;
--fg: #f3f3ef;
--fg-muted: #8a8a86;
--accent: #ff4800;
--border: rgba(255, 255, 255, 0.12);
--border-subtle: rgba(255, 255, 255, 0.05);
--font-heading: 'Syne', sans-serif;
--font-body: 'Space Grotesk', sans-serif;
--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Prevent horizontal scrolling completely */
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
background-color: var(--bg);
color: var(--fg);
font-family: var(--font-body);
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
}
/* SVG Grain Filter Overlay */
.grain-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 999;
opacity: 0.035;
}
/* Kinetic Custom Cursor (Desktop Only) */
.custom-cursor {
display: none;
/* Mobile first: hidden on touch devices */
}
@media (min-width: 1024px) {
.custom-cursor {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 80px;
height: 80px;
border: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(4px);
border-radius: 50%;
pointer-events: none;
z-index: 1000;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.25s var(--ease-out-expo), background 0.2s ease, border-color 0.2s ease;
}
.custom-cursor.visible {
transform: translate(-50%, -50%) scale(1);
}
.custom-cursor.interactive {
background: var(--fg);
border-color: var(--fg);
transform: translate(-50%, -50%) scale(0.9);
}
.custom-cursor.interactive .cursor-text {
color: var(--bg);
}
}
.cursor-text {
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.15em;
color: var(--fg);
text-transform: uppercase;
}
/* Reusable Components */
.section-tag {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.15em;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 1rem;
display: block;
}
.section-title {
font-family: var(--font-heading);
font-size: clamp(2rem, 8vw, 5.5rem);
line-height: 0.95;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.03em;
margin-bottom: 2rem;
word-break: break-word;
}
.line-mask {
overflow: hidden;
display: block;
}
.line-mask-inner {
display: block;
transform: translateY(110%);
transition: transform 1.2s var(--ease-out-expo);
will-change: transform;
}
.is-in-view .line-mask-inner {
transform: translateY(0%);
}
/* ==========================================================================
02. NAVIGATION (Mobile-First)
========================================================================== */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: 1.25rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
transition: background 0.4s ease, backdrop-filter 0.4s ease, padding 0.4s ease;
width: 100%;
}
.navbar.scrolled {
background: rgba(8, 8, 8, 0.92);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border-subtle);
padding: 0.9rem 1.25rem;
}
.nav-brand {
display: flex;
align-items: center;
gap: 1rem;
text-decoration: none;
color: var(--fg);
}
.brand-logo {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.08em;
color: var(--fg-muted);
border: 1px solid var(--border-subtle);
padding: 0.2rem 0.5rem;
border-radius: 100px;
}
.status-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: #00ff66;
box-shadow: 0 0 8px #00ff66;
}
.nav-links {
display: none;
list-style: none;
}
.nav-cta {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--fg);
text-decoration: none;
border: 1px solid var(--border);
padding: 0.5rem 0.85rem;
border-radius: 2px;
white-space: nowrap;
}
@media (min-width: 768px) {
.navbar {
padding: 1.5rem 2.5rem;
}
.navbar.scrolled {
padding: 1rem 2.5rem;
}
.brand-logo {
font-size: 1.4rem;
}
.nav-links {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-link {
color: var(--fg-muted);
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-link:hover {
color: var(--fg);
}
.nav-cta {
font-size: 0.75rem;
padding: 0.65rem 1.25rem;
}
}
/* ==========================================================================
03. HERO SECTION (Mobile-First)
========================================================================== */
.hero {
position: relative;
width: 100%;
min-height: 100vh;
padding: 7rem 1.25rem 2.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.hero-bg-collage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
opacity: 0.25;
}
.collage-img {
position: absolute;
object-fit: cover;
filter: contrast(115%) saturate(70%) brightness(55%);
border: 1px solid var(--border-subtle);
}
.collage-img-1 {
top: 10%;
right: -10%;
width: 60vw;
height: 30vh;
}
.collage-img-2 {
bottom: 15%;
right: 5%;
width: 45vw;
height: 25vh;
}
.collage-img-3 {
display: none;
}
@media (min-width: 768px) {
.hero {
padding: 9rem 2.5rem 3rem;
}
.hero-bg-collage {
opacity: 0.35;
}
.collage-img-1 {
top: 12%;
right: 5%;
width: 28vw;
height: 42vh;
}
.collage-img-2 {
bottom: 10%;
right: 20%;
width: 20vw;
height: 32vh;
}
.collage-img-3 {
display: block;
top: 35%;
left: 3%;
width: 22vw;
height: 35vh;
}
}
.hero-content {
position: relative;
z-index: 2;
max-width: 1600px;
}
.hero-eyebrow {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.15em;
color: var(--accent);
margin-bottom: 1.25rem;
display: block;
}
.hero-title {
font-family: var(--font-heading);
font-size: clamp(3rem, 13vw, 11rem);
line-height: 0.9;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.04em;
margin-bottom: 2rem;
word-break: break-word;
}
.hero-subtitle {
max-width: 540px;
font-size: 1rem;
color: var(--fg-muted);
line-height: 1.5;
margin-bottom: 2rem;
}
.hero-actions {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
}
.btn-primary {
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--bg);
background: var(--fg);
padding: 1rem 1.5rem;
text-decoration: none;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
border: none;
}
.btn-secondary {
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--fg);
text-decoration: none;
border-bottom: 1px solid var(--border);
padding-bottom: 0.5rem;
display: inline-block;
text-align: center;
}
@media (min-width: 640px) {
.hero-subtitle {
font-size: 1.15rem;
}
.hero-actions {
flex-direction: row;
align-items: center;
gap: 2rem;
width: auto;
}
.btn-primary {
width: auto;
padding: 1.1rem 2.2rem;
gap: 1rem;
}
.btn-secondary {
display: inline;
text-align: left;
}
}
.hero-bottom-bar {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--border-subtle);
padding-top: 1.5rem;
margin-top: 3rem;
}
.scroll-hint {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.12em;
color: var(--fg-muted);
display: flex;
align-items: center;
gap: 0.5rem;
}
/* ==========================================================================
04. MANIFESTO
========================================================================== */
.manifesto {
padding: 4rem 1.25rem;
border-bottom: 1px solid var(--border-subtle);
}
.manifesto-statement {
font-family: var(--font-heading);
font-size: clamp(1.8rem, 6vw, 5.5rem);
line-height: 1.1;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.02em;
margin-bottom: 2rem;
}
.manifesto-body {
font-size: 1rem;
color: var(--fg-muted);
line-height: 1.6;
}
@media (min-width: 768px) {
.manifesto {
padding: 8rem 2.5rem;
}
.manifesto-statement {
margin-bottom: 3.5rem;
}
.manifesto-body {
max-width: 720px;
font-size: 1.25rem;
margin-left: auto;
}
}
/* ==========================================================================
05. WHAT WE DO
========================================================================== */
.what-we-do {
padding: 4rem 1.25rem;
}
@media (min-width: 768px) {
.what-we-do {
padding: 8rem 2.5rem;
}
}
.domain-list {
display: flex;
flex-direction: column;
border-top: 1px solid var(--border);
}
.domain-item {
position: relative;
border-bottom: 1px solid var(--border);
padding: 1.5rem 0;
text-decoration: none;
color: var(--fg);
display: flex;
flex-direction: column;
}
.domain-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.domain-title-wrap {
display: flex;
align-items: baseline;
gap: 1rem;
}
.domain-idx {
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--accent);
}
.domain-title {
font-family: var(--font-heading);
font-size: clamp(1.3rem, 5vw, 4rem);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.02em;
}
.domain-arrow {
font-size: 1.2rem;
}
.domain-description {
font-size: 0.9rem;
color: var(--fg-muted);
margin-top: 0.75rem;
line-height: 1.5;
}
@media (min-width: 1024px) {
.domain-item {
padding: 2.2rem 0;
cursor: pointer;
transition: padding 0.4s var(--ease-out-expo);
}
.domain-idx {
color: var(--fg-muted);
transition: color 0.3s ease;
}
.domain-title {
transition: transform 0.4s var(--ease-out-expo), color 0.3s ease;
}
.domain-arrow {
font-size: 2rem;
transition: transform 0.4s var(--ease-out-expo), color 0.3s ease;
}
.domain-description {
max-height: 0;
overflow: hidden;
margin-top: 0;
opacity: 0;
padding-left: 3.5rem;
transition: max-height 0.4s var(--ease-out-expo), margin-top 0.4s ease, opacity 0.3s ease;
}
.domain-item:hover {
padding: 3rem 0;
}
.domain-item:hover .domain-title {
transform: translateX(15px);
color: var(--accent);
}
.domain-item:hover .domain-idx {
color: var(--accent);
}
.domain-item:hover .domain-arrow {
transform: translate(8px, -8px) scale(1.2);
color: var(--accent);
}
.domain-item:hover .domain-description {
max-height: 100px;
margin-top: 1rem;
opacity: 1;
}
}
.hover-preview-container {
display: none;
}
@media (min-width: 1024px) {
.hover-preview-container {
display: block;
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 200px;
pointer-events: none;
z-index: 50;
overflow: hidden;
opacity: 0;
transform: translate(-50%, -50%) scale(0.8);
transition: opacity 0.3s ease, transform 0.3s var(--ease-out-expo);
border: 1px solid var(--border);
}
.hover-preview-container.active {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.hover-preview-img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
/* ==========================================================================
06. FEATURED PROJECTS
========================================================================== */
.projects {
padding: 4rem 1.25rem;
background: var(--bg-surface);
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.projects-grid {
display: flex;
flex-direction: column;
gap: 4rem;
margin-top: 2rem;
}
.project-card {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.project-media {
width: 100%;
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
border: 1px solid var(--border);
background: #000;
}
.project-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.project-meta {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
color: var(--accent);
margin-bottom: 0.5rem;
display: flex;
gap: 1rem;
}
.project-title {
font-family: var(--font-heading);
font-size: clamp(1.8rem, 5vw, 3.5rem);
font-weight: 800;
text-transform: uppercase;
line-height: 0.95;
margin-bottom: 1rem;
}
.project-desc {
color: var(--fg-muted);
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
.projects {
padding: 8rem 2.5rem;
}
.projects-grid {
gap: 10rem;
margin-top: 4rem;
}
.project-card {
display: grid;
grid-template-columns: repeat(12, 1fr);
align-items: center;
gap: 2rem;
}
.project-card.var-1 .project-media {
grid-column: 1 / span 8;
}
.project-card.var-1 .project-info {
grid-column: 9 / span 4;
}
.project-card.var-2 .project-media {
grid-column: 5 / span 8;
grid-row: 1;
}
.project-card.var-2 .project-info {
grid-column: 1 / span 5;
grid-row: 1;
z-index: 2;
}
}
/* ==========================================================================
07. NUMBERS / IMPACT
========================================================================== */
.numbers {
padding: 4rem 1.25rem;
border-bottom: 1px solid var(--border-subtle);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem 1rem;
}
.stat-val {
font-family: var(--font-heading);
font-size: clamp(3rem, 10vw, 7.5rem);
font-weight: 800;
line-height: 0.9;
margin-bottom: 0.25rem;
}
.stat-lbl {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
color: var(--fg-muted);
text-transform: uppercase;
}
@media (min-width: 768px) {
.numbers {
padding: 6rem 2.5rem;
}
.stats-grid {
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
}
/* ==========================================================================
08. PHILOSOPHY CINEMATIC BREAK
========================================================================== */
.philosophy {
padding: 6rem 1.25rem;
text-align: center;
background: #000;
overflow: hidden;
}
.philosophy-words {
font-family: var(--font-heading);
font-size: clamp(2.8rem, 11vw, 12rem);
font-weight: 800;
line-height: 0.95;
text-transform: uppercase;
letter-spacing: -0.04em;
}
.philosophy-word {
display: block;
opacity: 0.2;
transition: opacity 0.6s ease, transform 0.6s var(--ease-out-expo);
}
.philosophy-word.active {
opacity: 1;
color: var(--fg);
}
.philosophy-sub {
margin-top: 2.5rem;
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.12em;
color: var(--accent);
text-transform: uppercase;
}
@media (min-width: 768px) {
.philosophy {
padding: 12rem 2.5rem;
}
.philosophy-sub {
font-size: 0.9rem;
margin-top: 4rem;
}
}
/* ==========================================================================
09. EVENTS TIMELINE
========================================================================== */
.events {
padding: 4rem 1.25rem;
border-bottom: 1px solid var(--border-subtle);
}
.events-list {
display: flex;
flex-direction: column;
border-top: 1px solid var(--border);
}
.event-row {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.5rem 0;
border-bottom: 1px solid var(--border);
text-decoration: none;
color: var(--fg);
}
.event-date {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--accent);
}
.event-name {
font-family: var(--font-heading);
font-size: clamp(1.3rem, 4vw, 2.4rem);
font-weight: 800;
text-transform: uppercase;
}
.event-loc {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--fg-muted);
}
.event-arrow {
display: none;
}
@media (min-width: 768px) {
.events {
padding: 8rem 2.5rem;
}
.event-row {
display: grid;
grid-template-columns: 140px 1fr 200px 40px;
align-items: center;
padding: 2rem 0;
}
.event-loc {
text-align: right;
}
.event-arrow {
display: block;
text-align: right;
font-size: 1.2rem;
}
}
/* ==========================================================================
10. ORIGINAL EDITORIAL MEMBERS SECTION (Mobile-First Compatible)
========================================================================== */
.team-editorial {
padding: 5rem 0;
background: var(--bg-surface);
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
position: relative;
width: 100%;
overflow: hidden;
}
.team-editorial-header {
padding: 0 1.25rem;
margin-bottom: 3rem;
}
@media (min-width: 768px) {
.team-editorial {
padding: 8rem 0;
}
.team-editorial-header {
padding: 0 2.5rem;
margin-bottom: 4rem;
}
}
.editorial-slider-viewport {
width: 100%;
overflow: hidden;
cursor: grab;
user-select: none;
touch-action: pan-y;
}
.editorial-slider-viewport:active {
cursor: grabbing;
}
.editorial-track {
display: flex;
padding: 0 1.25rem;
gap: 1.5rem;
will-change: transform;
}
@media (min-width: 768px) {
.editorial-track {
padding: 0 2.5rem;
gap: 3rem;
}
}
.member-card {
flex: 0 0 85vw;
max-width: 480px;
position: relative;
}
@media (min-width: 768px) {
.member-card {
flex: 0 0 420px;
}
}
.member-portrait-frame {
width: 100%;
height: 480px;
position: relative;
overflow: hidden;
background: #050505;
border: 1px solid var(--border);
}
@media (min-width: 768px) {
.member-portrait-frame {
height: 560px;
}
}
.member-portrait-img {
width: 115%;
height: 115%;
object-fit: cover;
position: absolute;
top: -7.5%;
left: -7.5%;
filter: grayscale(100%) contrast(115%) brightness(85%);
transition: filter 0.6s var(--ease-out-expo);
will-change: transform;
}
.member-card:hover .member-portrait-img {
filter: grayscale(0%) contrast(105%) brightness(95%);
}
.member-card-info {
margin-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.member-card-num {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--accent);
margin-bottom: 0.2rem;
}
.member-card-name {
font-family: var(--font-heading);
font-size: 1.8rem;
font-weight: 800;
text-transform: uppercase;
line-height: 0.95;
letter-spacing: -0.02em;
}
.member-card-role {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.08em;
color: var(--fg-muted);
text-transform: uppercase;
margin-top: 0.25rem;
}
.member-card-bio {
font-size: 0.85rem;
color: var(--fg-muted);
line-height: 1.5;
margin-top: 0.75rem;
}
/* ==========================================================================
11. GALLERY
========================================================================== */
.gallery {
padding: 4rem 1.25rem;
border-top: 1px solid var(--border-subtle);
}
.gallery-masonry {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 2.5rem;
}
.gallery-item {
position: relative;
border: 1px solid var(--border);
overflow: hidden;
width: 100%;
aspect-ratio: 4 / 3;
}
.gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: contrast(115%) saturate(70%);
}
.gallery-annotation {
position: absolute;
bottom: 10px;
left: 10px;
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--fg);
background: rgba(8, 8, 8, 0.85);
backdrop-filter: blur(8px);
padding: 0.25rem 0.5rem;
border: 1px solid var(--border-subtle);
}
@media (min-width: 1024px) {
.gallery {
padding: 8rem 2.5rem;
}
.gallery-masonry {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 2rem;
margin-top: 4rem;
}
.gallery-item-1 {
grid-column: 1 / span 5;
aspect-ratio: 4/5;
margin-top: 3rem;
}
.gallery-item-2 {
grid-column: 6 / span 7;
aspect-ratio: 16/10;
}
}
/* ==========================================================================
12. JOIN CTA & FOOTER
========================================================================== */
.join-cta {
padding: 6rem 1.25rem;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.cta-heading {
font-family: var(--font-heading);
font-size: clamp(2.8rem, 10vw, 9rem);
font-weight: 800;
text-transform: uppercase;
line-height: 0.9;
margin-bottom: 2rem;
}
.site-footer {
padding: 4rem 1.25rem 2rem;
display: flex;
flex-direction: column;
background: #000;
overflow: hidden;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
margin-bottom: 4rem;
}
.footer-col-title {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
color: var(--accent);
margin-bottom: 1rem;
text-transform: uppercase;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.footer-link {
color: var(--fg-muted);
text-decoration: none;
font-size: 0.9rem;
}
.footer-brand-giant {
font-family: var(--font-heading);
font-size: clamp(3.5rem, 21vw, 24rem);
font-weight: 800;
line-height: 0.8;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.04);
user-select: none;
pointer-events: none;
text-align: center;
margin: 2rem 0;
width: 100%;
}
.footer-bottom {
display: flex;
flex-direction: column;
gap: 0.75rem;
border-top: 1px solid var(--border-subtle);
padding-top: 1.5rem;
font-family: var(--font-mono);
font-size: 0.65rem;
color: var(--fg-muted);
}
@media (min-width: 640px) {
.footer-grid {
grid-template-columns: repeat(3, 1fr);
}
.footer-bottom {
flex-direction: row;
justify-content: space-between;
}
}
![Domain Preview]()
01 / WHO WE ARE
02 / WHAT WE DO
ONE CLUB.
03 / BUILT AT WIZTRON
IDEAS ARE CHEAP.
04 / OUTSIDE THE CLASSROOM
THINGS HAPPEN
06 / CHAOS & PROGRESS
02:14 AM / STILL DEBUGGING
HARDWARE WORKSHOP '25
HAVE AN IDEA?
COME BUILD
WIZTRON / TECHNOLOGY & INNOVATION COLLECTIVE
WE DON'T JUST LEARN. WE BUILD.
Code. Circuits. Design. Ideas. A student collective turning curiosity into hardware, software, and products that work.
SOME PEOPLE WAIT FOR ASSIGNMENTS. WE BUILD BEFORE ANYONE ASKS.
Wiztron is a multidisciplinary student community where developers, engineers, designers, creators, marketers, and curious minds come together to turn ideas into experiments, projects, events, and products.
ONE CLUB.
TOO MANY OBSESSIONS.
01
SOFTWARE & AI
↗
Distributed systems, fine-tuned LLMs, web platforms, and code built to scale under heavy load.
02
HARDWARE & IoT
↗
Circuits, sensors, microcontrollers and questionable amounts of late-night debugging.
03
DESIGN & BRAND
↗
Design systems, 3D renders, brutalist interfaces, and visual identity for modern projects.
04
MARKETING & PR
↗
Product launches, community growth, campaign strategy, and making ambitious projects visible.
IDEAS ARE CHEAP.
WE SHIP THEM.
HYPERGRID
Peer-to-peer compute sharing framework built for campus networks, turning idle lab machines into AI render clusters.
EXPLORE CASE STUDY ↗
0
MEMBERS
0
PROJECTS SHIPPED
0
EVENTS
∞
BAD IDEAS TESTED
BUILD.
BREAK.
LEARN.
REPEAT.
"NO TUTORIALS CAN REPLACE MAKING SOMETHING REAL."
THINGS HAPPEN
WHEN PEOPLE SHOW UP.
05 / THE ARCHITECTS
MEET THE
MEET THE
COLLECTIVE.
UNCENSORED CLUB LIFE.
02:14 AM / STILL DEBUGGING
HARDWARE WORKSHOP '25
COME BUILD
SOMETHING.
You don't need to know everything. You just need to be curious enough to start.
APPLY TO WIZTRON ↗