justgoodcuber/web-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify website design by removing repetitive visual elements

Browse Source 
Remove grid lines, floating bubbles, grain texture, and marquee banners from the website.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: f5797e65-2210-4d2e-bf70-278d8a0098c1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: d5b554c5-54c3-413c-8039-39c6605b0dd3
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/2a2c58da-54a0-4c86-8ad0-3b93439f70de/f5797e65-2210-4d2e-bf70-278d8a0098c1/tnshPZC
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
Replit Agent
2026-07-02 00:50:09 +00:00
parent 9f34f0c524
commit 5451853728
3 changed files with 185 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
index.html
View File

@@ -10,12 +10,6 @@
</head>
<body>
<!-- GRID LINES (fixed vertical rails flanking content) -->
<div class="site-grid" aria-hidden="true">
<span class="vline" style="left:7%"></span>
<span class="vline" style="left:93%"></span>
</div>
<!-- NAV -->
<nav>
<a href="#home" class="logo"><img src="images/logo.png" alt="JustGoodCubing"/></a>
@@ -54,13 +48,13 @@
</div>
<div class="store-modal-body">
<div>
<svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="var(--orange)" stroke-width="1.5" stroke-linecap="square">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--orange)" stroke-width="1.5" stroke-linecap="square">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>
</svg>
</div>
<h2 class="store-modal-title">JustGoodCubing Store</h2>
<p class="store-modal-desc">Our store opens in a new tab. Come back here when you are done browsing or checking out.</p>
<p class="store-modal-desc">Our store opens in a new tab. Come back here when you're done browsing.</p>
<a href="https://justgoodcubing.printify.me/products" target="_blank" rel="noopener" class="store-launch-btn">Open Store &#x2197;</a>
</div>
</div>
@@ -68,18 +62,13 @@
<!-- ═══ HOME ═══ -->
<section id="home">
<div class="bubbles" aria-hidden="true">
<div class="bubble" style="width:480px;height:480px;top:-8%;right:12%;--dur:18s;--delay:-4s;--x1:60px;--y1:-80px;--x2:-50px;--y2:40px;--x3:30px;--y3:70px"></div>
<div class="bubble" style="width:280px;height:280px;bottom:10%;left:5%;--dur:13s;--delay:-9s;--x1:-40px;--y1:60px;--x2:50px;--y2:-30px;--x3:-20px;--y3:-50px"></div>
<div class="bubble" style="width:200px;height:200px;top:40%;right:30%;--dur:16s;--delay:-2s;--x1:30px;--y1:-40px;--x2:-60px;--y2:20px;--x3:40px;--y3:30px"></div>
</div>
<div class="hero-eyebrow">Premium Speedcubing Gear</div>
<h1 class="hero-title">
JUST<br/>
<span class="line-orange">GOOD</span><br/>
<span class="line-green">CUBING.</span>
CUBING.
</h1>
<p class="hero-sub">JustGoodCubing creates premium cubing-inspired accessories and merchandise designed for speedcubers and puzzle enthusiasts. From mugs and magnets to apparel and everyday essentials, our products let you show your passion for cubing beyond the solve. Every design is made with the cubing community in mind, combining quality, creativity, and a love for the hobby.</p>
<p class="hero-sub">Premium cubing-inspired accessories and merchandise — designed for the community, by a cuber.</p>
<div class="hero-cta-row">
<a href="#" class="btn-primary" id="heroCta">Shop the Store ↗</a>
<a href="#about" class="btn-secondary">Learn More</a>
@@ -123,47 +112,16 @@
</section>
<div class="h-rule"></div>
<!-- ═══ MARQUEE ═══ -->
<div class="marquee-strip" aria-hidden="true">
<div class="marquee-inner">
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
</div>
</div>
<div class="h-rule"></div>
<!-- ═══ ABOUT ═══ -->
<section id="about">
<div class="bubbles" aria-hidden="true">
<div class="bubble" style="width:420px;height:420px;top:5%;right:2%;--dur:20s;--delay:-6s;--x1:-50px;--y1:70px;--x2:60px;--y2:-40px;--x3:-30px;--y3:-60px"></div>
<div class="bubble" style="width:260px;height:260px;bottom:15%;left:0%;--dur:14s;--delay:-11s;--x1:50px;--y1:-50px;--x2:-40px;--y2:60px;--x3:30px;--y3:20px"></div>
</div>
<div class="section-label reveal">The Story</div>
<h2 class="section-title reveal">Hi, I'm Anshveer<br/>Kang.</h2>
<div class="about-bio-grid">
<div class="about-bio-text reveal">
<p>I've been a speedcuber for over 6 years. What started as a simple hobby during the COVID-19 pandemic turned into a passion I've integrated into every aspect of my life. I'm an official <span class="text-orange">World Cube Association Organizer</span> and the founder of this store.</p>
<p>The cube has challenged me to grow, introduced me to an incredible community, and shown me how a simple hobby can have a lasting impact. That's why I started JustGoodCubing.</p>
<p>My goal is to create unique cubing products that celebrate the creativity, excitement, and community behind the sport — helping share that experience with cubers and non-cubers alike. Whether you're chasing your next personal best or simply appreciate the art of the cube, I hope these products inspire the same excitement that speedcubing has given me.</p>
<p>The cube has challenged me to grow, introduced me to an incredible community, and shown me how a simple hobby can have a lasting impact. That's why I started JustGoodCubing — to create products that celebrate the creativity and community behind the sport.</p>
</div>
<div class="about-cards-col">
<div class="clay-card orange-accent reveal">
@@ -175,17 +133,17 @@
<div class="card-title">WCA Organizer</div>
<div class="card-body">Officially recognized by the World Cube Association — running real competitions, building the community from the ground up.</div>
</div>
<div class="clay-card green-accent reveal">
<div class="card-icon green">
<div class="clay-card reveal">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#4a4640" stroke-width="2" stroke-linecap="square">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
</svg>
</div>
<div class="card-title">6+ Years Cubing</div>
<div class="card-body">From pandemic hobby to obsession. Every product in this store comes from genuine experience and love for the sport.</div>
<div class="card-body">From pandemic hobby to obsession. Every product comes from genuine experience and love for the sport.</div>
</div>
<div class="clay-card purple-accent reveal">
<div class="card-icon purple">
<div class="clay-card reveal">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#4a4640" stroke-width="2" stroke-linecap="square">
<circle cx="12" cy="12" r="10"/><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
@@ -206,41 +164,14 @@
<div class="about-photo-label">In the Zone</div>
</div>
</div>
</section>
<div class="h-rule"></div>
<!-- ═══ MARQUEE 2 ═══ -->
<div class="marquee-strip light" aria-hidden="true">
<div class="marquee-inner rtl slow">
<span class="marquee-item">PRECISION BUILT</span><span class="marquee-sep">·</span>
<span class="marquee-item">WCA LEGAL</span><span class="marquee-sep">·</span>
<span class="marquee-item">COMP READY</span><span class="marquee-sep">·</span>
<span class="marquee-item">BUILT DIFFERENT</span><span class="marquee-sep">·</span>
<span class="marquee-item">SPEED WITHOUT COMPROMISE</span><span class="marquee-sep">·</span>
<span class="marquee-item">TURN FASTER</span><span class="marquee-sep">·</span>
<span class="marquee-item">PREMIUM MATERIALS</span><span class="marquee-sep">·</span>
<span class="marquee-item">DESIGNED TO WIN</span><span class="marquee-sep">·</span>
<span class="marquee-item">PRECISION BUILT</span><span class="marquee-sep">·</span>
<span class="marquee-item">WCA LEGAL</span><span class="marquee-sep">·</span>
<span class="marquee-item">COMP READY</span><span class="marquee-sep">·</span>
<span class="marquee-item">BUILT DIFFERENT</span><span class="marquee-sep">·</span>
<span class="marquee-item">SPEED WITHOUT COMPROMISE</span><span class="marquee-sep">·</span>
<span class="marquee-item">TURN FASTER</span><span class="marquee-sep">·</span>
<span class="marquee-item">PREMIUM MATERIALS</span><span class="marquee-sep">·</span>
<span class="marquee-item">DESIGNED TO WIN</span><span class="marquee-sep">·</span>
</div>
</div>
<div class="h-rule"></div>
<!-- ═══ FAQ ═══ -->
<section id="faq">
<div class="bubbles" aria-hidden="true">
<div class="bubble" style="width:380px;height:380px;top:10%;left:-4%;--dur:17s;--delay:-3s;--x1:70px;--y1:-50px;--x2:-40px;--y2:60px;--x3:50px;--y3:-30px"></div>
<div class="bubble" style="width:220px;height:220px;bottom:20%;right:5%;--dur:12s;--delay:-8s;--x1:-50px;--y1:40px;--x2:60px;--y2:-50px;--x3:-30px;--y3:40px"></div>
</div>
<div class="section-label reveal">Got Questions?</div>
<h2 class="section-title reveal">We've got<br/>answers.</h2>
<div class="section-label reveal">FAQ</div>
<h2 class="section-title reveal">Common<br/>Questions.</h2>
<div class="faq-grid">
@@ -281,7 +212,7 @@
<span><span class="faq-card-num">05</span><span class="faq-card-title">Can I return my order?</span></span>
<svg class="faq-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><polyline points="6 9 12 15 18 9"/></svg>
</button>
<div class="faq-card-a">Because every item is made to order, we cannot accept returns or exchanges for incorrect sizes. However, if there's a manufacturing defect or printing error, we'll definitely assist you.</div>
<div class="faq-card-a">Because every item is made to order, we cannot accept returns or exchanges for incorrect sizes. However, if there's a manufacturing defect or printing error, we'll assist you.</div>
</div>
<div class="faq-card reveal">
@@ -312,37 +243,11 @@
</section>
<div class="h-rule"></div>
<!-- ═══ MARQUEE 3 ═══ -->
<div class="marquee-strip" aria-hidden="true">
<div class="marquee-inner fast">
<span class="marquee-item">SHOP NOW</span><span class="marquee-sep">·</span>
<span class="marquee-item">CUBE HARDER</span><span class="marquee-sep">·</span>
<span class="marquee-item">LEVEL UP</span><span class="marquee-sep">·</span>
<span class="marquee-item">GET FASTER</span><span class="marquee-sep">·</span>
<span class="marquee-item">STAY SHARP</span><span class="marquee-sep">·</span>
<span class="marquee-item">SOLVE MORE</span><span class="marquee-sep">·</span>
<span class="marquee-item">JOIN THE COMMUNITY</span><span class="marquee-sep">·</span>
<span class="marquee-item">SUB-10 MENTALITY</span><span class="marquee-sep">·</span>
<span class="marquee-item">SHOP NOW</span><span class="marquee-sep">·</span>
<span class="marquee-item">CUBE HARDER</span><span class="marquee-sep">·</span>
<span class="marquee-item">LEVEL UP</span><span class="marquee-sep">·</span>
<span class="marquee-item">GET FASTER</span><span class="marquee-sep">·</span>
<span class="marquee-item">STAY SHARP</span><span class="marquee-sep">·</span>
<span class="marquee-item">SOLVE MORE</span><span class="marquee-sep">·</span>
<span class="marquee-item">JOIN THE COMMUNITY</span><span class="marquee-sep">·</span>
<span class="marquee-item">SUB-10 MENTALITY</span><span class="marquee-sep">·</span>
</div>
</div>
<div class="h-rule"></div>
<!-- ═══ CONTACT ═══ -->
<section id="contact">
<div class="bubbles" aria-hidden="true">
<div class="bubble" style="width:440px;height:440px;top:-5%;left:-2%;--dur:19s;--delay:-5s;--x1:55px;--y1:70px;--x2:-45px;--y2:-50px;--x3:60px;--y3:30px"></div>
<div class="bubble" style="width:240px;height:240px;bottom:8%;right:4%;--dur:13s;--delay:-10s;--x1:-60px;--y1:-40px;--x2:40px;--y2:55px;--x3:-30px;--y3:-30px"></div>
</div>
<div class="section-label reveal">Get in Touch</div>
<h2 class="section-title reveal">We actually<br/>reply fast.</h2>
<h2 class="section-title reveal">Let's Talk.</h2>
<div class="contact-grid">
<div class="contact-info reveal">
@@ -376,7 +281,7 @@
</div>
<div>
<div class="contact-block-title">YouTube</div>
<div class="contact-block-value"><a href="https://www.youtube.com/@JustGoodCuber" target="_blank" rel="noopener" style="color:var(--white);text-decoration:none;">@JustGoodCuber</a></div>
<div class="contact-block-value"><a href="https://www.youtube.com/@JustGoodCuber" target="_blank" rel="noopener" class="contact-link">@JustGoodCuber</a></div>
</div>
</div>
<div class="contact-block">
@@ -388,7 +293,7 @@
</div>
<div>
<div class="contact-block-title">Shipping</div>
<div class="contact-block-value">Ships worldwide — rates calculated at checkout.</div>
<div class="contact-block-value">Ships worldwide — rates at checkout.</div>
</div>
</div>
</div>
@@ -404,14 +309,15 @@
</div>
<div>
<label class="form-label" for="msgInput">Message</label>
<textarea class="form-textarea" id="msgInput" placeholder="Cube recommendations, order help, collab — let's talk."></textarea>
<textarea class="form-textarea" id="msgInput" placeholder="Orders, collabs, or just saying hi — we're listening."></textarea>
</div>
<button type="submit" class="form-submit">Send It ↗</button>
<button type="submit" class="form-submit">Send Message ↗</button>
</form>
</div>
</section>
<div class="h-rule"></div>
<!-- FOOTER -->
<footer>
<div class="footer-logo"><img src="images/logo.png" alt="JustGoodCubing"/></div>