🌟 Shakana's Developer Portfolio

Welcome to my personal portfolio – a showcase of my work, skills, and passion as a fullstack developer with a strong UX focus. This project highlights my ability to craft modern, performant, and user-friendly web experiences using Next.js, Tailwind CSS, Aceternity UI and thoughtful design patterns.

✨ Live Site

👉 Visit Portfolio

🧠 Project Overview

This portfolio was built as both a technical demonstration and a personal expression of my growth as a developer. It includes:

• Interactive UI with smooth animations and transitions
• Modular, scalable code structure
• Responsive design for all devices
• Error tracking and monitoring with Sentry
• Static site export and deployment optimizations

⚙️ Tech Stack

• Frontend: React, Next.js, TypeScript, Tailwind CSS
• Tooling: Sentry, Git, GitHub Actions, Next.js config
• Design: Aceternity UI, CanvasRevealEffect, MovingBorders animations

🔧 Technical Skills

1. Frontend Development

• Proficiency in React and Next.js for building dynamic, SSR, and static applications.
• Experience with TypeScript for type-safe JavaScript.
• Responsive design with Tailwind CSS, using utility-first classes.

2. Server & Client Components (Next.js App Router)

• Experience structuring pages using Next.js App Router with a clear separation between Client Components and Server Components.

3. Tooling & Configuration

• Advanced Next.js configuration (next.config.js)
• Sentry for logging, error tracking, source maps, and performance monitoring
• Vercel Cron Jobs and build optimizations

4. CI/CD & Version Control

• Git for version control
• Awareness of CI pipelines (process.env.CI)

5. Static Site Generation

• Use of output: "export" for static deployment

6. UI/UX Design

• Building visually appealing and user-friendly interfaces using Aceternity UI components and custom animations.
• Custom interactive components like CanvasRevealEffect and MovingBorders
• Focus on clean, accessible, and smooth interfaces

7. Error Handling

• Source maps for cleaner stack traces
• Sentry configuration for production-ready debugging

8. Data Management

• Component-driven architecture
• Data files (index.ts) for modular experience and project rendering

Getting Started

To run the project locally:

npm install
npm run dev