Skip to content

Commit 381baee

Browse files
author
shagohod
committed
styling
1 parent 6fa6889 commit 381baee

File tree

1 file changed

+45
-41
lines changed

1 file changed

+45
-41
lines changed

‎src/app/page.js‎

Lines changed: 45 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,81 @@
11
import Image from "next/image";
2+
23
export default function Home() {
34
return (
4-
<div className="min-h-screen flex flex-col items-center justify-between p-8 sm:p-20 bg-gradient-to-br from-gray-50 via-white to-gray-200 dark:from-[#18181b] dark:via-[#23272f] dark:to-[#18181b] font-[family-name:var(--font-geist-sans)]">
5+
<div className="min-h-screen flex flex-col items-center justify-between p-8 sm:p-20 bg-[#18181b] font-[family-name:var(--font-geist-sans)]">
56
<main className="flex flex-col items-center w-full max-w-3xl gap-10 mt-10">
67
<div className="flex flex-col items-center gap-2">
7-
<Image
8-
src="/profile.jpeg"
9-
alt="Avatar"
10-
width={80}
11-
height={80}
12-
priority
13-
className="w-20 h-20 rounded-full border-4 border-gray-200 dark:border-gray-700 bg-white dark:bg-[#23272f]"
14-
/>
15-
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mt-4">Hi, I'm Kernbyte</h1>
16-
<p className="text-lg text-gray-700 dark:text-gray-300 text-center max-w-xl mt-2">
8+
<div className="p-[3px] rounded-full bg-gradient-to-tr from-yellow-400 via-blue-500 to-purple-600 mb-2 animate-spin-slow hover:animate-none transition-all duration-500">
9+
<Image
10+
src="/profile.jpeg"
11+
alt="Avatar"
12+
width={80}
13+
height={80}
14+
priority
15+
className="w-20 h-20 rounded-full border-4 border-[#23272f] bg-[#23272f] object-cover"
16+
/>
17+
</div>
18+
<h1 className="text-3xl sm:text-4xl font-bold text-white mt-4">Hi, I'm Kernbyte</h1>
19+
<p className="text-lg text-gray-300 text-center max-w-xl mt-2">
1720
I'm a passionate programmer.
1821
</p>
1922
</div>
2023

2124
<section className="w-full">
22-
<h2 className="text-xl font-semibold mb-3 text-gray-800 dark:text-gray-200">Skills</h2>
23-
<ul className="flex flex-wrap gap-3 text-sm text-gray-700 dark:text-gray-300">
24-
<li className="px-3 py-1 rounded flex items-center gap-2 bg-yellow-400 text-neutral-900">
25-
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JavaScript" className="w-5 h-5" /> JavaScript
25+
<h1 className="text-3xl text-center font-bold mb-5 text-gray-200 relative inline-block mx-auto after:content-[''] after:block after:w-16 after:h-1 after:mx-auto after:mt-2 after:rounded-full after:bg-gradient-to-r after:from-yellow-400 after:via-blue-500 after:to-purple-600 after:animate-pulse">
26+
Skills
27+
</h1>
28+
<ul className="flex flex-wrap gap-4 text-lg text-gray-300 justify-center bg-white/5 backdrop-blur-md rounded-xl p-6 shadow-lg">
29+
<li className="px-5 py-2 rounded flex items-center gap-3 bg-yellow-400 text-neutral-900 transition-transform duration-200 hover:scale-105 hover:shadow-lg">
30+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JavaScript" className="w-8 h-8" /> JavaScript
2631
</li>
27-
<li className="px-3 py-1 rounded flex items-center gap-2 bg-blue-600 text-white">
28-
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" alt="TypeScript" className="w-5 h-5" /> TypeScript
32+
<li className="px-5 py-2 rounded flex items-center gap-3 bg-blue-600 text-white transition-transform duration-200 hover:scale-105 hover:shadow-lg">
33+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" alt="TypeScript" className="w-8 h-8" /> TypeScript
2934
</li>
30-
<li className="px-3 py-1 rounded flex items-center gap-2 bg-cyan-300 text-neutral-900">
31-
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="React" className="w-5 h-5" /> React
35+
<li className="px-5 py-2 rounded flex items-center gap-3 bg-cyan-600 text-neutral-900 transition-transform duration-200 hover:scale-105 hover:shadow-lg">
36+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="React" className="w-8 h-8" /> React
3237
</li>
33-
<li className="px-3 py-1 rounded flex items-center gap-2 bg-black text-white">
34-
<img src="/next.svg" alt="Next.js" className="w-5 h-5 dark:invert" /> Next.js
38+
<li className="px-5 py-2 rounded flex items-center gap-3 bg-black text-white transition-transform duration-200 hover:scale-105 hover:shadow-lg">
39+
<img src="/next.svg" alt="Next.js" className="w-8 h-8 invert" /> Next.js
3540
</li>
36-
<li className="px-3 py-1 rounded flex items-center gap-2 bg-green-700 text-white">
37-
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" alt="Node.js" className="w-5 h-5" /> Node.js
41+
<li className="px-5 py-2 rounded flex items-center gap-3 bg-green-700 text-white transition-transform duration-200 hover:scale-105 hover:shadow-lg">
42+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" alt="Node.js" className="w-8 h-8" /> Node.js
3843
</li>
39-
<li className="px-3 py-1 rounded flex items-center gap-2 bg-blue-700 text-white">
40-
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" alt="CSS" className="w-5 h-5" /> CSS/SCSS
44+
<li className="px-5 py-2 rounded flex items-center gap-3 bg-blue-700 text-white transition-transform duration-200 hover:scale-105 hover:shadow-lg">
45+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" alt="CSS" className="w-8 h-8" /> CSS/SCSS
4146
</li>
42-
<li className="px-3 py-1 rounded flex items-center gap-2 bg-sky-600 text-neutral-900">
43-
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/tailwindcss/tailwindcss-original.svg" alt="Tailwind CSS" className="w-5 h-5" /> Tailwind CSS
47+
<li className="px-5 py-2 rounded flex items-center gap-3 bg-sky-600 text-neutral-900 transition-transform duration-200 hover:scale-105 hover:shadow-lg">
48+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/tailwindcss/tailwindcss-original.svg" alt="Tailwind CSS" className="w-8 h-8" /> Tailwind CSS
4449
</li>
45-
<li className="px-3 py-1 rounded flex items-center gap-2 bg-blue-900 text-white">
46-
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/c/c-original.svg" alt="C" className="w-5 h-5" /> C
50+
<li className="px-5 py-2 rounded flex items-center gap-3 bg-blue-900 text-white transition-transform duration-200 hover:scale-105 hover:shadow-lg">
51+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/c/c-original.svg" alt="C" className="w-8 h-8" /> C
4752
</li>
4853
</ul>
4954
</section>
5055

5156
<section className="w-full">
52-
<h2 className="text-xl font-semibold mb-3 text-gray-800 dark:text-gray-200">Projects</h2>
57+
<h2 className="text-xl font-semibold mb-3 text-gray-200">Projects</h2>
5358
<div className="flex flex-col gap-4">
54-
<div className="bg-white dark:bg-[#23272f] rounded-lg shadow p-4 border border-gray-200 dark:border-gray-700">
55-
<h3 className="font-bold text-lg text-gray-900 dark:text-white">Project One</h3>
56-
<p className="text-gray-700 dark:text-gray-300 text-sm mt-1">A brief description of your project goes here. Highlight what makes it interesting or unique.</p>
57-
<a href="#" className="text-blue-600 dark:text-blue-400 hover:underline text-sm mt-2 inline-block">View on GitHub</a>
59+
<div className="bg-[#23272f] rounded-lg shadow p-4 border border-gray-700">
60+
<h3 className="font-bold text-lg text-white">Project One</h3>
61+
<p className="text-gray-300 text-sm mt-1">A brief description of your project goes here. Highlight what makes it interesting or unique.</p>
62+
<a href="#" className="text-blue-400 hover:underline text-sm mt-2 inline-block">View on GitHub</a>
5863
</div>
59-
<div className="bg-white dark:bg-[#23272f] rounded-lg shadow p-4 border border-gray-200 dark:border-gray-700">
60-
<h3 className="font-bold text-lg text-gray-900 dark:text-white">Project Two</h3>
61-
<p className="text-gray-700 dark:text-gray-300 text-sm mt-1">Another project description. Mention technologies used and your role.</p>
62-
<a href="#" className="text-blue-600 dark:text-blue-400 hover:underline text-sm mt-2 inline-block">View on GitHub</a>
64+
<div className="bg-[#23272f] rounded-lg shadow p-4 border border-gray-700">
65+
<h3 className="font-bold text-lg text-white">Project Two</h3>
66+
<p className="text-gray-300 text-sm mt-1">Another project description. Mention technologies used and your role.</p>
67+
<a href="#" className="text-blue-400 hover:underline text-sm mt-2 inline-block">View on GitHub</a>
6368
</div>
6469
</div>
6570
</section>
6671

6772
<section className="w-full">
68-
<h2 className="text-xl font-semibold mb-3 text-gray-800 dark:text-gray-200">Contact</h2>
73+
<h2 className="text-xl font-semibold mb-3 text-gray-200">Contact</h2>
6974
<div className="flex gap-4">
70-
<a href="https://github.com/kernbyte" target="_blank" rel="noopener noreferrer" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 underline">GitHub</a>
75+
<a href="https://github.com/kernbyte" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:text-blue-400 underline">GitHub</a>
7176
</div>
7277
</section>
7378
</main>
74-
7579
</div>
7680
);
7781
}

0 commit comments

Comments
 (0)