241 lines
12 KiB
TypeScript
241 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import { AlertTriangle, CheckCircle, Code, Database, Network, TrendingUp, Zap, Lightbulb, Bug, Minimize, Rocket } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="floatingGradient"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Thinking", id: "thinking"},
|
|
{
|
|
name: "Projects", id: "projects"},
|
|
{
|
|
name: "Experiments", id: "experiments"},
|
|
{
|
|
name: "Growth", id: "growth"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="Tuhin Ahmed"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
background={{
|
|
variant: "plain"}}
|
|
title="Tuhin Ahmed"
|
|
description="I build small systems, learn by doing, and improve through real-world problem solving. Focused on practical development, clarity of thinking, and consistent improvement over time."
|
|
buttons={[
|
|
{
|
|
text: "View Work", href: "#projects"},
|
|
{
|
|
text: "Contact", href: "#contact"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/abstract-fabric-moles-texture_1194-6456.jpg"
|
|
imageAlt="Abstract coding environment"
|
|
/>
|
|
</div>
|
|
|
|
<div id="thinking" data-section="thinking">
|
|
<FeatureCardTwentySix
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "How I Start a Project", description: "I begin with a clear problem definition, breaking it down into minimal, testable components to validate assumptions early and often.", imageSrc: "http://img.b2bpic.net/free-vector/infographic-template-design_1262-1300.jpg", imageAlt: "Abstract diagram of project initiation flow", buttonIcon: Lightbulb,
|
|
},
|
|
{
|
|
title: "How I Debug Problems", description: "Systematic isolation is key. I narrow down the scope, reproduce consistently, and use tooling (logs, debuggers) to pinpoint the root cause, avoiding guesswork.", imageSrc: "http://img.b2bpic.net/free-photo/programming-background-concept_23-2150170131.jpg", imageAlt: "Conceptual image of code debugging", buttonIcon: Bug,
|
|
},
|
|
{
|
|
title: "How I Avoid Overengineering", description: "I prioritize simplicity and known solutions. Complexity is only introduced when justified by clear functional requirements or scaling needs, never for its own sake.", imageSrc: "http://img.b2bpic.net/free-vector/infographic-template-design_1262-573.jpg", imageAlt: "Simplified architectural blocks diagram", buttonIcon: Minimize,
|
|
},
|
|
{
|
|
title: "How I Decide What to Build Next", description: "My focus is on impact and learning. I choose projects that solve real problems, expand my technical horizons, or contribute to existing systems meaningfully.", imageSrc: "http://img.b2bpic.net/free-photo/hand-placing-wooden-blocks_176474-7064.jpg", imageAlt: "Decision-making flowchart for projects", buttonIcon: Rocket,
|
|
},
|
|
]}
|
|
title="My Engineering Mindset"
|
|
description="A direct, honest record of my approach to building and problem-solving, focused on practical outcomes and continuous improvement."
|
|
/>
|
|
</div>
|
|
|
|
<div id="projects" data-section="projects">
|
|
<ProductCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "project-1", name: "Distributed Cache System", price: "High-throughput, low-latency in-memory cache.", imageSrc: "http://img.b2bpic.net/free-photo/electronic-circuit-board-shallow-dof_1398-119.jpg", imageAlt: "Distributed Cache System dashboard"},
|
|
{
|
|
id: "project-2", name: "Serverless API Gateway", price: "Scalable and cost-effective API routing with authentication.", imageSrc: "http://img.b2bpic.net/free-photo/hand-touching-tablet_1134-426.jpg", imageAlt: "Serverless API Gateway diagram"},
|
|
{
|
|
id: "project-3", name: "Real-time Data Dashboard", price: "Visualizing streaming data with custom charting components.", imageSrc: "http://img.b2bpic.net/free-photo/ai-powered-device-concept_23-2151924166.jpg", imageAlt: "Real-time Data Dashboard screenshot"},
|
|
{
|
|
id: "project-4", name: "Task Management CLI Tool", price: "A command-line interface for personal productivity workflows.", imageSrc: "http://img.b2bpic.net/free-photo/system-administrator-apartment-office-types-code-into-pc-developing-software_482257-125929.jpg", imageAlt: "Task Management CLI Tool interface"},
|
|
{
|
|
id: "project-5", name: "E-commerce Microservice", price: "Implementing order processing and inventory management.", imageSrc: "http://img.b2bpic.net/free-photo/professional-person-engaging-with-ai-chatbot-computer-screen_482257-126263.jpg", imageAlt: "E-commerce Microservice architecture diagram"},
|
|
{
|
|
id: "project-6", name: "Developer Blog Platform", price: "A self-hosted, markdown-driven content publishing system.", imageSrc: "http://img.b2bpic.net/free-photo/woman-engaging-with-intelligent-ai-chatbot-complete-work-related-tasks_482257-119190.jpg", imageAlt: "Developer Blog Platform interface"},
|
|
]}
|
|
title="Meaningful Projects"
|
|
description="Detailed explorations of technical decisions, challenges, and lessons learned from real-world problems. Each project is a deep dive into practical development."
|
|
/>
|
|
</div>
|
|
|
|
<div id="experiments" data-section="experiments">
|
|
<MetricCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "experiment-1", value: "Built & Integrated", title: "WebAssembly Performance", description: "Testing WASM for client-side image processing.", icon: Zap,
|
|
},
|
|
{
|
|
id: "experiment-2", value: "In Progress", title: "Rust Microservice PoC", description: "Exploring Rust for high-performance backend services.", icon: Code,
|
|
},
|
|
{
|
|
id: "experiment-3", value: "Broken", title: "Custom ORM Implementation", description: "Building a lightweight ORM for a personal project (due to complexity).", icon: Database,
|
|
},
|
|
{
|
|
id: "experiment-4", value: "Built & Documented", title: "Graph Database Exploration", description: "Prototyping knowledge graph storage with Neo4j.", icon: Network,
|
|
},
|
|
]}
|
|
title="Learning Through Experimentation"
|
|
description="A transparent look at my smaller builds, explorations, and the lessons, successes, and failures along the way. Growth comes from trying new things."
|
|
/>
|
|
</div>
|
|
|
|
<div id="growth" data-section="growth">
|
|
<AboutMetric
|
|
useInvertedBackground={false}
|
|
title="My Learning Progression"
|
|
metrics={[
|
|
{
|
|
icon: AlertTriangle,
|
|
label: "Early Project Struggles", value: "Dependency hell and spaghetti code"},
|
|
{
|
|
icon: CheckCircle,
|
|
label: "Current Understanding", value: "Modular design and clean architecture"},
|
|
{
|
|
icon: TrendingUp,
|
|
label: "Future Approach", value: "Test-driven development and robust CI/CD"},
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="tech-stack" data-section="tech-stack">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"React", "Node.js", "TypeScript", "Python", "Docker", "AWS", "PostgreSQL"]}
|
|
title="Key Technologies & Tools"
|
|
description="Proficiencies across various technologies, frameworks, and development tools critical for modern engineering."
|
|
speed={40}
|
|
showCard={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "How do you approach new technologies?", content: "I start with the fundamentals, build small prototypes to understand core concepts, and integrate gradually, documenting my learning process."},
|
|
{
|
|
id: "faq-2", title: "What's your stance on code quality?", content: "Code should be clean, readable, and maintainable. I prioritize clear logic, consistent style, and thorough testing to ensure robustness."},
|
|
{
|
|
id: "faq-3", title: "How do you handle project setbacks?", content: "I view setbacks as learning opportunities. My process involves root cause analysis, identifying trade-offs, and iterating on solutions with a clear plan to move forward."},
|
|
]}
|
|
sideTitle="Common Questions About My Work"
|
|
sideDescription="Insights into my process, motivations, and collaborative approach."
|
|
faqsAnimation="slide-up"
|
|
textPosition="left"
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "plain"}}
|
|
text="Open to building and learning through real projects. If you have an interesting challenge or a team to join, let's connect and create something impactful."
|
|
buttons={[
|
|
{
|
|
text: "Email Tuhin", href: "mailto:tuhin.ahmed@example.com"},
|
|
{
|
|
text: "GitHub Profile", href: "https://github.com/tuhinahmed"},
|
|
{
|
|
text: "LinkedIn Profile", href: "https://linkedin.com/in/tuhinahmed"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "Home", href: "#hero"},
|
|
{
|
|
label: "Thinking", href: "#thinking"},
|
|
{
|
|
label: "Projects", href: "#projects"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Experiments", href: "#experiments"},
|
|
{
|
|
label: "Growth", href: "#growth"},
|
|
{
|
|
label: "Contact", href: "#contact"},
|
|
],
|
|
},
|
|
]}
|
|
logoText="Tuhin Ahmed"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|