responsive

Author: rayraycodes

src/components/Navigation.tsx

@@ -73,8 +73,13 @@ export function Navigation({ inline = false }: NavigationProps) {
     return (
       <nav
         ref={inlineNavContainerRef}
-        className="flex flex-nowrap items-center justify-center gap-2 sm:gap-4 overflow-x-auto scroll-smooth"
+        className="flex flex-nowrap items-center justify-center gap-2 sm:gap-3 md:gap-4 overflow-x-auto scroll-smooth pb-2 -mb-2 w-full"
         aria-label="Main navigation"
+        style={{ 
+          scrollbarWidth: 'none', 
+          msOverflowStyle: 'none',
+          WebkitOverflowScrolling: 'touch'
+        }}
       >
         {navLinks.map((link: { path: string; label: string }, index: number) => {
           const isActive = location.pathname === link.path;
@@ -83,7 +88,7 @@ export function Navigation({ inline = false }: NavigationProps) {
               key={link.path}
               ref={(el) => { tabRefs.current[index] = el; }}
               to={link.path}
-              className="relative px-3 sm:px-6 py-3 transition-colors group rounded-lg flex-shrink-0 text-center whitespace-nowrap"
+              className="relative px-3 sm:px-5 md:px-6 py-2.5 sm:py-3 transition-colors group rounded-lg flex-shrink-0 text-center whitespace-nowrap min-h-[44px] flex items-center justify-center"
             >
               {isActive && (
                 <motion.div
@@ -95,8 +100,8 @@ export function Navigation({ inline = false }: NavigationProps) {
               <span
                 className={`relative z-10 font-medium transition-all ${
                   isActive
-                    ? 'text-gray-900 font-semibold opacity-100 text-xl'
-                    : 'text-gray-600 opacity-50 group-hover:text-gray-900 group-hover:opacity-100 text-base'
+                    ? 'text-gray-900 font-semibold opacity-100 text-lg sm:text-xl'
+                    : 'text-gray-600 opacity-50 group-hover:text-gray-900 group-hover:opacity-100 text-sm sm:text-base'
                 }`}
               >
                 {link.label}
@@ -129,6 +134,10 @@ export function Navigation({ inline = false }: NavigationProps) {
           <div 
             ref={topNavContainerRef}
             className="hidden lg:flex items-center justify-center gap-2 xl:gap-4 flex-1 flex-nowrap overflow-x-auto scroll-smooth"
+            style={{ 
+              scrollbarWidth: 'none', 
+              msOverflowStyle: 'none'
+            }}
           >
             {navLinks.map((link: { path: string; label: string }, index: number) => {
               const isActive = location.pathname === link.path;
@@ -183,9 +192,9 @@ export function Navigation({ inline = false }: NavigationProps) {
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
           exit={{ opacity: 0, y: -20 }}
-          className="lg:hidden bg-white border-t border-black/10 shadow-lg"
+          className="lg:hidden bg-white border-t border-gray-200 shadow-lg"
         >
-          <div className="w-full max-w-[90rem] mx-auto px-4 sm:px-6 py-5 space-y-2 text-center">
+          <div className="w-full max-w-[90rem] mx-auto px-4 sm:px-6 py-4 sm:py-5 space-y-2 text-center">
             {navLinks.map((link: { path: string; label: string }) => {
               const isActive = location.pathname === link.path;
               return (

src/components/pages/About.tsx

@@ -5,8 +5,8 @@ import contentData from '../../data/content';
 
 export function About() {
   return (
-    <div className="min-h-screen pt-24 lg:pt-32">
-      <div className="max-w-3xl mx-auto px-6 lg:px-12 pt-8 lg:pt-12 pb-24 lg:pb-32">
+    <div className="min-h-screen pt-20 sm:pt-24 lg:pt-32">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-12 pt-6 sm:pt-8 lg:pt-12 pb-16 sm:pb-24 lg:pb-32">
         {/* Main Content */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}

src/components/pages/Home.tsx

@@ -4,8 +4,8 @@ import { Navigation } from '../Navigation';
 
 export function Home() {
   return (
-    <div className="w-full flex flex-col items-center justify-center bg-background py-24">
-      <div className="max-w-4xl mx-auto px-6 lg:px-12">
+    <div className="w-full flex flex-col items-center justify-center bg-background py-12 sm:py-16 md:py-24">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-12">
         {/* Person Image Section */}
         <motion.div
           initial={{ opacity: 0, y: -20 }}
@@ -16,8 +16,8 @@ export function Home() {
           <img 
             src={getImageUrl("src/assets/ray.png")} 
             alt="Regan Maharjan"
-            className="!h-[20vh] w-auto mx-auto rounded-full object-contain"
-            style={{ height: '30vh' }}
+            className="w-auto mx-auto rounded-full object-contain"
+            style={{ height: 'clamp(200px, 30vh, 400px)' }}
           />
         </motion.div>
 
@@ -28,10 +28,10 @@ export function Home() {
           transition={{ duration: 0.6, delay: 0.1 }}
           className="text-center"
         >
-          <h1 className="text-4xl md:text-5xl lg:text-6xl font-normal tracking-tight mb-6 text-gray-900">
+          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-normal tracking-tight mb-4 sm:mb-6 text-gray-900">
             Hello, welcome here,
           </h1>
-          <p className="text-2xl md:text-3xl lg:text-4xl font-normal text-gray-700 mb-12 sm:mb-16">
+          <p className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-normal text-gray-700 mb-8 sm:mb-12 md:mb-16">
             Namaste (Greetings!)
           </p>
           <Navigation inline />

src/styles/globals.css

@@ -199,6 +199,19 @@ html {
   scroll-behavior: smooth;
 }
 
+/* Mobile-specific scrollbar hiding */
+@media (max-width: 768px) {
+  /* Hide scrollbars on mobile for better UX */
+  .overflow-x-auto::-webkit-scrollbar {
+    display: none;
+  }
+  
+  .overflow-x-auto {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
 /* Apple-inspired utility classes */
 @layer utilities {
   .glassmorphism {