achraf/achraf-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve fonts and UI

Browse Source
This commit is contained in:
achraf
2026-05-03 19:59:53 +02:00
parent 16e7547fcc
commit 02d7b7918e
11 changed files with 4266 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
components/Hero.tsx
View File

@@ -189,44 +189,6 @@ export default function Hero({
className="hero-section"
style={{ minHeight: "100vh", position: "relative", zIndex: 10 }}
>
<style>{`
.creative-bento-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
width: 100%;
position: relative;
}
.bento-span-2x2 { grid-column: span 2; grid-row: span 2; }
.bento-span-2x1 { grid-column: span 2; grid-row: span 1; }
.bento-span-1x1 { grid-column: span 1; grid-row: span 1; }
@media (max-width: 1024px) {
.creative-bento-grid {
grid-template-columns: repeat(2, 1fr);
}
.bento-span-2x2 { grid-column: span 2; grid-row: span 2; }
.bento-span-2x1 { grid-column: span 2; grid-row: span 1; }
.bento-span-1x1 { grid-column: span 1; grid-row: span 1; }
}
@media (max-width: 600px) {
.creative-bento-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.bento-span-2x2, .bento-span-2x1, .bento-span-1x1 {
grid-column: span 1;
grid-row: auto;
}
}
.glow-text {
text-shadow: 0 0 24px rgba(200, 169, 110, 0.4);
}
`}</style>
<div style={{ maxWidth: "1200px", margin: "0 auto", position: "relative" }}>
{/* ── Headline ─────────────────────────────────────────────────── */}
@@ -236,8 +198,7 @@ export default function Hero({
>
<h1
style={{
fontFamily: "var(--font-lora), Georgia, serif",
fontStyle: "italic",
fontFamily: "var(--font-bebas), sans-serif",
fontWeight: 400,
fontSize: "clamp(3rem, 7vw, 7.5rem)",
lineHeight: 1.05,
@@ -265,7 +226,7 @@ export default function Hero({
</div>
<div
style={{
fontFamily: "var(--font-bebas), Impact, sans-serif",
fontFamily: "var(--font-bebas), sans-serif",
fontSize: "clamp(1.8rem, 4.5vw, 3.5rem)",
letterSpacing: "0.04em",
color: "#6b7280",
@@ -278,7 +239,7 @@ export default function Hero({
</div>
<div style={{ maxWidth: "420px" }}>
<p style={{ fontFamily: "var(--font-lora), serif", fontSize: "0.95rem", lineHeight: 1.75, color: "#8b92a5", margin: 0 }}>
<p style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.95rem", lineHeight: 1.75, color: "#8b92a5", margin: 0 }}>
{description}
</p>
<div style={{ display: "flex", alignItems: "center", gap: "0.6rem", marginTop: "1rem" }}>
@@ -327,7 +288,7 @@ export default function Hero({
</div>
</div>
<p style={{ fontFamily: "var(--font-lora), serif", fontSize: "1rem", lineHeight: 1.7, color: "#9ca3af", marginBottom: "1.5rem" }}>
<p style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "1rem", lineHeight: 1.7, color: "#9ca3af", marginBottom: "1.5rem" }}>
{feat1.description}
</p>
@@ -338,7 +299,7 @@ export default function Hero({
<span style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.7rem", color: "#e2e4e9" }}>{task.name}</span>
<span className={task.status === "Done" ? "status-done" : "status-progress"} style={{ fontSize: "0.5rem", padding: "2px 4px" }}>{task.status}</span>
</div>
<div style={{ fontFamily: "var(--font-lora), serif", fontSize: "0.8rem", color: "#6b7280", lineHeight: 1.4 }}>
<div style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.8rem", color: "#6b7280", lineHeight: 1.4 }}>
{task.description.length > 80 ? task.description.slice(0, 80) + "..." : task.description}
</div>
</div>
@@ -382,7 +343,7 @@ export default function Hero({
{feat2.name}
</h3>
</div>
<p style={{ fontFamily: "var(--font-lora), serif", fontSize: "0.85rem", lineHeight: 1.65, color: "#8b92a5", marginBottom: "1rem", flex: 1 }}>
<p style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.85rem", lineHeight: 1.65, color: "#8b92a5", marginBottom: "1rem", flex: 1 }}>
{feat2.description}
</p>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
@@ -486,7 +447,7 @@ export default function Hero({
</div>
<div style={{ display: "flex", flexWrap: "wrap", gap: "0.4rem" }}>
{interests.map((interest) => (
<span key={interest} style={{ fontFamily: "var(--font-lora), serif", fontSize: "0.85rem", fontStyle: "italic", color: "#8b92a5", background: "rgba(255,255,255,0.02)", padding: "2px 8px", borderRadius: "12px" }}>
<span key={interest} style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.75rem", color: "#8b92a5", background: "rgba(255,255,255,0.02)", padding: "2px 8px", borderRadius: "12px" }}>
{interest}
</span>
))}