https://github.com/shawn-albert/portfolio
A modern portfolio built with Next.js 14, TypeScript, and shadcn/ui. Features server-side rendering, MDX content management, and motion effects.
https://github.com/shawn-albert/portfolio
mdx nextjs14 react tailwindcss typescript vercel
Last synced: 3 months ago
JSON representation
A modern portfolio built with Next.js 14, TypeScript, and shadcn/ui. Features server-side rendering, MDX content management, and motion effects.
- Host: GitHub
- URL: https://github.com/shawn-albert/portfolio
- Owner: shawn-albert
- License: mit
- Created: 2024-11-01T18:14:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-11T02:21:49.000Z (12 months ago)
- Last Synced: 2025-08-08T14:44:40.586Z (11 months ago)
- Topics: mdx, nextjs14, react, tailwindcss, typescript, vercel
- Language: TypeScript
- Homepage: https://portfolio.shawn-albert.com
- Size: 103 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Professional Portfolio Platform
## 📋 Table of Contents
1. [🚀 Overview](#overview)
2. [💻 Tech Stack](#tech-stack)
3. [🌟 Features](#features)
4. [🛠️ Technical Implementation](#technical-implementation)
5. [☁️ Infrastructure & Deployment](#infrastructure--deployment)
6. [⚡ Performance](#performance)
7. [🔧 Development](#development)
8. [🏃♂️ Getting Started](#getting-started)
9. [📚 References](#references)
10. [❤️ Credits](#credits)
## 🚀 Overview
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.
## 💻 Tech Stack
- **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
## 🌟 Features
- ⚡️ 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
## 🛠️ Technical Implementation
- 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
## ☁️ Infrastructure & Deployment
- Global content delivery via Vercel's edge network
- Automated preview deployments
- Optimized asset delivery with next/image
- Comprehensive security policies
- Automated TypeScript checks
## ⚡ Performance
- 💯 Perfect Lighthouse scores (100/100)
- 🏃♂️ Static page generation
- 📦 Optimized asset caching
- 🖼️ Lazy-loaded images with blur placeholders
- 🔄 Streaming and progressive rendering
## 🔧 Development
```bash
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Build for production
pnpm build
# Start production server
pnpm start
```
## 🏃♂️ Getting Started
1. Clone the repository
```bash
git clone https://github.com/shawn-albert/portfolio.git
```
2. Install dependencies
```bash
pnpm install
```
3. Set up environment variables
```bash
cp .env.example .env.local
```
4. Start the development server
```bash
pnpm dev
```
Visit `http://localhost:3000` to see your application running.
## 📚 References
### Dependencies
- [Next.js](https://nextjs.org) - React framework
- [TypeScript](https://www.typescriptlang.org) - Type safety
- [Tailwind CSS](https://tailwindcss.com) - Styling
- [shadcn/ui](https://ui.shadcn.com) - UI components
- [Framer Motion](https://www.framer.com/motion) - Animations
- [MDX](https://mdxjs.com) - Content management
### Development Tools
- [ESLint](https://eslint.org) - Code linting
- [Prettier](https://prettier.io) - Code formatting
- [Husky](https://typicode.github.io/husky) - Git hooks
- [Commitlint](https://commitlint.js.org) - Commit conventions
### Deployments
- [Vercel](https://vercel.com) - Hosting platform
- [Next.js Image](https://nextjs.org/docs/api-reference/next/image) - Image optimization
## ❤️ Credits
This project builds upon the excellent foundational work of [shadcn-portfolio](https://github.com/techwithanirudh/shadcn-portfolio) by [techwithanirudh](https://github.com/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](https://ui.shadcn.com/) for the beautiful UI components
- [Tailwind CSS](https://tailwindcss.com/) for the utility-first CSS framework
- [Next.js](https://nextjs.org/) 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](https://github.com/techwithanirudh/shadcn-portfolio) repository for more insights into the foundational implementation.