A modern, responsive portfolio website built with Next.js and Tailwind CSS. This project showcases my professional experience, skills, and projects in an elegant, user-friendly interface.
Check out the live version of the portfolio here:
👉 my-portfolio-fesina.vercel.app
- Responsive Design - Optimized for all devices and screen sizes
- Smooth Navigation - Interactive navigation with scroll-based active states
- Modern UI/UX - Clean, professional design with smooth animations
- Performance Optimized - Built with Next.js for optimal loading speeds
- SEO Friendly - Proper meta tags and structured data
- Dark Theme - Elegant dark color scheme with teal accents
A comprehensive cryptocurrency tracking application built with React and TypeScript. Features real-time price monitoring, detailed statistics, interactive charts, and cryptocurrency information.
Live Demo: crypto-tracker-tau-five.vercel.app
GitHub: crypto-tracker
Key Features:
- Real-time cryptocurrency prices and statistics
- Interactive price charts and historical data
- Detailed coin information and market analysis
- News integration via Crypto News API
- Modern UI with TypeScript, Redux, and TailwindCSS
- Responsive design for all devices
Tech Stack: TypeScript, React, Redux Toolkit, RTK Query, TailwindCSS, Chart.js
- Framework: Next.js 15.3.5
- Styling: Tailwind CSS v4
- Language: TypeScript
- Font: Inter (Google Fonts)
- Icons: Custom SVG icons
- Deployment: Ready for Vercel deployment
src/
├── app/
│ ├── (main)/ # Route group for main pages
│ │ └── page.tsx # Homepage component
│ ├── components/ # App-level components
│ ├── globals.css # Global styles
│ └── layout.tsx # Root layout
├── components/
│ ├── common/ # Reusable components
│ │ ├── Navigation.tsx # Navigation component
│ │ ├── Socials.tsx # Social media links
│ │ └── ExperienceItem.tsx
│ ├── homepage/ # Homepage specific components
│ │ ├── About.tsx # About section
│ │ └── ExperienceList.tsx
│ ├── layout/ # Layout components
│ │ ├── Sidebar.tsx # Sidebar navigation
│ │ └── Footer.tsx # Footer component
│ └── ui/ # UI components and icons
│ └── icons/ # SVG icon components
└── constants/
└── workExperience.json # Work experience data
- Node.js 18+
- npm or yarn
-
Clone the repository
git clone <repository-url> cd my-portfolio
-
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000 to view the portfolio.
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
The color scheme is defined in src/app/globals.css:
- Primary colors:
--color-primary-bright,--color-primary-grey - Background:
--color-blue-dark - Accent: Teal (
teal-400)
- Update personal information in
src/components/homepage/About.tsx - Modify work experience in
src/constants/workExperience.json - Update social links in
src/components/common/Socials.tsx
The portfolio is fully responsive with:
- Mobile-first approach
- Tablet optimizations
- Desktop enhancements
- Touch-friendly interactions
- Navigation: Smart scroll-based active state detection
- About Section: Professional introduction with experience calculation
- Experience List: Interactive work history with hover effects
- Social Links: Animated social media icons
- Sidebar: Sticky navigation with personal info
- Tailwind CSS for utility-first styling
- Custom CSS variables for consistent theming
- Smooth transitions and hover effects
- Modern glassmorphism effects
This project is open source and available under the MIT License.
- Email: fesinaihor@gmail.com
- LinkedIn: Ihor Fesina
- GitHub: fesinaihor
Built with ❤️ using Next.js and Tailwind CSS