diff --git a/src/app/layout.tsx b/src/app/layout.tsx index c984df6..9bb8de5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,25 +1,18 @@ import type { Metadata } from "next"; -import { Halant } from "next/font/google"; +import { DM_Sans } from "next/font/google"; import { Inter } from "next/font/google"; -import { Lato } from "next/font/google"; import "./globals.css"; import { ServiceWrapper } from "@/components/ServiceWrapper"; import Tag from "@/tag/Tag"; -const halant = Halant({ - variable: "--font-halant", subsets: ["latin"], - weight: ["300", "400", "500", "600", "700"], +const dmSans = DM_Sans({ + variable: "--font-dm-sans", subsets: ["latin"], }); const inter = Inter({ variable: "--font-inter", subsets: ["latin"], }); -const lato = Lato({ - variable: "--font-lato", subsets: ["latin"], - weight: ["100", "300", "400", "700", "900"], -}); - export const metadata: Metadata = { title: "Khalil Rouabhi | Software Engineer & Data Scientist", description: "Master's degree holder specializing in AI, computer vision, IoT, and cloud solutions. View projects, skills, and experience in software engineering and data science.", keywords: "software engineer, data scientist, AI, machine learning, cloud computing, AWS, portfolio", metadataBase: new URL("https://khalil-rbh-portfolio.vercel.app"), alternates: { @@ -31,7 +24,8 @@ export const metadata: Metadata = { ], }, twitter: { - card: "summary_large_image", title: "Khalil Rouabhi | Software Engineer & Data Scientist", description: "Building intelligent systems with AI, computer vision, and cloud solutions.", images: ["https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/modern-ai-and-machine-learning-visualiza-1772858984214-2a9c1ecd.png"], + card: "summary_large_image", title: "Khalil Rouabhi | Software Engineer & Data Scientist", description: "Building intelligent systems with AI, computer vision, and cloud solutions.", images: [ + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/modern-ai-and-machine-learning-visualiza-1772858984214-2a9c1ecd.png"], }, robots: { index: true, @@ -47,9 +41,7 @@ export default function RootLayout({ return ( - + {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index 783b19f..c1a515c 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,7 +10,19 @@ import BlogCardThree from "@/components/sections/blog/BlogCardThree"; import MetricCardOne from "@/components/sections/metrics/MetricCardOne"; import ContactSplitForm from "@/components/sections/contact/ContactSplitForm"; import FooterBase from "@/components/sections/footer/FooterBase"; -import { Sparkles, Zap, Award, Briefcase, TrendingUp, Github, Code, Brain, Cloud, Smartphone, Wrench } from "lucide-react"; +import { + Sparkles, + Zap, + Award, + Briefcase, + TrendingUp, + Github, + Code, + Brain, + Cloud, + Smartphone, + Wrench, +} from "lucide-react"; export default function LandingPage() { return ( @@ -59,15 +71,20 @@ export default function LandingPage() { buttonAnimation="slide-up" mediaItems={[ { - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/modern-ai-and-machine-learning-visualiza-1772858984214-2a9c1ecd.png", imageAlt: "AI and machine learning visualization"}, + imageSrc: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/modern-ai-and-machine-learning-visualiza-1772858984214-2a9c1ecd.png", imageAlt: "AI and machine learning visualization"}, { - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/cloud-computing-infrastructure-diagram-w-1772858985400-2b841c71.png", imageAlt: "Cloud computing infrastructure"}, + imageSrc: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/cloud-computing-infrastructure-diagram-w-1772858985400-2b841c71.png", imageAlt: "Cloud computing infrastructure"}, { - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/data-science-analytics-dashboard-with-ch-1772858985022-bafb1819.png", imageAlt: "Data science analytics dashboard"}, + imageSrc: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/data-science-analytics-dashboard-with-ch-1772858985022-bafb1819.png", imageAlt: "Data science analytics dashboard"}, { - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/internet-of-things-iot-device-network-wi-1772858985290-f81ee707.png", imageAlt: "IoT device network"}, + imageSrc: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/internet-of-things-iot-device-network-wi-1772858985290-f81ee707.png", imageAlt: "IoT device network"}, { - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/computer-vision-and-image-recognition-sy-1772858985045-9dc5e21e.png", imageAlt: "Computer vision system"}, + imageSrc: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/computer-vision-and-image-recognition-sy-1772858985045-9dc5e21e.png", imageAlt: "Computer vision system"}, ]} /> @@ -96,22 +113,33 @@ export default function LandingPage() { tagAnimation="slide-up" features={[ { - title: "Programming & Databases", description: "Python, Java, JavaScript, SQL, MySQL, NoSQL databases with expertise in data preprocessing and API development.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/programming-languages-and-database-visua-1772858984951-1ee8a4e3.png", imageAlt: "Programming languages and databases", buttonIcon: Code, + title: "Programming & Databases", description: + "Python, Java, JavaScript, SQL, MySQL, NoSQL databases with expertise in data preprocessing and API development.", imageSrc: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/programming-languages-and-database-visua-1772858984951-1ee8a4e3.png", imageAlt: "Programming languages and databases", buttonIcon: Code, }, { - title: "AI & Machine Learning", description: "Scikit-learn, Pandas, TensorFlow, YOLOv8, CNN, OCR for building predictive models and computer vision applications.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/machine-learning-and-ai-tools-visualizat-1772858984883-60619b31.png", imageAlt: "Machine learning and AI tools", buttonIcon: Brain, + title: "AI & Machine Learning", description: + "Scikit-learn, Pandas, TensorFlow, YOLOv8, CNN, OCR for building predictive models and computer vision applications.", imageSrc: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/machine-learning-and-ai-tools-visualizat-1772858984883-60619b31.png", imageAlt: "Machine learning and AI tools", buttonIcon: Brain, }, { - title: "Cloud & Infrastructure", description: "AWS services including Lambda, DynamoDB, CloudWatch for building scalable, serverless applications and IoT solutions.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/aws-cloud-services-visualization-with-la-1772858985229-ff739ba5.png", imageAlt: "Cloud computing and AWS services", buttonIcon: Cloud, + title: "Cloud & Infrastructure", description: + "AWS services including Lambda, DynamoDB, CloudWatch for building scalable, serverless applications and IoT solutions.", imageSrc: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/aws-cloud-services-visualization-with-la-1772858985229-ff739ba5.png", imageAlt: "Cloud computing and AWS services", buttonIcon: Cloud, }, { - title: "Web & Mobile Development", description: "Django, React, Flutter, Dart, HTML, CSS for building responsive web applications and mobile solutions.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/web-and-mobile-development-frameworks-in-1772858985111-4cdf5238.png", imageAlt: "Web and mobile development frameworks", buttonIcon: Smartphone, + title: "Web & Mobile Development", description: + "Django, React, Flutter, Dart, HTML, CSS for building responsive web applications and mobile solutions.", imageSrc: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/web-and-mobile-development-frameworks-in-1772858985111-4cdf5238.png", imageAlt: "Web and mobile development frameworks", buttonIcon: Smartphone, }, { - title: "DevOps & Tools", description: "Docker, Hadoop, VMware, Jira, Packet Tracer, Wireshark for infrastructure management and network analysis.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/devops-and-infrastructure-tools-includin-1772858985097-5a6ff7ec.png", imageAlt: "DevOps and infrastructure tools", buttonIcon: Wrench, + title: "DevOps & Tools", description: + "Docker, Hadoop, VMware, Jira, Packet Tracer, Wireshark for infrastructure management and network analysis.", imageSrc: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/devops-and-infrastructure-tools-includin-1772858985097-5a6ff7ec.png", imageAlt: "DevOps and infrastructure tools", buttonIcon: Wrench, }, { - title: "Design & Documentation", description: "UML diagrams, Merise methodology, LaTeX documentation, Power BI analytics for professional system design and reporting.", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Design and documentation tools", buttonIcon: Code, + title: "Design & Documentation", description: + "UML diagrams, Merise methodology, LaTeX documentation, Power BI analytics for professional system design and reporting.", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Design and documentation tools", buttonIcon: Code, }, ]} textboxLayout="default" @@ -128,13 +156,17 @@ export default function LandingPage() { tagAnimation="slide-up" products={[ { - id: "fleetguard", name: "FleetGuard", price: "Driver Behavior AI", variant: "Real-time Detection • IoT • YOLOv8", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/fleetguard-driver-monitoring-system-inte-1772858985778-c21b624e.png", imageAlt: "FleetGuard driver monitoring system"}, + id: "fleetguard", name: "FleetGuard", price: "Driver Behavior AI", variant: "Real-time Detection • IoT • YOLOv8", imageSrc: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/fleetguard-driver-monitoring-system-inte-1772858985778-c21b624e.png", imageAlt: "FleetGuard driver monitoring system"}, { - id: "kms", name: "KMS Cyber Defense", price: "Threat Detection", variant: "IoT Security • ML Models • Real-time Analytics", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/kms-cyber-attack-detection-system-interf-1772858985933-b4c4b5d1.png", imageAlt: "KMS cyber attack detection system"}, + id: "kms", name: "KMS Cyber Defense", price: "Threat Detection", variant: "IoT Security • ML Models • Real-time Analytics", imageSrc: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/kms-cyber-attack-detection-system-interf-1772858985933-b4c4b5d1.png", imageAlt: "KMS cyber attack detection system"}, { - id: "handwriting", name: "Handwritten Text Recognition", price: "Deep Learning System", variant: "CNN • OCR • Image Processing", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/handwritten-text-recognition-system-show-1772858985480-51cf99cb.png", imageAlt: "Handwritten text recognition with CNN"}, + id: "handwriting", name: "Handwritten Text Recognition", price: "Deep Learning System", variant: "CNN • OCR • Image Processing", imageSrc: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/handwritten-text-recognition-system-show-1772858985480-51cf99cb.png", imageAlt: "Handwritten text recognition with CNN"}, { - id: "iot-aws", name: "IoT AWS Cloud Platform", price: "Cloud Infrastructure", variant: "DynamoDB • Lambda • CloudWatch", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/aws-iot-cloud-platform-showing-dynamodb--1772858984982-a9450a23.png", imageAlt: "AWS IoT data storage and monitoring"}, + id: "iot-aws", name: "IoT AWS Cloud Platform", price: "Cloud Infrastructure", variant: "DynamoDB • Lambda • CloudWatch", imageSrc: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/aws-iot-cloud-platform-showing-dynamodb--1772858984982-a9450a23.png", imageAlt: "AWS IoT data storage and monitoring"}, ]} gridVariant="uniform-all-items-equal" animationType="slide-up" @@ -152,11 +184,20 @@ export default function LandingPage() { tagAnimation="slide-up" blogs={[ { - id: "exp-1", category: "Freelancing", title: "Independent Software Engineer", excerpt: "Building custom solutions for clients using Python, AWS, and machine learning. Focus on delivering scalable, intelligent systems.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/freelance-software-engineering-workspace-1772858985331-8491e846.png", imageAlt: "Freelance software engineering work", authorName: "Current", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/professional-headshot-portrait-of-a-youn-1772858983636-c5c4bba6.png", date: "Jan 2025 - Present"}, + id: "exp-1", category: "Freelancing", title: "Independent Software Engineer", excerpt: + "Building custom solutions for clients using Python, AWS, and machine learning. Focus on delivering scalable, intelligent systems.", imageSrc: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/freelance-software-engineering-workspace-1772858985331-8491e846.png", imageAlt: "Freelance software engineering work", authorName: "Current", authorAvatar: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/professional-headshot-portrait-of-a-youn-1772858983636-c5c4bba6.png", date: "Jan 2025 - Present"}, { - id: "exp-2", category: "Internship", title: "Data Science Intern at Prodigy Infotech", excerpt: "Worked on data science projects using Python, Scikit-learn, and Pandas. Focused on data analysis, model development, and AWS deployment.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/professional-data-science-internship-env-1772858985699-ae712ad4.png", imageAlt: "Data science internship experience", authorName: "Completed", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/professional-headshot-portrait-of-a-youn-1772858983636-c5c4bba6.png", date: "Aug 2024 - Sep 2024"}, + id: "exp-2", category: "Internship", title: "Data Science Intern at Prodigy Infotech", excerpt: + "Worked on data science projects using Python, Scikit-learn, and Pandas. Focused on data analysis, model development, and AWS deployment.", imageSrc: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/professional-data-science-internship-env-1772858985699-ae712ad4.png", imageAlt: "Data science internship experience", authorName: "Completed", authorAvatar: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/professional-headshot-portrait-of-a-youn-1772858983636-c5c4bba6.png", date: "Aug 2024 - Sep 2024"}, { - id: "exp-3", category: "Education", title: "Master's Degree - Data Science & AI", excerpt: "Advanced studies in Data Science and Intelligent Systems. Specialized in AI algorithms, machine learning, and system design.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/master-s-degree-in-data-science-and-inte-1772858984359-0df452bf.png", imageAlt: "Master's degree in data science", authorName: "Graduated", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/professional-headshot-portrait-of-a-youn-1772858983636-c5c4bba6.png", date: "Sep 2023 - Jun 2025"}, + id: "exp-3", category: "Education", title: "Master's Degree - Data Science & AI", excerpt: + "Advanced studies in Data Science and Intelligent Systems. Specialized in AI algorithms, machine learning, and system design.", imageSrc: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/master-s-degree-in-data-science-and-inte-1772858984359-0df452bf.png", imageAlt: "Master's degree in data science", authorName: "Graduated", authorAvatar: + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbPEe86WOehZZj9p8ov5OeeYAA/professional-headshot-portrait-of-a-youn-1772858983636-c5c4bba6.png", date: "Sep 2023 - Jun 2025"}, ]} animationType="slide-up" textboxLayout="default" @@ -233,8 +274,10 @@ export default function LandingPage() { title: "Connect", items: [ { label: "GitHub", href: "https://github.com/khalilrbh" }, { label: "LinkedIn", href: "https://linkedin.com" }, - { label: "Portfolio", href: "https://khalil-rbh-portfolio.vercel.app" }, - { label: "Email", href: "mailto:mohamed.rouabhi@univ-constantine2.dz" }, + { + label: "Portfolio", href: "https://khalil-rbh-portfolio.vercel.app"}, + { + label: "Email", href: "mailto:mohamed.rouabhi@univ-constantine2.dz"}, ], }, { diff --git a/src/app/styles/base.css b/src/app/styles/base.css index 38cd8a1..c719d19 100644 --- a/src/app/styles/base.css +++ b/src/app/styles/base.css @@ -11,7 +11,7 @@ html { body { background-color: var(--background); color: var(--foreground); - font-family: var(--font-lato), sans-serif; + font-family: var(--font-inter), sans-serif; position: relative; min-height: 100vh; overscroll-behavior: none; @@ -24,5 +24,5 @@ h3, h4, h5, h6 { - font-family: var(--font-lato), sans-serif; + font-family: var(--font-dm-sans), sans-serif; } diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css index b7afc67..b168257 100644 --- a/src/app/styles/variables.css +++ b/src/app/styles/variables.css @@ -10,15 +10,15 @@ --accent: #ffffff; --background-accent: #ffffff; */ - --background: #f5f4ef; - --card: #dad6cd; - --foreground: #2a2928; - --primary-cta: #2a2928; + --background: #f6f0e9; + --card: #efe7dd; + --foreground: #2b180a; + --primary-cta: #2b180a; --primary-cta-text: #f5f4ef; - --secondary-cta: #ecebea; + --secondary-cta: #efe7dd; --secondary-cta-text: #2a2928; - --accent: #ffffff; - --background-accent: #c6b180; + --accent: #94877c; + --background-accent: #afa094; /* text sizing - set by ThemeProvider */ /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);