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

39
app/globals.css
View File

@@ -33,7 +33,7 @@ html {
body {
background: #07080a;
color: #e2e4e9;
font-family: var(--font-lora), Georgia, serif;
font-family: var(--font-jetbrains), monospace;
overflow-x: hidden;
}
@@ -351,6 +351,43 @@ body {
nav a:hover .nav-underline { transform: scaleX(1) !important; }
/* ── Hero creative bento grid ───────────────────────────────── */
.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);
}
.headline-cursor {
display: inline-block;
width: 3px;

10
app/layout.tsx
View File

@@ -1,5 +1,5 @@
import type { Metadata } from "next";
import { Bebas_Neue, JetBrains_Mono, Lora } from "next/font/google";
import { Bebas_Neue, JetBrains_Mono } from "next/font/google";
import "./globals.css";
import GridCanvas from "@/components/GridCanvas";
@@ -15,12 +15,6 @@ const jetbrains = JetBrains_Mono({
weight: ["400", "500"],
});
const lora = Lora({
variable: "--font-lora",
subsets: ["latin"],
weight: ["400", "500"],
});
export const metadata: Metadata = {
title: "Achraf Achkari — Technical Lead & Software Engineer",
description:
@@ -36,7 +30,7 @@ export default function RootLayout({
return (
<html
lang="en"
className={`${bebas.variable} ${jetbrains.variable} ${lora.variable} h-full`}
className={`${bebas.variable} ${jetbrains.variable} h-full`}
>
<body className="min-h-full flex flex-col antialiased" suppressHydrationWarning>
<GridCanvas />