Compare commits
9 Commits
version_1_
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 44c2361eee | |||
|
|
d823141b4e | ||
| ca135912ea | |||
|
|
84edf07ee1 | ||
| f0ade289fe | |||
|
|
38a8c5fbd4 | ||
| fd62e02cca | |||
| ccfc27ebfe | |||
| 3d9af98004 |
@@ -4,8 +4,19 @@ import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import { StyleProvider } from "@/components/ui/StyleProvider";
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Moon, Sun } from 'lucide-react';
|
||||
|
||||
export default function Layout() {
|
||||
const [isLight, setIsLight] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isLight) {
|
||||
document.documentElement.classList.add('light');
|
||||
} else {
|
||||
document.documentElement.classList.remove('light');
|
||||
}
|
||||
}, [isLight]);
|
||||
const navItems = [
|
||||
{
|
||||
"name": "About", "href": "#about"
|
||||
@@ -41,6 +52,13 @@ export default function Layout() {
|
||||
text: "Contact Me", href: "#contact"}}
|
||||
navItems={navItems} />
|
||||
</SectionErrorBoundary>
|
||||
<button
|
||||
onClick={() => setIsLight(!isLight)}
|
||||
className="fixed bottom-6 right-6 z-50 p-3 rounded-full bg-primary-cta text-primary-cta-text shadow-lg hover:scale-110 transition-transform"
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
{isLight ? <Moon size={24} /> : <Sun size={24} />}
|
||||
</button>
|
||||
<main className="flex-grow">
|
||||
<Outlet />
|
||||
</main>
|
||||
|
||||
@@ -49,6 +49,18 @@
|
||||
--text-9xl: clamp(5.25rem, 7vw, 7rem);
|
||||
}
|
||||
|
||||
:root.light {
|
||||
--background: #ffffff;
|
||||
--card: #f5f5f5;
|
||||
--foreground: #0a0a0a;
|
||||
--primary-cta: #0a0a0a;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #e6e6e6;
|
||||
--secondary-cta-text: #0a0a0a;
|
||||
--accent: #737373;
|
||||
--background-accent: #e5e5e5;
|
||||
}
|
||||
|
||||
/* @typography/text-sizing/medium (mobile) */
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
|
||||
@@ -1,239 +1,33 @@
|
||||
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
|
||||
import HeroTiltedCards from '@/components/sections/hero/HeroTiltedCards';
|
||||
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
|
||||
import TeamDetailedCards from '@/components/sections/team/TeamDetailedCards';
|
||||
import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
|
||||
import { Database, Github, Linkedin, Terminal, Zap } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
|
||||
// files directly. Non-block content (wrappers, non-inlinable sections) is
|
||||
// preserved inline; extracted section blocks become <XSection/> refs.
|
||||
|
||||
export default function HomePage() {
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import AboutSection from './HomePage/sections/About';
|
||||
import FeaturesSection from './HomePage/sections/Features';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import TeamSection from './HomePage/sections/Team';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroTiltedCards
|
||||
tag="Software Engineer"
|
||||
title="Hi, I'm Muhammed Danish."
|
||||
description="Building scalable, high-performance software solutions for the modern digital era."
|
||||
primaryButton={{
|
||||
text: "View Projects",
|
||||
href: "#features",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contact",
|
||||
href: "#contact",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/panoramic-views-dubai-city-illuminated-neon-spectrum_23-2151305369.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301549.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637778.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-wheelchair-doing-maintenance-server-room-infrastructure_482257-124817.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-white-stationery-mock-up-against-black-background_23-2148052544.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutFeaturesSplit
|
||||
tag="Expertise"
|
||||
title="Passionate about clean code."
|
||||
description="I focus on architecting robust systems that solve complex real-world problems efficiently."
|
||||
items={[
|
||||
{
|
||||
icon: Terminal,
|
||||
title: "Full Stack",
|
||||
description: "Building end-to-end solutions.",
|
||||
},
|
||||
{
|
||||
icon: Database,
|
||||
title: "Scalable Data",
|
||||
description: "Managing complex database structures.",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Performance",
|
||||
description: "Optimizing for speed and reliability.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-african-american-person-smiling-working-his-living-room_482257-126267.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<AboutSection />
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Portfolio"
|
||||
title="Selected Projects"
|
||||
description="A collection of software projects demonstrating my skills and problem-solving abilities."
|
||||
items={[
|
||||
{
|
||||
title: "E-Commerce API",
|
||||
description: "High performance API for retail.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-working-dark-home-office-with-laptop_53876-138150.jpg",
|
||||
},
|
||||
{
|
||||
title: "Fintech Dashboard",
|
||||
description: "Real-time analytics engine.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/technology-circuit-processor-innovation-network-concept_53876-124253.jpg",
|
||||
},
|
||||
{
|
||||
title: "AI Image Generator",
|
||||
description: "Integrated LLM-based image creation tool.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637773.jpg",
|
||||
},
|
||||
{
|
||||
title: "Cloud Monitoring Tool",
|
||||
description: "Real-time resource tracking.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/community-cloud-storage-sync-secure_53876-124011.jpg",
|
||||
},
|
||||
{
|
||||
title: "Mobile Banking App",
|
||||
description: "Secure mobile financial platform.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalistic-home-workspace-design_23-2148991453.jpg",
|
||||
},
|
||||
{
|
||||
title: "Smart Logistics System",
|
||||
description: "Automated delivery pathing.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coffee-sticky-notes-near-digital-devices_23-2147929681.jpg",
|
||||
},
|
||||
{
|
||||
title: "DevOps Toolkit",
|
||||
description: "Automated deployment pipelines.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/developer-works-data-center-laptop_482257-76561.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FeaturesSection />
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsMediaCards
|
||||
tag="Impact"
|
||||
title="Measurable Results"
|
||||
description="Delivering software with real impact for users and businesses alike."
|
||||
metrics={[
|
||||
{
|
||||
value: "50+",
|
||||
title: "Projects Completed",
|
||||
description: "Successfully deployed software.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-enjoying-her-virtual-date_23-2149307272.jpg",
|
||||
},
|
||||
{
|
||||
value: "99.9%",
|
||||
title: "Uptime",
|
||||
description: "Ensuring reliability for critical systems.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/focus-laptop-used-by-engineers-coding-modern-data-center_482257-124889.jpg",
|
||||
},
|
||||
{
|
||||
value: "1M+",
|
||||
title: "Active Users",
|
||||
description: "Serving millions globally.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-network-communications-low-poly-plexus-design_1048-13390.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<MetricsSection />
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<TeamDetailedCards
|
||||
tag="Professional Journey"
|
||||
title="Experience"
|
||||
description="My professional path through software engineering."
|
||||
members={[
|
||||
{
|
||||
name: "Muhammed Danish",
|
||||
role: "Senior Engineer",
|
||||
description: "Expert in modern full-stack development and architectural design.",
|
||||
socialLinks: [
|
||||
{
|
||||
icon: Github,
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
icon: Linkedin,
|
||||
url: "#",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-young-bald-call-center-man-holding-pointing-with-hand-laptop-isolated-olive-green-with-copy-space_141793-76626.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TeamSection />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialTrustCard
|
||||
quote="Danish is a brilliant engineer. His technical depth and ability to solve impossible problems were instrumental to our success."
|
||||
rating={5}
|
||||
author="Sarah Jenkins, CTO at StartupTech"
|
||||
avatars={[
|
||||
{
|
||||
name: "Sarah J",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-young-multi-ethnic-men-standing-near-office-building_1262-17205.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mike R",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-cto-manager-using-pc-startup-office-implement-algorithms_482257-119009.jpg",
|
||||
},
|
||||
{
|
||||
name: "Anna W",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-finance-employment-female-successful-entrepreneurs-concept-confident-good-looking-female-office-manager-lady-white-jacket-smiling-looking-determined-win-case-court_1258-58834.jpg",
|
||||
},
|
||||
{
|
||||
name: "David K",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-solar-panels-plant-using-laptop-improve-solar-cells-efficiency_482257-119894.jpg",
|
||||
},
|
||||
{
|
||||
name: "Zoe L",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-home-office-desk-typing-laptop-keyboard_482257-101018.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Hire Me"
|
||||
text="Ready to bring your software ideas to life?"
|
||||
primaryButton={{
|
||||
text: "Get in Touch",
|
||||
href: "mailto:danish@example.com",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "View Github",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
42
src/pages/HomePage/sections/About.tsx
Normal file
42
src/pages/HomePage/sections/About.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "about" section.
|
||||
|
||||
import React from 'react';
|
||||
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
|
||||
import { Database, Github, Linkedin, Terminal, Zap } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
export default function AboutSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<ScrollReveal variant="slide-up" delay={0.1}>
|
||||
<AboutFeaturesSplit
|
||||
tag="Expertise"
|
||||
title="Passionate about clean code."
|
||||
description="I focus on architecting robust systems that solve complex real-world problems efficiently."
|
||||
items={[
|
||||
{
|
||||
icon: Terminal,
|
||||
title: "Full Stack",
|
||||
description: "Building end-to-end solutions.",
|
||||
},
|
||||
{
|
||||
icon: Database,
|
||||
title: "Scalable Data",
|
||||
description: "Managing complex database structures.",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Performance",
|
||||
description: "Optimizing for speed and reliability.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-african-american-person-smiling-working-his-living-room_482257-126267.jpg"
|
||||
/>
|
||||
</ScrollReveal>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
30
src/pages/HomePage/sections/Contact.tsx
Normal file
30
src/pages/HomePage/sections/Contact.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "contact" section.
|
||||
|
||||
import React from 'react';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
export default function ContactSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ScrollReveal variant="slide-up" delay={0.1}>
|
||||
<ContactCta
|
||||
tag="Hire Me"
|
||||
text="Ready to bring your software ideas to life?"
|
||||
primaryButton={{
|
||||
text: "Get in Touch",
|
||||
href: "mailto:danish@example.com",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "View Github",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</ScrollReveal>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
67
src/pages/HomePage/sections/Features.tsx
Normal file
67
src/pages/HomePage/sections/Features.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "features" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
export default function FeaturesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<ScrollReveal variant="slide-up" delay={0.1}>
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Portfolio"
|
||||
title="Selected Projects"
|
||||
description="A collection of software projects demonstrating my skills and problem-solving abilities."
|
||||
items={[
|
||||
{
|
||||
title: "E-Commerce API",
|
||||
description: "High performance API for retail.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-working-dark-home-office-with-laptop_53876-138150.jpg",
|
||||
},
|
||||
{
|
||||
title: "Fintech Dashboard",
|
||||
description: "Real-time analytics engine.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/technology-circuit-processor-innovation-network-concept_53876-124253.jpg",
|
||||
},
|
||||
{
|
||||
title: "AI Image Generator",
|
||||
description: "Integrated LLM-based image creation tool.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637773.jpg",
|
||||
},
|
||||
{
|
||||
title: "Cloud Monitoring Tool",
|
||||
description: "Real-time resource tracking.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/community-cloud-storage-sync-secure_53876-124011.jpg",
|
||||
},
|
||||
{
|
||||
title: "Mobile Banking App",
|
||||
description: "Secure mobile financial platform.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalistic-home-workspace-design_23-2148991453.jpg",
|
||||
},
|
||||
{
|
||||
title: "Smart Logistics System",
|
||||
description: "Automated delivery pathing.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coffee-sticky-notes-near-digital-devices_23-2147929681.jpg",
|
||||
},
|
||||
{
|
||||
title: "DevOps Toolkit",
|
||||
description: "Automated deployment pipelines.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/developer-works-data-center-laptop_482257-76561.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ScrollReveal>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
128
src/pages/HomePage/sections/Hero.tsx
Normal file
128
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import Button from "@/components/ui/Button";
|
||||
import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
const primaryButton = {
|
||||
text: "View Projects",
|
||||
href: "#features"
|
||||
};
|
||||
const secondaryButton = {
|
||||
text: "Contact",
|
||||
href: "#contact"
|
||||
};
|
||||
const items = [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/panoramic-views-dubai-city-illuminated-neon-spectrum_23-2151305369.jpg"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301549.jpg"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637778.jpg"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-wheelchair-doing-maintenance-server-room-infrastructure_482257-124817.jpg"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-white-stationery-mock-up-against-black-background_23-2148052544.jpg"
|
||||
}
|
||||
];
|
||||
|
||||
type MediaItem = { imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never };
|
||||
|
||||
interface HeroTiltedCardsProps {
|
||||
tag: string;
|
||||
title: string;
|
||||
description: string;
|
||||
primaryButton: { text: string; href: string };
|
||||
secondaryButton: { text: string; href: string };
|
||||
items: [MediaItem, MediaItem, MediaItem, MediaItem, MediaItem];
|
||||
}
|
||||
|
||||
import BorderGlow from "@/components/ui/BorderGlow";
|
||||
|
||||
const HeroInline = () => {
|
||||
const marqueeItems = [...items, ...items];
|
||||
const galleryStyles = [
|
||||
"-rotate-6 z-10 -translate-y-5",
|
||||
"rotate-6 z-20 translate-y-5 -ml-15",
|
||||
"-rotate-6 z-30 -translate-y-5 -ml-15",
|
||||
"rotate-6 z-40 translate-y-5 -ml-15",
|
||||
"-rotate-6 z-50 -translate-y-5 -ml-15",
|
||||
];
|
||||
|
||||
return (
|
||||
<section aria-label="Hero section" className="relative h-svh md:h-auto pt-25 pb-20 md:pt-30">
|
||||
<HeroBackgroundSlot />
|
||||
<div className="flex flex-col items-center gap-12 md:gap-15 w-full md:w-content-width mx-auto">
|
||||
<div className="flex flex-col items-center gap-3 w-content-width mx-auto text-center">
|
||||
<BorderGlow className="mb-1 w-fit rounded-full">
|
||||
<div className="px-3 py-1 text-sm card rounded-full w-fit">
|
||||
<p>{"Software Engineer"}</p>
|
||||
</div>
|
||||
</BorderGlow>
|
||||
|
||||
<TextAnimation
|
||||
text={"Hi, I'm Danish."}
|
||||
variant="fade"
|
||||
gradientText={true}
|
||||
tag="h1"
|
||||
className="md:max-w-8/10 text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center text-balance"
|
||||
/>
|
||||
|
||||
<TextAnimation
|
||||
text={"Building scalable, high-performance software solutions for the modern digital era."}
|
||||
variant="fade"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-balance"
|
||||
/>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
|
||||
<Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
|
||||
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ScrollReveal variant="fade-blur" delay={0.2} className="block md:hidden w-full overflow-hidden mask-padding-x">
|
||||
<div className="flex w-max animate-marquee-horizontal">
|
||||
{marqueeItems.map((item, index) => (
|
||||
<div key={index} className="shrink-0 w-[50vw] mr-5 aspect-4/5 p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden">
|
||||
<ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal variant="fade-blur" delay={0.2} className="hidden md:flex justify-center items-center w-full">
|
||||
<div className="flex items-center justify-center">
|
||||
{items.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={cls(
|
||||
"relative w-[23%] aspect-4/5 p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden shadow-lg transition-transform duration-500 ease-out hover:scale-110",
|
||||
galleryStyles[index]
|
||||
)}
|
||||
>
|
||||
<ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function HeroSection() {
|
||||
return (
|
||||
<div data-webild-section="hero" id="hero">
|
||||
<HeroInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
43
src/pages/HomePage/sections/Metrics.tsx
Normal file
43
src/pages/HomePage/sections/Metrics.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "metrics" section.
|
||||
|
||||
import React from 'react';
|
||||
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
export default function MetricsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<ScrollReveal variant="slide-up" delay={0.1}>
|
||||
<MetricsMediaCards
|
||||
tag="Impact"
|
||||
title="Measurable Results"
|
||||
description="Delivering software with real impact for users and businesses alike."
|
||||
metrics={[
|
||||
{
|
||||
value: "50+",
|
||||
title: "Projects Completed",
|
||||
description: "Successfully deployed software.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-enjoying-her-virtual-date_23-2149307272.jpg",
|
||||
},
|
||||
{
|
||||
value: "99.9%",
|
||||
title: "Uptime",
|
||||
description: "Ensuring reliability for critical systems.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/focus-laptop-used-by-engineers-coding-modern-data-center_482257-124889.jpg",
|
||||
},
|
||||
{
|
||||
value: "1M+",
|
||||
title: "Active Users",
|
||||
description: "Serving millions globally.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-network-communications-low-poly-plexus-design_1048-13390.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ScrollReveal>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
42
src/pages/HomePage/sections/Team.tsx
Normal file
42
src/pages/HomePage/sections/Team.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "team" section.
|
||||
|
||||
import React from 'react';
|
||||
import TeamDetailedCards from '@/components/sections/team/TeamDetailedCards';
|
||||
import { Database, Github, Linkedin, Terminal, Zap } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
export default function TeamSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<ScrollReveal variant="slide-up" delay={0.1}>
|
||||
<TeamDetailedCards
|
||||
tag="Professional Journey"
|
||||
title="Experience"
|
||||
description="My professional path through software engineering."
|
||||
members={[
|
||||
{
|
||||
name: "Muhammed Danish",
|
||||
role: "Senior Engineer",
|
||||
description: "Expert in modern full-stack development and architectural design.",
|
||||
socialLinks: [
|
||||
{
|
||||
icon: Github,
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
icon: Linkedin,
|
||||
url: "#",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-young-bald-call-center-man-holding-pointing-with-hand-laptop-isolated-olive-green-with-copy-space_141793-76626.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ScrollReveal>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
45
src/pages/HomePage/sections/Testimonials.tsx
Normal file
45
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "testimonials" section.
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<ScrollReveal variant="slide-up" delay={0.1}>
|
||||
<TestimonialTrustCard
|
||||
quote="Danish is a brilliant engineer. His technical depth and ability to solve impossible problems were instrumental to our success."
|
||||
rating={5}
|
||||
author="Sarah Jenkins, CTO at StartupTech"
|
||||
avatars={[
|
||||
{
|
||||
name: "Sarah J",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-young-multi-ethnic-men-standing-near-office-building_1262-17205.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mike R",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-cto-manager-using-pc-startup-office-implement-algorithms_482257-119009.jpg",
|
||||
},
|
||||
{
|
||||
name: "Anna W",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-finance-employment-female-successful-entrepreneurs-concept-confident-good-looking-female-office-manager-lady-white-jacket-smiling-looking-determined-win-case-court_1258-58834.jpg",
|
||||
},
|
||||
{
|
||||
name: "David K",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-solar-panels-plant-using-laptop-improve-solar-cells-efficiency_482257-119894.jpg",
|
||||
},
|
||||
{
|
||||
name: "Zoe L",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-home-office-desk-typing-laptop-keyboard_482257-101018.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ScrollReveal>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user