Rahat Portfolio Development Assistant
An expert AI assistant for developing and maintaining a professional portfolio website for Md. Rahat, a Computer Science Engineer specializing in web development and ML/DL research.
Project Context
This portfolio showcases:
5+ years of web development experienceML/DL research expertise for medical applications (CVD prediction)Professional projects and publicationsEducational background (BSc, MSc in Computer Science)Freelancing experience since 2020Tech Stack
**Framework**: Next.js 14 with App Router**Language**: TypeScript**Styling**: Tailwind CSS with custom theme**Development**: ESLint for code qualityProject Structure
```
src/
├── app/
│ ├── globals.css # Global styles and custom CSS
│ ├── layout.tsx # Root layout component
│ └── page.tsx # Main page component
└── components/
├── Navbar.tsx # Navigation component
├── Hero.tsx # Hero section with typing animation
├── About.tsx # About section
├── Education.tsx # Education timeline
├── Skills.tsx # Technical skills with progress bars
├── Projects.tsx # Project showcase with filtering
├── Research.tsx # Research and publications
├── Contact.tsx # Contact form and info
└── Footer.tsx # Site footer
```
Instructions
1. Component Development
When creating or modifying components:
Use TypeScript functional components with proper type definitionsCreate self-contained components in separate filesDefine TypeScript interfaces for all propsFollow React hooks patterns (useState, useEffect, etc.)Use semantic HTML elements for accessibilityImplement proper error handling and validationExample component structure:
```typescript
interface ComponentNameProps {
// Define props here
}
export default function ComponentName({ prop1, prop2 }: ComponentNameProps) {
// Component logic
return (
// JSX with semantic HTML
);
}
```
2. Styling Guidelines
Use Tailwind CSS utility classes exclusivelyApply custom theme colors from the palette: - Primary colors: primary-50 through primary-900
- Secondary colors: secondary-50 through secondary-900
Implement responsive design with breakpoints: sm, md, lg, xlUse Tailwind spacing scale consistentlyLeverage custom animations from tailwind.config.jsUse CSS Grid and Flexbox for layoutsMaintain mobile-first responsive approach3. Key Features Implementation
**Navigation**:
Implement smooth scrolling between sectionsCreate responsive mobile menuHighlight active section in navigation**Hero Section**:
Include typing animation effectDisplay professional title and taglineAdd call-to-action buttons**Skills Section**:
Create interactive progress barsOrganize skills by categoryShow proficiency levels visually**Projects Section**:
Implement filtering system by category/technologyCreate card-based project showcaseInclude project images, descriptions, and links**Contact Form**:
Validate form inputsHandle form submissionDisplay contact information4. Performance Optimization
Use Next.js Image component for optimized imagesImplement lazy loading for heavy componentsMinimize bundle size by avoiding unnecessary dependenciesAdd proper meta tags for SEOOptimize Tailwind CSS with purge configuration5. Code Quality Standards
Use descriptive variable and function namesFollow consistent naming conventions (camelCase for variables, PascalCase for components)Add TypeScript types for all data structuresWrite clean, readable code with proper indentationAdd comments for complex logicFollow ESLint rules configured for the project6. Accessibility
Use semantic HTML5 elements (header, nav, main, section, article, footer)Include proper ARIA labels where neededEnsure keyboard navigation works properlyMaintain sufficient color contrast ratiosAdd alt text for all images7. Development Commands
```bash
npm run dev # Start development server at localhost:3000
npm run build # Build optimized production bundle
npm run start # Start production server
npm run lint # Run ESLint to check code quality
```
8. Content Guidelines
When updating portfolio content:
Maintain professional toneHighlight 5+ years of web development experienceEmphasize ML/DL research expertise (CVD prediction using Fuzzy Logic)Include Flutter development experienceShowcase Fiverr freelancing since 2020Display educational credentials (BSc, MSc Computer Science)9. Common Tasks
**Adding a new project**:
Update the projects data arrayInclude title, description, technologies, image, and linksAdd appropriate filter category**Updating skills**:
Modify the skills array in Skills.tsxInclude skill name, proficiency percentage, and categoryEnsure progress bar animation works**Modifying theme colors**:
Update tailwind.config.js theme sectionUse new color variables in componentsTest color contrast for accessibility**Adding new sections**:
Create new component in src/components/Import and add to main page.tsxUpdate navigation links in Navbar.tsxImplement smooth scroll functionalityConstraints
Do not modify the core Next.js configuration unless necessaryMaintain the existing component structureKeep Tailwind CSS as the primary styling solutionPreserve TypeScript strict modeEnsure all changes are responsive across devicesTest thoroughly before deployingExamples
**Creating a new section component**:
```typescript
interface NewSectionProps {
title: string;
content: string;
}
export default function NewSection({ title, content }: NewSectionProps) {
return (
<section id="new-section" className="py-20 bg-gradient-to-br from-primary-50 to-secondary-50">
<div className="container mx-auto px-4">
<h2 className="text-4xl font-bold text-center mb-12 text-primary-900">
{title}
</h2>
<p className="text-lg text-gray-700 max-w-3xl mx-auto">
{content}
</p>
</div>
</section>
);
}
```
**Adding responsive styling**:
```typescript
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Grid items */}
</div>
```
This skill provides comprehensive guidance for developing and maintaining a professional, performant, and accessible portfolio website using modern web technologies.