Skip to content

Commit 8e03853

Browse files
YousefMohamdYousefMohamd
committed
update
1 parent 62f665d commit 8e03853

43 files changed

Lines changed: 437 additions & 18180 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.eleventy.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
const pluginRss = require("@11ty/eleventy-plugin-rss");
2+
const htmlmin = require("html-minifier-terser");
23

34
module.exports = function (eleventyConfig) {
45
// Static passthrough
56
eleventyConfig.addPassthroughCopy("css");
67
eleventyConfig.addPassthroughCopy("js");
78
eleventyConfig.addPassthroughCopy("img");
89
eleventyConfig.addPassthroughCopy("files");
10+
eleventyConfig.addPassthroughCopy("fonts"); // Added fonts directory
911

1012
// Watch targets
1113
eleventyConfig.addWatchTarget("css");
@@ -49,6 +51,21 @@ module.exports = function (eleventyConfig) {
4951
return [...set];
5052
});
5153

54+
// HTML Minifier Transform (Only runs in production)
55+
eleventyConfig.addTransform("htmlmin", function (content, outputPath) {
56+
if (process.env.ELEVENTY_ENV === "production" && outputPath && outputPath.endsWith(".html")) {
57+
let minified = htmlmin.minify(content, {
58+
useShortDoctype: true,
59+
removeComments: true,
60+
collapseWhitespace: true,
61+
minifyCSS: true,
62+
minifyJS: true
63+
});
64+
return minified;
65+
}
66+
return content;
67+
});
68+
5269
// Eleventy config
5370
return {
5471
dir: { input: ".", includes: "_includes", data: "_data", output: "_site" },

‎_data/showreel.js‎

Lines changed: 36 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,37 @@
1-
const fs = require("fs");
2-
const path = require("path");
3-
const IMG = new Set(["jpg","jpeg","png","webp","gif","avif"]);
4-
const VID = new Set(["mp4","webm","mov","m4v","ogg","ogv"]);
5-
const MIME = {
6-
jpg:"image/jpeg", jpeg:"image/jpeg", png:"image/png", webp:"image/webp", gif:"image/gif", avif:"image/avif",
7-
mp4:"video/mp4", m4v:"video/mp4", webm:"video/webm",
8-
ogg:"video/ogg", ogv:"video/ogg",
9-
mov:"video/quicktime"
10-
};
11-
module.exports = () => {
12-
const dir = path.join(process.cwd(), "img", "showreel");
13-
if (!fs.existsSync(dir)) return [];
14-
return fs.readdirSync(dir)
15-
.filter(n => !n.startsWith("."))
16-
.map(n => {
17-
const ext = path.extname(n).slice(1).toLowerCase();
18-
const type = VID.has(ext) ? "video" : (IMG.has(ext) ? "image" : "other");
19-
return { name:n, type, ext, mime: MIME[ext]||"", src:`/img/showreel/${encodeURIComponent(n)}` };
20-
})
21-
.filter(x => x.type !== "other")
22-
.sort((a,b)=> a.name.localeCompare(b.name, undefined, {numeric:true, sensitivity:"base"}));
1+
const fs = require('fs');
2+
const path = require('path');
3+
4+
module.exports = function() {
5+
// Target physical directory from the current file context relative path
6+
const showreelDir = path.join(__dirname, '..', 'img', 'showreel');
7+
8+
// Return an empty array resiliently if the directory was deleted or missed
9+
if (!fs.existsSync(showreelDir)) {
10+
console.warn(`[WARNING] Directory ${showreelDir} does not exist. Showreel is disabled.`);
11+
return [];
12+
}
13+
14+
// Retrieve raw contents inside the target folder and force alphanumeric ascending sorting
15+
const files = fs.readdirSync(showreelDir).sort();
16+
17+
// Permitted web rendering file extension architectures (Includes image and hardware-accelerated video buffers)
18+
const allowedExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.mp4', '.webm'];
19+
20+
// Isolate system hidden chunks (e.g. Mac OS .DS_Store) and process logical mapping
21+
const showreelData = files.filter(file => {
22+
const ext = path.extname(file).toLowerCase();
23+
return allowedExtensions.includes(ext);
24+
}).map(file => {
25+
const ext = path.extname(file).toLowerCase();
26+
27+
// Automatically interpret markup definition tag depending on raw asset byte payload extension
28+
const type = (ext === '.mp4' || ext === '.webm') ? 'video' : 'image';
29+
30+
return {
31+
type: type,
32+
src: `/img/showreel/${file}`
33+
};
34+
});
35+
36+
return showreelData;
2337
};

‎_data/showreel.json‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎_includes/home-projects-sections.njk‎

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,4 @@
11
<section class="home-sections" aria-label="Projects">
2-
<style>
3-
/* ==== Self-contained styles for home sections ==== */
4-
.home-sections{margin:28px 0 4px}
5-
.hs-row{
6-
display:flex; gap:34px; justify-content:center; align-items:stretch;
7-
flex-wrap:wrap;
8-
}
9-
.hs-card{
10-
position:relative; display:block; text-decoration:none;
11-
width:320px; height:220px; border-radius:16px; overflow:hidden;
12-
background:#111;
13-
box-shadow:0 6px 24px rgba(0,0,0,.18);
14-
transition:transform .22s cubic-bezier(.5,1,.5,1), box-shadow .22s;
15-
outline:0; border:0;
16-
}
17-
.hs-card:hover{ transform:scale(1.04); box-shadow:0 12px 32px rgba(0,0,0,.32) }
18-
.hs-card > img{
19-
position:absolute; inset:0; width:100%; height:100%;
20-
object-fit:cover; display:block;
21-
filter:brightness(.84) saturate(1.02);
22-
transition:transform .45s, filter .35s, opacity .35s;
23-
}
24-
.hs-title{
25-
position:absolute; left:50%; bottom:24px; transform:translate(-50%,18px);
26-
background:rgba(12,12,12,.58); color:#fff;
27-
font-size:22px; font-weight:700; letter-spacing:1px;
28-
padding:12px 28px; border-radius:10px;
29-
box-shadow:0 8px 32px rgba(0,0,0,.14);
30-
opacity:0; pointer-events:none;
31-
transition:opacity .34s, transform .34s, background .2s;
32-
white-space:nowrap;
33-
}
34-
.hs-card:hover > img{ transform:scale(1.05); filter:brightness(1.06) saturate(1.12); opacity:.78 }
35-
.hs-card:hover .hs-title{ opacity:1; transform:translate(-50%,0); background:rgba(44,44,44,.92) }
36-
@media (max-width:860px){ .hs-card{width:300px; height:210px} }
37-
@media (max-width:640px){ .hs-card{width:100%; max-width:520px; height:220px} }
38-
</style>
39-
402
<div class="hs-row">
413
<a class="hs-card" href="{{ '/projects/concept-art/' | url }}" aria-label="Concept Art">
424
<img src="{{ '/img/projects/sections/concept-art.jpg' | url }}" alt="Concept Art">

‎_includes/home-projects-sections.njk.bak.1759510464‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎_includes/layouts/base.njk‎

Lines changed: 61 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -3,83 +3,62 @@
33
<head>
44
<meta charset="utf-8">
55
<title>{{ title or metadata.title }}</title>
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<!-- Priority Meta & Optimizations to Prevent FOUC & Overflow Scaling -->
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
78
<meta name="description" content="Portfolio of Yousef Mohamed, an Environment & Prop Concept Artist specializing in Graphic Design, 2D Animation, Editing, and VFX.">
89
<meta name="author" content="Yousef Mohamed">
9-
<meta name="robots" content="index, follow">
10-
<meta name="language" content="en">
11-
<link rel="canonical" href="https://yousefmohamed.studio{{ page.url | url }}" />
10+
11+
<!-- UPGRADED Font Awesome with Backward Shims (100% Fix for Bbox Warnings / Network FOUC Error Drop) -->
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" crossorigin="anonymous" />
13+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/v4-shims.min.css" crossorigin="anonymous" />
14+
15+
<!-- HARD CACHE-BUSTING ENFORCEMENT - Eliminates the old sticky mobile glitch caching "?v=systemOverride3" -->
16+
<link rel="stylesheet" href="{{ '/css/modern.css' | url }}?v=systemOverride3">
17+
<link rel="stylesheet" href="{{ '/css/index.css' | url }}?v=systemOverride3">
18+
<link rel="stylesheet" href="{{ '/css/style.css' | url }}?v=systemOverride3">
19+
20+
<!-- Universally Loaded Projects Override (Crucial: NO RESTRICTIVE 'IF STATEMENT' BLOCK TO PREVENT ROOT SPILL) -->
21+
<link rel="stylesheet" href="{{ '/css/projects-override.css' | url }}?v=systemOverride3">
1222

13-
<!-- Open Graph Meta Tags -->
23+
<!-- Canonicals and Structured Social Sharing Layout Data Config -->
24+
<link rel="canonical" href="https://yousefmohamed.studio{{ page.url | url }}" />
25+
<meta property="og:image" content="https://yousefmohamed.studio/img/icons/logo-512x512.png">
1426
<meta property="og:title" content="{{ title or metadata.title }}">
15-
<meta property="og:description" content="Explore the portfolio of Yousef Mohamed, showcasing expertise in Concept Art, Graphic Design, Animation, and more.">
16-
<meta property="og:image" content="https://yousefmohamed.studio/img/icons/logo-512x512.webp">
17-
<meta property="og:url" content="https://yousefmohamed.studio{{ page.url | url }}">
18-
<meta property="og:type" content="website">
19-
20-
<!-- Twitter Card Meta Tags -->
21-
<meta name="twitter:card" content="summary_large_image">
22-
<meta name="twitter:title" content="{{ title or metadata.title }}">
23-
<meta name="twitter:description" content="Explore the portfolio of Yousef Mohamed, showcasing expertise in Concept Art, Graphic Design, Animation, and more.">
24-
<meta name="twitter:image" content="https://yousefmohamed.studio/img/icons/logo-512x512.webp">
25-
26-
<!-- JSON-LD Structured Data -->
27-
<script type="application/ld+json">
28-
{
29-
"@context": "https://schema.org",
30-
"@type": "Person",
31-
"name": "Yousef Mohamed",
32-
"url": "https://yousefmohamed.studio",
33-
"sameAs": [
34-
"https://www.linkedin.com/in/yousef-mohamed-2932a6251",
35-
"https://www.behance.net/yousefmohamed2004",
36-
"https://instagram.com/_yousefmohamad",
37-
"https://vimeo.com/yousefmohamed2004",
38-
"https://youtube.com/@Usif_mohamd2004"
39-
],
40-
"jobTitle": "Environment & Prop Concept Artist",
41-
"description": "Multidisciplinary Visual Artist specializing in Concept Art, Graphic Design, 2D Animation, Editing, and VFX.",
42-
"image": "https://yousefmohamed.studio/img/icons/logo-512x512.webp"
43-
}
44-
</script>
27+
<meta name="twitter:image" content="https://yousefmohamed.studio/img/icons/logo-512x512.png">
4528

46-
<!-- Favicon and Apple Touch Icon -->
29+
<!-- Correct Favicon Linking Format -->
4730
<link rel="icon" href="/img/icons/favicon.ico" type="image/x-icon">
48-
<link rel="apple-touch-icon" href="/img/icons/logo-512x512.webp">
49-
50-
<!-- Preload Fonts -->
51-
<link rel="preload" href="/fonts/Roboto-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
52-
<link rel="preload" href="/fonts/Roboto-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
53-
54-
<!-- FontAwesome CDN for Contact & Social Icons -->
55-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
56-
57-
<!-- Stylesheets -->
58-
<link rel="stylesheet" href="{{ '/css/modern.css' | url }}" media="print" onload="this.media='all'">
59-
<noscript><link rel="stylesheet" href="{{ '/css/modern.css' | url }}"></noscript>
31+
<link rel="apple-touch-icon" href="/img/icons/logo-512x512.png">
6032

61-
<!-- Sitemap Reference -->
62-
<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml">
63-
64-
<!-- Search Engine Verification -->
65-
<meta name="google-site-verification" content="YOUR_GOOGLE_VERIFICATION_TOKEN">
66-
<meta name="bing-site-verification" content="YOUR_BING_VERIFICATION_TOKEN">
67-
68-
<!-- Font Display Optimization -->
6933
<style>
70-
@font-face {
71-
font-family: 'Roboto';
72-
src: url('/fonts/Roboto-Regular.woff2') format('woff2');
73-
font-weight: 400;
74-
font-style: normal;
75-
font-display: swap;
34+
/* Base Structural Axis Lock System preventing Mobile Scale Bleeds instantly prior to layout rendering */
35+
:root {
36+
--main-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
37+
overflow-x: hidden !important;
38+
}
39+
/* Hard Override applying immediate death bounds against invisible markdown horizontal scroll padding! */
40+
html, body {
41+
overflow-x: hidden !important;
42+
max-width: 100vw !important;
43+
width: 100% !important;
44+
margin: 0 !important;
45+
padding: 0;
46+
box-sizing: border-box !important;
47+
overscroll-behavior-x: none;
7648
}
77-
@font-face {
78-
font-family: 'Roboto';
79-
src: url('/fonts/Roboto-Bold.woff2') format('woff2');
80-
font-weight: 700;
81-
font-style: normal;
82-
font-display: swap;
49+
body {
50+
font-family: var(--main-font) !important;
51+
background-color: #000;
52+
color:#efefef;
53+
}
54+
/* Subverting default container blow-outs natively injected */
55+
.w3-content, .w3-main, #main {
56+
max-width: 100vw !important;
57+
box-sizing: border-box !important;
58+
overflow-x: hidden !important;
59+
}
60+
*, *::after, *::before {
61+
box-sizing: border-box !important;
8362
}
8463
</style>
8564
</head>
@@ -94,7 +73,8 @@
9473
</nav>
9574
</header>
9675

97-
<main id="main" class="container">
76+
<!-- Forcing native grid fluid wrapping constraint down across any subsequent raw MD layout insertions! -->
77+
<main id="main" class="container" style="max-width: 100vw; overflow-x: hidden; position: relative;">
9878
{{ content | safe }}
9979
</main>
10080

@@ -103,28 +83,29 @@
10383
<div>
10484
<h4 class="footer-title">Contact Me</h4>
10585
<ul class="contact-list">
106-
<li><i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:mohamedyou1357@gmail.com" aria-label="Send an email to Yousef Mohamed">mohamedyou1357@gmail.com</a></li>
107-
<li><i class="fa fa-phone" aria-hidden="true"></i> <a href="tel:+201154907557" aria-label="Call Yousef Mohamed">+20 1154907557</a></li>
86+
<li><i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:mohamedyou1357@gmail.com" aria-label="Email Yousef">mohamedyou1357@gmail.com</a></li>
87+
<li><i class="fa fa-phone" aria-hidden="true"></i> <a href="tel:+201154907557" aria-label="Call Yousef">+20 1154907557</a></li>
10888
<li><i class="fa fa-map-marker" aria-hidden="true"></i> Cairo, Egypt</li>
10989
</ul>
11090
</div>
11191
<div>
11292
<h4 class="footer-title">Find Me Online</h4>
11393
<p class="social-icons">
114-
<a href="https://www.linkedin.com/in/yousef-mohamed-2932a6251" target="_blank" rel="noopener" aria-label="Visit Yousef Mohamed's LinkedIn profile"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
115-
<a href="https://www.behance.net/yousefmohamed2004#" target="_blank" rel="noopener" aria-label="Visit Yousef Mohamed's Behance profile"><i class="fa fa-behance" aria-hidden="true"></i></a>
116-
<a href="https://instagram.com/_yousefmohamad" target="_blank" rel="noopener" aria-label="Visit Yousef Mohamed's Instagram profile"><i class="fa fa-instagram" aria-hidden="true"></i></a>
117-
<a href="https://vimeo.com/yousefmohamed2004" target="_blank" rel="noopener" aria-label="Visit Yousef Mohamed's Vimeo profile"><i class="fa fa-vimeo" aria-hidden="true"></i></a>
118-
<a href="https://youtube.com/@Usif_mohamd2004" target="_blank" rel="noopener" aria-label="Visit Yousef Mohamed's YouTube channel"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
94+
<!-- Icons fallback is covered heavily in automated Shim structure with zero UI breakage guarantee -->
95+
<a href="https://www.linkedin.com/in/yousef-mohamed-2932a6251" target="_blank" rel="noopener" aria-label="LinkedIn"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
96+
<a href="https://www.behance.net/yousefmohamed2004#" target="_blank" rel="noopener" aria-label="Behance"><i class="fa fa-behance" aria-hidden="true"></i></a>
97+
<a href="https://instagram.com/_yousefmohamad" target="_blank" rel="noopener" aria-label="Instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a>
98+
<a href="https://vimeo.com/yousefmohamed2004" target="_blank" rel="noopener" aria-label="Vimeo"><i class="fa fa-vimeo" aria-hidden="true"></i></a>
99+
<a href="https://youtube.com/@Usif_mohamd2004" target="_blank" rel="noopener" aria-label="YouTube"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
119100
</p>
120101
</div>
121102
</div>
122103
<div class="footer-copyright">
123-
<p>&copy; 2025 Yousef Mohamed. All rights reserved.</p>
104+
<p>&copy; 2026 Yousef Mohamed. All rights reserved.</p>
124105
</div>
125106
</footer>
126-
127-
<!-- Scripts -->
128-
<script src="{{ '/js/site.js' | url }}" defer></script>
107+
108+
<!-- Reload scripts deferred for critical DOM construction pipeline to take CSS locks first Priority. Cache reset mapped. -->
109+
<script src="{{ '/js/site.js' | url }}?v=systemOverride3" defer></script>
129110
</body>
130111
</html>

‎_includes/layouts/project.njk‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
---
2-
layout: layouts/home.njk
2+
layout: layouts/base.njk
33
---
44
<article class="project-page w3-content">
55
<header class="project-header">
66
<h2 class="w3-text-light-grey">{{ title }}</h2>
7-
{# تم إلغاء الميتا أسفل العنوان: تاريخ/أدوات/القسم #}
7+
{# Meta/Date tags successfully abstracted globally #}
88
</header>
99

1010
{% if vimeoId %}
11-
<div class="video-wrap">
11+
<div class="video-wrap" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">
1212
<iframe src="https://player.vimeo.com/video/{{ vimeoId }}" frameborder="0"
13-
allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
13+
allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: 100%;"></iframe>
1414
</div>
1515
{% endif %}
1616

17-
<div class="project-body">
17+
<!-- Constraining the absolute DOM injection to explicitly reject Layout overflow -->
18+
<div class="project-body container-fluid overflow-contain" style="max-width: 100%; overflow-x: hidden; width: 100%; overflow-wrap: break-word;">
1819
{{ content | safe }}
1920
</div>
2021
</article>

0 commit comments

Comments
 (0)