(Replace with an actual screenshot or project banner demonstrating the application)
Welcome to Bio, a cutting-edge, interactive digital portfolio crafted by Alok345. This project serves as a dynamic showcase for skills, projects, and professional identity, built with the latest frontend technologies to deliver a stunning and responsive user experience.
Leveraging the robust capabilities of Next.js 16, React 19, and a rich ecosystem of modern web development tools, Bio provides a highly customizable and performant platform for anyone looking to make a lasting impression online.
Bio is packed with advanced features designed to create an engaging and seamless user experience:
- ⚡ Next.js 16 App Router: Enjoy lightning-fast page loads, optimized routing, and server components for superior performance.
- 🎨 Modern UI/UX: A sleek and intuitive design built with Tailwind CSS, Radix UI, and shadcn/ui components for a beautiful, accessible interface.
- 🌙 Dark/Light Mode: Seamless theme switching with
next-themesfor personalized viewing preferences. - ✨ Fluid Animations: Enhance user engagement with smooth and captivating animations powered by Framer Motion and
tw-animate-css. - 🔥 Firebase Integration: Robust backend for data persistence, content management, and potentially authentication.
- 🤖 AI Capabilities: Explore innovative functionalities powered by Google Generative AI, integrating intelligent features into your digital persona.
- 🔄 State Management: Efficient and predictable state handling across the application using Zustand.
- 💡 Real-time Notifications: User-friendly toast messages and alerts via
react-hot-toastandsonner. - ⚙️ Type-Safe Development: Built with TypeScript for enhanced code quality, maintainability, and developer experience.
- 👁️🗨️ Intersection Observer: Lazy loading and scroll-triggered effects for performance and visual dynamism.
- 🖋️ Optimized Fonts: Utilizes
next/fontto automatically optimize and load Geist, a new font family for Vercel, ensuring crisp typography. - 🧩 Modular Architecture: Clean, component-based structure for easy development and scalability.
Bio is built with a powerful and modern stack, ensuring high performance, scalability, and an excellent developer experience.
A clean and organized directory structure for easy navigation and development:
bio/
├── public/
├── scripts/
│ └── seedFirebase.ts
├── src/
│ ├── app/
│ │ ├── (auth)/
│ │ ├── api/
│ │ ├── globals.css
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── components/
│ │ ├── ui/ (shadcn/ui components)
│ │ └── ... (custom components)
│ ├── lib/
│ │ ├── firebase.ts
│ │ ├── utils.ts
│ │ └── ...
│ └── hooks/
│ └── store/ (Zustand stores)
├── .gitignore
├── AGENTS.md
├── CLAUDE.md
├── README.md
├── build_log.txt
├── build_log2.txt
├── components.json
├── eslint.config.mjs
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
└── tsconfig.json
Follow these steps to get Bio up and running on your local machine.
git clone https://github.com/Alok345/bio.git
cd bioUsing npm:
npm installOr with Yarn, pnpm, or Bun:
yarn install
# or
pnpm install
# or
bun installCreate a .env.local file in the root of your project and add your environment variables. This typically includes Firebase configuration and Google Generative AI keys.
Example .env.local:
# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY="YOUR_FIREBASE_API_KEY"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="YOUR_FIREBASE_AUTH_DOMAIN"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="YOUR_FIREBASE_PROJECT_ID"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="YOUR_FIREBASE_STORAGE_BUCKET"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="YOUR_FIREBASE_MESSAGING_SENDER_ID"
NEXT_PUBLIC_FIREBASE_APP_ID="YOUR_FIREBASE_APP_ID"
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID="YOUR_FIREBASE_MEASUREMENT_ID"
# Google Generative AI (Gemini)
NEXT_PUBLIC_GEMINI_API_KEY="YOUR_GEMINI_API_KEY"
# Add any other sensitive keys or configurations here
If your project utilizes Firebase and has initial data to populate, you can use the provided seeding script:
npm run seed(Ensure your Firebase project is properly set up and authenticated for the seeding script to work.)
Once installed, you can run the project in different modes.
To start the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result. The page will auto-update as you edit the source files. You can start editing by modifying files within the src/app directory (e.g., src/app/page.tsx).
To build the application for production:
npm run buildThis will create an optimized production build in the .next directory.
To run the built application in production mode:
npm run startTo check for linting errors and enforce code style:
npm run lintThe easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Connect your GitHub repository to Vercel, and it will automatically detect the Next.js project and deploy it.
For more details on deployment, check out the Next.js deployment documentation.
Contributions are always welcome! If you have suggestions for improvements or new features, please feel free to:
- Fork the repository.
- Create a new branch (
git checkout -b feature/AmazingFeature). - Commit your changes (
git commit -m 'Add some AmazingFeature'). - Push to the branch (
git push origin feature/AmazingFeature). - Open a Pull Request.
This project is open-source and licensed under the MIT License. See the LICENSE file (if present, otherwise implicitly MIT) for more details.
Alok345
- GitHub: github.com/Alok345
- Website/Portfolio: (Add your personal website or LinkedIn if available)
This README.md was generated with assistance from an AI technical writer.