Skip to content

Commit 7835862

Browse files
nikohoffrennikohoffren
committed
Add hero-button to index.tsx
1 parent fba6e02 commit 7835862

File tree

15 files changed

+347
-327
lines changed

15 files changed

+347
-327
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"prettier.tabWidth": 4
3+
}

‎components/Coffee.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1+
/* eslint-disable @next/next/no-img-element */
12
function Coffee() {
2-
return (
3-
<a
4-
className="buyButton"
5-
target="_blank"
6-
rel="noopener noreferrer"
7-
href="https://www.buymeacoffee.com/nikohoffren"
8-
>
9-
<img
10-
className="coffeeImage"
11-
src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg"
12-
alt="Buy me a coffee"
13-
/>
14-
15-
</a>
16-
);
3+
return (
4+
<a
5+
className="buyButton"
6+
target="_blank"
7+
rel="noopener noreferrer"
8+
href="https://www.buymeacoffee.com/nikohoffren"
9+
>
10+
<img
11+
className="coffeeImage"
12+
src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg"
13+
alt="Buy me a coffee"
14+
/>
15+
</a>
16+
);
1717
}
1818

1919
export default Coffee;

‎components/Footer.tsx‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,46 @@
11
import Link from "next/link";
22

33
const Footer = () => {
4-
return (
5-
<footer className="bg-slate-950 text-slate-50 py-6">
6-
<div className="container mx-auto px-6">
7-
<div className="flex justify-between items-center">
8-
<div>
9-
<p className="text-sm">Copyright © 2023 Niko Hoffrén</p>
10-
</div>
11-
<div className="flex space-x-4">
12-
<Link
13-
href="https://github.com/nikohoffren/devgallery.io/blob/main/CONTRIBUTING.md"
14-
className="text-sm text-slate-50 hover:underline"
15-
target="blank"
16-
>
17-
Contributing
18-
</Link>
19-
<Link
20-
href="/privacy-policy"
21-
className="text-sm text-slate-50 hover:underline"
22-
target="blank"
23-
>
24-
Privacy Policy
25-
</Link>
26-
<Link
27-
href="https://github.com/nikohoffren/devgallery.io/blob/main/code_of_conduct.md"
28-
className="text-sm text-slate-50 hover:underline"
29-
target="blank"
30-
>
31-
Code of Conduct
32-
</Link>
33-
<Link
34-
href="/contact"
35-
className="text-sm text-slate-50 hover:underline"
36-
>
37-
Contact
38-
</Link>
39-
</div>
40-
</div>
41-
</div>
42-
</footer>
43-
);
4+
return (
5+
<footer className="bg-slate-950 text-slate-50 pb-6 pt-10">
6+
<div className="container mx-auto px-6">
7+
<div className="flex justify-between items-center">
8+
<div>
9+
<p className="text-sm">Copyright © 2023 <Link href="https://nikohoffren.com" className="hover:underline" target="blank">Niko Hoffrén</Link></p>
10+
</div>
11+
<div className="flex space-x-4">
12+
<Link
13+
href="https://github.com/nikohoffren/devgallery.io/blob/main/CONTRIBUTING.md"
14+
className="text-sm text-slate-50 hover:underline"
15+
target="blank"
16+
>
17+
Contributing
18+
</Link>
19+
<Link
20+
href="/privacy-policy"
21+
className="text-sm text-slate-50 hover:underline"
22+
target="blank"
23+
>
24+
Privacy Policy
25+
</Link>
26+
<Link
27+
href="https://github.com/nikohoffren/devgallery.io/blob/main/code_of_conduct.md"
28+
className="text-sm text-slate-50 hover:underline"
29+
target="blank"
30+
>
31+
Code of Conduct
32+
</Link>
33+
<Link
34+
href="/contact"
35+
className="text-sm text-slate-50 hover:underline"
36+
>
37+
Contact
38+
</Link>
39+
</div>
40+
</div>
41+
</div>
42+
</footer>
43+
);
4444
};
4545

4646
export default Footer;

‎components/Header.tsx‎

Lines changed: 70 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -5,75 +5,78 @@ import Coffee from "./Coffee";
55
import styles from "../styles/Coffee.module.css";
66

