Skip to content

Commit e0de3c1

Browse files
vratskyivratskyi
committed
Added components, code optimization, etc.
1 parent 4623d60 commit e0de3c1

File tree

11 files changed

+186
-259
lines changed

11 files changed

+186
-259
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "ov-template",
33
"type": "module",
4-
"version": "0.6.3",
4+
"version": "0.6.6",
55
"repository": {
66
"type": "git",
77
"url": "https://github.com/vratskyi/vratskyi.github.io"

‎public/styles/global.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Badge.astro‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
let { text } = Astro.props;
3+
---
4+
5+
<li
6+
class='text-sm font-light blur-bg rounded-2xl px-2 py-1 inline-flex items-center'>
7+
{text}
8+
</li>

‎src/components/BadgeLink.astro‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
let { href, text } = Astro.props;
3+
---
4+
5+
<a
6+
href={href}
7+
target='_blank'
8+
class='inline-grid justify-self-start'>
9+
<li
10+
class='justify-self-start font-light blur-bg hover:bg-primary-0 duration-150 rounded-2xl px-3 py-2'>
11+
{text}
12+
</li>
13+
</a>

‎src/components/Button.astro‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
let { link, text } = Astro.props;
3+
---
4+
5+
<a
6+
href={link}
7+
target='_blank'
8+
class='inline-block justify-self-start px-3 py-2 rounded-lg border-2 hover:border-primary-0 hover:bg-primary-0 duration-150'
9+
>{text}
10+
<svg
11+
class='inline-block pl-2'
12+
width='24'
13+
height='24'
14+
viewBox='0 0 24 24'
15+
fill='none'
16+
xmlns='http://www.w3.org/2000/svg'
17+
><path
18+
d='M15.6396 7.02527H12.0181V5.02527H19.0181V12.0253H17.0181V8.47528L12.1042 13.3892L10.6899 11.975L15.6396 7.02527Z'
19+
fill='currentColor'
20+
></path><path
21+
d='M10.9819 6.97473H4.98193V18.9747H16.9819V12.9747H14.9819V16.9747H6.98193V8.97473H10.9819V6.97473Z'
22+
fill='currentColor'
23+
></path></svg
24+
>
25+
</a>

‎src/components/Header.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import blur from '/src/assets/img/bg.svg';
3434
<div class='relative'>
3535
<div
3636
id='main-menu'
37-
class='menu bg-[#040404]/[98%] hidden overflow-y-auto animation z-40 fixed left-0 right-0 top-20 h-full w-full min-h-screen lg:min-h-[700px] min-w-full mx-auto rounded-xl'>
37+
class='menu bg-[#040404]/[98%] hidden overflow-y-auto animation z-40 fixed left-0 right-0 top-20 h-full w-full min-h-screen lg:min-h-[700px] max-w-[1120px] mx-auto rounded-xl'>
3838
<Picture
3939
src={blur}
4040
class='absolute blur-[100px] top-0 bottom-0 left-0 right-0 m-auto h-full w-full object-cover object-center z-[-1]'

‎src/components/PortfolioCard.astro‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
import { Picture } from 'astro:assets';
3+
import BadgeLink from './BadgeLink.astro';
4+
import Badge from './Badge.astro';
5+
import Button from './Button.astro';
6+
7+
let { description, title, img, site, badgeLinkProps, badgeProps } = Astro.props;
8+
---
9+
10+
<div class='grid blur-bg p-5 lg:p-10 rounded-xl'>
11+
<div class='grid lg:grid-cols-2'>
12+
<div class='grid self-start'>
13+
<Picture
14+
class='object-cover object-center min-h-full rounded-2xl'
15+
src={img}
16+
width='500'
17+
height='350'
18+
alt={title}
19+
formats={['avif', 'webp']}
20+
/>
21+
</div>
22+
<div class='lg:ml-10'>
23+
<h3
24+
class='font-black bg-clip-text text-transparent bg-gradient-to-r from-primary-0 to-accent-0 text-3xl lg:text-4xl mb-5 mt-3 lg:mt-0'>
25+
{title}
26+
</h3>
27+
<p class='inline-flex text-xl font-light'>
28+
{description}
29+
</p>
30+
<div class='py-5'>
31+
<h4 class='text-lg mb-5'>Technologies i used:</h4>
32+
<ul class='flex space-x-2 flex-wrap'>
33+
{Array.isArray(badgeLinkProps) ? (
34+
badgeLinkProps.map((badgeLink, index) => (
35+
<BadgeLink key={index} {...badgeLink} />
36+
))
37+
) : (
38+
<BadgeLink {...badgeLinkProps} />
39+
)}
40+
41+
{Array.isArray(badgeProps) ? (
42+
badgeProps.map((badge, index) => (
43+
<Badge key={index} {...badge} />
44+
))
45+
) : (
46+
<Badge {...badgeProps} />
47+
)}
48+
</ul>
49+
</div>
50+
<div class='mt-5'>
51+
<Button text="Check out" link={site} />
52+
</div>
53+
</div>
54+
</div>
55+
</div>

‎src/components/Post.astro‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const { post } = Astro.props;
1111
---
1212

1313
<article
14-
class='p-4 grid gap-y-5 mt-[12.2222%] content-center max-w-[400px] hover:bg-zinc-500/20 blur-bg rounded-2xl transition-colors duration-150'>
14+
class='p-4 grid gap-y-5 mt-[12.2222%] w-full max-w-[400px] hover:bg-zinc-500/20 blur-bg rounded-2xl transition-colors duration-150'>
1515
<a href={`/blog/${post.slug}`}>
1616
<Picture
1717
transition:name={post.data.title}
@@ -20,7 +20,7 @@ const { post } = Astro.props;
2020
width='500'
2121
height='350'
2222
formats={['avif', 'webp']}
23-
class='object-cover min-h-full rounded-2xl'
23+
class='object-cover h-full max-h-[220px] w-full rounded-2xl'
2424
/>
2525
<a href={`/blog/${post.slug}`}>
2626
<h3
@@ -78,7 +78,6 @@ const { post } = Astro.props;
7878
{post.data.categories}
7979
</h3>
8080
<TitlePost h1={post.data.title} />
81-
<ul><li>{post.data.tag}</li></ul>
8281
</a>
8382
</a>
8483
</article>

‎src/components/PostList.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const { posts } = Astro.props;
1111
---
1212

1313
<Layout>
14-
<div class='grid grid-cols-2 gap-x-10 gap-y-6 max-md:grid-cols-1 mb-24'>
14+
<div class='grid grid-cols-2 gap-x-10 gap-y-5 mx-auto max-md:grid-cols-1 mb-24'>
1515
{posts.map((post) => <Post post={post} />)}
1616
</div>
1717
</Layout>

‎src/pages/index.astro‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Head from '../components/Head.astro';
44
import { Picture } from 'astro:assets';
55
import blur from '/src/assets/img/bg.svg';
66
import cover from '/src/assets/img/dev.jpg';
7+
import Button from '../components/Button.astro';
78
---
89

910
<html lang='en'>
@@ -52,28 +53,7 @@ import cover from '/src/assets/img/dev.jpg';
5253
as well as for blogging.
5354
</p>
5455
<div class='mt-5'>
55-
<button
56-
onclick="
57-
window.open('https://github.com/vratskyi/vratskyi.github.io', '_blank');
58-
"
59-
class='justify-self-start px-3 py-2 rounded-lg border-2 hover:border-primary-0 hover:bg-primary-0 duration-150'
60-
>Check out
61-
<svg
62-
class='inline-block pl-2'
63-
width='24'
64-
height='24'
65-
viewBox='0 0 24 24'
66-
fill='none'
67-
xmlns='http://www.w3.org/2000/svg'
68-
><path
69-
d='M15.6396 7.02527H12.0181V5.02527H19.0181V12.0253H17.0181V8.47528L12.1042 13.3892L10.6899 11.975L15.6396 7.02527Z'
70-
fill='currentColor'
71-
></path><path
72-
d='M10.9819 6.97473H4.98193V18.9747H16.9819V12.9747H14.9819V16.9747H6.98193V8.97473H10.9819V6.97473Z'
73-
fill='currentColor'
74-
></path></svg
75-
>
76-
</button>
56+
<Button text="Check out" link="https://github.com/vratskyi/vratskyi.github.io" />
7757
</div>
7858
</div>
7959
</section>

0 commit comments

Comments
 (0)