Skip to content

Commit b2b0a4c

Browse files
YousefMohamdYousefMohamd
committed
update
1 parent f3aa78f commit b2b0a4c

69 files changed

Lines changed: 28170 additions & 397 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: 31 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,40 @@
11
const pluginRss = require("@11ty/eleventy-plugin-rss");
2-
const pluginNavigation = require("@11ty/eleventy-navigation");
2+
33
module.exports = function(eleventyConfig) {
4-
eleventyConfig.addPlugin(pluginRss);
5-
eleventyConfig.addPlugin(pluginNavigation);
6-
eleventyConfig.addPassthroughCopy({ "img": "img" });
4+
/* ==== Static passthrough (لازم) ==== */
75
eleventyConfig.addPassthroughCopy({ "css": "css" });
8-
eleventyConfig.addPassthroughCopy({ "files": "files" });
9-
eleventyConfig.addFilter("htmlDateString", (d) => new Date(d).toISOString().slice(0, 10));
10-
eleventyConfig.addFilter("readableDate", (d) =>
11-
new Date(d).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })
12-
);
13-
const EXCLUDED = new Set(["all","nav","post","posts"]);
14-
eleventyConfig.addFilter("filterTagList", (tags) => (tags || []).filter((t) => !EXCLUDED.has(t)));
15-
eleventyConfig.addCollection("tagList", (api) => {
6+
eleventyConfig.addPassthroughCopy({ "js": "js" });
7+
eleventyConfig.addPassthroughCopy({ "img": "img" });
8+
eleventyConfig.addPassthroughCopy({ "files": "files" }); // لو موجود
9+
10+
/* ==== Watch targets ==== */
11+
eleventyConfig.addWatchTarget("css");
12+
eleventyConfig.addWatchTarget("js");
13+
eleventyConfig.addWatchTarget("img/showreel");
14+
15+
/* ==== RSS filters & fixes (علاج absoluteUrl/htmlDate/readableDate) ==== */
16+
eleventyConfig.addPlugin(pluginRss);
17+
eleventyConfig.addFilter("absoluteUrl", (url, base) => pluginRss.absoluteUrl(url, base));
18+
eleventyConfig.addFilter("htmlDateString", (dateObj) => {
19+
try { return new Date(dateObj).toISOString(); } catch { return ""; }
20+
});
21+
eleventyConfig.addFilter("readableDate", (dateObj) => {
22+
try {
23+
const d = new Date(dateObj);
24+
return new Intl.DateTimeFormat("en-GB", { day:"2-digit", month:"short", year:"numeric" }).format(d);
25+
} catch { return ""; }
26+
});
27+
28+
/* ==== tagList collection (عشان tags.njk ما يهنّش) ==== */
29+
eleventyConfig.addCollection("tagList", (collectionsApi) => {
1630
const set = new Set();
17-
api.getAll().forEach((item) => {
18-
(item.data.tags || []).forEach((t) => { if(!EXCLUDED.has(t)) set.add(t); });
19-
});
20-
return Array.from(set).sort();
31+
collectionsApi.getAll().forEach(item => (item.data.tags || []).forEach(t => set.add(t)));
32+
return [...set];
2133
});
34+
35+
/* ==== Server options (نقفل liveReload اللي كان عامل RSV1) ==== */
2236
return {
2337
dir: { input: ".", includes: "_includes", data: "_data", output: "_site" },
24-
htmlTemplateEngine: "njk",
25-
markdownTemplateEngine: "njk",
26-
templateFormats: ["njk","md","html"]
38+
serverOptions: { liveReload: false, domDiff: false, port: 8087 }
2739
};
2840
};

‎_data/metadata.json‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
{
22
"title": "Yousef Mohamed",
3-
"description": "Multidisciplinary Visual Artist | Concept Artist | Graphic Designer | 2D Animator | Editor | VFX Generalist",
4-
"url": "https://YousefMohamd.github.io",
53
"author": {
6-
"name": "Yousef Mohamed",
7-
"email": "Mohamedyou1357@gmail.com",
8-
"location": "Cairo",
9-
"summary": "I am a Multidisciplinary Visual Artist with strong skills in Concept Art, Graphic Design, Animation, Editing, and VFX. My main focus is environment design and perspective drawing (up to 6-point). I combine traditional art basics with digital tools to create creative and clear visual ideas. I have experience in both personal projects and team collaborations, making storyboards, demo sequences, and design works. I am a fast learner, flexible, and problem solver, always improving my art and technical skills every day. I started academic learning and gained my practical experience from 2022 until now."
4+
"email": "mohamedyou1357@gmail.com",
5+
"location": "Cairo, Egypt",
6+
"role": "Filmmaker",
7+
"summary": "Multidisciplinary Visual Artist | Concept Artist | Graphic Designer | 2D Animator | Editor | VFX Generalist"
108
},
119
"social": {
12-
"linkedin": "https://www.linkedin.com/in/yousefmohamed2004",
13-
"behance": "https://www.behance.net/yousefmohamed2004",
14-
"instagram": "https://www.instagram.com/_Yousefmohamad",
15-
"vimeo": "https://vimeo.com/yousefmohamed2004",
16-
"youtube": "https://youtube.com/@Usif_mohamd2004"
10+
"linkedin": "#",
11+
"behance": "#",
12+
"instagram": "#",
13+
"vimeo": "#",
14+
"youtube": "#"
1715
}
1816
}

‎_data/showreel.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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"}));
23+
};

