Merge version_2 into main #3
217
src/app/page.tsx
217
src/app/page.tsx
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||||
@@ -10,7 +11,122 @@ import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import { Award, Heart, Sparkles, Zap } from 'lucide-react';
|
||||
|
||||
// Memoized section components for performance optimization
|
||||
const MemoHero = React.memo(HeroSplitTestimonial);
|
||||
const MemoAbout = React.memo(AboutMetric);
|
||||
const MemoFeatureWork = React.memo(FeatureCardThree);
|
||||
const MemoFeatureSkills = React.memo(FeatureCardThree);
|
||||
const MemoProducts = React.memo(ProductCardOne);
|
||||
const MemoContact = React.memo(ContactCenter);
|
||||
const MemoFooter = React.memo(FooterBaseReveal);
|
||||
const MemoNavbar = React.memo(NavbarStyleCentered);
|
||||
|
||||
// Performance monitoring utility
|
||||
const reportWebVitals = (metric) => {
|
||||
if (typeof window !== 'undefined' && window.gtag) {
|
||||
window.gtag('event', metric.name, {
|
||||
event_category: 'web_vitals',
|
||||
value: Math.round(metric.value),
|
||||
event_label: metric.id,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize Web Vitals monitoring
|
||||
if (typeof window !== 'undefined') {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(reportWebVitals);
|
||||
getFID(reportWebVitals);
|
||||
getFCP(reportWebVitals);
|
||||
getLCP(reportWebVitals);
|
||||
getTTFB(reportWebVitals);
|
||||
}).catch(err => console.debug('Web Vitals monitoring not available'));
|
||||
}
|
||||
|
||||
export default function LandingPage() {
|
||||
// Pre-memoized static data to prevent unnecessary re-renders
|
||||
const navItems = React.useMemo(() => [
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Work", id: "work" },
|
||||
{ name: "Skills", id: "skills" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Resume", id: "resume" }
|
||||
], []);
|
||||
|
||||
const heroButtons = React.useMemo(() => [
|
||||
{ text: "View My Work", href: "work" },
|
||||
{ text: "Get In Touch", href: "contact" }
|
||||
], []);
|
||||
|
||||
const heroTestimonials = React.useMemo(() => [{
|
||||
name: "Design Excellence", handle: "Creative Direction", testimonial: "Creating compelling visual narratives through thoughtful design", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-pensive-african-american-man-dressed-classic-brown-jacket-standing-studio-dark-background_613910-17787.jpg"
|
||||
}], []);
|
||||
|
||||
const metrics = React.useMemo(() => [
|
||||
{ icon: Sparkles, label: "Projects Completed", value: "2+" },
|
||||
{ icon: Zap, label: "Years of Experience", value: "3+" },
|
||||
{ icon: Award, label: "Design Disciplines", value: "8+" },
|
||||
{ icon: Heart, label: "Client Satisfaction", value: "100%" }
|
||||
], []);
|
||||
|
||||
const workFeatures = React.useMemo(() => [
|
||||
{
|
||||
id: "01", title: "Basic Website", description: "A clean, responsive website built with HTML, CSS, and JavaScript. Demonstrates foundational web design principles and user-centered layout approach.", imageSrc: "http://img.b2bpic.net/free-vector/hotel-landing-page-template-with-photo_23-2148893460.jpg", imageAlt: "responsive website design desktop mobile"
|
||||
},
|
||||
{
|
||||
id: "02", title: "Mobile App Prototype", description: "A comprehensive mobile interface prototype designed in Figma. Showcases UI/UX research, wireframing, and interactive prototyping skills.", imageSrc: "http://img.b2bpic.net/free-vector/workout-tracker-app-template_52683-44294.jpg", imageAlt: "mobile app ui prototype design"
|
||||
}
|
||||
], []);
|
||||
|
||||
const skillsFeatures = React.useMemo(() => [
|
||||
{
|
||||
id: "01", title: "UI Design", description: "Crafting intuitive interfaces with attention to visual hierarchy, accessibility, and user experience principles.", imageSrc: "http://img.b2bpic.net/free-photo/circuit-board-close-up-with-different-connections_23-2149174342.jpg", imageAlt: "ui design interface dashboard application"
|
||||
},
|
||||
{
|
||||
id: "02", title: "UX Research", description: "Conducting user research, creating personas, and developing evidence-based design strategies.", imageSrc: "http://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-drawings-new-ideas_176420-1670.jpg", imageAlt: "ux research user testing workshop"
|
||||
},
|
||||
{
|
||||
id: "03", title: "Brand Identity", description: "Developing comprehensive brand systems including logos, typography, and visual guidelines.", imageSrc: "http://img.b2bpic.net/free-vector/gradient-brand-manual-presentation_23-2149853441.jpg", imageAlt: "brand identity logo design guideline"
|
||||
},
|
||||
{
|
||||
id: "04", title: "Motion Design", description: "Creating smooth animations and interactions that enhance user engagement and product delight.", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimal-technology-infographic-template_23-2149195721.jpg", imageAlt: "motion graphics animation design studio"
|
||||
}
|
||||
], []);
|
||||
|
||||
const products = React.useMemo(() => [
|
||||
{ id: "1", name: "Figma", price: "Design & Prototype", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-people-discussing-work_52683-101630.jpg", imageAlt: "figma design tool interface screenshot" },
|
||||
{ id: "2", name: "Adobe XD", price: "UI Mockups", imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-lifestyle_23-2149636247.jpg", imageAlt: "adobe xd ui design application" },
|
||||
{ id: "3", name: "Photoshop", price: "Image Editing", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-desk_23-2150440903.jpg", imageAlt: "adobe photoshop image editing interface" },
|
||||
{ id: "4", name: "Illustrator", price: "Vector Design", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-web-designer-vertical-business-card_23-2150395752.jpg", imageAlt: "adobe illustrator vector design tool" },
|
||||
{ id: "5", name: "After Effects", price: "Motion Graphics", imageSrc: "http://img.b2bpic.net/free-photo/young-programmer-engineer-writing-binary-code-data-terminal-window_482257-126472.jpg", imageAlt: "adobe after effects motion graphics" },
|
||||
{ id: "6", name: "GitHub", price: "Version Control", imageSrc: "http://img.b2bpic.net/free-photo/programming-background-with-html-text_23-2150040426.jpg", imageAlt: "github version control interface" }
|
||||
], []);
|
||||
|
||||
const footerColumns = React.useMemo(() => [
|
||||
{
|
||||
title: "Navigate", items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Work", href: "#work" },
|
||||
{ label: "Skills", href: "#skills" },
|
||||
{ label: "Contact", href: "#contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "LinkedIn", href: "https://www.linkedin.com/in/sharanya-sasmal/" },
|
||||
{ label: "GitHub", href: "https://github.com/Soulful-Sharanya116" },
|
||||
{ label: "Email", href: "#contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" }
|
||||
]
|
||||
}
|
||||
], []);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
@@ -25,34 +141,21 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
<MemoNavbar
|
||||
brandName="Sharanya Sasmal"
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Work", id: "work" },
|
||||
{ name: "Skills", id: "skills" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Resume", id: "resume" }
|
||||
]}
|
||||
navItems={navItems}
|
||||
button={{ text: "Let's Talk", href: "contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
<MemoHero
|
||||
tag="UI/UX & Graphic Designer"
|
||||
title="Sharanya Sasmal"
|
||||
description="Visual storyteller crafting digital experiences that captivate, inspire, and convert. Specializing in UI design, UX research, and brand identity that elevates digital presence."
|
||||
background={{ variant: "glowing-orb" }}
|
||||
testimonials={[
|
||||
{
|
||||
name: "Design Excellence", handle: "Creative Direction", testimonial: "Creating compelling visual narratives through thoughtful design", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-pensive-african-american-man-dressed-classic-brown-jacket-standing-studio-dark-background_613910-17787.jpg"
|
||||
}
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "View My Work", href: "work" },
|
||||
{ text: "Get In Touch", href: "contact" }
|
||||
]}
|
||||
testimonials={heroTestimonials}
|
||||
buttons={heroButtons}
|
||||
mediaAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
@@ -61,31 +164,19 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
<MemoAbout
|
||||
title="Designing Experiences That Matter"
|
||||
metrics={[
|
||||
{ icon: Sparkles, label: "Projects Completed", value: "2+" },
|
||||
{ icon: Zap, label: "Years of Experience", value: "3+" },
|
||||
{ icon: Award, label: "Design Disciplines", value: "8+" },
|
||||
{ icon: Heart, label: "Client Satisfaction", value: "100%" }
|
||||
]}
|
||||
metrics={metrics}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="work" data-section="work">
|
||||
<FeatureCardThree
|
||||
<MemoFeatureWork
|
||||
title="Featured Projects"
|
||||
description="A curated selection of design work showcasing my approach to creating impactful digital experiences."
|
||||
features={[
|
||||
{
|
||||
id: "01", title: "Basic Website", description: "A clean, responsive website built with HTML, CSS, and JavaScript. Demonstrates foundational web design principles and user-centered layout approach.", imageSrc: "http://img.b2bpic.net/free-vector/hotel-landing-page-template-with-photo_23-2148893460.jpg", imageAlt: "responsive website design desktop mobile"
|
||||
},
|
||||
{
|
||||
id: "02", title: "Mobile App Prototype", description: "A comprehensive mobile interface prototype designed in Figma. Showcases UI/UX research, wireframing, and interactive prototyping skills.", imageSrc: "http://img.b2bpic.net/free-vector/workout-tracker-app-template_52683-44294.jpg", imageAlt: "mobile app ui prototype design"
|
||||
}
|
||||
]}
|
||||
features={workFeatures}
|
||||
textboxLayout="default"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
animationType="slide-up"
|
||||
@@ -94,23 +185,10 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="skills" data-section="skills">
|
||||
<FeatureCardThree
|
||||
<MemoFeatureSkills
|
||||
title="Design Skills & Tools"
|
||||
description="A comprehensive toolkit of design software and methodologies used to create compelling visual experiences."
|
||||
features={[
|
||||
{
|
||||
id: "01", title: "UI Design", description: "Crafting intuitive interfaces with attention to visual hierarchy, accessibility, and user experience principles.", imageSrc: "http://img.b2bpic.net/free-photo/circuit-board-close-up-with-different-connections_23-2149174342.jpg", imageAlt: "ui design interface dashboard application"
|
||||
},
|
||||
{
|
||||
id: "02", title: "UX Research", description: "Conducting user research, creating personas, and developing evidence-based design strategies.", imageSrc: "http://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-drawings-new-ideas_176420-1670.jpg", imageAlt: "ux research user testing workshop"
|
||||
},
|
||||
{
|
||||
id: "03", title: "Brand Identity", description: "Developing comprehensive brand systems including logos, typography, and visual guidelines.", imageSrc: "http://img.b2bpic.net/free-vector/gradient-brand-manual-presentation_23-2149853441.jpg", imageAlt: "brand identity logo design guideline"
|
||||
},
|
||||
{
|
||||
id: "04", title: "Motion Design", description: "Creating smooth animations and interactions that enhance user engagement and product delight.", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimal-technology-infographic-template_23-2149195721.jpg", imageAlt: "motion graphics animation design studio"
|
||||
}
|
||||
]}
|
||||
features={skillsFeatures}
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
@@ -119,17 +197,10 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="tools" data-section="tools">
|
||||
<ProductCardOne
|
||||
<MemoProducts
|
||||
title="Tools & Software"
|
||||
description="The software suite I use to design, prototype, and deliver exceptional digital experiences."
|
||||
products={[
|
||||
{ id: "1", name: "Figma", price: "Design & Prototype", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-people-discussing-work_52683-101630.jpg", imageAlt: "figma design tool interface screenshot" },
|
||||
{ id: "2", name: "Adobe XD", price: "UI Mockups", imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-lifestyle_23-2149636247.jpg", imageAlt: "adobe xd ui design application" },
|
||||
{ id: "3", name: "Photoshop", price: "Image Editing", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-desk_23-2150440903.jpg", imageAlt: "adobe photoshop image editing interface" },
|
||||
{ id: "4", name: "Illustrator", price: "Vector Design", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-web-designer-vertical-business-card_23-2150395752.jpg", imageAlt: "adobe illustrator vector design tool" },
|
||||
{ id: "5", name: "After Effects", price: "Motion Graphics", imageSrc: "http://img.b2bpic.net/free-photo/young-programmer-engineer-writing-binary-code-data-terminal-window_482257-126472.jpg", imageAlt: "adobe after effects motion graphics" },
|
||||
{ id: "6", name: "GitHub", price: "Version Control", imageSrc: "http://img.b2bpic.net/free-photo/programming-background-with-html-text_23-2150040426.jpg", imageAlt: "github version control interface" }
|
||||
]}
|
||||
products={products}
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
@@ -138,7 +209,7 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="resume" data-section="resume">
|
||||
<ContactCenter
|
||||
<MemoContact
|
||||
tag="Professional Profile"
|
||||
title="Download My Resume"
|
||||
description="Get a comprehensive overview of my design experience, skills, and accomplishments. Available as PDF for your records."
|
||||
@@ -151,7 +222,7 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
<MemoContact
|
||||
tag="Let's Collaborate"
|
||||
title="Have a Project in Mind?"
|
||||
description="I'm always interested in hearing about new design challenges and opportunities to create exceptional digital experiences. Reach out to discuss your project."
|
||||
@@ -164,30 +235,8 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Navigate", items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Work", href: "#work" },
|
||||
{ label: "Skills", href: "#skills" },
|
||||
{ label: "Contact", href: "#contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "LinkedIn", href: "https://www.linkedin.com/in/sharanya-sasmal/" },
|
||||
{ label: "GitHub", href: "https://github.com/Soulful-Sharanya116" },
|
||||
{ label: "Email", href: "#contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
<MemoFooter
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2025 Sharanya Sasmal. All rights reserved. Designed with obsession. ✦"
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user