feat: implement mobile restriction for dev mode, update contact form timestamps, and make portfolio fully dynamic via Admin Panel

Author: Abdul-Rasheed-Talal

CONTACT_FORM_SETUP.md

@@ -27,7 +27,12 @@ function doPost(e) {
     rowData[1] = e.parameter.email || '';
     rowData[2] = e.parameter.subject || '';
     rowData[3] = e.parameter.message || '';
-    rowData[4] = e.parameter.timestamp || new Date().toISOString();
+    
+    // Format timestamp for Pakistan (GMT+5)
+    // Format: Wed, 02 - 2026, 3:00 PM
+    var now = new Date();
+    var formattedDate = Utilities.formatDate(now, "GMT+5", "EEE, dd - yyyy, h:mm a");
+    rowData[4] = formattedDate;
 
     // Add row to sheet
     sheet.appendRow(rowData);

client/public/admin/config.yml

@@ -27,7 +27,7 @@ collections:
               - label: "Technologies"
                 name: "technologies"
                 widget: "list"
-                field: { label: "Tech", name: "tech", widget: "string" }
+                field: { label: "Tech", widget: "string" }
               - { label: "Live Demo URL", name: "liveUrl", widget: "string", required: false }
               - { label: "GitHub URL", name: "githubUrl", widget: "string", required: false }
               - label: "Stats"
@@ -122,6 +122,16 @@ collections:
           - { label: "Availability Text", name: "availabilityText", widget: "string", default: "Seeking Internship Opportunities" }
           - { label: "Hero Image", name: "image", widget: "image" }
           - { label: "Resume URL", name: "resumeUrl", widget: "string" }
+          - label: "Typing Animations"
+            name: "typingTexts"
+            widget: "list"
+            field: { label: "Text", widget: "string" }
+          - label: "Navigation Items"
+            name: "navItems"
+            widget: "list"
+            fields:
+              - { label: "Label", name: "label", widget: "string" }
+              - { label: "Anchor (e.g. #home)", name: "href", widget: "string" }
           - label: "Stats"
             name: "stats"
             widget: "object"
@@ -134,8 +144,22 @@ collections:
         label: "Story"
         file: "client/src/content/about.json"
         fields:
+          - { label: "Full Name", name: "name", widget: "string" }
+          - { label: "Professional Title", name: "title", widget: "string" }
+          - { label: "Location", name: "location", widget: "string" }
+          - { label: "Passion Statement", name: "passion", widget: "string" }
           - { label: "Bio", name: "bio", widget: "text" }
           - { label: "Available for Hire", name: "availableForHire", widget: "boolean", default: true }
+          - label: "Badges"
+            name: "badges"
+            widget: "list"
+            fields:
+              - { label: "Label", name: "text", widget: "string" }
+              - label: "Icon"
+                name: "icon"
+                widget: "select"
+                options: ["Coffee", "Heart", "Zap", "Award", "Star", "Target", "TrendingUp"]
+              - { label: "Color Class", name: "color", widget: "string", default: "text-orange-400" }
           - label: "Social Links"
             name: "social"
             widget: "object"
@@ -157,7 +181,7 @@ collections:
               - { label: "Company", name: "company", widget: "string" }
               - { label: "Duration", name: "duration", widget: "string" }
               - { label: "Description", name: "description", widget: "text" }
-              - { label: "Technologies", name: "technologies", widget: "list", required: false }
+              - label: "Technologies", name: "technologies", widget: "list", required: false, field: { label: "Tech", widget: "string" }
 
       - name: "education"
         label: "Academic Background"
@@ -174,6 +198,30 @@ collections:
               - { label: "Details", name: "details", widget: "text" }
               - { label: "Achievement", name: "achievement", widget: "string" }
               - { label: "Status", name: "status", widget: "select", options: ["Current", "Completed"] }
+          - label: "Key Achievements"
+            name: "achievements"
+            widget: "list"
+            fields:
+              - { label: "Text", name: "text", widget: "string" }
+              - label: "Icon"
+                name: "icon"
+                widget: "select"
+                options: ["Trophy", "Star", "Award", "Target", "TrendingUp"]
+              - { label: "Color Class", name: "color", widget: "string", default: "text-orange-400" }
+
+      - name: "testimonials"
+        label: "Testimonials"
+        file: "client/src/content/testimonials.json"
+        fields:
+          - label: "Testimonials List"
+            name: "testimonials"
+            widget: "list"
+            fields:
+              - { label: "Name", name: "name", widget: "string" }
+              - { label: "Role", name: "role", widget: "string" }
+              - { label: "Feedback", name: "content", widget: "text" }
+              - { label: "Avatar/Emoji", name: "avatar", widget: "string" }
+              - { label: "Rating (1-5)", name: "rating", widget: "number", default: 5 }
 
       - name: "team"
         label: "Team Section"
@@ -185,3 +233,11 @@ collections:
           - { label: "Description", name: "description", widget: "text" }
           - { label: "Team Name", name: "teamName", widget: "string" }
           - { label: "Team URL", name: "teamUrl", widget: "string" }
+
+      - name: "seo"
+        label: "SEO Settings"
+        file: "client/src/content/seo.json"
+        fields:
+          - { label: "Site Title", name: "title", widget: "string" }
+          - { label: "Meta Description", name: "description", widget: "text" }
+          - { label: "Keywords", name: "keywords", widget: "string" }

client/src/components/About.tsx

@@ -1,20 +1,31 @@
 import { useState, useEffect } from "react";
 import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
-import { Github, Coffee, Heart, Zap, Linkedin } from "lucide-react";
+import { Github, Coffee, Heart, Zap, Linkedin, Award, Star, Target, TrendingUp } from "lucide-react";
 import aboutData from "../content/about.json";
-import heroData from "../content/hero.json"; // Name/Title are in hero
+import heroData from "../content/hero.json";
+
+const iconMap: Record<string, any> = {
+  Coffee,
+  Heart,
+  Zap,
+  Award,
+  Star,
+  Target,
+  TrendingUp
+};
 
 const userData = {
-  name: heroData.headline,
-  title: "Web Developer", // This isn't in JSON explicitly but "Web Developer" is common
-  location: "Bhakkar, Pakistan", // Hardcoding or moving to JSON? Let's use hardcoded for now or add to about.json
-  // Actually about.json only has bio/social.
-  // Let's use standard placeholders or keep hardcoded simple things if strictly implied.
-  // But user said "update any kind of information".
-  // I should use variables from aboutData if possible or heroData.
+  name: aboutData.name || heroData.headline,
+  title: aboutData.title || "Web Developer",
+  location: aboutData.location || "Bhakkar, Pakistan",
   bio: aboutData.bio,
   social: aboutData.social,
-  availableForHire: aboutData.availableForHire
+  availableForHire: aboutData.availableForHire,
+  badges: aboutData.badges || [
+    { icon: "Coffee", text: "Tea Enthusiast", color: "text-orange-400" },
+    { icon: "Heart", text: "Open Source Learner", color: "text-red-400" },
+    { icon: "Zap", text: "Problem Solver", color: "text-yellow-400" }
+  ]
 };
 
 export function About() {
@@ -44,18 +55,15 @@ export function About() {
             <p className="text-lg text-neutral-300 leading-relaxed">{userData.bio}</p>
 
             <div className="flex flex-wrap gap-4">
-              <div className="flex items-center space-x-2 bg-neutral-900/50 px-4 py-2 rounded-lg border border-neutral-800">
-                <Coffee className="w-5 h-5 text-orange-400" />
-                <span className="text-neutral-300">Tea Enthusiast</span>
-              </div>
-              <div className="flex items-center space-x-2 bg-neutral-900/50 px-4 py-2 rounded-lg border border-neutral-800">
-                <Heart className="w-5 h-5 text-red-400" />
-                <span className="text-neutral-300">Open Source Learner</span>
-              </div>
-              <div className="flex items-center space-x-2 bg-neutral-900/50 px-4 py-2 rounded-lg border border-neutral-800">
-                <Zap className="w-5 h-5 text-yellow-400" />
-                <span className="text-neutral-300">Problem Solver</span>
-              </div>
+              {userData.badges.map((badge, idx) => {
+                const Icon = iconMap[badge.icon] || Zap;
+                return (
+                  <div key={idx} className="flex items-center space-x-2 bg-neutral-900/50 px-4 py-2 rounded-lg border border-neutral-800">
+                    <Icon className={`w-5 h-5 ${badge.color}`} />
+                    <span className="text-neutral-300">{badge.text}</span>
+                  </div>
+                );
+              })}
             </div>
 
             {/* Social Links - Only GitHub */}
@@ -110,7 +118,7 @@ export function About() {
                   <span className="text-green-400">'JavaScript'</span>],
                 </div>
                 <div className="text-neutral-400 ml-4">
-                  passion: <span className="text-green-400">'Building amazing things'</span>
+                  passion: <span className="text-green-400">'{aboutData.passion || 'Building amazing things'}'</span>
                 </div>
                 <div className="text-purple-400">{"}"}</div>
               </div>

client/src/components/Contact.tsx

@@ -7,6 +7,7 @@ import { useToast } from "@/hooks/use-toast";
 import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
 import { Mail, Github, MapPin, Send, Loader2, Phone, CheckCircle } from "lucide-react";
 
+import aboutData from "../content/about.json";
 
 interface ContactFormData {
   name: string;
@@ -19,25 +20,25 @@ const contactInfo = [
   {
     icon: Mail,
     title: "Email",
-    value: "mabdulrasheedtalal@gmail.com",
-    link: "mailto:mabdulrasheedtalal@gmail.com"
+    value: aboutData.social.email,
+    link: `mailto:${aboutData.social.email}`
   },
   {
     icon: Phone,
     title: "Phone",
-    value: "03361115907",
-    link: "tel:03361115907"
+    value: aboutData.social.phone,
+    link: `tel:${aboutData.social.phone}`
   },
   {
     icon: Github,
     title: "GitHub",
-    value: "@Abdul-Rasheed-Talal",
-    link: "https://github.com/Abdul-Rasheed-Talal"
+    value: `@${aboutData.social.github.split('/').pop()}`,
+    link: aboutData.social.github
   },
   {
     icon: MapPin,
     title: "Location",
-    value: "Bhakkar, Pakistan",
+    value: aboutData.location,
     link: null
   }
 ];

client/src/components/Education.tsx

@@ -5,12 +5,24 @@ import educationJson from "../content/education.json";
 
 const educationData = educationJson.education;
 
-const achievements = [
-  { icon: Trophy, text: "2nd Position in PBTE Board", color: "text-yellow-400" },
-  { icon: Star, text: "97% in DAE 1st Year", color: "text-orange-400" },
-  { icon: Award, text: "95% in Matriculation", color: "text-blue-400" },
-  { icon: Target, text: "5+ Projects Completed", color: "text-green-400" },
-];
+const iconMap: Record<string, any> = {
+  GraduationCap,
+  Award,
+  Trophy,
+  Star,
+  Target,
+  TrendingUp
+};
+
+const achievements = (educationJson.achievements || [
+  { icon: "Trophy", text: "2nd Position in PBTE Board", color: "text-yellow-400" },
+  { icon: "Star", text: "97% in DAE 1st Year", color: "text-orange-400" },
+  { icon: "Award", text: "95% in Matriculation", color: "text-blue-400" },
+  { icon: "Target", text: "5+ Projects Completed", color: "text-green-400" },
+]).map(a => ({
+  ...a,
+  icon: typeof a.icon === 'string' ? iconMap[a.icon] || Award : a.icon
+}));
 
 export function Education() {
   const { ref, isIntersecting } = useIntersectionObserver({ threshold: 0.2 });

client/src/components/ExperimentLab.tsx

@@ -12,7 +12,8 @@ export function ExperimentLab() {
         isCVModalOpen,
         openCVPreview,
         openDiagnostics,
-        activeDevSidebar
+        activeDevSidebar,
+        isMobile
     } = useMode();
 
     const experiments = [
@@ -32,7 +33,8 @@ export function ExperimentLab() {
             action: toggleMode,
             active: mode === 'developer',
             color: "from-blue-500 to-indigo-700",
-            cta: mode === 'developer' ? "Exit Dev Mode" : "Enter Dev Mode"
+            cta: isMobile ? "Desktop Only" : (mode === 'developer' ? "Exit Dev Mode" : "Enter Dev Mode"),
+            disabled: isMobile
         },
         {
             title: "System Diagnostics",
@@ -41,7 +43,8 @@ export function ExperimentLab() {
             action: openDiagnostics,
             active: mode === 'developer' && activeDevSidebar === 'debug',
             color: "from-purple-500 to-pink-700",
-            cta: "Open Diagnostics"
+            cta: isMobile ? "Desktop Only" : "Open Diagnostics",
+            disabled: isMobile
         },
         {
             title: "Premium CV Engine",
@@ -85,7 +88,7 @@ export function ExperimentLab() {
                             initial={{ opacity: 0, y: 20 }}
                             whileInView={{ opacity: 1, y: 0 }}
                             transition={{ delay: idx * 0.1 }}
-                            className={`group relative p-8 rounded-3xl border border-neutral-800 transition-all duration-500 hover:border-neutral-600 overflow-hidden flex flex-col h-full bg-neutral-900/40 backdrop-blur-sm`}
+                            className={`group relative p-8 rounded-3xl border border-neutral-800 transition-all duration-500 hover:border-neutral-600 overflow-hidden flex flex-col h-full bg-neutral-900/40 backdrop-blur-sm ${(exp as any).disabled ? 'opacity-75' : ''}`}
                         >
                             {/* Card Background Gradient */}
                             <div className={`absolute inset-0 opacity-0 group-hover:opacity-10 transition-opacity bg-gradient-to-br ${exp.color}`} />
@@ -96,17 +99,25 @@ export function ExperimentLab() {
 
                             <h3 className="text-xl font-bold mb-3 group-hover:text-white transition-colors">
                                 {exp.title}
+                                {isMobile && (exp as any).disabled && (
+                                    <span className="ml-2 text-[10px] font-mono text-orange-500 uppercase tracking-tighter">Gated</span>
+                                )}
                             </h3>
 
                             <p className="text-neutral-400 text-sm mb-8 flex-1 leading-relaxed">
                                 {exp.description}
+                                {isMobile && (exp as any).disabled && (
+                                    <span className="block mt-2 text-xs text-orange-400/70 italic">Best experienced on desktop.</span>
+                                )}
                             </p>
 
                             <button
                                 onClick={exp.action}
                                 className={`w-full py-3 rounded-xl font-bold text-sm transition-all duration-300 transform active:scale-95 flex items-center justify-center gap-2 ${exp.active
                                     ? "bg-white text-black shadow-white/10"
-                                    : "bg-neutral-800 text-neutral-300 hover:bg-neutral-700"
+                                    : (exp as any).disabled
+                                        ? "bg-neutral-800/50 text-neutral-500 cursor-not-allowed"
+                                        : "bg-neutral-800 text-neutral-300 hover:bg-neutral-700"
                                     }`}
                             >
                                 {exp.active && <Rocket className="w-4 h-4 animate-bounce" />}

client/src/components/Footer.tsx

@@ -1,20 +1,22 @@
 import { Github, Mail, Heart, Linkedin } from "lucide-react";
 
 
+import aboutData from "../content/about.json";
+
 const socialLinks = [
   {
     icon: Github,
-    href: "https://github.com/Abdul-Rasheed-Talal",
+    href: aboutData.social.github,
     label: "GitHub"
   },
   {
     icon: Linkedin,
-    href: "https://www.linkedin.com/in/abdulrasheedtalal/",
+    href: aboutData.social.linkedin,
     label: "LinkedIn"
   },
   {
     icon: Mail,
-    href: "mailto:mabdulrasheedtalal@gmail.com",
+    href: `mailto:${aboutData.social.email}`,
     label: "Email"
   }
 ];

client/src/components/Hero.tsx

@@ -4,7 +4,7 @@ import { Github, Mail, MapPin, Phone, Download, Send, Linkedin } from "lucide-re
 import heroData from "../content/hero.json";
 import aboutData from "../content/about.json";
 
-const typingTexts = [
+const typingTexts = heroData.typingTexts || [
   "Web Developer",
   "CIT Student",
   "Problem Solver",

client/src/components/Navigation.tsx

@@ -8,7 +8,9 @@ import { CVPreviewModal } from "./CVPreviewModal";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { useToast } from "@/hooks/use-toast";
 
-const navItems = [
+import heroData from "../content/hero.json";
+
+const navItems = heroData.navItems || [
   { href: "#home", label: "HOME" },
   { href: "#projects", label: "PROJECTS" },
   { href: "#skills", label: "EXPERTISE" },
@@ -21,7 +23,7 @@ export function Navigation() {
   const { mode, toggleMode, isCVModalOpen, setIsCVModalOpen } = useMode();
   const [activeSection, setActiveSection] = useState("home");
   const [isScrolled, setIsScrolled] = useState(false);
-  const cvUrl = "/assets/Abdul-Rasheed-internship-CV.pdf";
+  const cvUrl = heroData.resumeUrl || "/assets/Abdul-Rasheed-internship-CV.pdf";
   const { toast } = useToast();
 
   // Check for mobile and disable dev mode
@@ -131,7 +133,7 @@ export function Navigation() {
                     <span>Preview CV</span>
                   </DropdownMenuItem>
                   <DropdownMenuItem className="hover:bg-neutral-800 focus:bg-neutral-800 cursor-pointer py-2.5" asChild>
-                    <a href="/assets/Abdul-Rasheed-internship-CV.pdf" download className="flex items-center gap-2">
+                    <a href={cvUrl} download className="flex items-center gap-2">
                       <Download className="w-4 h-4 text-orange-400" />
                       <span>Download CV</span>
                     </a>