‎_data/showreel.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
[
2+
{
3+
"type": "image",
4+
"src": "/img/showreel/001.png"
5+
},
6+
{
7+
"type": "image",
8+
"src": "/img/showreel/002.gif"
9+
},
10+
{
11+
"type": "image",
12+
"src": "/img/showreel/003.jpg"
13+
}
14+
]

‎_data/site.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"url": "http://localhost:8087",
3+
"title": "Yousef Mohamed — Portfolio",
4+
"author": "Yousef Mohamed"
5+
}

‎_includes/footer.njk‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<script src="/js/override-inject.js"></script>
2+
<script src="/js/override-inject.js"></script>

‎_includes/home-projects-sections.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<style id="hs-inline-style">
2+
/* === Home Projects — self-contained styles === */
3+
.home-sections{max-width:1200px;margin:28px auto 0;padding:0 16px;}
4+
.home-sections-title{
5+
margin:0 0 14px 2px; font-size:28px; font-weight:700; letter-spacing:.2px;
6+
font-family: Inter, system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:#f0f0f0;
7+
text-align:left;
8+
}
9+
.hs-row{display:flex;gap:28px;justify-content:flex-start;align-items:stretch;flex-wrap:wrap}
10+
11+
.hs-card{position:relative;display:block;width:min(38vw,520px);height:min(22vw,320px);
12+
min-width:320px;min-height:240px;background:#111;overflow:hidden;border:none;
13+
box-shadow:0 6px 24px rgba(0,0,0,.20);isolation:isolate;
14+
transition:transform .35s cubic-bezier(.5,1,.5,1), box-shadow .35s}
15+
.hs-card, .hs-card * { text-decoration:none !important; }
16+
.hs-card:hover{transform:scale(1.02);box-shadow:0 12px 34px rgba(0,0,0,.38)}
17+
18+
.hs-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
19+
filter:brightness(.82) saturate(1.05);transform:scale(1.0);
20+
transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .35s ease;z-index:1}
21+
.hs-card:hover .hs-bg{transform:scale(1.05);filter:brightness(1.02) saturate(1.12)}
22+
23+
.hs-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
24+
justify-content:center;align-items:flex-start;padding:32px;pointer-events:none;
25+
background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.64) 100%)}
26+
27+
.hs-heading{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
28+
font-size:clamp(20px,2.6vw,28px);line-height:1.1;font-weight:700;letter-spacing:.4px;
29+
margin:0 0 14px 0;transform:translateY(8px);opacity:.96;
30+
transition:transform .33s cubic-bezier(.46,.16,.36,.82),opacity .33s;color:#fff}
31+
.hs-btn{display:inline-block;pointer-events:auto;border:1px solid rgba(255,255,255,.86);
32+
padding:8px 20px;border-radius:4px;background:transparent;color:#fff;
33+
font:600 12px/1 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
34+
letter-spacing:1.5px;text-transform:uppercase;transform:translateY(18px);opacity:0;
35+
transition:transform .35s cubic-bezier(.46,.16,.36,.82),opacity .35s,background .2s,color .2s}
36+
.hs-card:hover .hs-heading{transform:translateY(0);opacity:1}
37+
.hs-card:hover .hs-btn{transform:translateY(0);opacity:1}
38+
.hs-btn:hover{background:#fff;color:#222}
39+
40+
@media (max-width:980px){ .hs-card{ width:min(45vw,520px); height:min(27vw,320px) } }
41+
@media (max-width:720px){ .hs-row{gap:22px} .hs-card{width:100%;height:260px} .hs-overlay{padding:24px} }
42+
</style>
43+
44+
<section class="home-sections">
45+
<h2 class="home-sections-title">Projects</h2>
46+
<div class="hs-row">
47+
<a class="hs-card" href="{{ '/projects/concept-art/' | url }}">
48+
<img class="hs-bg" src="{{ '/img/projects/sections/concept-art.jpg' | url }}" alt="Concept Art">
49+
<div class="hs-overlay">
50+
<h3 class="hs-heading">Concept Art</h3>
51+
<span class="hs-btn">View more</span>
52+
</div>
53+
</a>
54+
55+
<a class="hs-card" href="{{ '/projects/graphic-design/' | url }}">
56+
<img class="hs-bg" src="{{ '/img/projects/sections/graphic-design.jpg' | url }}" alt="Graphic Design">
57+
<div class="hs-overlay">
58+
<h3 class="hs-heading">Graphic Design</h3>
59+
<span class="hs-btn">View more</span>
60+
</div>
61+
</a>
62+
63+
<a class="hs-card" href="{{ '/projects/short-film-projects/' | url }}">
64+
<img class="hs-bg" src="{{ '/img/projects/sections/short-films.jpg' | url }}" alt="Short Film Projects">
65+
<div class="hs-overlay">
66+
<h3 class="hs-heading">Short Film Projects</h3>
67+
<span class="hs-btn">View more</span>
68+
</div>
69+
</a>
70+
</div>
71+
</section>
72+
<style>
73+
@media (min-width: 1024px){
74+
.hs-row{
75+
display: grid !important;
76+
grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
77+
gap: 26px !important;
78+
align-items: stretch !important;
79+
}
80+
.hs-card{
81+
width: auto !important;
82+
min-width: 0 !important;
83+
height: 240px !important;
84+
}
85+
}
86+
@media (min-width: 1280px){
87+
.hs-row{ gap: 28px !important; }
88+
.hs-card{ height: 260px !important; }
89+
}
90+
</style>

‎_includes/home-projects-sections.njk‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<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+
40+
<div class="hs-row">
41+
<a class="hs-card" href="{{ '/projects/concept-art/' | url }}" aria-label="Concept Art">
42+
<img src="{{ '/img/projects/sections/concept-art.jpg' | url }}" alt="Concept Art">
43+
<span class="hs-title">Concept Art</span>
44+
</a>
45+
46+
<a class="hs-card" href="{{ '/projects/graphic-design/' | url }}" aria-label="Graphic Design">
47+
<img src="{{ '/img/projects/sections/graphic-design.jpg' | url }}" alt="Graphic Design">
48+
<span class="hs-title">Graphic Design</span>
49+
</a>
50+
51+
<a class="hs-card" href="{{ '/projects/short-film-projects/' | url }}" aria-label="Short Film Projects">
52+
<img src="{{ '/img/projects/sections/short-films.jpg' | url }}" alt="Short Film Projects">
53+
<span class="hs-title">Short Film Projects</span>
54+
</a>
55+
</div>
56+
</section>

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<section class="home-section projects-home">
2+
<h2 class="section-title">Projects</h2>
3+
4+
<div class="projects-sections-row">
5+
<!-- Concept Art -->
6+
<figure class="snip1273">
7+
<img src="{{ '/img/projects/sections/concept-art.jpg' | url }}" alt="Concept Art">
8+
<figcaption><h3>Concept Art</h3></figcaption>
9+
<a href="{{ '/projects/concept-art/' | url }}">Concept Art</a>
10+
</figure>
11+
12+
<!-- Graphic Design -->
13+
<figure class="snip1273">
14+
<img src="{{ '/img/projects/sections/graphic-design.jpg' | url }}" alt="Graphic Design">
15+
<figcaption><h3>Graphic Design</h3></figcaption>
16+
<a href="{{ '/projects/graphic-design/' | url }}">Graphic Design</a>
17+
</figure>
18+
19+
<!-- Short Film Projects -->
20+
<figure class="snip1273">
21+
<img src="{{ '/img/projects/sections/short-films.jpg' | url }}" alt="Short Film Projects">
22+
<figcaption><h3>Short Film Projects</h3></figcaption>
23+
<a href="{{ '/projects/short-film-projects/' | url }}">Short Film Projects</a>
24+
</figure>
25+
</div>
26+
</section>

0 commit comments

Comments
 (0)