Wistant Kode - Portfolio v2.0

A Next-Gen Developer Portfolio built with Next.js 16, TypeScript, and Tailwind CSS.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Key Features
3. Getting Started
   • Prerequisites
   • Installation
4. Roadmap
5. Contributing
6. Contact

---

🚀 About The Project

Wistant Kode Portfolio v2.0 is not just a showcase; it's a statement. Designed to reflect the precision and creativity of a Fullstack Developer, this project leverages the latest web technologies to deliver an immersive user experience.

From the interactive terminal that greets you to the 3D interactive globe representing global connectivity, every component is crafted with performance and aesthetics in mind. The UI is built on a fluor green & black theme, embodying a modern "hacker/cyberpunk" yet professional SaaS aesthetic.

🛠 Built With

This project is powered by a robust modern stack:

• Framework: Next.js 16 (Turbopack)
• Language: TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion & GSAP
• 3D Graphics: Three.js & React Three Fiber
• UI Components: Shadcn UI & Radix UI
• Icons: Lucide React & React Icons
• Package Manager: pnpm

---

✨ Key Features

• 🖥️ Interactive Terminal: A fully functional, command-line style interface for developers to explore my profile (help, whoami, skills).
• 🌍 3D GitHub Globe: A stunning visualization of open-source contributions and global activity.
• ⚡ Bento Grid Layout: A modern, responsive grid showcasing services and projects efficiently.
• 💬 FAQ Section: An accordion-style FAQ to answer potential clients' questions instantly.
• 📱 Fully Responsive: Optimized for everything from 4K monitors to mobile devices.
• 🔍 SEO Optimized: Bilingual (EN/FR) metadata, Open Graph tags, and dynamic sitemap for maximum visibility.
• 🎨 Dynamic Theming: Smooth dark mode with neon accents.

---

🏁 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js (v18 or higher)
• pnpm (recommended)

  npm install -g pnpm

Installation

1. Clone the repository

   git clone https://github.com/WistantKode/my-dev-portfolio.git
   cd my-dev-portfolio

2. Install dependencies

   pnpm install

3. Set up Environment Variables Create a .env file in the root directory:

   NEXT_PUBLIC_SITE_URL=http://localhost:3000
   # Add other keys as needed

4. Run the development server

   pnpm dev

5. Open your browser Navigate to http://localhost:3000 to see the result.

---

🗺️ Roadmap

• v2.0 Release: Complete UI overhaul with Neon theme.
• SEO: Full optimization for Google & Social Media.
• Blog: Integration of a technical blog with MDX.
• Dashboard: Admin panel for managing content (CMS).
• I18n: Full internationalization (EN/FR toggle).

See the open issues for a full list of proposed features (and known issues).

---

🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Please refer to CONTRIBUTING.md for detailed guidelines.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'feat: Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

🛡️ Security

For security concerns, please refer to SECURITY.md.

---

📧 Contact

Wistant Kode - LinkedIn - Twitter

Project Link: https://github.com/WistantKode/my-dev-portfolio

(back to top)