All files / components/windows AboutContent.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
"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>
  );
}