joshscript Portfolio Website

A modern, professional portfolio website built with Next.js 16, React, TypeScript, and Tailwind CSS. Featuring smooth animations, responsive design, and best practices for 2026.

🚀 Features

• Modern Design: Clean, professional UI with gradient accents and smooth transitions
• Fully Responsive: Optimized for mobile, tablet, and desktop devices
• Smooth Animations: Framer Motion animations for enhanced interactivity
• Dark Mode: Premium dark theme with blue-cyan gradient accents
• Performance Optimized: Built with Next.js 16 and Turbopack for fast development
• TypeScript: Full type safety throughout the codebase
• SEO Optimized: Proper metadata and semantic HTML
• Accessibility: WCAG compliant with focus states and semantic elements

📋 Sections

1. Hero Section: Eye-catching introduction with animated background
2. About: Personal introduction and statistics
3. Projects: Showcase of featured work with technology tags
4. Skills: Technical expertise organized by categories
5. Contact: Contact form and social links
6. Navigation: Fixed navbar with smooth scrolling
7. Footer: Social links and quick navigation

🛠️ Tech Stack

• Framework: Next.js 16 with App Router
• Styling: Tailwind CSS + Custom CSS animations
• Animations: Framer Motion
• Icons: Lucide React
• Language: TypeScript
• Build Tool: Turbopack

🎨 Design Features

• Gradient Accents: Blue (#3B82F6) to Cyan (#06B6D4) gradient theme
• Glassmorphism: Semi-transparent components with backdrop blur
• Blob Animations: Floating animated gradient blobs in backgrounds
• Smooth Scrolling: Anchor-based smooth navigation
• Hover Effects: Interactive hover states on all interactive elements
• Loading States: Form submission feedback with success/error messages

📦 Installation

# Clone the repository
git clone <your-repo-url>

# Navigate to project
cd portfolio

# Install dependencies
npm install

# Run development server
npm run dev

Visit http://localhost:3000 to see the portfolio.

🚀 Deployment

Vercel (Recommended)

vercel deploy

Docker

docker build -t portfolio .
docker run -p 3000:3000 portfolio

Traditional Hosting

npm run build
npm run start

📝 Customization

Update Personal Information

• Contact Email: Edit in src/components/Contact.tsx
• Social Links: Update in src/components/Footer.tsx and Contact.tsx
• Projects: Modify project data in src/components/Projects.tsx

Styling

• Colors: Tailwind theme colors in tailwind.config.ts
• Fonts: Google Fonts configured in src/app/layout.tsx
• Animations: Keyframes defined in src/app/globals.css

Add New Sections

1. Create new component in src/components/
2. Import in src/app/page.tsx
3. Add to navigation in src/components/Navbar.tsx

🔄 Component Structure

src/
├── app/
│   ├── page.tsx (Main page)
│   ├── layout.tsx (Root layout)
│   └── globals.css (Global styles)
├── components/
│   ├── Navbar.tsx
│   ├── Hero.tsx
│   ├── About.tsx
│   ├── Projects.tsx
│   ├── Skills.tsx
│   ├── Contact.tsx
│   └── Footer.tsx
└── public/
    └── (Static assets)

📱 Responsive Breakpoints

• Mobile: < 640px
• Tablet: 640px - 1024px
• Desktop: > 1024px

♿ Accessibility

• Semantic HTML structure
• ARIA labels where needed
• Focus visible states
• Color contrast compliance
• Keyboard navigation support

📊 Performance

• Lighthouse Score: 90+
• Core Web Vitals: Optimized
• Bundle Size: Minimal with code splitting
• Load Time: < 2 seconds

🔐 Security

• Content Security Policy headers
• No external API exposures
• Form validation on client and server
• Protected environment variables

📄 License

This project is open source and available under the MIT License.

👨‍💻 Author

joshscript - Fullstack Web & Mobile Developer

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📧 Contact

For inquiries and project opportunities:

• Email: hello@joshscript.dev
• Website: https://joshscript.dev

---

Built with ❤️ using Next.js and React

joshscript