When we started building our team portfolio, we didn't just want a beautiful website—we wanted something that lives. That's when we decided to connect it directly to our GitHub profiles. By using the GitHub API and Next.js API routes, we built a dynamic section that fetches and displays our latest public repositories, stars, forks, and descriptions in real time.

We wrote a custom API route in /pages/api/ that securely handles our GitHub access token and fetches repo data. On the frontend, we used useEffect and fetch (or SWR for better caching) to display that data. This integration ensures our site always reflects our latest work, whether it's a personal side project or a team collaboration. It's a real-time resume that updates itself—and we think that's pretty cool.

Let's face it—static sites feel... static. We wanted our portfolio to feel like an experience, not just a scroll-through. That's where Framer Motion came in. With this animation library for React, we created fluid transitions between pages, hover effects that respond naturally, and entrance animations that make our content feel alive.

We started with simple fade-ins and slide-ups for components as they enter the viewport. Then we leveled up with AnimatePresence to add animations to dynamic routes, making the site feel more like an app. It's not just about eye candy—it's about guiding attention, improving user engagement, and giving that creative developer vibe we're going for.

Pro tip: we used variants to manage reusable animation patterns and synced them with Tailwind utility classes for a consistent look and feel.

Dark mode isn't just trendy—it's a must-have for modern dev portfolios. But implementing it cleanly, with smooth transitions and consistent styling, can be tricky. We used Tailwind CSS along with Shadcn/UI, a modern React component library that works beautifully with Tailwind, to create a fully themeable UI.

Our dark mode toggle uses Tailwind's dark: variant and respects system preferences. Theming our buttons, inputs, cards, and sections was seamless thanks to Shadcn's customizable components. With a single theme configuration, we were able to build both light and dark versions of our UI that felt designed, not just styled. The end result? A portfolio that feels smooth, polished, and accessible in every lighting condition.

To make our site more interactive (and a little futuristic), we built a custom ChatBot. It's powered by OpenAI's GPT model and served through Next.js API Routes, allowing it to process real-time user queries—right on the site.

The ChatBot can answer questions about our team, projects, stack, and even give fun facts about our development journey. Under the hood, we built a chat component with basic conversation flow, hooked it up to our backend route, and added typing animations for extra UX charm.

What started as a fun side feature turned into a super useful tool for engaging visitors and helping them navigate the portfolio in a unique way. And of course, we used Tailwind and Framer Motion to keep it visually slick and responsive.

Performance is everything. A beautiful portfolio that lags or loads slowly is a missed opportunity. We spent time fine-tuning our site using the full power of Next.js performance features.

We used next/image for optimized, responsive images. We split heavy components and dynamically imported them only when needed. We cached API calls and used ISR (Incremental Static Regeneration) to keep data fresh without killing performance. Lazy loading was applied to animations, and we even preloaded key routes to speed up navigation.

Using Lighthouse and Web Vitals, we tracked our progress and pushed our site into the green zone on all metrics. The result? A sleek, responsive portfolio that loads fast, feels light, and keeps users engaged from the first click.