├── public
    ├── screen.png
    └── img
    │   ├── favicon.ico
    │   └── profile.png
├── postcss.config.mjs
├── next.config.ts
├── .gitignore
├── tsconfig.json
├── package.json
├── src
    └── app
    │   ├── layout.tsx
    │   ├── globals.css
    │   └── page.tsx
├── LICENSE
└── README.md


/public/screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/88JC/bio-kydo-v2/HEAD/public/screen.png


--------------------------------------------------------------------------------
/public/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/88JC/bio-kydo-v2/HEAD/public/img/favicon.ico


--------------------------------------------------------------------------------
/public/img/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/88JC/bio-kydo-v2/HEAD/public/img/profile.png


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | const config = {
2 |   plugins: ["@tailwindcss/postcss"],
3 | };
4 | 
5 | export default config;
6 | 


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from "next";
2 | 
3 | const nextConfig: NextConfig = {
4 |   /* config options here */
5 | };
6 | 
7 | export default nextConfig;
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 | 
36 | # vercel
37 | .vercel
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./src/*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bio-kydo-v2",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev --turbopack",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "react": "^19.0.0",
13 |     "react-dom": "^19.0.0",
14 |     "next": "15.3.6"
15 |   },
16 |   "devDependencies": {
17 |     "typescript": "^5",
18 |     "@types/node": "^20",
19 |     "@types/react": "^19",
20 |     "@types/react-dom": "^19",
21 |     "@tailwindcss/postcss": "^4",
22 |     "tailwindcss": "^4"
23 |   },
24 |   "description": "Personal Website Bio Display Linktree",
25 |   "main": "next.config.ts",
26 |   "keywords": [
27 |     "Bio",
28 |     "Display",
29 |     "Linktree",
30 |     "Kydo",
31 |     "88JC"
32 |   ],
33 |   "author": "88JC",
34 |   "license": "MIT"
35 | }
36 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Geist, Geist_Mono } from "next/font/google";
 3 | import "./globals.css";
 4 | 
 5 | const geistSans = Geist({
 6 |   variable: "--font-geist-sans",
 7 |   subsets: ["latin"],
 8 | });
 9 | 
10 | const geistMono = Geist_Mono({
11 |   variable: "--font-geist-mono",
12 |   subsets: ["latin"],
13 | });
14 | 
15 | export const metadata: Metadata = {
16 |   title: "Bio Kydo",
17 |   description: "Welcome to my bio links page.",
18 |   icons: {
19 |     icon: "/img/favicon.ico",
20 |   },
21 | };
22 | 
23 | export default function RootLayout({
24 |   children,
25 | }: Readonly<{
26 |   children: React.ReactNode;
27 | }>) {
28 |   return (
29 |     <html lang="en">
30 |       <body
31 |         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
32 |       >
33 |         {children}
34 |       </body>
35 |     </html>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 88JC
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE. 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🌳 Bio Kydo V2
 2 | 
 3 | This is a simple Bio Links Display like Linktree.
 4 | 
 5 | ---
 6 | 
 7 | ## 📸 Screenshot
 8 | Landing Page
 9 | ![Bio Kydo UI](./public/screen.png)
10 |  
11 | 
12 | ---
13 | 
14 | ## 📝 Installation
15 | 
16 | 1. Clone the repository:
17 | ```bash
18 | git clone https://github.com/88JC/bio-kydo-v2.git
19 | cd bio-kydo-v2
20 | ```
21 | 
22 | 2. Install the dependencies:
23 | ```bash
24 | npm install
25 | # or
26 | yarn install
27 | # or
28 | pnpm install
29 | # or
30 | bun install
31 | ```
32 | 
33 | ## 🚀 Getting Started
34 | 
35 | First, run the development server:
36 | 
37 | ```bash
38 | npm run dev
39 | # or
40 | yarn dev
41 | # or
42 | pnpm dev
43 | # or
44 | bun dev
45 | ```
46 | 
47 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
48 | 
49 | ---
50 | ## 🤝 Contributing
51 | 
52 | Contributions are welcome! Please feel free to submit a pull request.
53 | 
54 | 1. Fork the repository
55 | 2. Create a new branch
56 | 3. Make your changes
57 | 4. Commit your changes
58 | 5. Push your changes
59 | 6. Submit a pull request
60 | 
61 | ---
62 | 
63 | ## 📝 License
64 | 
65 | This project is open-sourced under the MIT License - see the [LICENSE](LICENSE) file for details.
66 | 
67 | ---
68 | 
69 | ## 📝 Author
70 | 
71 | This project is created by [88JC](https://github.com/88JC)
72 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | 
 3 | :root {
 4 |   --background: #ffffff;
 5 |   --foreground: #171717;
 6 | }
 7 | 
 8 | @theme inline {
 9 |   --color-background: var(--background);
10 |   --color-foreground: var(--foreground);
11 |   --font-sans: var(--font-geist-sans);
12 |   --font-mono: var(--font-geist-mono);
13 | }
14 | 
15 | @media (prefers-color-scheme: dark) {
16 |   :root {
17 |     --background: #0a0a0a;
18 |     --foreground: #ededed;
19 |   }
20 | }
21 | 
22 | body {
23 |   background: var(--background);
24 |   color: var(--foreground);
25 |   font-family: Arial, Helvetica, sans-serif;
26 | }
27 | 
28 | ::-webkit-scrollbar {
29 |   width: 16px;
30 | }
31 | 
32 | ::-webkit-scrollbar-track {
33 |   background-color: #f0f0f0;
34 |   border-left: 3px solid #000;
35 |   box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
36 | }
37 | 
38 | ::-webkit-scrollbar-thumb {
39 |   background: linear-gradient(45deg, #fcd34d 0%, #ec4899 50%, #06b6d4 100%);
40 |   border: 3px solid #000;
41 |   border-radius: 8px;
42 |   box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.8);
43 | }
44 | 
45 | ::-webkit-scrollbar-thumb:hover {
46 |   background: linear-gradient(45deg, #fbbf24 0%, #db2777 50%, #0891b2 100%);
47 |   transform: scale(1.05);
48 |   transition: all 0.3s ease;
49 | }
50 | 
51 | ::-webkit-scrollbar-button {
52 |   display: block;
53 |   height: 10px;
54 |   background-color: #000;
55 |   border: 2px solid #000;
56 |   border-radius: 4px;
57 | }
58 | 
59 | ::-webkit-scrollbar-button:hover {
60 |   background-color: #333;
61 | }
62 | 
63 | * {
64 |   scrollbar-width: auto;
65 |   scrollbar-color: #ec4899 #f0f0f0;
66 | }
67 | 
68 | html {
69 |   scroll-behavior: smooth;
70 | }
71 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | 
 3 | export default function Home() {
 4 |   return (
 5 |     <div className="min-h-screen bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-400 p-4 sm:p-8 font-[family-name:var(--font-geist-sans)]">
 6 |       <main className="max-w-lg mx-auto pt-16 pb-20">
 7 |         <div className="flex flex-col items-center mb-16">
 8 |           <div className="w-40 h-40 rounded-3xl overflow-hidden border-4 border-black shadow-[10px_10px_0px_0px_rgba(0,0,0,1)] mb-8 rotate-3 bg-white p-1 hover:rotate-6 transition-transform duration-300 relative">
 9 |             <Image
10 |               src="/img/profile.png"
11 |               alt="Profile Picture"
12 |               width={200}
13 |               height={200}
14 |               className="object-cover rounded-2xl hover:scale-105 transition-transform duration-300"
15 |             />
16 |             
17 |             <div className="absolute inset-0 bg-gradient-to-tr from-white/0 via-white/30 to-white/0 opacity-0 hover:opacity-100 transition-opacity duration-700"></div>
18 |           </div>
19 |           
20 |           <h1 className="text-4xl font-black mb-3 bg-yellow-400 px-6 py-2 rounded-xl border-3 border-black transform -rotate-1 hover:rotate-2 transition-transform duration-300 hover:scale-105">kydo</h1>
21 |           
22 |           <p className="text-center max-w-sm mb-6 bg-lime-200 px-6 py-3 rounded-lg border-3 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] text-indigo-800 font-bold text-lg hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transition-all duration-300">
23 |             I like to gaming and make something with code.
24 |           </p>
25 |           
26 |           <div className="absolute top-20 right-20 w-14 h-14 bg-yellow-400 rounded-full border-3 border-black hidden md:block animate-bounce"></div>
27 |           <div className="absolute bottom-20 left-20 w-20 h-20 bg-teal-300 rounded-md rotate-12 border-3 border-black hidden md:block hover:rotate-45 transition-transform duration-500"></div>
28 |         </div>
29 | 
30 |         <div className="flex flex-col gap-6">
31 |           {[
32 |             { title: "My Personal Website", url: "https://jecky.id", icon: "🌐", color: "bg-teal-400" },
33 |             { title: "Instagram", url: "#", icon: "📸", color: "bg-rose-400" },
34 |             { title: "Twitter", url: "https://x.com/METALHEAD666", icon: "🐦", color: "bg-sky-400" },
35 |             { title: "YouTube Channel", url: "https://www.youtube.com/@88JC", icon: "📺", color: "bg-red-400" },
36 |             { title: "Discord", url: "https://discord.jecky.id", icon: "💬", color: "bg-emerald-400" },
37 |             { title: "Discord Bots", url: "https://top.gg/bot/913029521815502869", icon: "🤖", color: "bg-purple-400" },
38 |           ].map((link, index) => (
39 |             <a
40 |               key={index}
41 |               href={link.url}
42 |               target="_blank"
43 |               className={`${link.color} border-4 border-black rounded-xl p-6 flex items-center justify-between transform transition-all duration-200 hover:-translate-y-2 hover:brightness-110 shadow-[10px_10px_0px_0px_rgba(0,0,0,1)] active:translate-y-1 active:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] ${index % 2 === 0 ? 'rotate-1' : '-rotate-1'}`}
44 |             >
45 |               <span className="text-2xl font-extrabold">{link.title}</span>
46 |               <span className="text-4xl">{link.icon}</span>
47 |               <div className="absolute -left-3 top-1/2 w-5 h-5 rounded-full border-2 border-black bg-white transform -translate-y-1/2"></div>
48 |             </a>
49 |           ))}
50 |         </div>
51 | 
52 |         <footer className="mt-20 text-center">
53 |           <p className="inline-block bg-black text-white px-6 py-4 rounded-xl transform rotate-2 font-bold shadow-[5px_5px_0px_0px_rgba(255,255,255,0.4)] text-lg hover:rotate-0 transition-transform duration-300">
54 |             Made with ❤️ by <a href="https://github.com/88JC" className="text-yellow-400 hover:text-yellow-500 transition-colors duration-300">88JC</a>
55 |           </p>
56 |         </footer>
57 |       </main>
58 |     </div>
59 |   );
60 | }
61 | 


--------------------------------------------------------------------------------