🎨 Naphier Awalie | Portfolio

Crafting purpose-driven experiences that inspire & engage.

Welcome to the official repository of my 2nd generation portfolio. This project is a showcase of modern web development techniques, aesthetic design, and interactive experiences.

---

✨ Key Features

• 🚀 High Performance: Built with Next.js 16 and React 19 for optimal speed and SEO.
• 🤖 Integrated AI Assistant: A custom-built AI chatbot powered by Google Gemini (@google/genai) to answer questions about my work and experience.
• 🎭 Dynamic Animations:
  • Seamless layout transitions with motion (Framer Motion).
  • Scroll-triggered animations using AOS and Locomotive Scroll.
  • Rich Lottie animations for interactive storytelling.
• 🌓 Adaptive Theme: Smooth dark/light mode transitions with persistent user preference.
• 📱 Fully Responsive: A mobile-first design approach ensuring a premium experience on all devices.
• 🛠️ Interactive Components:
  • Custom Accordions for Expertise areas.
  • Category Pills for project filtering.
  • Smooth Embla Carousels for testimonials.

---

🛠️ Tech Stack

Core

• Framework: Next.js 16 (App Router)
• Library: React 19
• Language: TypeScript

Styling & UI

• CSS: Tailwind CSS 4
• Components: Radix UI
• Icons: Lucide React
• Typography: Google Fonts (Inter)

Animations & Interaction

• Motion: Motion/React
• Scroll: Locomotive Scroll & AOS
• Carousel: Embla Carousel
• Lottie: Lottie-React

---

📁 Project Structure

├── app/              # Next.js App Router (pages and layouts)
│   ├── actions/      # Server Actions (AI Chat logic)
│   └── globals.css   # Global styles & Tailwind config
├── components/       # Reusable UI components
├── public/           # Static assets (images, icons, resume)
├── lib/              # Utility functions and shared logic
├── hooks/            # Custom React hooks
└── metadata.json     # Project-specific metadata

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/naphiertech/Naph2ndPortfolio.git

2. Install dependencies:

   npm install

3. Set up environment variables: Create a .env file and add your Google Gemini API Key:

   GOOGLE_GENERATIVE_AI_API_KEY=your_api_key_here

4. Start the development server:

   npm run dev

---

🤝 Contact & Connect

• Portfolio: Visit Live Site (Update with actual link if available)
• GitHub: @naphiertech
• LinkedIn: Naphier Awalie (Update with actual link)

---

Made with ❤️ by Naphier Awalie