Skip to content

Commit b37f4bb

Browse files
mohdibntarekmohdibntarek
committed
aside on home page
1 parent 92339f0 commit b37f4bb

File tree

3 files changed

+129
-109
lines changed

3 files changed

+129
-109
lines changed

‎src/components/LeftSide.astro‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
import IconCard from "../components/IconCard.astro";
3+
import personalPhoto from "../assets/personal_photo.png";
4+
import arxivIcon from "../assets/arxiv.ico";
5+
import { icon } from "@fortawesome/fontawesome-svg-core";
6+
import { faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons";
7+
import {
8+
faGithub,
9+
faYoutube,
10+
faLinkedin,
11+
faGoogleScholar,
12+
faResearchgate,
13+
} from "@fortawesome/free-brands-svg-icons";
14+
const { text_color_1 = "text-orange-200", text_color_2 = "text-white" } =
15+
Astro.props;
16+
---
17+
18+
<a class:list={["text-lg", text_color_1]} href="/">
19+
<img
20+
class="my-0 pb-4 w-26 h-26 flex ml-8 mr-8 rounded-full"
21+
src={personalPhoto.src}
22+
alt="Mohamed Tarek"
23+
/>
24+
<p class:list={["text-xl my-0 pb-4 pt-4 pl-4 font-bold", text_color_1]}>
25+
Mohamed Tarek
26+
</p>
27+
</a>
28+
<div class={text_color_2}>
29+
<div class="pl-6 pt-3 text-lg">
30+
<IconCard icon={icon(faMapMarkerAlt)}> Sharjah </IconCard>
31+
<IconCard href="https://github.com/mohamed82008/" icon={icon(faGithub)}>
32+
GitHub
33+
</IconCard>
34+
<IconCard
35+
href="https://www.linkedin.com/in/mabdelaty/"
36+
icon={icon(faLinkedin)}
37+
>
38+
LinkedIn
39+
</IconCard>
40+
<IconCard
41+
href="https://www.youtube.com/@MrMohamed82008/"
42+
icon={icon(faYoutube)}
43+
>
44+
YouTube
45+
</IconCard>
46+
<IconCard
47+
href="https://scholar.google.com.au/citations?user=um_AxkwAAAAJ&hl=en/"
48+
icon={icon(faGoogleScholar)}
49+
>
50+
Google Scholar
51+
</IconCard>
52+
<IconCard
53+
href="https://www.researchgate.net/profile/Mohamed-Tarek-18/"
54+
icon={icon(faResearchgate)}
55+
>
56+
ResearchGate
57+
</IconCard>
58+
<IconCard href="https://arxiv.org/a/tarek_m_1.html/" path={arxivIcon}>
59+
arXiv
60+
</IconCard>
61+
</div>
62+
</div>
63+
64+
<style>
65+
a {
66+
text-decoration: none;
67+
}
68+
</style>

‎src/layouts/Layout.astro‎

Lines changed: 2 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,6 @@
11
---
22
const { frontmatter } = Astro.props;
3-
import IconCard from "../components/IconCard.astro";
4-
import personalPhoto from "../assets/personal_photo.png";
5-
import arxivIcon from "../assets/arxiv.ico";
6-
import { icon } from "@fortawesome/fontawesome-svg-core";
7-
import { faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons";
8-
import {
9-
faGithub,
10-
faYoutube,
11-
faLinkedin,
12-
faGoogleScholar,
13-
faResearchgate,
14-
} from "@fortawesome/free-brands-svg-icons";
3+
import LeftSide from "../components/LeftSide.astro";
154
import "../styles/markdown.css";
165
---
176

@@ -24,54 +13,7 @@ import "../styles/markdown.css";
2413
</head>
2514
<body>
2615
<aside>
27-
<a class="text-lg text-white p-2" href="/">
28-
<img
29-
class="mt-5 w-26 h-26 flex ml-8 mr-8 rounded-full"
30-
src={personalPhoto.src}
31-
alt="Mohamed Tarek"
32-
/>
33-
<p class="text-xl mb-3 mt-8 ml-4 font-bold text-orange-200">
34-
Mohamed Tarek
35-
</p>
36-
</a>
37-
<div class="text-white">
38-
<div class="pl-6 pt-3 text-lg">
39-
<IconCard icon={icon(faMapMarkerAlt)}> Sharjah </IconCard>
40-
<IconCard
41-
href="https://github.com/mohamed82008/"
42-
icon={icon(faGithub)}
43-
>
44-
GitHub
45-
</IconCard>
46-
<IconCard
47-
href="https://www.linkedin.com/in/mabdelaty/"
48-
icon={icon(faLinkedin)}
49-
>
50-
LinkedIn
51-
</IconCard>
52-
<IconCard
53-
href="https://www.youtube.com/@MrMohamed82008/"
54-
icon={icon(faYoutube)}
55-
>
56-
YouTube
57-
</IconCard>
58-
<IconCard
59-
href="https://scholar.google.com.au/citations?user=um_AxkwAAAAJ&hl=en/"
60-
icon={icon(faGoogleScholar)}
61-
>
62-
Google Scholar
63-
</IconCard>
64-
<IconCard
65-
href="https://www.researchgate.net/profile/Mohamed-Tarek-18/"
66-
icon={icon(faResearchgate)}
67-
>
68-
ResearchGate
69-
</IconCard>
70-
<IconCard href="https://arxiv.org/a/tarek_m_1.html/" path={arxivIcon}>
71-
arXiv
72-
</IconCard>
73-
</div>
74-
</div>
16+
<LeftSide />
7517
</aside>
7618
<main>
7719
<nav>

‎src/pages/index.astro‎

Lines changed: 59 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import softwareIcon from "../assets/programmer-icon.png";
55
import communityIcon from "../assets/community-icon.png";
66
import blogPostsIcon from "../assets/text-documents-line-icon.png";
77
import awarenessIcon from "../assets/head-idea-icon.png";
8+
import LeftSide from "../components/LeftSide.astro";
89
---
910

1011
<!doctype html>
@@ -27,66 +28,75 @@ import awarenessIcon from "../assets/head-idea-icon.png";
2728
of Sydney
2829
</p>
2930
</header>
30-
<main class="m-10 ml-60 grid grid-cols-3 gap-14 pr-60">
31-
<!-- About -->
32-
<a href="/about" class="card">
33-
<img src={userIcon.src} alt="user icon" class="card-img" />
34-
<h2 class="card-head">About</h2>
35-
<p class="card-desc">Background, education and work.</p>
36-
<p class="card-button">Learn more</p>
37-
</a>
38-
<!-- Research and training -->
39-
<a href="/publications" class="card">
40-
<img src={pubsIcon.src} alt="research icon" class="card-img" />
41-
<h2 class="card-head">Research & Teaching</h2>
42-
<p class="card-desc">Publications and teaching material.</p>
43-
<p class="card-button">Learn more</p>
44-
</a>
45-
<!-- Software -->
46-
<a href="/software" class="card">
47-
<img src={softwareIcon.src} alt="programmer icon" class="card-img" />
48-
<h2 class="card-head">Software</h2>
49-
<p class="card-desc">Open source contributions.</p>
50-
<p class="card-button">Learn more</p>
51-
</a>
52-
<!-- Mentorship -->
53-
<a href="/mentorship" class="card">
54-
<img
55-
src={communityIcon.src}
56-
alt="community icon"
57-
class="card-img w-30"
58-
/>
59-
<h2 class="card-head">Mentorship</h2>
60-
<p class="card-desc">People and projects I mentored.</p>
61-
<p class="card-button">Learn more</p>
62-
</a>
63-
<!-- Blog posts -->
64-
<a href="/blogposts" class="card">
65-
<img src={blogPostsIcon.src} alt="documents icon" class="card-img" />
66-
<h2 class="card-head">Blog posts</h2>
67-
<p class="card-desc">Blog posts I have written.</p>
68-
<p class="card-button">Learn more</p>
69-
</a>
70-
<!-- Awareness -->
71-
<a href="/awareness" class="card">
72-
<img src={awarenessIcon.src} alt="awareness icon" class="card-img" />
73-
<h2 class="card-head">Awareness</h2>
74-
<p class="card-desc">Raise your awareness.</p>
75-
<p class="card-button">Learn more</p>
76-
</a>
31+
<main class="flex m-10 pr-0">
32+
<aside>
33+
<LeftSide text_color_1="text-blue-500" text_color_2="text-black" />
34+
</aside>
35+
<div class="grid grid-cols-3 gap-10 ml-40">
36+
<!-- About -->
37+
<a href="/about" class="card">
38+
<img src={userIcon.src} alt="user icon" class="card-img" />
39+
<h2 class="card-head">About</h2>
40+
<p class="card-desc">Background, education and work.</p>
41+
<p class="card-button">Learn more</p>
42+
</a>
43+
<!-- Research and training -->
44+
<a href="/publications" class="card">
45+
<img src={pubsIcon.src} alt="research icon" class="card-img" />
46+
<h2 class="card-head">Research & Teaching</h2>
47+
<p class="card-desc">Publications and teaching material.</p>
48+
<p class="card-button">Learn more</p>
49+
</a>
50+
<!-- Software -->
51+
<a href="/software" class="card">
52+
<img src={softwareIcon.src} alt="programmer icon" class="card-img" />
53+
<h2 class="card-head">Software</h2>
54+
<p class="card-desc">Open source contributions.</p>
55+
<p class="card-button">Learn more</p>
56+
</a>
57+
<!-- Mentorship -->
58+
<a href="/mentorship" class="card">
59+
<img
60+
src={communityIcon.src}
61+
alt="community icon"
62+
class="card-img w-30"
63+
/>
64+
<h2 class="card-head">Mentorship</h2>
65+
<p class="card-desc">People and projects I mentored.</p>
66+
<p class="card-button">Learn more</p>
67+
</a>
68+
<!-- Blog posts -->
69+
<a href="/blogposts" class="card">
70+
<img src={blogPostsIcon.src} alt="documents icon" class="card-img" />
71+
<h2 class="card-head">Blog posts</h2>
72+
<p class="card-desc">Blog posts I have written.</p>
73+
<p class="card-button">Learn more</p>
74+
</a>
75+
<!-- Awareness -->
76+
<a href="/awareness" class="card">
77+
<img src={awarenessIcon.src} alt="awareness icon" class="card-img" />
78+
<h2 class="card-head">Awareness</h2>
79+
<p class="card-desc">Raise your awareness.</p>
80+
<p class="card-button">Learn more</p>
81+
</a>
82+
</div>
7783
</main>
7884
</body>
7985
</html>
8086

8187
<style>
8288
@import "tailwindcss";
8389

90+
aside {
91+
@apply pr-10 pl-6 max-w-50 min-w-50 sticky top-0 bg-slate-100 sm:px-4;
92+
}
93+
8494
.card {
85-
@apply mt-0 mb-1 h-50 w-90;
95+
@apply mt-0 mb-1 w-70;
8696
}
8797

8898
@utility card-img {
89-
@apply mb-3 h-20 w-26;
99+
@apply mb-3 h-20 w-24;
90100
}
91101

92102
.card-head {

0 commit comments

Comments
 (0)