77
const Header = () => {
8-
return (
9-
<>
10-
<nav className="bg-slate-950 text-slate-50 backdrop-blur">
11-
<div className="container mx-auto px-6 py-3">
12-
<div className="flex items-center justify-between">
13-
<div>
14-
<Link href="/">
15-
<div className="py-2 px-6 block text-sm cursor-pointer hover:scale-105">
16-
<Image
17-
src="/dev-gallery.png"
18-
alt="devgallery.io logo"
19-
width={40}
20-
height={40}
21-
/>
22-
</div>
23-
</Link>
24-
</div>
25-
<nav>
26-
<ul className="md:flex items-center space-x-1">
27-
<li>
28-
<Link href="/getting-started">
29-
<div className="py-2 px-6 block text-sm cursor-pointer hover:underline">
30-
Getting Started
31-
</div>
32-
</Link>
33-
</li>
34-
<li>
35-
<Link href="https://github.com/nikohoffren/devgallery.io" target="blank">
36-
<div className="py-2 px-6 mr-6 block text-sm cursor-pointer hover:underline">
37-
Contribute in GitHub
8+
return (
9+
<>
10+
<nav className="bg-slate-950 text-slate-50 backdrop-blur">
11+
<div className="container mx-auto px-6 py-3">
12+
<div className="flex items-center justify-between">
13+
<div>
14+
<Link href="/">
15+
<div className="py-2 px-6 block text-sm cursor-pointer hover:scale-105">
16+
<Image
17+
src="/dev-gallery.png"
18+
alt="devgallery.io logo"
19+
width={40}
20+
height={40}
21+
/>
22+
</div>
23+
</Link>
24+
</div>
25+
<nav>
26+
<ul className="md:flex items-center space-x-1">
27+
<li>
28+
<Link href="/getting-started">
29+
<div className="py-2 px-6 block text-sm cursor-pointer hover:underline">
30+
Getting Started
31+
</div>
32+
</Link>
33+
</li>
34+
<li>
35+
<Link
36+
href="https://github.com/nikohoffren/devgallery.io"
37+
target="blank"
38+
>
39+
<div className="py-2 px-6 mr-6 block text-sm cursor-pointer hover:underline">
40+
Contribute in GitHub
41+
</div>
42+
</Link>
43+
</li>
44+
<li className={styles.buyButton}>
45+
<Coffee />
46+
</li>
47+
</ul>
48+
</nav>
3849
</div>
39-
</Link>
40-
</li>
41-
<li className={styles.buyButton}>
42-
<Coffee />
43-
</li>
44-
</ul>
50+
</div>
4551
</nav>
46-
</div>
47-
</div>
48-
</nav>
49-
<header className="bg-slate-950 text-slate-50 sticky top-0 z-10 opacity-95">
50-
<div className="container mx-auto px-6 py-3 pb-6">
51-
<div className="mt-3 md:flex items-center space-x-1 justify-end">
52-
<Link href="/projects">
53-
<div className="py-2 px-6 block text-sm cursor-pointer hover:underline">
54-
Projects
55-
</div>
56-
</Link>
57-
<Link href="/developers">
58-
<div className="py-2 px-6 block text-sm cursor-pointer hover:underline">
59-
Developers
60-
</div>
61-
</Link>
62-
<Link href="/about">
63-
<div className="py-2 px-6 block text-sm cursor-pointer hover:underline">
64-
About
65-
</div>
66-
</Link>
67-
<Link href="/contact">
68-
<div className="py-2 px-6 block text-sm cursor-pointer hover:underline">
69-
Contact
70-
</div>
71-
</Link>
72-
</div>
73-
</div>
74-
</header>
75-
</>
76-
);
52+
<header className="bg-slate-950 text-slate-50 sticky top-0 z-10">
53+
<div className="container mx-auto px-6 py-3 pb-6">
54+
<div className="mt-3 md:flex items-center space-x-1 justify-end">
55+
<Link href="/projects">
56+
<div className="py-2 px-6 block text-sm cursor-pointer hover:underline">
57+
Projects
58+
</div>
59+
</Link>
60+
<Link href="/developers">
61+
<div className="py-2 px-6 block text-sm cursor-pointer hover:underline">
62+
Developers
63+
</div>
64+
</Link>
65+
<Link href="/about">
66+
<div className="py-2 px-6 block text-sm cursor-pointer hover:underline">
67+
About
68+
</div>
69+
</Link>
70+
<Link href="/contact">
71+
<div className="py-2 px-6 block text-sm cursor-pointer hover:underline">
72+
Contact
73+
</div>
74+
</Link>
75+
</div>
76+
</div>
77+
</header>
78+
</>
79+
);
7780
};
7881

