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