Welcome to my portfolio project! This project is built with TypeScript and Next.js, using a range of libraries and tools to create a sleek, interactive, and responsive portfolio website.
- Responsive Design: 📱 Optimized for all devices using Tailwind CSS.
- Smooth Animations: 🎥 Implemented with Framer Motion for modern UI/UX.
- Interactive Hover Effects: 🖱️ Powered by Radix UI's Hover Card component.
- Dynamic Star Ratings: ⭐ Integrated with React Rating and React Rating Stars.
- SEO Friendly: 🔍 Enhanced with Next.js capabilities.
- Optimized Performance: ⚡ Uses Sharp for image optimization.
- Dark & Light Theme: Modern dark & light themes with beautiful gradients
- Animated Background: Floating particles and gradient effects
- Glass Morphism: Beautiful glass effects and backdrop blur
- Gradient Text: Eye-catching gradient text effects
- Custom Scrollbar: Styled scrollbar with gradient colors
- Framer Motion: Sophisticated animations powered by Framer Motion
- Scroll-triggered Animations: Elements animate as they come into view
- Hover Effects: Interactive hover animations throughout
- Loading Animations: Beautiful loading and transition effects
- Typing Effects: Dynamic typing animations
- Mobile-First: Fully responsive across all devices
- Touch-Friendly: Optimized for touch interactions
- Fast Loading: Optimized performance and fast loading times
- SEO Optimized: Proper meta tags and structured data
- Hero Section: Stunning animated introduction with floating particles
- About Me: Personal information with animated profile card
- Projects: Interactive project showcase with hover effects
- Skills: Animated skill bars with technology categories
- Experience: Professional timeline with achievements
- Contact: Call-to-action section with contact information
- Certificate: Showcase of earned certifications with interactive view/download options
- Framework: Next.js (v14.2.5)
- Language: TypeScript
- Styling: Tailwind CSS 🎨
- Animations: Framer Motion 🎥
- Icons: React Icons 🎨
- Utility Classes Merging: Tailwind Merge
- Intersection Observers: React Intersection Observer 👀
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Advanced animations library
- CSS Custom Properties - Dynamic theming
- Custom CSS Animations - Hand-crafted effects
- Iconifyt - Beautiful, customizable icons
- Google Fonts (Space Grotesk) - Modern typography
- ESLint - Code linting and formatting
- PostCSS - CSS processing
- Autoprefixer - CSS vendor prefixing
- Node.js 18.0 or later
- npm or yarn package manager
Follow these steps to get started:
-
Clone the repository:
git clone https://github.com/Taniya23Y/NewOne
-
Navigate to the project directory:
cd NewOne -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open http://localhost:3000 in your browser to see the portfolio.
Visit the live portfolio: taniyay-portfolio.vercel.app
npm run dev: Start the development server.npm run build: Build the project for production.npm run start: Start the production server.npm run lint: Lint the codebase.
@radix-ui/react-hover-card: v1.1.4@svgr/webpack: v8.1.0clsx: v2.1.1framer-motion: v11.3.21next: v14.2.5qss: v3.0.0react: v18react-dom: v18react-icons: v5.3.0react-intersection-observer: v9.13.1react-rating: v2.0.5react-rating-stars-component: v2.2.0sharp: v0.33.5tailwind-merge: v2.4.0
Make sure to include any necessary development dependencies in your local setup.
.
├── components # Reusable UI components
├── pages # Next.js pages
├── public # Static assets like images and icons
├── styles # Global and Tailwind CSS styles
├── utils # Helper functions
├── tsconfig.json # TypeScript configuration
└── package.json # Project dependencies and scripts
If you find any bugs or have suggestions for improvements, feel free to open an issue or submit a pull request. Contributions are welcome!
This project is licensed under the MIT License.
For any inquiries or questions, please reach out to me via LinkedIn or check out my GitHub.