Skip to content

Commit 52f87df

Browse files
jsanzdevjsanzdev
committed
Portfolio Page, fixed some links in mobile mode.
1 parent 651abbf commit 52f87df

File tree

12 files changed

+312
-7
lines changed

12 files changed

+312
-7
lines changed

‎data/portfolio/coming-soon.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
pubDate: "Oct 15 2022"
3+
title: "Coming Soon"
4+
description: "I'm currently working on some projects, once they are ready I will post them here"
5+
image: "~/assets/images/apple-dev.webp"
6+
# category: "Blog"
7+
# tags: [swift, swiftUI]
8+
---
9+
10+
## I'm currently working on some projects, once they are ready I will post them here
11+
12+
## Happy coding!
13+
14+
### JS

‎src/assets/images/apple-dev.webp‎

9.41 KB
Loading

‎src/components/portfolio/PortfolioItem.astro‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
import Picture from '~/components/core/Picture.astro';
3+
import PortfolioTags from '~/components/atoms/Tags.astro';
4+
5+
import { getPermalink } from '~/utils/permalinks';
6+
import { findImage } from '~/utils/images';
7+
import { getFormattedDate } from '~/utils/utils';
8+
9+
const { portfolio } = Astro.props;
10+
11+
const image = await findImage(portfolio.image);
12+
---
13+
14+
<article class="max-w-md mx-auto md:max-w-none grid md:grid-cols-2 gap-6 md:gap-8">
15+
<a class="relative block group" href={getPermalink(portfolio.slug, 'portfolio-post')}>
16+
<div
17+
class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg"
18+
>
19+
<Picture
20+
src={image}
21+
class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
22+
widths={[400, 900]}
23+
sizes="(max-width: 900px) 400px, 900px"
24+
alt={portfolio.title}
25+
aspectRatio="16:9"
26+
/>
27+
</div>
28+
</a>
29+
<div>
30+
<header>
31+
<h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2 font-heading">
32+
<a
33+
class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
34+
href={getPermalink(portfolio.slug, 'portfolio-post')}
35+
>
36+
{portfolio.title}
37+
</a>
38+
</h2>
39+
</header>
40+
<p class="text-md sm:text-lg flex-grow">
41+
{portfolio.excerpt || portfolio.description}
42+
</p>
43+
<footer class="mt-4">
44+
<div>
45+
<span class="text-gray-500 dark:text-slate-400">
46+
<time datetime={portfolio.pubDate}>{getFormattedDate(portfolio.pubDate)}</time> ~
47+
{Math.ceil(portfolio.readingTime)} min read
48+
</span>
49+
</div>
50+
<div class="mt-4">
51+
<PortfolioTags tags={portfolio.tags} />
52+
</div>
53+
</footer>
54+
</div>
55+
</article>

‎src/components/portfolio/PortfolioList.astro‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
import Item from '~/components/portfolio/PortfolioItem.astro';
3+
4+
const { portfolios } = Astro.props;
5+
---
6+
7+
<ul>
8+
{
9+
portfolios.map((portfolio) => (
10+
<li class="mb-10 md:mb-16">
11+
<Item post={portfolio} />
12+
</li>
13+
))
14+
}
15+
</ul>

‎src/components/portfolio/SinglePortfolio.astro‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
import Picture from '~/components/core/Picture.astro';
3+
import PostTags from '~/components/atoms/Tags.astro';
4+
5+
import { getFormattedDate } from '~/utils/utils';
6+
7+
const { portfolio } = Astro.props;
8+
---
9+
10+
<section class="py-8 sm:py-16 lg:py-20 mx-auto">
11+
<article>
12+
<header>
13+
<p class="max-w-3xl mx-auto text-center">
14+
<time datetime={portfolio.pubDate}>{getFormattedDate(portfolio.pubDate)}</time> ~ {Math.ceil(portfolio.readingTime)} min read
15+
</p>
16+
<h1
17+
class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 font-heading"
18+
>
19+
{portfolio.title}
20+
</h1>
21+
{
22+
portfolio.image && (
23+
<Picture
24+
src={portfolio.image}
25+
class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
26+
widths={[400, 900]}
27+
sizes="(max-width: 900px) 400px, 900px"
28+
alt={portfolio.description}
29+
aspectRatio="16:9"
30+
/>
31+
)
32+
}
33+
</header>
34+
<div
35+
class="container mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
36+
>
37+
<Fragment set:html={portfolio.body} />
38+
</div>
39+
<div class="container mx-auto px-8 sm:px-6 max-w-3xl mt-8">
40+
<PostTags tags={portfolio.tags} />
41+
</div>
42+
</article>
43+
</section>

‎src/components/widgets/Header.astro‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Logo from '~/components/atoms/Logo.astro';
44
import ToggleTheme from '~/components/core/ToggleTheme.astro';
55
import ToggleMenu from '~/components/core/ToggleMenu.astro';
66
7-
import { getPermalink, getBlogPermalink, getHomePermalink } from '~/utils/permalinks';
7+
import { getPermalink, getBlogPermalink, getPortfolioPermalink, getHomePermalink } from '~/utils/permalinks';
88
---
99

