-
-
- To get started, edit the page.tsx file. -
-- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -
-
+
+
+ {/* Footer */}
+
+
+ Let's Connect
+ + Contact +
+ + +
+ {/* Left: profile */}
+
+
+
+
+ {/* Right: links */}
+
+
+ {image && (
+ n[0]).join("")}
+ style={{ width: "72px", height: "72px", objectFit: "cover", filter: "grayscale(0.3)" }}
+ containerStyle={{
+ border: "1px solid #1c1f26",
+ fontSize: "1.2rem",
+ }}
+ />
+ )}
+
+
+
+
+ + {fullName} +
+
+ Technical Lead · Kereval
+
+
+
+
+ {contact.Address}
+
+
+
+ + Open to new opportunities, collaborations, and interesting + conversations. Drop a line — I'd love to hear from you. +
+
+
+
+ © {new Date().getFullYear()} {fullName}. All rights reserved.
+
+
+ ACHRAF ACHKARI
+
+ (e.currentTarget.style.borderColor = "#6b5730")}
+ onMouseLeave={(e) => (e.currentTarget.style.borderColor = "#1c1f26")}
+ >
+ {/* Corner accent */}
+
+
+
+ );
+}
+
+export default function Education({ education }: EducationProps) {
+ const headingRef = useRef
+ {item.startDate} — {item.endDate}
+
+
+ {item.logo && (
+
+
+ )}
+
+ + {item.degree} +
++ {item.school} +
+
+
+
+
+
+ Academic Background
+ + Education +
+ +
+ {education.map((item, i) => (
+
+
+
+ ))}
+
+ {/* Date */}
+
+ );
+}
+
+export default function Experience({ experiences }: ExperienceProps) {
+ const headingRef = useRef
+
+
+ {/* Line with dot */}
+
+ {isCurrent && (
+
—
+ {formatDate(exp.endDate)} +
+
+ ● NOW
+
+ )}
+ {formatDate(exp.startDate)}
+ —
+ {formatDate(exp.endDate)} +
+
+
+
+
+ {/* Content */}
+
+
+
+ {exp.logo && (
+
+
+ + {exp.position} +
++ {exp.description} +
+
+
+
+
+
+ Career Path
+ + Experience +
+ +
+ {experiences.map((exp, i) => (
+
+
+
+
+
+ {num} · {label}
+
+
+ ↗
+
+ {children}
+
+ );
+}
+
+// ─── Hero ─────────────────────────────────────────────────────────────────────
+
+export default function Hero({
+ name,
+ lastName,
+ title,
+ description,
+ skills,
+ projects,
+ experiences,
+ education,
+ languages,
+ interests,
+ location,
+}: HeroProps) {
+
+ const feat1 = projects[2]; // FOON
+ const feat2 = projects[0]; // Gazelle
+ const topSkills = skills.slice(0, 10);
+
+ const levelColor = (level: string) => {
+ if (level === "Native") return "#c8a96e";
+ if (level === "C2") return "#3a7a5a";
+ return "#4a6050";
+ };
+
+ return (
+
+
+ {/* ── Headline ─────────────────────────────────────────────────── */}
+
+
+
+ Let's bend
+
+
+
+ {/* ── Name + description strip ──────────────────────────────── */}
+
+ Let's bend
+
+ spacetime
+
+
+
+
+ {/* ── Divider ───────────────────────────────────────────────── */}
+
+
+ {/* ── 3 × 2 Bento grid ──────────────────────────────────────── */}
+
+
+
+
+
+ {title}
+
+
+ {name}{" "}
+ {lastName}
+
+
+
+ + {description} +
+
+
+
+ {location}
+
+
+
+
+ {/* 01 — FOON */}
+
+
+
+ {/* 02 — Gazelle */}
+
+
+
+ {/* 03 — Experience */}
+
+
+
+ {/* 04 — Education */}
+
+
+
+ {/* 05 — Skills */}
+
+
+
+ {/* 06 — About */}
+
+
+
+
+ {/* ── Scroll hint ───────────────────────────────────────────── */}
+
+ {feat1.logo && (
+
+ + {feat1.name} +
++ {feat1.description} +
+
+ {feat1.tasks.flatMap((t) => t.technologies).filter((v, i, a) => a.indexOf(v) === i).slice(0, 4).map((tech) => (
+ {tech}
+ ))}
+
+ {feat1.links && (
+
+ {feat1.links.slice(0, 2).map((l) => (
+
+ ↗ {l.name}
+
+ ))}
+
+ )}
+
+ {feat2.logo && (
+
+ + {feat2.name} +
++ {feat2.description} +
+
+ {feat2.tasks.map((task) => (
+
+
+
+
+ {task.name}
+
+ {task.status}
+
+ ))}
+ + Experience +
+
+ {experiences.map((exp, i) => (
+
+
+
+
+ ))}
+
+
+
+ {exp.position}
+
+
+ {exp.company} · {exp.endDate === "current" ? "Present" : exp.endDate.split("-")[2]}
+
+ + Education +
+
+ {education.map((edu, i) => (
+
+
+
+ ))}
+
+ {edu.degree}
+
+
+ {edu.school.split(" ").slice(-2).join(" ")} · {edu.endDate}
+
+ + {skills.length} Skills +
+
+ {topSkills.map((skill, i) => (
+
+ {skill}
+
+ ))}
+ {skills.length > 10 && (
+
+ +{skills.length - 10}
+
+ )}
+
+ + About +
+
+
+
+ Languages
+
+
+ {languages.map((lang) => (
+
+ {lang.name} {lang.level}
+
+ ))}
+
+
+
+
+ Interests
+
+
+ {interests.map((interest, i) => (
+
+ {interest}{i < interests.length - 1 && ·}
+
+ ))}
+
+
+
+
+ Scroll to explore
+
+
+
+
+ {/* Header */}
+
+ );
+}
+
+export default function Projects({ projects }: ProjectsProps) {
+ const headingRef = useRef
+
+
+ {/* Description */}
+
+ {project.logo && (
+
+
+
+
+
+ {String(index + 1).padStart(2, "0")}
+
+ + {project.name} +
+
+ {project.links?.map((link) => (
+ {
+ (e.currentTarget as HTMLElement).style.borderColor = "#c8a96e";
+ (e.currentTarget as HTMLElement).style.color = "#c8a96e";
+ }}
+ onMouseLeave={(e) => {
+ (e.currentTarget as HTMLElement).style.borderColor = "#1c1f26";
+ (e.currentTarget as HTMLElement).style.color = "#4a5060";
+ }}
+ >
+ ↗ {link.name}
+
+ ))}
+
+ + {project.description} +
+ + {/* Tech tags */} +
+ {allTechs.slice(0, 8).map((tech) => (
+ {tech}
+ ))}
+ {allTechs.length > 8 && (
+
+ +{allTechs.length - 8}
+
+ )}
+
+
+ {/* Footer */}
+
+
+
+ {/* Tasks */}
+ {expanded && (
+
+ {doneCount}/{project.tasks.length} tasks complete
+
+
+
+
+
+ )}
+
+ {project.tasks.map((task) => (
+
+
+
+
+ ))}
+
+
+
+
+ {task.name}
+
+
+ {task.status}
+
+
+ + {task.description} +
+
+ {task.technologies.map((tech) => (
+
+ {tech}
+
+ ))}
+
+
+ {/* Section header */}
+
+
+
+
+ {/* Grid */}
+
+ Selected Work
+
+
+
+
+ + Projects +
+ + {String(projects.length).padStart(2, "0")} total + +
+ {projects.map((project, i) => (
+
+
+
+ ))}
+
+ {fallbackLabel}
+
+ );
+ }
+
+ return (
+ // eslint-disable-next-line @next/next/no-img-element
+
+
+
+
+
+ Expertise
+ + Skills & Profile +
+ +
+ {/* Tech skills */}
+
+
+
+
+ {/* Languages + Interests stacked */}
+
+ Technical Stack
+
+
+ {skills.map((skill, i) => (
+ {
+ const el = e.currentTarget as HTMLElement;
+ el.style.borderColor = "#c8a96e";
+ el.style.color = "#c8a96e";
+ el.style.background = "rgba(200,169,110,0.05)";
+ }}
+ onMouseLeave={(e) => {
+ const el = e.currentTarget as HTMLElement;
+ el.style.borderColor = "#1c1f26";
+ el.style.color = "#6b7280";
+ el.style.background = "#0e1014";
+ }}
+ >
+ {skill}
+
+ ))}
+
+
+ {/* Languages */}
+
+
+
+
+ {/* Interests */}
+
+ Languages
+
+
+ {languages.map((lang) => (
+
+
+
+ {lang.name}
+
+
+ {lang.level}
+
+
+ ))}
+
+
+
+ Interests
+
+
+ {interests.map((interest) => (
+ {
+ const el = e.currentTarget as HTMLElement;
+ el.style.borderColor = "#6b5730";
+ el.style.color = "#c8a96e";
+ }}
+ onMouseLeave={(e) => {
+ const el = e.currentTarget as HTMLElement;
+ el.style.borderColor = "#1c1f26";
+ el.style.color = "#6b7280";
+ }}
+ >
+ {interest}
+
+ ))}
+
+