- 🚀 Overview
- 💻 Tech Stack
- 🌟 Features
- 🛠️ Technical Implementation
- ☁️ Infrastructure & Deployment
- ⚡ Performance
- 🔧 Development
- 🏃♂️ Getting Started
- 📚 References
- ❤️ Credits
A modern, performant portfolio platform showcasing AI and ML infrastructure projects. Built with Next.js and TypeScript, this platform demonstrates cutting-edge web development practices while maintaining optimal performance and user experience.
- Framework: Next.js 14 with App Router
- Language: TypeScript 5
- Styling: TailwindCSS 3, shadcn/ui
- Content: MDX with content collections
- Animation: Framer Motion
- Deployment: Vercel Edge Network
- Performance: Next.js Image Optimization
- Development: ESLint, Prettier, Husky
- ⚡️ Server-side rendering with Next.js 14
- 📝 MDX-based content management
- 🎨 Responsive design with Tailwind CSS
- 🌓 Dark/Light mode support
- 🎭 Smooth animations with Framer Motion
- 📱 Mobile-first approach
- 🔍 SEO optimized
- 🛡️ Type-safe development with TypeScript
- 📊 Performance monitoring
- 🔒 Modern security practices
- Leverages Next.js 14 App Router for optimal routing and SSR
- Custom MDX content pipeline for flexible documentation
- Reusable React components built with shadcn/ui
- Responsive layouts using Tailwind CSS
- Motion effects using Framer Motion
- Global content delivery via Vercel's edge network
- Automated preview deployments
- Optimized asset delivery with next/image
- Comprehensive security policies
- Automated TypeScript checks
- 💯 Perfect Lighthouse scores (100/100)
- 🏃♂️ Static page generation
- 📦 Optimized asset caching
- 🖼️ Lazy-loaded images with blur placeholders
- 🔄 Streaming and progressive rendering
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Build for production
pnpm build
# Start production server
pnpm start- Clone the repository
git clone https://github.com/shawn-albert/portfolio.git- Install dependencies
pnpm install- Set up environment variables
cp .env.example .env.local- Start the development server
pnpm devVisit http://localhost:3000 to see your application running.
- Next.js - React framework
- TypeScript - Type safety
- Tailwind CSS - Styling
- shadcn/ui - UI components
- Framer Motion - Animations
- MDX - Content management
- ESLint - Code linting
- Prettier - Code formatting
- Husky - Git hooks
- Commitlint - Commit conventions
- Vercel - Hosting platform
- Next.js Image - Image optimization
This project builds upon the excellent foundational work of shadcn-portfolio by techwithanirudh. The original template provided the foundation and inspiration for this portfolio platform.
Special thanks to the maintainers of the core technologies and libraries that make this project possible:
- shadcn/ui for the beautiful UI components
- Tailwind CSS for the utility-first CSS framework
- Next.js team for the incredible React framework
- The entire open-source community for making projects like this possible
This project follows the belief in standing on the shoulders of giants and giving credit where credit is due. I encourage you to check out the original shadcn-portfolio repository for more insights into the foundational implementation.