1010
<header
@@ -31,7 +31,7 @@ import { getPermalink, getBlogPermalink, getHomePermalink } from '~/utils/permal
3131
<li>
3232
<a
3333
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
34-
href="#">Portfolio</a
34+
href={getPortfolioPermalink()}>Portfolio</a
3535
>
3636
</li>
3737
<li>
@@ -40,6 +40,20 @@ import { getPermalink, getBlogPermalink, getHomePermalink } from '~/utils/permal
4040
href={getBlogPermalink()}>Blog</a
4141
>
4242
</li>
43+
<li class="md:hidden">
44+
<a
45+
class="font-bold hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
46+
href="https://www.linkedin.com/in/jesussanzperez/"
47+
>Linkedin
48+
</a>
49+
</li>
50+
<li class="md:hidden">
51+
<a
52+
class="font-bold hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
53+
href="https://twitter.com/jsanz_dev"
54+
>Twitter
55+
</a>
56+
</li>
4357
<li class="md:hidden">
4458
<a
4559
class="font-bold hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
@@ -54,14 +68,14 @@ import { getPermalink, getBlogPermalink, getHomePermalink } from '~/utils/permal
5468
<a
5569
href="https://www.linkedin.com/in/jesussanzperez/"
5670
class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
57-
aria-label="Jesus Sanz Github"
71+
aria-label="Jesus Sanz Linkedin"
5872
>
5973
<Icon name="tabler:brand-linkedin" class="w-5 h-5" />
6074
</a>
6175
<a
6276
href="https://twitter.com/jsanz_dev"
6377
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
64-
aria-label="Twitter"
78+
aria-label="Jesus Sanz Twitter"
6579
href="#"
6680
>
6781
<Icon name="tabler:brand-twitter" class="w-5 h-5" />

‎src/config.mjs‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,27 @@ export const BLOG = {
3535
pathname: 'tag', // set empty to change from /tag/some-tag to /some-tag
3636
},
3737
};
38+
export const PORT = {
39+
disabled: false,
40+
postsPerPage: 4,
41+
42+
portfolio: {
43+
disabled: false,
44+
pathname: 'portfolio', // portfolio main path, you can change this to "articles" (/articles)
45+
},
46+
47+
portfolioPost: {
48+
disabled: false,
49+
pathname: 'portfolio-post', // empty for /some-post, value for /pathname/some-post
50+
},
51+
52+
category: {
53+
disabled: true,
54+
pathname: 'category', // set empty to change from /category/some-category to /some-category
55+
},
56+
57+
tag: {
58+
disabled: true,
59+
pathname: 'tag', // set empty to change from /tag/some-tag to /some-tag
60+
},
61+
};

‎src/pages/[...blog]/[...page].astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const meta = {
3333

3434
<Layout {meta}>
3535
<Fragment slot="title">
36-
Blog Posts
36+
<span class="bg-clip-text text-transparent bg-gradient-to-r from-secondary-600 to-primary-600">Blog Posts</span>
3737
</Fragment>
3838
<BlogList posts={page.data} />
3939
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />

‎src/pages/[...portfolio]/[...page].astro‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
import { SITE, PORT } from '~/config.mjs';
3+
4+
import Layout from '~/layouts/BlogLayout.astro';
5+
import PortfolioList from '~/components/portfolio/PortfolioList.astro';
6+
import Pagination from '~/components/atoms/Pagination.astro';
7+
import Picture from '~/components/core/Picture.astro';
8+
9+
import { fetchPortfolios } from '~/utils/portfolios';
10+
import { getCanonical, getPermalink, PORT_BASE } from '~/utils/permalinks';
11+
12+
export async function getStaticPaths({ paginate }) {
13+
if (PORT?.disabled || PORT?.porfolio?.disabled) return [];
14+
15+
const portfolios = await fetchPortfolios();
16+
17+
return paginate(portfolios, {
18+
params: { portfolio: PORT_BASE || undefined },
19+
pageSize: PORT.postsPerPage,
20+
});
21+
}
22+
23+
const { page } = Astro.props;
24+
const currentPage = page.currentPage ?? 1;
25+
26+
const meta = {
27+
title: `Portfolio ${currentPage > 1 ? `— Page ${currentPage} ` : ''}— ${SITE.name}`,
28+
description: SITE.description,
29+
canonical: getCanonical(getPermalink(page.url.current)),
30+
ogType: "portfolio",
31+
noindex: currentPage > 1
32+
};
33+
---
34+
35+
<Layout {meta}>
36+
<Fragment slot="title">
37+
<span class="bg-clip-text text-transparent bg-gradient-to-r from-secondary-600 to-primary-600">Portfolio</span>
38+
<h1 class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4 font-heading">
39+
Coming Soon!
40+
</h1>
41+
<div class="max-w-3xl mx-auto">
42+
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
43+
I'm currently working on some projects, once they are ready I will post them here
44+
</p>
45+
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
46+
Happy Coding!
47+
</p>
48+
</div>
49+
<div>
50+
<div class="relative mb-8 m-auto max-w-3xl">
51+
<Picture
52+
src={import('~/assets/images/apple-dev.webp')}
53+
class="mx-auto rounded-md shadow-lg bg-gray-400 dark:bg-slate-700 w-full"
54+
widths={[400, 767]}
55+
sizes=" (max-width: 767px) 400px, 768px"
56+
alt="Jesus Sanz Avatar"
57+
aspectRatio="16:9"
58+
/>
59+
</div>
60+
</div>
61+
</Fragment>
62+
<!-- <PortfolioList portfolios={page.data} /> -->
63+
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
64+
</Layout>

‎src/pages/[...tags]/[tag]/[...page].astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
---
2-
import { SITE, BLOG } from '~/config.mjs';
2+
import { SITE, BLOG, PORT } from '~/config.mjs';
33
44
import Layout from '~/layouts/BlogLayout.astro';
55
import BlogList from '~/components/blog/List.astro';
66
import Pagination from '~/components/atoms/Pagination.astro';
77
88
import { fetchPosts } from '~/utils/posts';
9+
//import { fetchPortPosts } from '~/utils/portfolio';
910
import { getCanonical, getPermalink, cleanSlug, TAG_BASE } from '~/utils/permalinks';
1011
1112
export async function getStaticPaths({ paginate }) {

0 commit comments

Comments
 (0)