justgoodcuber/web-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5451853728464faf4a867228a81f36fa258ecc8f
web-portfolio/index.html
Replit Agent 5451853728 Simplify website design by removing repetitive visual elements 
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
2026-07-02 00:50:09 +00:00

330 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>JustGoodCubing</title>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- NAV -->
<nav>
<a href="#home" class="logo"><img src="images/logo.png" alt="JustGoodCubing"/></a>
<ul class="nav-links">
<li><a href="#home" data-section="home">Home</a></li>
<li><a href="#about" data-section="about">About</a></li>
<li><a href="#faq" data-section="faq">FAQ</a></li>
<li><a href="#contact" data-section="contact">Contact</a></li>
</ul>
<div class="nav-right">
<a href="https://www.youtube.com/@JustGoodCuber" target="_blank" rel="noopener" class="nav-yt-link" aria-label="YouTube">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
</a>
<a href="#" class="nav-store-btn" id="storeNavBtn">Store ↗</a>
<button class="hamburger" id="hamburger" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div>
</nav>
<!-- MOBILE MENU -->
<div class="mobile-menu" id="mobileMenu">
<a href="#home" class="mobile-nav-link">Home</a>
<a href="#about" class="mobile-nav-link">About</a>
<a href="#faq" class="mobile-nav-link">FAQ</a>
<a href="#contact" class="mobile-nav-link">Contact</a>
<a href="#" class="store-link mobile-nav-link" id="storeMobileBtn">Store ↗</a>
</div>
<!-- STORE OVERLAY -->
<div class="store-overlay" id="storeOverlay">
<div class="store-modal-card">
<div class="store-modal-top">
<div class="store-modal-url">justgoodcubing.printify.me/products</div>
<button class="modal-close" id="storeClose">&#x2715; Close</button>
</div>
<div class="store-modal-body">
<div>
<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'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>
</div>
<!-- ═══ HOME ═══ -->
<section id="home">
<div class="hero-eyebrow">Premium Speedcubing Gear</div>
<h1 class="hero-title">
JUST<br/>
<span class="line-orange">GOOD</span><br/>
CUBING.
</h1>
<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>
</div>
<div class="cube-deco">
<div class="cube-scene">
<div class="cube-3d" id="cube3d">
<div class="cube-face front">
<div class="cubie" style="background:#ff5f1f"></div><div class="cubie" style="background:#ff5f1f"></div><div class="cubie" style="background:#ff5f1f"></div>
<div class="cubie" style="background:#ff5f1f"></div><div class="cubie" style="background:#ff5f1f"></div><div class="cubie" style="background:#ff5f1f"></div>
<div class="cubie" style="background:#ff5f1f"></div><div class="cubie" style="background:#ff5f1f"></div><div class="cubie" style="background:#ff5f1f"></div>
</div>
<div class="cube-face back">
<div class="cubie" style="background:#39ff14"></div><div class="cubie" style="background:#39ff14"></div><div class="cubie" style="background:#39ff14"></div>
<div class="cubie" style="background:#39ff14"></div><div class="cubie" style="background:#39ff14"></div><div class="cubie" style="background:#39ff14"></div>
<div class="cubie" style="background:#39ff14"></div><div class="cubie" style="background:#39ff14"></div><div class="cubie" style="background:#39ff14"></div>
</div>
<div class="cube-face right">
<div class="cubie" style="background:#b14fff"></div><div class="cubie" style="background:#b14fff"></div><div class="cubie" style="background:#b14fff"></div>
<div class="cubie" style="background:#b14fff"></div><div class="cubie" style="background:#b14fff"></div><div class="cubie" style="background:#b14fff"></div>
<div class="cubie" style="background:#b14fff"></div><div class="cubie" style="background:#b14fff"></div><div class="cubie" style="background:#b14fff"></div>
</div>
<div class="cube-face left">
<div class="cubie" style="background:#e8e8e8"></div><div class="cubie" style="background:#e8e8e8"></div><div class="cubie" style="background:#e8e8e8"></div>
<div class="cubie" style="background:#e8e8e8"></div><div class="cubie" style="background:#e8e8e8"></div><div class="cubie" style="background:#e8e8e8"></div>
<div class="cubie" style="background:#e8e8e8"></div><div class="cubie" style="background:#e8e8e8"></div><div class="cubie" style="background:#e8e8e8"></div>
</div>
<div class="cube-face top">
<div class="cubie" style="background:#ffe020"></div><div class="cubie" style="background:#ffe020"></div><div class="cubie" style="background:#ffe020"></div>
<div class="cubie" style="background:#ffe020"></div><div class="cubie" style="background:#ffe020"></div><div class="cubie" style="background:#ffe020"></div>
<div class="cubie" style="background:#ffe020"></div><div class="cubie" style="background:#ffe020"></div><div class="cubie" style="background:#ffe020"></div>
</div>
<div class="cube-face bottom">
<div class="cubie" style="background:#1e90ff"></div><div class="cubie" style="background:#1e90ff"></div><div class="cubie" style="background:#1e90ff"></div>
<div class="cubie" style="background:#1e90ff"></div><div class="cubie" style="background:#1e90ff"></div><div class="cubie" style="background:#1e90ff"></div>
<div class="cubie" style="background:#1e90ff"></div><div class="cubie" style="background:#1e90ff"></div><div class="cubie" style="background:#1e90ff"></div>
</div>
</div>
</div>
</div>
</section>
<div class="h-rule"></div>
<!-- ═══ ABOUT ═══ -->
<section id="about">
<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 — 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">
<div class="card-icon orange">
<svg viewBox="0 0 24 24" fill="none" stroke="#c94b0f" stroke-width="2" stroke-linecap="square">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
</svg>
</div>
<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 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 comes from genuine experience and love for the sport.</div>
</div>
<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>
</div>
<div class="card-title">Community First</div>
<div class="card-body">This store exists to bring the cubing experience to everyone — whether you're a world-class solver or just picked up your first cube.</div>
</div>
</div>
</div>
<div class="about-photos reveal">
<div class="about-photo-wrap">
<img src="images/photo1.png" alt="Anshveer at a speedcubing competition"/>
<div class="about-photo-label">At a WCA Competition</div>
</div>
<div class="about-photo-wrap">
<img src="images/photo2.png" alt="Solving a Rubik's cube"/>
<div class="about-photo-label">In the Zone</div>
</div>
</div>
</section>
<div class="h-rule"></div>
<!-- ═══ FAQ ═══ -->
<section id="faq">
<div class="section-label reveal">FAQ</div>
<h2 class="section-title reveal">Common<br/>Questions.</h2>
<div class="faq-grid">
<div class="faq-card reveal">
<button class="faq-card-q">
<span><span class="faq-card-num">01</span><span class="faq-card-title">What is JustGoodCubing?</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">JustGoodCubing is a cubing-inspired brand creating unique merchandise and accessories for speedcubers and puzzle enthusiasts. Our products are designed to bring cubing into everyday life.</div>
</div>
<div class="faq-card reveal">
<button class="faq-card-q">
<span><span class="faq-card-num">02</span><span class="faq-card-title">How long does shipping take?</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">Most orders are produced within 2–5 business days and shipped shortly after. Delivery times vary depending on your location.</div>
</div>
<div class="faq-card reveal">
<button class="faq-card-q">
<span><span class="faq-card-num">03</span><span class="faq-card-title">Where do you ship?</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">We currently ship to most countries supported by our fulfillment partners. Shipping availability and rates are calculated during checkout.</div>
</div>
<div class="faq-card reveal">
<button class="faq-card-q">
<span><span class="faq-card-num">04</span><span class="faq-card-title">What if my order arrives damaged or incorrect?</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">If your order arrives damaged, misprinted, or incorrect, please contact us within 30 days of delivery with photos of the issue, and we'll work to make it right.</div>
</div>
<div class="faq-card reveal">
<button class="faq-card-q">
<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 assist you.</div>
</div>
<div class="faq-card reveal">
<button class="faq-card-q">
<span><span class="faq-card-num">06</span><span class="faq-card-title">Will the colors look exactly like the photos?</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">Colors may vary slightly depending on your screen settings and the printing process, but we strive to make every product as accurate as possible.</div>
</div>
<div class="faq-card reveal">
<button class="faq-card-q">
<span><span class="faq-card-num">07</span><span class="faq-card-title">Do you sell official Rubik's products?</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">No. JustGoodCubing creates original designs that are not related to official Rubik's products.</div>
</div>
<div class="faq-card reveal">
<button class="faq-card-q">
<span><span class="faq-card-num">08</span><span class="faq-card-title">How can I contact you?</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">Feel free to reach out through our contact section, or email us directly at <a class="faq-a-link" href="mailto:Askang04@gmail.com">Askang04@gmail.com</a>. We always reply.</div>
</div>
</div>
</section>
<div class="h-rule"></div>
<!-- ═══ CONTACT ═══ -->
<section id="contact">
<div class="section-label reveal">Get in Touch</div>
<h2 class="section-title reveal">Let's Talk.</h2>
<div class="contact-grid">
<div class="contact-info reveal">
<div class="contact-block">
<div class="contact-block-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="var(--orange)" stroke-width="2" stroke-linecap="square">
<rect x="2" y="4" width="20" height="16"/><polyline points="2,4 12,13 22,4"/>
</svg>
</div>
<div>
<div class="contact-block-title">Email</div>
<div class="contact-block-value">Askang04@gmail.com</div>
</div>
</div>
<div class="contact-block">
<div class="contact-block-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="var(--orange)" stroke-width="2" stroke-linecap="square">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2A19.79 19.79 0 0 1 11.61 19 19.5 19.5 0 0 1 5 12.39 19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg>
</div>
<div>
<div class="contact-block-title">Phone</div>
<div class="contact-block-value">945-227-8728</div>
</div>
</div>
<div class="contact-block">
<div class="contact-block-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#ff0000" stroke-width="2" stroke-linecap="square">
<polygon points="5 3 19 12 5 21 5 3"/>
</svg>
</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" class="contact-link">@JustGoodCuber</a></div>
</div>
</div>
<div class="contact-block">
<div class="contact-block-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="var(--orange)" stroke-width="2" stroke-linecap="square">
<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/>
<path d="M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20"/>
</svg>
</div>
<div>
<div class="contact-block-title">Shipping</div>
<div class="contact-block-value">Ships worldwide — rates at checkout.</div>
</div>
</div>
</div>
<form class="contact-form reveal" id="contactForm">
<div>
<label class="form-label" for="nameInput">Your Name</label>
<input class="form-input" id="nameInput" type="text" placeholder="Your name"/>
</div>
<div>
<label class="form-label" for="emailInput">Email</label>
<input class="form-input" id="emailInput" type="email" placeholder="your@email.com"/>
</div>
<div>
<label class="form-label" for="msgInput">Message</label>
<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 Message ↗</button>
</form>
</div>
</section>
<div class="h-rule"></div>
<!-- FOOTER -->
<footer>
<div class="footer-logo"><img src="images/logo.png" alt="JustGoodCubing"/></div>
<div class="footer-copy">© 2026 JustGoodCubing. All rights reserved.</div>
</footer>
<script src="index.js" defer></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink