A modern, interactive portfolio website showcasing creative projects, technical skills, and the creative universes of a tech creator and developer.
- 🎨 Modern UI/UX - Stunning dark-themed design with glassmorphism and smooth animations
- 🎭 Creative Universes - Showcase multiple creative identities and projects
- 📱 Fully Responsive - Optimized for all devices and screen sizes
- 🎬 Rich Animations - GSAP-powered transitions and interactive effects
- 🔧 Sanity CMS Integration - Easy content management through Sanity Studio
- ⚡ Blazing Fast - Built with Vite for optimal performance
- 🎯 Type-Safe - Full TypeScript support
- 🎨 React Bits Components - Premium UI components and text animations
- Framework: React 18 with TypeScript
- Build Tool: Vite
- Styling: Tailwind CSS + Custom CSS
- Animations: GSAP, Framer Motion
- UI Components: React Bits, Custom Components
- Headless CMS: Sanity.io
- Content Delivery: Sanity Client
- Frontend Hosting: Vercel
- Studio Hosting: Vercel (Self-hosted)
- Node.js (v18 or higher)
- npm or yarn
- Sanity Account (Free tier works)
-
Clone the repository
git clone https://github.com/YOUR_USERNAME/my-portfolio.git cd my-portfolio -
Install dependencies
npm install
-
Set up environment variables
Create a
.env.localfile in the root directory:NEXT_PUBLIC_SANITY_PROJECT_ID=zgo49znz NEXT_PUBLIC_SANITY_DATASET=production NEXT_PUBLIC_SANITY_API_VERSION=2024-01-01
-
Run the development server
npm run dev
-
Open your browser
Navigate to http://localhost:3000
ezsumm-portfolio/
├── components/ # React components
│ ├── ui/ # Reusable UI components
│ ├── sections/ # Page sections
│ └── animations/ # Animation components
├── lib/ # Utilities and helpers
│ ├── sanity.ts # Sanity client configuration
│ └── utils.ts # Helper functions
├── sanity/ # Sanity Studio configuration
│ ├── schemaTypes/ # Sanity schemas
│ └── sanity.config.ts
├── public/ # Static assets
├── src/ # Source files
│ ├── App.tsx # Main app component
│ └── main.tsx # Entry point
└── DEPLOYMENT.md # Deployment guide
-
Run Sanity Studio locally:
cd sanity npm run dev -
Access the Studio:
-
Edit Content:
- Update About section
- Add/Edit Projects
- Manage Skills
- Update Creative Universes
For detailed deployment instructions, see DEPLOYMENT.md
- Push your code to GitHub
- Import project in Vercel
- Add environment variables
- Deploy!
| Script | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run preview |
Preview production build |
npm run lint |
Run ESLint |
Dynamic showcase of different creative identities with smooth transitions and animations.
Project cards with hover effects, detailed descriptions, and technology tags.
Visual representation of technical skills with animated progress indicators.
Mobile-first approach ensuring perfect display on all devices.
This is a personal portfolio project, but suggestions and feedback are welcome!
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
Isum Enuka
- Portfolio: [Your Live Portfolio URL]
- GitHub: @your-github-username
- React Bits - Premium UI components
- GSAP - Animation library
- Sanity.io - Headless CMS
- Vercel - Deployment platform
Made with ❤️ by Isum Enuka
⭐ Star this repo if you like it!