Skip to content

Commit 01865ef

Browse files
YousefMohamdYousefMohamd
committed
update
1 parent cbcedbc commit 01865ef

12 files changed

Lines changed: 98 additions & 53 deletions

File tree

‎.idea/.gitignore‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/modules.xml‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/my-portfolio.iml‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/vcs.xml‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎_includes/home-projects-sections.html‎

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,67 @@
11
<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}
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}
1010

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)}
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)}
1717

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)}
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)}
2222

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%)}
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%)}
2626

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}
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}
3939

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} }
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} }
4242
</style>
4343

4444
<section class="home-sections">
4545
<h2 class="home-sections-title">Projects</h2>
4646
<div class="hs-row">
4747
<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">
48+
<img class="hs-bg" src="{{ '/img/projects/sections/concept-art.jpg' | url }}" alt="Concept Art" loading="lazy">
4949
<div class="hs-overlay">
5050
<h3 class="hs-heading">Concept Art</h3>
5151
<span class="hs-btn">View more</span>
5252
</div>
5353
</a>
5454

5555
<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">
56+
<img class="hs-bg" src="{{ '/img/projects/sections/graphic-design.jpg' | url }}" alt="Graphic Design" loading="lazy">
5757
<div class="hs-overlay">
5858
<h3 class="hs-heading">Graphic Design</h3>
5959
<span class="hs-btn">View more</span>
6060
</div>
6161
</a>
6262

6363
<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">
64+
<img class="hs-bg" src="{{ '/img/projects/sections/short-films.jpg' | url }}" alt="Short Film Projects" loading="lazy">
6565
<div class="hs-overlay">
6666
<h3 class="hs-heading">Short Film Projects</h3>
6767
<span class="hs-btn">View more</span>
@@ -70,21 +70,21 @@ <h3 class="hs-heading">Short Film Projects</h3>
7070
</div>
7171
</section>
7272
<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;
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+
}
7985
}
80-
.hs-card{
81-
width: auto !important;
82-
min-width: 0 !important;
83-
height: 240px !important;
86+
@media (min-width: 1280px){
87+
.hs-row{ gap: 28px !important; }
88+
.hs-card{ height: 260px !important; }
8489
}
85-
}
86-
@media (min-width: 1280px){
87-
.hs-row{ gap: 28px !important; }
88-
.hs-card{ height: 260px !important; }
89-
}
9090
</style>

‎_includes/layouts/base.njk‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,20 @@
77
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
88
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
99
<link rel="stylesheet" href="{{ '/css/modern.css' | url }}">
10+
11+
<!-- SEO Meta Tags -->
12+
<meta name="description" content="Portfolio of Yousef Mohamed, an Environment & Prop Concept Artist specializing in Graphic Design, 2D Animation, Editing, and VFX.">
13+
<meta name="keywords" content="Yousef Mohamed, Concept Artist, Graphic Designer, 2D Animator, Editor, VFX, Portfolio">
14+
<!-- Open Graph Meta Tags -->
15+
<meta property="og:title" content="Yousef Mohamed - Environment & Prop Concept Artist">
16+
<meta property="og:description" content="Explore the portfolio of Yousef Mohamed, showcasing expertise in Concept Art, Graphic Design, Animation, and more.">
17+
<meta property="og:image" content="https://yousefmohamed.studio/img/icons/logo-512x512.png">
18+
<meta property="og:url" content="https://yousefmohamed.studio">
19+
<meta property="og:type" content="website">
20+
21+
<!-- Favicon and Apple Touch Icon -->
22+
<link rel="icon" href="/img/icons/favicon.ico" type="image/x-icon">
23+
<link rel="apple-touch-icon" href="/img/icons/logo-512x512.png">
1024
</head>
1125
<body class="site-body">
1226
<header class="site-header">

‎img/icons/favicon.ico‎

174 KB
Binary file not shown.

‎img/icons/logo-512x512.png‎

174 KB
Loading

‎img/projects/concept-art/38-.jpg‎

1.36 MB
Loading

‎img/projects/concept-art/38.jpg‎

-894 KB
Loading

0 commit comments

Comments
 (0)