Blueprint user profile

src/components/companion/blueprintProfiles/extraInfo.tsx

@@ -3,19 +3,20 @@ import AdditionalLinks from './additionalLinks';
 import { CompanionButton } from '../../ui/companion-button';
 import { AnimatedBorder } from '../../ui/animated-border';
 import { UserProfile } from '@/types';
+import ResponseSection from './responseSection';
 
 const ExtraInfo: FC<{ userData: UserProfile }> = ({ userData }) => {
 
     const handleVisitPage = () => {
         if (typeof window !== 'undefined') {
             // Normalize the LinkedIn URL
             let linkedInUrl = userData.linkedIn.trim();
-    
+
             // Ensure the URL starts with "https://"
             if (!/^https?:\/\//i.test(linkedInUrl)) {
                 linkedInUrl = "https://" + linkedInUrl;
             }
-    
+
             // Redirect to the normalized URL
             window.location.href = linkedInUrl;
         }
@@ -30,7 +31,7 @@ const ExtraInfo: FC<{ userData: UserProfile }> = ({ userData }) => {
                         <img src="/assets/icons/linkedin_bp_user.svg" alt="linkedin-logo" className="w-8 h-8 sm:w-10 sm:h-10" />
                         <div className="flex flex-col">
                             <span className="text-xs sm:text-sm text-light-grey font-redhat">LINKEDIN</span>
-                            <span className="text-xs sm:text-sm font-satoshi truncate max-w-[135px] xs:max-w-[170px]">
+                            <span className="text-xs sm:text-sm font-satoshi truncate max-w-[135px] xs:max-w-[180px] sm:max-w-none">
                                 {userData.linkedIn}
                             </span>
                         </div>
@@ -44,38 +45,18 @@ const ExtraInfo: FC<{ userData: UserProfile }> = ({ userData }) => {
                 </div>
             </ AnimatedBorder>
 
-            {/* Fun Facts and Interests Grid */}
-            <div className="grid grid-cols-2 gap-3 sm:gap-4">
-                {/* Fun Facts */}
-                <AnimatedBorder className="w-full mb-3 sm:mb-4" innerClassName='h-full w-full'>
-                    <div className="relative rounded-lg p-3 sm:p-4">
-                        <span className="text-xs sm:text-sm text-light-grey font-redhat mb-2 sm:mb-3">
-                            FUN FACTS ABOUT {userData.name.split(' ')[0].toUpperCase()}
-                        </span>
-                        <ul className="list-inside">
-                            {userData.funFacts.map((fact, index) => (
-                                <li key={index} className="text-xs sm:text-sm font-satoshi mb-1 sm:mb-2">
-                                    {fact}
-                                </li>
-                            ))}
-                        </ul>
-                    </div>
-                </AnimatedBorder>
+            {/* Interests */}
+            {userData.interests && (
+                <ResponseSection title="HOBBIES & INTERESTS" list={userData.interests} />
+            )}
 
-                {/* Interests */}
-                <AnimatedBorder className="w-full mb-3 sm:mb-4" innerClassName='h-full w-full'>
-                    <div className="rounded-lg p-3 sm:p-4">
-                        <span className="text-xs sm:text-sm text-light-grey font-redhat mb-2 sm:mb-3">INTERESTS</span>
-                        <ul className="list-inside">
-                            {userData.interests.map((interest, index) => (
-                                <li key={index} className="text-xs sm:text-sm font-satoshi mb-1 sm:mb-2">
-                                    {interest}
-                                </li>
-                            ))}
-                        </ul>
-                    </div>
-                </AnimatedBorder>
-            </div>
+            {userData.responseList && userData.responseList[1] && (
+                <ResponseSection title="IF I WAS STRANDED ON AN ISLAND, THE TECH FIGURE I WOULD WANT TO BE STRANDED WITH WOULD BE..." text={userData.responseList[1]} />
+            )}
+
+            {userData.responseList && userData.responseList[2] && (
+                <ResponseSection title="IF I COULD PRESENT ONE EARTHLY INVENTION TO AN ALIEN, I WOULD PRESENT..." text={userData.responseList[2]} />
+            )}
 
             <AdditionalLinks userData={userData} />
         </>

src/components/companion/blueprintProfiles/profileHeader.tsx

@@ -1,4 +1,6 @@
 import { FC } from 'react';
+import { Avatar } from "@/components/ui/avatar";
+import { AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
 
 interface UserProfile {
     name: string;
@@ -13,18 +15,13 @@ interface ProfileProps {
 const Profile: FC<ProfileProps> = ({ userData }) => {
     return (
         <div className="flex flex-col items-center mb-6 sm:mb-8">
-            {userData?.profilePicUrl ? (
-                <img 
-                    src={userData.profilePicUrl}
-                    alt={`${userData.name}'s profile picture`}
-                    className="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-3 sm:mb-4 scale-125"
-                />
-            ) : (
-                <div className="w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-baby-blue flex items-center justify-center text-xl sm:text-2xl font-bold mb-3 sm:mb-4 text-black">
-                    {userData.name.split(' ').map((n: string) => n[0]).join('')}
-                </div>
-            )}
-            <h5 className="text-xl sm:text-2xl text-white font-sans mb-1">{userData.name}</h5>
+            <Avatar
+                className={`w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-baby-blue flex items-center justify-center text-xl sm:text-2xl font-bold mb-3 sm:mb-4 text-black`}
+            >
+                <AvatarImage src={userData?.profilePicUrl} className="w-full h-full object-cover rounded-full" />
+                <AvatarFallback>{userData.name.split(' ').map((n: string) => n[0]).join('')}</AvatarFallback>
+            </Avatar>
+            <h5 className="text-xl sm:text-2xl text-center text-white font-sans mb-1">{userData.name}</h5>
             <p className="text-xs sm:text-sm text-light-grey uppercase font-redhat">{userData.role}</p>
         </div>
     );

src/components/companion/blueprintProfiles/responseSection.tsx

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { AnimatedBorder } from '../../ui/animated-border';
+
+interface ResponseSectionProps {
+  title: string;
+  text?: string;
+  list?: string[];
+}
+
+const ResponseSection: FC<ResponseSectionProps> = ({ title, text, list }) => {
+  return (
+    <AnimatedBorder className="w-full mb-3 sm:mb-4">
+      <div className="rounded-lg p-3 sm:p-4 font-redhat">
+        <p className="text-xs sm:text-sm text-light-grey font-redhat mb-1 sm:mb-2">
+          {title}
+        </p>
+        {list ? (
+          <ul className="list-disc list-inside">
+            {list.map((item, index) => (
+              <li key={index} className="text-xs sm:text-sm font-satoshi mb-1 sm:mb-2">
+                {item}
+              </li>
+            ))}
+          </ul>
+        ) : (
+          text && <p className="font-satoshi">{text}</p>
+        )}
+      </div>
+    </AnimatedBorder>
+  );
+};
+
+export default ResponseSection;

src/components/companion/navigation/top-nav.tsx

@@ -12,8 +12,7 @@ export const TopNav: React.FC<TopNavProps> = ({ onMenuClick }) => {
   return (
     <motion.div 
       className="flex justify-between items-center p-6"
-      initial={{ opacity: 0, y: -20 }}
-      animate={{ opacity: 1, y: 0 }}
+      initial={{ opacity: 1, y: 0 }}
       transition={{
         duration: 0.6,
         ease: "easeOut",

src/pages/companion/profile-temp/[externalUserId]/index.tsx

@@ -7,18 +7,17 @@ import AttendeeInfo from "../../../../components/companion/blueprintProfiles/att
 import NavBarContainer from "@/components/companion/navigation/NavBarContainer";
 import { motion } from 'framer-motion';
 import { UserProfile } from "@/types";
+import ResponseSection from "@/components/companion/blueprintProfiles/responseSection";
 
 const UserProfilePage = () => {
     const [userData, setUserData] = useState<UserProfile | null>(null);
     const [isLoading, setIsLoading] = useState(true);
-    const [isSideNavOpen, setIsSideNavOpen] = useState(false);
     const router = useRouter();
     const [user, setUser] = useState<string | null>(null);
 
     useEffect(() => {
         if (!router.isReady) return;
         const userQuery = router.query.externalUserId as string | undefined;
-        console.log(userQuery)
         if (userQuery) {
             setUser(userQuery);
         }
@@ -71,28 +70,32 @@ const UserProfilePage = () => {
     return (
         <div className="relative min-h-screen bg-gradient-to-b from-[#040C12] to-[#030608] text-white p-4 sm:p-4 max-w-4xl mx-auto pb-[100px]">
             <NavBarContainer>
-            <motion.div
-                className="flex-1"
-                variants={containerVariants}
-                initial="hidden"
-                animate="visible"
-            >
-                <motion.div variants={itemVariants}>
-                    <Profile userData={userData} />
-                </motion.div>
-                {isDelegate ?
+                <motion.div
+                    className="flex-1"
+                    variants={containerVariants}
+                    initial="hidden"
+                    animate="visible"
+                >
                     <motion.div variants={itemVariants}>
-                        <CompanyInfo userData={userData} />
+                        <Profile userData={userData} />
                     </motion.div>
-                    :
+                    {userData.responseList && userData.responseList[0] && (
+                        <ResponseSection title="ABOUT ME" text={userData.responseList[0]} />
+                    )}
+                    {isDelegate ?
+                        <motion.div variants={itemVariants}>
+                            <CompanyInfo userData={userData} />
+                        </motion.div>
+                        :
+                        <motion.div variants={itemVariants}>
+                            <AttendeeInfo userData={userData} />
+                        </motion.div>
+                    }
+
                     <motion.div variants={itemVariants}>
-                        <AttendeeInfo userData={userData} />
+                        <ExtraInfo userData={userData} />
                     </motion.div>
-                }
-                <motion.div variants={itemVariants}>
-                    <ExtraInfo userData={userData} />
                 </motion.div>
-            </motion.div>
             </NavBarContainer>
         </div >
     );
@@ -108,11 +111,10 @@ const data1: UserProfile = {
     hobby: "Basketball",
     linkedIn: `linkedin.com/in/daniellee`,
     profilePicUrl: "https://hoopshype.com/wp-content/uploads/sites/92/2024/11/i_7b_e3_c7_lebron-james.png?w=1000&h=600&crop=1",
-    funFacts: [
-        "Has visited 23 countries",
-        "Can speak 3 languages",
-        "Former competitive swimmer",
-
+    responseList: [
+        "I am steve jobs if he was daniel lee.",
+        "Steve Jobs",
+        "Blueprint NFC Cards",
     ],
     interests: [
         "UX/UI Design",
@@ -125,26 +127,26 @@ const data1: UserProfile = {
 };
 
 const data2: UserProfile = {
-    name: "Yi Long Musk",
+    name: "Yi Long Mah",
     role: "Delegate",
     company: "Tesla",
     hobby: "Basketball",
-    linkedIn: "linkedin.com/in/daniellee",
+    linkedIn: "linkedin.com/in/danielthegoatlee",
     profilePicUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTe8Qr5TK-ehPu0lZsZxhmTM1eGAdMVgApwSzYSKFOeQPGbukpuICsAwLQMKQJeuDpgpLU&usqp=CAU",
     companyLogoUrl: "https://static.vecteezy.com/system/resources/previews/020/336/735/non_2x/tesla-logo-tesla-icon-transparent-png-free-vector.jpg",
-    funFacts: [
-        "Has visited 23 countries around the world even though I've never flown first class.",
-        "Can speak 3 languages",
-        "Former competitive swimmer",
+    responseList: [
+        "I am chinese elon musk",
+        "Elon Musk",
+        "Cybertruck",
     ],
     interests: [
         "UX/UI Design",
-        "Photography",
-        "Sustainable Design",
+        "Photography"
     ],
     additionalLink: "https://github.com/dlee",
 };
 
 async function getUserProfile(user: string) {
-    return data2;
+    const data = user == "daniel" ? data1 : data2;
+    return data;
 }

src/pages/companion/profile/company/[companyId]/index.tsx

@@ -5,6 +5,7 @@ import { AnimatedBorder } from '../../../../../components/ui/animated-border';
 import { useRouter } from 'next/router';
 import NavBarContainer from '@/components/companion/navigation/NavBarContainer';
 import { motion } from 'framer-motion';
+import ResponseSection from '@/components/companion/blueprintProfiles/responseSection';
 
 
 interface CompanyProfile {
@@ -20,7 +21,6 @@ interface CompanyProfile {
 export default function CompanyPage() {
   const [userData, setUserData] = useState<CompanyProfile | null>(null);
   const [isLoading, setIsLoading] = useState(true);
-  const [isSideNavOpen, setIsSideNavOpen] = useState(false);
   const [companyId, setCompanyId] = useState<string | undefined>(undefined);
 
 
@@ -86,12 +86,7 @@ export default function CompanyPage() {
           </motion.div>
           <div className="grid grid-cols-1 gap-3 sm:gap-4 mb-3 sm:mb-4">
             <motion.div variants={itemVariants}>
-              <AnimatedBorder className="w-full mb-3 sm:mb-4">
-                <div className="rounded-lg p-3 sm:p-4 font-redhat">
-                  <p className="text-xs sm:text-sm text-light-grey font-redhat mb-1 sm:mb-2">ABOUT</p>
-                  <p className='font-satoshi'>{userData.about}</p>
-                </div>
-              </AnimatedBorder>
+              <ResponseSection title='ABOUT' text={userData.about} />
             </motion.div>
           </div>
           <motion.div variants={itemVariants}>

src/styles/globals.css

@@ -1,5 +1,4 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght@400;500;700&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/types.ts

@@ -43,11 +43,12 @@ export type UserProfile = {
     role: string;
     hobby: string;
     linkedIn: string;
-    funFacts: string[];
+    // funFacts: string[];
     interests: string[];
     additionalLink: string;
     profilePicUrl?: string;
     companyLogoUrl?: string;
+    responseList?: string[]; // ["I am...". "Stuck on an Island...", "Show an invention to an alien..."]
     company?: string;
     major?: string;
     year?: string;

tailwind.config.ts

@@ -120,7 +120,7 @@ const config: Config = {
     },
     extend: {
       screens: {
-        'xs': '370px',
+        'xs': '412px', // originally 370
         'mxs': '445px' // medium xs (could prob rename)
       },
       backgroundImage: {