7982
export default Header;

‎components/ProjectCard.tsx‎

Lines changed: 41 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,51 @@
11
import Image from "next/image";
22

33
interface ProjectCardProps {
4-
projectName: string;
5-
developerName: string;
6-
imageUrl: string;
7-
content: string;
8-
projectLink: string;
4+
projectName: string;
5+
developerName: string;
6+
imageUrl: string;
7+
content: string;
8+
projectLink: string;
99
}
1010

1111
const ProjectCard: React.FC<ProjectCardProps> = ({
12-
projectName,
13-
developerName,
14-
imageUrl,
15-
content,
16-
projectLink,
12+
projectName,
13+
developerName,
14+
imageUrl,
15+
content,
16+
projectLink,
1717
}) => {
18-
return (
19-
<div className="border rounded-lg shadow-sm p-6 max-w-md mx-auto">
20-
<Image
21-
src={imageUrl}
22-
alt={`${projectName} Image`}
23-
width={128}
24-
height={128}
25-
/>
26-
<div className="mt-6">
27-
<h2 className="text-2xl font-semibold text-slate-50">{projectName}</h2>
28-
<h3 className="text-lg text-gray-300">{developerName}</h3>
29-
<p className="text-md text-gray-400 mt-4">{content}</p>
30-
</div>
31-
<div className="mt-6">
32-
<a
33-
href={projectLink}
34-
target="_blank"
35-
rel="noopener noreferrer"
36-
className="text-blue-500 hover:underline"
37-
>
38-
View Project
39-
</a>
40-
</div>
41-
</div>
42-
);
18+
return (
19+
<div className="border rounded-lg shadow-sm p-6 max-w-md mx-auto">
20+
<div className="flex justify-center">
21+
<div className="relative w-72 h-72 rounded-md overflow-hidden">
22+
<Image
23+
src={imageUrl}
24+
alt={`${projectName} Image`}
25+
layout="fill"
26+
objectFit="cover"
27+
/>
28+
</div>
29+
</div>
30+
<div className="mt-6">
31+
<h2 className="text-2xl font-semibold text-slate-50">
32+
{projectName}
33+
</h2>
34+
<h3 className="text-lg text-gray-300">by {developerName}</h3>
35+
<p className="text-md text-gray-400 mt-4">{content}</p>
36+
</div>
37+
<div className="mt-6">
38+
<a
39+
href={projectLink}
40+
target="_blank"
41+
rel="noopener noreferrer"
42+
className="text-blue-500 hover:underline"
43+
>
44+
View Project
45+
</a>
46+
</div>
47+
</div>
48+
);
4349
};
4450

4551
export default ProjectCard;

‎pages/_app.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ import Header from "../components/Header";
55
import Footer from "../components/Footer";
66

77
function MyApp({ Component, pageProps }: AppProps) {
8-
return (
9-
<>
10-
<Header />
11-
<Component {...pageProps} />
12-
<Footer />
13-
</>
14-
);
8+
return (
9+
<>
10+
<Header />
11+
<Component {...pageProps} />
12+
<Footer />
13+
</>
14+
);
1515
}
1616

1717
export default MyApp;

‎pages/about.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
export default function About() {
2-
return (
3-
<div>
4-
<h1>About</h1>
5-
<p>This is the about page.</p>
6-
</div>
7-
);
2+
return (
3+
<div>
4+
<h1>About</h1>
5+
<p>This is the about page.</p>
6+
</div>
7+
);
88
}

0 commit comments

Comments
 (0)