Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 3x 3x 3x 3x 3x 3x 1x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x | "use client";
import { personalInfo, philosophy } from "@/data/apps";
import styles from "@/components/windows/WindowContent.module.css";
import { Mail, Phone, Linkedin, Github, Globe } from "lucide-react";
// 🧠Debug toggle
const DEBUG =
(typeof process !== "undefined" &&
process.env.NODE_ENV !== "production") ||
(typeof process !== "undefined" &&
process.env.NEXT_PUBLIC_DEBUG === "true");
const dlog = (...args: any[]) => {
if (DEBUG) console.log("[AboutContent]", ...args);
};
export default function AboutContent() {
const safeInfo = personalInfo || {};
const safePhilosophy = Array.isArray(philosophy) ? philosophy : [];
dlog("🧱 Rendering AboutContent", {
hasInfo: !!personalInfo,
hasPhilosophy: safePhilosophy.length,
});
return (
<div className={styles.windowContent}>
{/* About Section */}
<section className={styles.contentSection}>
<h2>About Me</h2>
<div className={styles.aboutGrid}>
<div className={styles.profileColumn}>
<img
src={safeInfo.image || "/placeholder.svg?height=200&width=200"}
alt={safeInfo.name || "Profile"}
className={styles.profileImage}
loading="lazy"
/>
</div>
<div className={styles.summaryColumn}>
{safeInfo.summary ? (
<p className={styles.summaryText}>{safeInfo.summary}</p>
) : (
<p className={styles.summaryText}>
Passionate developer with a love for building creative digital
systems and mentoring teams.
</p>
)}
</div>
</div>
</section>
{/* Contact Info */}
<section className={styles.contentSection}>
<h2>Contact Information</h2>
<ul className={styles.contactInfo}>
{safeInfo.email && (
<li>
<Mail size={20} />
<span>{safeInfo.email}</span>
</li>
)}
{safeInfo.phone && (
<li>
<Phone size={20} />
<span>{safeInfo.phone}</span>
</li>
)}
{safeInfo.linkedin && (
<li>
<Linkedin size={20} />
<a
href={safeInfo.linkedin}
target="_blank"
rel="noopener noreferrer"
>
LinkedIn Profile
</a>
</li>
)}
{safeInfo.github && (
<li>
<Github size={20} />
<a
href={safeInfo.github}
target="_blank"
rel="noopener noreferrer"
>
GitHub Profile
</a>
</li>
)}
{safeInfo.portfolio && (
<li>
<Globe size={20} />
<a
href={safeInfo.portfolio}
target="_blank"
rel="noopener noreferrer"
>
Portfolio Website
</a>
</li>
)}
</ul>
</section>
{/* Philosophy Section */}
<section className={styles.contentSection}>
<h2>My Philosophy</h2>
{safePhilosophy.length > 0 ? (
<ul>
{safePhilosophy.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
) : (
<p>No philosophy statements available at the moment.</p>
)}
</section>
</div>
);
}
|