A modern, responsive portfolio website showcasing my skills as a Full-Stack Developer. Built with Next.js, React, and modern web technologies. The site is deployed on Vercel and can be accessed at krivtsoff.site.
- Modern Design: Clean, professional design with smooth animations
- Dark/Light Theme: Automatic theme switching with system preference detection
- Responsive: Fully responsive design that works on all devices
- Performance: Optimized for speed and SEO
- Animations: Smooth scroll animations and micro-interactions using Framer Motion
- Accessibility: WCAG compliant with proper semantic HTML
- Next.js 15 - React framework with App Router
- React 19 - Latest React with concurrent features
- TypeScript - Type-safe JavaScript
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Animation library
- Lucide React - Beautiful icons
- shadcn/ui - Modern component library
- CSS Variables - Dynamic theming
- Glass Morphism - Modern visual effects
- Gradient Text - Eye-catching typography
- PostCSS - CSS processing
- Autoprefixer - CSS vendor prefixes
- ESLint - Code linting
- Prettier - Code formatting
- Node.js 18+
- npm or yarn
- Clone the repository:
git clone https://github.com/jesuisstan/portfolio-site-krivtsoff.git
cd portfolio-site-krivtsoff- Install dependencies:
npm install- Set up environment variables:
Create a .env.local file in the root directory with the following variables:
# Contact Information
NEXT_PUBLIC_CONTACT_EMAIL=
NEXT_PUBLIC_CONTACT_PHONE=
NEXT_PUBLIC_CONTACT_LOCATION=
# Social Media Links
NEXT_PUBLIC_LINK_GITHUB=https:/...
NEXT_PUBLIC_LINK_LINKEDIN=https://...
NEXT_PUBLIC_LINK_INSTAGRAM=https://...
NEXT_PUBLIC_LINK_TELEGRAM=https://t...
NEXT_PUBLIC_LINK_WHATSAPP=https://wa.me/...
# CV Download
NEXT_PUBLIC_LINK_CV_DOWNLOAD=...
# EmailJS Configuration
NEXT_PUBLIC_EMAILJS_SERVICE_ID=...
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=...
NEXT_PUBLIC_EMAILJS_USER_ID=...Update these values with your actual contact information and social media links.
- Run the development server:
npm run dev- Open http://localhost:3000 in your browser.
npm run build
npm startsrc/
├── app/ # Next.js App Router
│ ├── layout.js # Root layout with theme provider
│ └── page.js # Home page
├── components/ # React components
│ ├── Banner.jsx # Hero section
│ ├── Contact.jsx # Contact form
│ ├── Experience.jsx # Work experience timeline
│ ├── Footer.jsx # Site footer
│ ├── NavBar.jsx # Navigation bar
│ ├── Projects.jsx # Projects showcase
│ ├── Skills.jsx # Skills section
│ ├── Stats.jsx # Statistics counter
│ └── TechStack.jsx # Technology stack
├── lib/ # Utility functions
│ └── utils.js # CSS class utilities
└── styles/ # Global styles
└── globals.css # Tailwind CSS and custom styles
- Primary: Blue gradient (#3B82F6 to #8B5CF6)
- Secondary: Muted grays for backgrounds
- Accent: Purple and pink gradients
- Success: Green (#10B981)
- Warning: Orange (#F59E0B)
- Error: Red (#EF4444)
- Font: Montserrat (Google Fonts)
- Headings: Bold weights with gradient text
- Body: Regular weight with good readability
- Page Transitions: Smooth fade-in effects
- Scroll Animations: Staggered reveal animations
- Hover Effects: Scale and color transitions
- Loading States: Skeleton screens and spinners
The website is fully responsive with breakpoints:
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
This project is licensed under the MIT License - see the LICENSE file for details.
- Website: krivtsoff.site
- LinkedIn: linkedin.com/in/krivtsoff
- GitHub: github.com/jesuisstan
Made with ❤️ in Paris, France