Merge version_3 into main #5
@@ -1425,4 +1425,4 @@ export default function RootLayout({
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
}
|
||||
157
src/app/page.tsx
157
src/app/page.tsx
@@ -41,46 +41,56 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
title="Full-Stack Developer & Creative Technologist"
|
||||
description="Crafting elegant, performant web experiences with modern technologies. Specialized in React, Next.js, and full-stack development with a focus on clean code and beautiful design."
|
||||
tag="Welcome to my portfolio"
|
||||
tagIcon={Code2}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/a-professional-coder-working-at-a-modern-1772523700251-6df3d86c.png"
|
||||
imageAlt="Professional coder at work"
|
||||
mediaAnimation="blur-reveal"
|
||||
buttons={[
|
||||
{ text: "View My Work", href: "projects" },
|
||||
{ text: "Contact Me", href: "contact" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Chen", handle: "CTO, TechVenture", testimonial: "Outstanding developer with exceptional attention to detail. Delivered a complex project ahead of schedule.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-youn-1772523701569-dec7d03c.png?_wi=1", imageAlt: "Sarah Chen"
|
||||
},
|
||||
{
|
||||
name: "Marcus Johnson", handle: "Product Lead, Innovate Inc", testimonial: "Transformed our codebase and team productivity. A true professional in every aspect.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-youn-1772523701411-27cbe048.png?_wi=1", imageAlt: "Marcus Johnson"
|
||||
},
|
||||
{
|
||||
name: "Elena Rodriguez", handle: "Founder, DesignStudio", testimonial: "Perfect collaboration between design and development. The results exceeded expectations.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-dive-1772523699306-b5d34ee8.png?_wi=1", imageAlt: "Elena Rodriguez"
|
||||
},
|
||||
{
|
||||
name: "David Park", handle: "CEO, CloudTech Solutions", testimonial: "Reliable, skilled, and a pleasure to work with. Highly recommend for any serious project.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-conf-1772523700273-699bbf44.png?_wi=1", imageAlt: "David Park"
|
||||
}
|
||||
]}
|
||||
testimonialRotationInterval={4000}
|
||||
/>
|
||||
<div id="hero" data-section="hero" style={{ perspective: '1200px', transformStyle: 'preserve-3d' }}>
|
||||
<div style={{
|
||||
position: 'relative',
|
||||
transform: 'translateZ(0)',
|
||||
willChange: 'transform'
|
||||
}}>
|
||||
<HeroBillboardTestimonial
|
||||
title="Full-Stack Developer & Creative Technologist"
|
||||
description="Crafting elegant, performant web experiences with modern technologies. Specialized in React, Next.js, and full-stack development with a focus on clean code and beautiful design."
|
||||
tag="Welcome to my portfolio"
|
||||
tagIcon={Code2}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/a-professional-coder-working-at-a-modern-1772523700251-6df3d86c.png"
|
||||
imageAlt="Professional coder at work"
|
||||
mediaAnimation="blur-reveal"
|
||||
buttons={[
|
||||
{ text: "View My Work", href: "projects" },
|
||||
{ text: "Contact Me", href: "contact" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Chen", handle: "CTO, TechVenture", testimonial: "Outstanding developer with exceptional attention to detail. Delivered a complex project ahead of schedule.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-youn-1772523701569-dec7d03c.png?_wi=1", imageAlt: "Sarah Chen"
|
||||
},
|
||||
{
|
||||
name: "Marcus Johnson", handle: "Product Lead, Innovate Inc", testimonial: "Transformed our codebase and team productivity. A true professional in every aspect.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-youn-1772523701411-27cbe048.png?_wi=1", imageAlt: "Marcus Johnson"
|
||||
},
|
||||
{
|
||||
name: "Elena Rodriguez", handle: "Founder, DesignStudio", testimonial: "Perfect collaboration between design and development. The results exceeded expectations.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-dive-1772523699306-b5d34ee8.png?_wi=1", imageAlt: "Elena Rodriguez"
|
||||
},
|
||||
{
|
||||
name: "David Park", handle: "CEO, CloudTech Solutions", testimonial: "Reliable, skilled, and a pleasure to work with. Highly recommend for any serious project.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-conf-1772523700273-699bbf44.png?_wi=1", imageAlt: "David Park"
|
||||
}
|
||||
]}
|
||||
testimonialRotationInterval={4000}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<div id="about" data-section="about" style={{
|
||||
position: 'relative',
|
||||
transform: 'translateZ(20px)',
|
||||
willChange: 'transform'
|
||||
}}>
|
||||
<TextSplitAbout
|
||||
title="About Me"
|
||||
description={[
|
||||
@@ -95,7 +105,11 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="projects" data-section="projects">
|
||||
<div id="projects" data-section="projects" style={{
|
||||
position: 'relative',
|
||||
transform: 'translateZ(40px)',
|
||||
willChange: 'transform'
|
||||
}}>
|
||||
<FeatureCardEight
|
||||
features={[
|
||||
{
|
||||
@@ -125,7 +139,11 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<div id="metrics" data-section="metrics" style={{
|
||||
position: 'relative',
|
||||
transform: 'translateZ(60px)',
|
||||
willChange: 'transform'
|
||||
}}>
|
||||
<MetricCardEleven
|
||||
metrics={[
|
||||
{
|
||||
@@ -152,7 +170,11 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<div id="team" data-section="team" style={{
|
||||
position: 'relative',
|
||||
transform: 'translateZ(80px)',
|
||||
willChange: 'transform'
|
||||
}}>
|
||||
<TeamCardOne
|
||||
members={[
|
||||
{
|
||||
@@ -180,7 +202,11 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<div id="testimonials" data-section="testimonials" style={{
|
||||
position: 'relative',
|
||||
transform: 'translateZ(100px)',
|
||||
willChange: 'transform'
|
||||
}}>
|
||||
<TestimonialCardOne
|
||||
testimonials={[
|
||||
{
|
||||
@@ -220,7 +246,11 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<div id="faq" data-section="faq" style={{
|
||||
position: 'relative',
|
||||
transform: 'translateZ(120px)',
|
||||
willChange: 'transform'
|
||||
}}>
|
||||
<FaqSplitMedia
|
||||
faqs={[
|
||||
{
|
||||
@@ -258,7 +288,11 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<div id="contact" data-section="contact" style={{
|
||||
position: 'relative',
|
||||
transform: 'translateZ(140px)',
|
||||
willChange: 'transform'
|
||||
}}>
|
||||
<ContactText
|
||||
text="Ready to start your next project or discuss how I can help? Let's connect and create something amazing together."
|
||||
animationType="entrance-slide"
|
||||
@@ -271,7 +305,11 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<div id="footer" data-section="footer" style={{
|
||||
position: 'relative',
|
||||
transform: 'translateZ(160px)',
|
||||
willChange: 'transform'
|
||||
}}>
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
@@ -299,6 +337,33 @@ export default function LandingPage() {
|
||||
copyrightText="© 2025 DevPortfolio. Crafted with code and creativity."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
@keyframes parallaxScroll {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateZ(-100px) rotateX(10deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateZ(0) rotateX(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
[data-section] {
|
||||
animation: parallaxScroll 0.8s ease-out forwards;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 0% cover 30%;
|
||||
}
|
||||
`}</style>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user