This project is a dynamic, interactive web application designed to showcase professional certifications. Built with React and Next.js, it features a responsive grid layout of certification cards, each expandable for detailed information. The application utilizes modern web technologies to create a smooth, engaging user experience.
Check out the live demo of the Professional Certifications Showcase: Live Demo
- Responsive grid layout of certification cards
- Interactive card expansion for detailed views
- Image zoom functionality for certificate inspection
- Smooth animations and transitions using Framer Motion
- Mobile-friendly design
- React
- Next.js
- TypeScript
- Tailwind CSS
- Framer Motion
- Lucide React (for icons)
- Node.js (v14 or later)
- npm or yarn
-
Clone the repository:
git clone /~https://github.com/your-username/professional-certifications-showcase.git -
Navigate to the project directory:
cd professional-certifications-showcase -
Install dependencies:
npm install # or yarn install -
Start the development server:
npm run dev # or yarn dev -
Open http://localhost:3000 in your browser to view the application.
- The main page displays a grid of certification cards.
- Click on a card to view detailed information about the certification.
- In the detailed view, you can:
- Read about what was learned in the certification
- Zoom in/out of the certificate image
- Return to the main grid view
To add or modify certifications, edit the certificates array in the main component file. Each certificate object should include:
id: A unique identifiertitle: The name of the certificationissuer: The organization that issued the certificationdate: The date the certification was obtainedimageUrl: A link to the certificate imagelearnings: A description of the skills or knowledge gained
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.