The captivating screenshots of my portfolio website.
This repository contains the source code for my personal portfolio website. It is a modern, performant, and fully responsive single-page application built with Next.js 15, React 19, and TypeScript. It showcases my skills, experience, and projects in the fields of cybersecurity and full-stack development.
This portfolio serves as a comprehensive showcase of my 6.8+ years of professional experience as a Certified Ethical Hacker and Full Stack Developer. It highlights my technical skills, key projects, and career milestones. The site is designed to be an immersive and interactive platform for potential employers, collaborators, and fellow developers to learn more about my work.
- Hero Section: An eye-catching introduction with smooth, engaging animations.
- About Section: Comprehensive overview of my background and expertise
- Experience: Detailed professional journey and career milestones
- Certifications: Professional certifications and achievements
- Skills: Interactive skill showcase with proficiency levels
- Portfolio: Featured projects with live demos and source code
- Testimonials: Client and colleague feedback
- Contact: Multiple ways to get in touch, including an integrated contact form.
- Blog: A dedicated section for technical articles and insights (Coming Soon).
- Dark/Light Mode: Seamless theme switching for user preference.
- Fully Responsive: Optimized for a great experience on all devices, from mobile to desktop.
- Performance Optimized: Built for speed with Next.js image optimization, lazy loading, and minimal bundle size.
- Smooth Animations: Powered by GSAP and Framer Motion for a fluid user experience.
This project is built with a modern and robust technology stack to ensure a high-quality, maintainable, and scalable application.
- Next.js 15: The React framework for production, featuring the App Router.
- React 19: Leveraging the latest features for building user interfaces.
- TypeScript 5: For robust, type-safe development.
- Tailwind CSS: A utility-first CSS framework for rapid UI development.
- Radix UI: Unstyled, accessible UI components for building a design system.
- Lucide React: A comprehensive and beautiful icon library.
- Sonner: An opinionated toast component for notifications.
- Class Variance Authority (CVA): For creating flexible and reusable component variants.
- clsx & tailwind-merge: Utilities for constructing conditional class names.
- Framer Motion: A production-ready motion library for creating fluid animations.
- GSAP (GreenSock Animation Platform): A professional-grade animation library for high-performance animations.
- React Hook Form: Performant, flexible, and extensible forms with easy-to-use validation.
- Zod: A TypeScript-first schema declaration and validation library.
- Nodemailer: For handling email functionality from the contact form.
- ESLint & PostCSS: For code linting and CSS processing to maintain code quality.
- Next Themes: For seamless dark and light mode management.
- Recharts: For creating beautiful and interactive data visualizations.
- Node.js 18+
- pnpm (recommended) or npm
-
Clone the repository
git clone https://github.com/karthik558/karthiklal.git cd karthiklal -
Install dependencies
pnpm install # or npm install -
Start development server
pnpm dev # or npm run dev -
Open your browser Navigate to
http://localhost:3000
- Modern UI/UX: A clean, professional design with a strong focus on user experience and attention to detail.
- Smooth Animations: GSAP-powered scroll-triggered animations and fluid page transitions.
- Interactive Elements: Engaging hover effects, micro-interactions, and dynamic content loading.
- Accessibility First: Designed with ARIA labels, keyboard navigation, and screen reader support in mind.
- SEO Optimized: Implemented with best practices for search engine optimization, including meta tags and structured data.
- Performance-Driven: Optimized images, lazy loading, and a minimal bundle size for fast load times.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
- Fork the project
- 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 licensed under the MIT License - see the LICENSE file for details.
- Website: karthiklal.in
- LinkedIn: linkedin.com/in/karthiklal
- GitHub: github.com/karthik558
- X: @_karthiklal
Built with ❤️ by Karthik Lal