All files / components/windows ProjectsContent.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
"use client";
 
import { projects } from "@/data/apps";
import styles from "@/components/windows/WindowContent.module.css";
import { ExternalLink } 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("[ProjectsContent]", ...args);
};
 
export default function ProjectsContent() {
  if (!Array.isArray(projects) || projects.length === 0) {
    dlog("⚠️ No projects found – showing fallback.");
    return (
      <div className={styles.windowContent}>
        <section className={styles.contentSection}>
          <h2>My Projects</h2>
          <p>No projects data available at the moment.</p>
        </section>
      </div>
    );
  }
 
  dlog(`🧱 Rendering ${projects.length} projects`);
 
  return (
    <div className={styles.windowContent}>
      <section className={styles.contentSection}>
        <h2>My Projects</h2>
        <div className={styles.projectsGrid}>
          {projects.map((project) => {
            const {
              id,
              image,
              name,
              role,
              description,
              impact,
              techStack = [],
              link,
            } = project || {};
 
            return (
              <div key={id || Math.random()} className={styles.projectCard}>
                <img
                  src={image || "/placeholder.svg"}
                  alt={name || "Project"}
                  className={styles.projectImage}
                  loading="lazy"
                />
                <div className={styles.projectContent}>
                  <h3>{name || "Untitled Project"}</h3>
                  {role && (
                    <p>
                      <strong>Role:</strong> {role}
                    </p>
                  )}
                  {description && <p>{description}</p>}
                  {impact && (
                    <p>
                      <strong>Impact:</strong> {impact}
                    </p>
                  )}
                  {Array.isArray(techStack) && techStack.length > 0 && (
                    <div className={styles.techStack}>
                      {techStack.map((tech, index) => (
                        <span key={index} className={styles.techTag}>
                          {tech}
                        </span>
                      ))}
                    </div>
                  )}
                  {link && (
                    <a
                      href={link}
                      target="_blank"
                      rel="noopener noreferrer"
                      className={styles.projectLink}
                    >
                      View Project <ExternalLink size={16} />
                    </a>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </section>
    </div>
  );
}