Skip to content

Improve Mobile Optimization #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
YUVRAJ-SINGH-3178 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Improve Mobile Optimization #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions src/app/about/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ export default function AboutPage() {
<h2 className="text-sm font-mono tracking-[0.4em] text-white/40 uppercase w-48 shrink-0 pt-6">
Founding Student
</h2>
<div className="flex items-center gap-6 group p-4 -ml-4 md:p-6 md:-ml-6 rounded-2xl border border-transparent hover:border-white/5 hover:bg-white/[0.02] transition-all duration-500 w-full max-w-2xl cursor-pointer">
<div className="flex flex-col sm:flex-row items-center sm:items-start text-center sm:text-left gap-6 group p-4 -ml-4 md:p-6 md:-ml-6 rounded-2xl border border-transparent hover:border-white/5 hover:bg-white/[0.02] transition-all duration-500 w-full max-w-2xl cursor-pointer">
<div className="w-24 h-24 rounded-full overflow-hidden border border-white/20 shrink-0">
<img
src="https://res.cloudinary.com/djtemmctt/image/upload/v1773943803/jayanth_dtqvzg.jpg"
Expand All @@ -135,7 +135,7 @@ export default function AboutPage() {
<p className="text-white/50 text-sm md:text-base mt-2">
Founder & Lead
</p>
<div className="flex gap-5 mt-4">
<div className="flex justify-center sm:justify-start gap-5 mt-4">
<a href="https://jayanthramakrishnan.online" target="_blank" rel="noopener noreferrer" className="text-white/40 hover:text-white hover:scale-110 transition-all" aria-label="Personal Website">
<Globe size={20} />
</a>
Expand All @@ -158,7 +158,7 @@ export default function AboutPage() {
Founding Faculty
</h2>
<div className="flex flex-col gap-4 w-full max-w-2xl">
<div className="flex items-center gap-6 group p-4 -ml-4 md:p-6 md:-ml-6 rounded-2xl border border-transparent hover:border-white/5 hover:bg-white/[0.02] transition-all duration-500 cursor-pointer">
<div className="flex flex-col sm:flex-row items-center sm:items-start text-center sm:text-left gap-6 group p-4 -ml-4 md:p-6 md:-ml-6 rounded-2xl border border-transparent hover:border-white/5 hover:bg-white/[0.02] transition-all duration-500 cursor-pointer">
<div className="w-20 h-20 rounded-full overflow-hidden border border-white/20 shrink-0">
<img
src="https://res.cloudinary.com/djtemmctt/image/upload/v1774293381/tomy_rbpm0i.jpg"
Expand All @@ -175,7 +175,7 @@ export default function AboutPage() {
</p>
</div>
</div>
<div className="flex items-center gap-6 group p-4 -ml-4 md:p-6 md:-ml-6 rounded-2xl border border-transparent hover:border-white/5 hover:bg-white/[0.02] transition-all duration-500 cursor-pointer">
<div className="flex flex-col sm:flex-row items-center sm:items-start text-center sm:text-left gap-6 group p-4 -ml-4 md:p-6 md:-ml-6 rounded-2xl border border-transparent hover:border-white/5 hover:bg-white/[0.02] transition-all duration-500 cursor-pointer">
<div className="w-20 h-20 rounded-full overflow-hidden border border-white/20 shrink-0">
<img
src="https://res.cloudinary.com/djtemmctt/image/upload/v1774293381/HOD_ztx99a.jpg"
Expand All @@ -199,7 +199,7 @@ export default function AboutPage() {
<h2 className="text-sm font-mono tracking-[0.4em] text-white/40 uppercase w-48 shrink-0 pt-6">
Faculty Advisor
</h2>
<div className="flex items-center gap-6 group p-4 -ml-4 md:p-6 md:-ml-6 rounded-2xl border border-transparent hover:border-white/5 hover:bg-white/[0.02] transition-all duration-500 w-full max-w-2xl cursor-pointer">
<div className="flex flex-col sm:flex-row items-center sm:items-start text-center sm:text-left gap-6 group p-4 -ml-4 md:p-6 md:-ml-6 rounded-2xl border border-transparent hover:border-white/5 hover:bg-white/[0.02] transition-all duration-500 w-full max-w-2xl cursor-pointer">
<div className="w-20 h-20 rounded-full overflow-hidden border border-white/20 shrink-0">
<img
src="https://res.cloudinary.com/djtemmctt/image/upload/v1774293381/Priyanka_qcbe5c.jpg"
Expand Down Expand Up @@ -248,7 +248,7 @@ export default function AboutPage() {
desc: "From publishing papers to building MVPs — we incubate ideas that can evolve into startups, research publications, or community-focused solutions."
}
].map((feature, i) => (
<div key={i} className="why-card group relative p-10 bg-white/[0.02] border border-white/10 hover:bg-white/[0.04] transition-colors duration-500">
<div key={i} className="why-card group relative p-6 md:p-10 bg-white/[0.02] border border-white/10 hover:bg-white/[0.04] transition-colors duration-500">
<div className="text-[10px] font-mono tracking-widest text-white/30 mb-6">0{i + 1} // CAPABILITY</div>
<h3 className="text-2xl font-bold uppercase tracking-tight mb-4 group-hover:text-white transition-colors">{feature.title}</h3>
<p className="text-white/50 leading-relaxed text-sm">{feature.desc}</p>
Expand All @@ -260,36 +260,36 @@ export default function AboutPage() {

{/* AN OPTIMISTIC APPROACH */}
<section className="max-w-5xl mx-auto px-6 py-32 border-t border-white/10">
<div className="reveal-block border-l-2 border-white/20 pl-8 md:pl-16 py-4">
<div className="reveal-block border-l-2 border-white/20 pl-6 md:pl-16 py-4">
<h2 className="text-sm font-mono tracking-[0.4em] text-white/40 uppercase mb-12">
An Optimistic Approach
</h2>

<div className="space-y-16">
<div>
<h3 className="text-3xl font-black uppercase tracking-tight mb-6">Quantum Horizons</h3>
<p className="text-white/60 text-lg leading-relaxed max-w-2xl">
<h3 className="text-2xl md:text-3xl font-black uppercase tracking-tight mb-4 md:mb-6">Quantum Horizons</h3>
<p className="text-white/60 text-base md:text-lg leading-relaxed max-w-2xl">
Quantum computing is reshaping cybersecurity, AI, and complex problem-solving. We provide tools for students to explore quantum algorithms and real-world applications.
</p>
</div>

<div>
<h3 className="text-3xl font-black uppercase tracking-tight mb-6">Decentralized Trust</h3>
<p className="text-white/60 text-lg leading-relaxed max-w-2xl">
<h3 className="text-2xl md:text-3xl font-black uppercase tracking-tight mb-4 md:mb-6">Decentralized Trust</h3>
<p className="text-white/60 text-base md:text-lg leading-relaxed max-w-2xl">
Web3 and blockchain technologies are redefining data ownership, transparency, and digital trust. We build decentralized applications that empower users and secure the internet of tomorrow.
</p>
</div>

<div>
<h3 className="text-3xl font-black uppercase tracking-tight mb-6">Immersive Realities</h3>
<p className="text-white/60 text-lg leading-relaxed max-w-2xl">
<h3 className="text-2xl md:text-3xl font-black uppercase tracking-tight mb-4 md:mb-6">Immersive Realities</h3>
<p className="text-white/60 text-base md:text-lg leading-relaxed max-w-2xl">
By bridging the physical and digital worlds through Mixed Reality (XR), we are creating intuitive, spatial experiences that transform how we learn, interact, and solve problems.
</p>
</div>

<div>
<h3 className="text-3xl font-black uppercase tracking-tight mb-6">Inclusive Progress</h3>
<p className="text-white/60 text-lg leading-relaxed max-w-2xl">
<h3 className="text-2xl md:text-3xl font-black uppercase tracking-tight mb-4 md:mb-6">Inclusive Progress</h3>
<p className="text-white/60 text-base md:text-lg leading-relaxed max-w-2xl">
With low-code and no-code platforms, we enable students from all backgrounds to develop solutions without deep programming expertise. Empowering non-tech innovators is key to our mission.
</p>
</div>
Expand Down
7 changes: 7 additions & 0 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,11 @@ body {

.lab-logo{
transform: translateZ(40px);
}

/* Prevent horizontal overflow on mobile */
@media (max-width: 767px) {
body {
overflow-x: hidden;
}
}
32 changes: 16 additions & 16 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,21 +182,21 @@ export default function Hub() {
</div>

{/* HERO SECTION */}
<section className="relative min-h-[140vh] pt-60 flex flex-col items-center overflow-hidden">
<section className="relative min-h-[140vh] pt-40 md:pt-60 flex flex-col items-center overflow-hidden">
<div className="hero-heading-container relative z-10 mix-blend-difference pointer-events-none">
<h1 className="text-[6.5vw] font-black tracking-tighter uppercase leading-none text-center hero-heading">
<h1 className="text-4xl md:text-[6.5vw] font-black tracking-tighter uppercase leading-none text-center hero-heading">
<span className="relative inline-block">
Singularity
<svg className="absolute top-[58%] left-[-6%] w-[112%] translate-y-[-50%] rotate-[2deg]" viewBox="0 0 842.14 500">
<path className="draw-path" d="M336.2,130.05C261.69,118,16.52,122,20.65,244.29c4.17,123,484.3,299.8,734.57,108.37,244-186.65-337.91-311-546.54-268.47" fill="none" stroke="white" strokeWidth="8" />
</svg>
</span>
<br />
<span className="text-[1vw] tracking-[0.5em] opacity-50 block mt-4 uppercase">{"<Student_Research_Lab/>"}</span>
<span className="text-[10px] md:text-[1vw] tracking-[0.5em] opacity-50 block mt-4 uppercase">{"<Student_Research_Lab/>"}</span>
</h1>
</div>

<div className="parallax-grid grid grid-cols-4 gap-8 w-full px-12 absolute top-1/2 -translate-y-1/2 z-0" >
<div className="parallax-grid grid grid-cols-4 gap-3 md:gap-8 w-full px-4 md:px-12 absolute top-1/2 -translate-y-1/2 z-0" >
{[
"first_jqmtz8.jpg",
"WhatsApp_Image_2026-02-15_at_2.46.25_AM_ttclec.jpg",
Expand All @@ -207,7 +207,7 @@ export default function Hub() {
key={idx}
onLoad={handleMediaLoad}
data-speed={`clamp(${2.4 - (idx * 0.3)})`}
className="h-[70vh] object-cover mt-80 transform-gpu"
className="h-[30vh] md:h-[70vh] object-cover mt-0 md:mt-80 transform-gpu"
src={`${CLOUDINARY_BASE}v1771104005/${img}`}
alt=""
/>
Expand All @@ -217,22 +217,22 @@ export default function Hub() {
<div className="header__marq marquee-section absolute bottom-0 left-0 w-full bg-[#111111] border-y border-white/10 z-20">
<div className="marquee-track flex w-fit whitespace-nowrap py-3">
{[...Array(12)].map((_, i) => (
<span key={i} className="flex items-center text-[#9e9e9e] text-xl md:text-[25px] font-black uppercase pr-[55px] mr-[15px]">
<span key={i} className="flex items-center text-[#9e9e9e] text-sm md:text-[25px] font-black uppercase pr-6 md:pr-[55px] mr-2 md:mr-[15px]">
singularity student lab
<img src={singularityLogo} className="marquee-logo ml-8 w-10 h-10 object-contain opacity-80" alt="" />
<img src={singularityLogo} className="marquee-logo ml-4 md:ml-8 w-6 h-6 md:w-10 md:h-10 object-contain opacity-80" alt="" />
</span>
))}
</div>
</div>
</section>

{/* CARDS SECTION */}
<div className="cards-container relative w-full max-w-4xl mx-auto px-6 pt-[10vh] pb-[20vh] z-20">
<div className="cards-container relative w-full max-w-4xl mx-auto px-4 md:px-6 pt-[6vh] md:pt-[10vh] pb-[10vh] md:pb-[20vh] z-20">
{labs.map((lab, i) => (
<div key={lab.id} className="card-wrapper w-full mb-[80vh] last:mb-0">
<div key={lab.id} className="card-wrapper w-full mb-[50vh] md:mb-[80vh] last:mb-0">
<div
id={`lab-card-${lab.id}`}
className="card-interactive relative w-full h-[550px] overflow-hidden border border-white/10 bg-black/80 group transition-all duration-700 hover:border-white/30 shadow-2xl transform-gpu"
className="card-interactive relative w-full h-[400px] md:h-[550px] overflow-hidden border border-white/10 bg-black/80 group transition-all duration-700 hover:border-white/30 shadow-2xl transform-gpu"
onMouseMove={(e) => {
const rect = e.currentTarget.getBoundingClientRect()
const x = (e.clientX - rect.left) / rect.width
Expand Down Expand Up @@ -273,14 +273,14 @@ export default function Hub() {
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent pointer-events-none" />
</div>

<div className="relative z-10 h-full p-16 flex flex-col justify-between">
<div className="relative z-10 h-full p-6 md:p-16 flex flex-col justify-between">
<div className="flex justify-between items-start">
<span className="text-xs font-mono text-white/40 uppercase tracking-[0.4em] block">Archive // 0{i+1}</span>
<img src={singularityLogo} alt="" className="lab-logo w-8 h-8 opacity-20 transition-all duration-500 group-hover:opacity-80 group-hover:translate-z-10" />
</div>
<div>
<h2 className="text-6xl font-black uppercase tracking-tighter leading-none mb-6">{lab.name}</h2>
<p className="text-sm font-mono text-white/60 uppercase leading-relaxed max-w-md">{lab.focus}</p>
<h2 className="text-3xl md:text-6xl font-black uppercase tracking-tighter leading-none mb-3 md:mb-6">{lab.name}</h2>
<p className="text-xs md:text-sm font-mono text-white/60 uppercase leading-relaxed max-w-md">{lab.focus}</p>
</div>
<div
onClick={() => {
Expand Down Expand Up @@ -326,7 +326,7 @@ export default function Hub() {
}
tl.to(curtain, { opacity: 1, duration: 0.5, ease: "power2.inOut" }, "-=0.2")
}}
className="text-[10px] font-bold border-t border-white/10 pt-8 text-white/20 tracking-[0.3em] flex justify-between items-center group-hover:text-white transition-colors cursor-pointer"
className="text-[10px] font-bold border-t border-white/10 pt-4 md:pt-8 text-white/20 tracking-[0.3em] flex justify-between items-center group-hover:text-white transition-colors cursor-pointer"
>
<span>VIEW_LIVE_FEED</span>
<span className="text-lg">→</span>
Expand All @@ -338,8 +338,8 @@ export default function Hub() {
</div>

{/* PING US SECTION (Homepage Only CTA) */}
<section id="contact" className="relative min-h-[70vh] flex flex-col items-center justify-center z-30 px-6 py-10 bg-black">
<h2 className="text-[5vw] font-black uppercase tracking-tighter mb-16 leading-none">Ping Us</h2>
<section id="contact" className="relative min-h-[50vh] md:min-h-[70vh] flex flex-col items-center justify-center z-30 px-4 md:px-6 py-10 bg-black">
<h2 className="text-3xl md:text-[5vw] font-black uppercase tracking-tighter mb-8 md:mb-16 leading-none">Ping Us</h2>
<div className="w-full max-w-5xl">
<ClipPathLinks />
</div>
Expand Down
Loading