Skip to content

feat: build Jack 3D Creator portfolio landing page #32

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
SayanthRock wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: build Jack 3D Creator portfolio landing page #32

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
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<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=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>Sayanth Rock — Creative Developer</title>
<title>Jack — 3D Creator</title>
</head>
<body>
<div id="root"></div>
Expand Down
22 changes: 4 additions & 18 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,10 @@
import { useEffect } from 'react';
import Lenis from 'lenis';
import { Navbar } from './components/Navbar';
import { Footer } from './components/Footer';
import { HeroSection } from './sections/HeroSection';
import { MarqueeSection } from './sections/MarqueeSection';
import { AboutSection } from './sections/AboutSection';
import { SkillsSection } from './sections/SkillsSection';
import { ServicesSection } from './sections/ServicesSection';
import { FeaturedProjectsSection } from './sections/FeaturedProjectsSection';
import { GithubSection } from './sections/GithubSection';
import { PhotographySection } from './sections/PhotographySection';
import { TimelineSection } from './sections/TimelineSection';
import { TestimonialsSection } from './sections/TestimonialsSection';
import { ContactSection } from './sections/ContactSection';
import { ProjectsSection } from './sections/ProjectsSection';

function App() {
useEffect(() => {
Expand All @@ -38,20 +31,13 @@ function App() {

return (
<div className="main-wrapper">
<Navbar />
<main>
<HeroSection />
<MarqueeSection />
<AboutSection />
<SkillsSection />
<ServicesSection />
<FeaturedProjectsSection />
<GithubSection />
<PhotographySection />
<TimelineSection />
<TestimonialsSection />
<ContactSection />
<ProjectsSection />
</main>
<Footer />
</div>
);
}
Expand Down
85 changes: 0 additions & 85 deletions src/components/AnimatedButton.tsx
View file
Open in desktop

This file was deleted.

44 changes: 44 additions & 0 deletions src/components/AnimatedText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { useRef } from 'react';
import { motion, useScroll, useTransform, MotionValue } from 'framer-motion';

interface AnimatedTextProps {
text: string;
className?: string;
}

const Char = ({ children, progress, range }: { children: string, progress: MotionValue<number>, range: [number, number] }) => {
const opacity = useTransform(progress, range, [0.2, 1]);
return (
<span className="relative">
<span className="invisible">{children}</span>
<motion.span className="absolute left-0 top-0" style={{ opacity }}>
{children}
</motion.span>
</span>
);
};

export function AnimatedText({ text, className }: AnimatedTextProps) {
const containerRef = useRef<HTMLParagraphElement>(null);

const { scrollYProgress } = useScroll({
target: containerRef,
offset: ['start 0.8', 'end 0.2']
});

const chars = text.split('');

return (
<p ref={containerRef} className={className}>
{chars.map((char, i) => {
const start = i / chars.length;
const end = start + (1 / chars.length);
return (
<Char key={i} progress={scrollYProgress} range={[start, end]}>
{char}
</Char>
);
})}
</p>
);
}
29 changes: 29 additions & 0 deletions src/components/ContactButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { type ComponentPropsWithRef } from 'react';
import { cn } from '../utils/cn';

interface ContactButtonProps extends ComponentPropsWithRef<'button'> {
className?: string;
}

export function ContactButton({ className, ...props }: ContactButtonProps) {
return (
<button
className={cn(
'rounded-full text-white font-medium uppercase tracking-widest',
'px-8 py-3 sm:px-10 sm:py-3.5 md:px-12 md:py-4',
'text-xs sm:text-sm md:text-base',
'transition-transform hover:scale-105 active:scale-95',
className
)}
style={{
background: 'linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%)',
boxShadow: '0px 4px 4px rgba(181, 1, 167, 0.25), inset 4px 4px 12px #7721B1',
outline: '2px solid white',
outlineOffset: '-3px'
}}
{...props}
>
Contact Me
</button>
Comment on lines +10 to +27

@codeant-ai codeant-ai Bot Aug 15, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: The component always renders a native button, and the current callers provide no onClick, form action, or navigation target, so both prominent “Contact Me” controls do nothing when activated. Wire the component to the contact destination or require and use an action/navigation prop. [api mismatch]

Severity Level: Major ⚠️ 
- ❌ Hero “Contact Me” control performs no action.
- ❌ About-section contact control is also inert.
- ⚠️ Visitors cannot reach a contact workflow from these controls.

Fix in Cursor Fix in VSCode Claude

Prompt for AI Agent 🤖 
This is a comment left during a code review.

**Path:** src/components/ContactButton.tsx
**Line:** 10:27
**Comment:**
	*Api Mismatch: The component always renders a native button, and the current callers provide no `onClick`, form action, or navigation target, so both prominent “Contact Me” controls do nothing when activated. Wire the component to the contact destination or require and use an action/navigation prop.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
👍 | 👎

);
}
40 changes: 21 additions & 19 deletions src/components/FadeIn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,40 @@
import { motion, useInView } from 'framer-motion';
import { useRef, type ReactNode } from 'react';
import { cn } from '../utils/cn';
import { motion } from 'framer-motion';
import { type ReactNode } from 'react';

interface FadeInProps {
children: ReactNode;
delay?: number;
duration?: number;
className?: string;
y?: number;
x?: number;
once?: boolean;
y?: number;
className?: string;
as?: React.ElementType;
}

export function FadeIn({
children,
delay = 0,
duration = 0.5,
className,
y = 20,
duration = 0.7,
x = 0,
once = true,
y = 30,
className,
as = 'div',
}: FadeInProps) {
const ref = useRef<HTMLDivElement>(null);
const isInView = useInView(ref, { once, margin: '-10% 0px' });
const Component = motion.create(as as any);

return (
<motion.div
ref={ref}
initial={{ opacity: 0, y, x }}
animate={isInView ? { opacity: 1, y: 0, x: 0 } : { opacity: 0, y, x }}
transition={{ duration, delay, ease: [0.21, 0.47, 0.32, 0.98] }}
className={cn(className)}
<Component
className={className}
initial={{ opacity: 0, x, y }}
whileInView={{ opacity: 1, x: 0, y: 0 }}
viewport={{ once: true, margin: "50px", amount: 0 }}
transition={{
duration,
delay,
ease: [0.25, 0.1, 0.25, 1],
}}
>
{children}
</motion.div>
</Component>
);
}
53 changes: 0 additions & 53 deletions src/components/Footer.tsx
View file
Open in desktop

This file was deleted.

50 changes: 18 additions & 32 deletions src/components/LiveProjectButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,24 @@
import { motion } from 'framer-motion';
import { ArrowRight, Github } from 'lucide-react';
import { useState } from 'react';
import { type ComponentPropsWithRef } from 'react';
import { cn } from '../utils/cn';

export function LiveProjectButton({
href,
variant = 'demo'
}: {
href?: string;
variant?: 'demo' | 'github';
}) {
const [isHovered, setIsHovered] = useState(false);
interface LiveProjectButtonProps extends ComponentPropsWithRef<'button'> {
className?: string;
}

export function LiveProjectButton({ className, ...props }: LiveProjectButtonProps) {
return (
<a
href={href || "#"}
target="_blank"
rel="noopener noreferrer"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
className="group relative flex items-center gap-3 overflow-hidden rounded-full border border-white/20 bg-white/5 px-6 py-3 backdrop-blur-md transition-all hover:bg-white hover:text-dark"
<button
className={cn(
'rounded-full border-2 border-[#D7E2EA] text-[#D7E2EA]',
'font-medium uppercase tracking-widest',
'px-8 py-3 sm:px-10 sm:py-3.5',
'text-sm sm:text-base',
'transition-colors hover:bg-[#D7E2EA]/10',
className
)}
{...props}
>
<span className="font-semibold uppercase tracking-wider text-sm transition-colors group-hover:text-dark">
{variant === 'demo' ? 'Live Demo' : 'GitHub'}
</span>
<motion.div
animate={{
x: isHovered ? 4 : 0,
rotate: variant === 'demo' ? (isHovered ? -45 : 0) : 0
}}
transition={{ type: "spring", stiffness: 300, damping: 20 }}
className="text-white group-hover:text-dark"
>
{variant === 'demo' ? <ArrowRight size={18} /> : <Github size={18} />}
</motion.div>
</a>
Live Project
</button>
Comment on lines +10 to +22

@codeant-ai codeant-ai Bot Aug 15, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: The project card renders this component without a URL or click handler, so every “Live Project” control is inert and cannot open the project it labels. Pass a project-specific destination and render an anchor, or connect an explicit click action. [api mismatch]

Severity Level: Major ⚠️ 
- ❌ All three project cards expose inert “Live Project” controls.
- ❌ Visitors cannot open project destinations from the projects section.
- ⚠️ Project names and images provide no alternative project links.

Fix in Cursor Fix in VSCode Claude

Prompt for AI Agent 🤖 
This is a comment left during a code review.

**Path:** src/components/LiveProjectButton.tsx
**Line:** 10:22
**Comment:**
	*Api Mismatch: The project card renders this component without a URL or click handler, so every “Live Project” control is inert and cannot open the project it labels. Pass a project-specific destination and render an anchor, or connect an explicit click action.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
👍 | 👎

);
}
Loading