├── .eslintrc.json ├── src ├── app │ ├── globals.css │ ├── page.tsx │ └── layout.tsx ├── lib │ └── utils.ts └── components │ ├── Footer.tsx │ ├── About.tsx │ ├── Hero.tsx │ ├── ui │ ├── badge.tsx │ └── button.tsx │ ├── Skills.tsx │ └── Navbar.tsx ├── next.config.js ├── postcss.config.js ├── public ├── favicon.svg ├── vercel.svg └── next.svg ├── components.json ├── README.md ├── .gitignore ├── tsconfig.json ├── package.json └── tailwind.config.ts /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /public/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "\u0015src/app/globals.css", 9 | "baseColor": "slate", 10 | "cssVariables": false 11 | }, 12 | "aliases": { 13 | "components": "@/components", 14 | "utils": "@/lib/utils" 15 | } 16 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dynamic Island 2 | 3 | Dynamic Island is a responsive navbar feature that you can use on your own website. Try it [Dynamic Island](https://dynamic-island-self.vercel.app/) 4 | 5 | ## Feature 6 | 7 | - Dynamic Navbar 8 | - Responsive Design 9 | - Shadcn UI componets 10 | - Tailwind Css 11 | 12 | ## Tech Stack 13 | 14 | - Next.js 15 | - Typescript 16 | - Tailwind Css 17 | - Shadcn UI 18 | - Framer Motion 19 | -------------------------------------------------------------------------------- /src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import About from '@/components/About'; 2 | import { Footer } from '@/components/Footer'; 3 | import { Hero } from '@/components/Hero'; 4 | import Navbar from '@/components/Navbar'; 5 | import Skills from '@/components/Skills'; 6 | 7 | export default function Home() { 8 | return ( 9 | <> 10 | 11 |
12 | 13 | 14 | 15 |
16 |