A comprehensive, modern website for Kamla Nehru Institute of Technology (KNIT), built with Next.js 15, TypeScript, and Tailwind CSS.
This project modernizes the KNIT college website (knit.ac.in) with a fresh design, improved user experience, and contemporary web technologies. The website serves as the primary digital gateway for students, faculty, and prospective applicants.
- Hero section with compelling messaging
- Quick statistics and key metrics
- Academic programs overview
- Latest news and events
- Call-to-action sections for admissions
- Comprehensive program listings (B.Tech, M.Tech, Ph.D)
- Department-wise information
- Course curricula and specializations
- Academic calendar integration
- Detailed admission process
- Eligibility criteria and requirements
- Fee structure with transparency
- Application timeline and deadlines
- Document requirements checklist
- Institution history and legacy
- Vision and mission statements
- Leadership team profiles
- Accreditation and rankings
- Key achievements and milestones
- Multiple contact methods
- Interactive contact form
- Campus location with directions
- Department-wise contact information
- Office hours and availability
- Framework: Next.js 15.5.0 with App Router
- Language: TypeScript 5.x
- Styling: Tailwind CSS 4.x
- UI Components: Custom React components
- Icons: Heroicons & Custom SVG icons
- Fonts: Geist Sans & Geist Mono
- Performance: Turbopack for faster development
- Node.js 18.x or higher
- npm or yarn package manager
-
Clone the repository:
git clone <repository-url> cd aca-portal
-
Install dependencies:
npm install # or yarn install -
Run development server:
npm run dev # or yarn dev -
Open in browser: Navigate to http://localhost:3000
npm run build
npm startaca-portal/
├── app/ # App Router directory
│ ├── components/ # Reusable components
│ │ ├── Header.tsx # Navigation header
│ │ └── Footer.tsx # Site footer
│ ├── about/ # About page
│ │ └── page.tsx
│ ├── academics/ # Academic programs
│ │ └── page.tsx
│ ├── admissions/ # Admission information
│ │ └── page.tsx
│ ├── contact/ # Contact page
│ │ └── page.tsx
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ ├── loading.tsx # Loading component
│ ├── not-found.tsx # 404 page
│ └── page.tsx # Homepage
├── public/ # Static assets
├── next.config.ts # Next.js configuration
├── tailwind.config.js # Tailwind configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies and scripts
- Primary Blue:
#1E40AF(Blue-700) - Secondary Blue:
#1E3A8A(Blue-800) - Accent Yellow:
#F59E0B(Amber-500) - Success Green:
#10B981(Emerald-500) - Gray Scale: Various shades for content hierarchy
- Headings: Geist Sans (Bold weights)
- Body: Geist Sans (Regular/Medium)
- Code: Geist Mono
- Consistent spacing using Tailwind's scale
- Responsive design patterns
- Accessibility-first approach
- Modern card-based layouts
- TypeScript with strict mode enabled
- ESLint configuration for code quality
- Functional components with React hooks
- Tailwind CSS for styling
- Each component in its own file
- Clear prop interfaces with TypeScript
- Responsive design considerations
- Accessibility attributes included
- Next.js Image component for optimized images
- Turbopack for faster development builds
- Code splitting and lazy loading
- SEO optimization with metadata
- Connect GitHub repository to Vercel
- Configure build settings
- Deploy automatically on push
- Build the project:
npm run build - Upload
out/directory to web server - Configure server for SPA routing
The website is fully responsive across:
- Mobile: 320px - 768px
- Tablet: 768px - 1024px
- Desktop: 1024px+
- Large Screens: 1440px+
- WCAG 2.1 AA compliance
- Semantic HTML structure
- Keyboard navigation support
- Screen reader compatibility
- Color contrast optimization
- Student portal integration
- Faculty dashboard
- Online application system
- Virtual campus tour
- Alumni network portal
- Research publication system
- Event management system
- Multi-language support
- Content Management System (CMS) integration
- Database connectivity
- User authentication system
- API integrations
- Advanced SEO optimization
- Performance monitoring
- Google Analytics integration ready
- Performance monitoring setup
- User behavior tracking
- Conversion funnel analysis
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is proprietary to Kamla Nehru Institute of Technology.
For technical support or questions:
- Email: deepankarkumar120@gmail.com
- Development Team: github.com/D9292S
Built with ❤️ for KNIT College
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.