A modern, responsive portfolio website built with React, TypeScript, and Tailwind CSS. This project showcases the work and skills of Tarik Abaspahic, a full-stack developer specializing in modern web technologies.
- Multi-language Support: Available in Bosnian (bs), English (en), and German (de)
- Dark/Light Mode: Automatic theme switching with user preference persistence
- Responsive Design: Fully responsive across all device sizes
- Modern UI Components: Built with ShadCN UI (Radix UI primitives)
- Animated Background: Dynamic particle animation effects
- Contact Form: Integrated EmailJS for direct contact functionality
- Project Showcase: Interactive project gallery with technology badges
- Skills Section: Visual representation of technical skills and technologies
- Smooth Scrolling: Enhanced navigation experience
- React 18 - Modern React with hooks and concurrent features
- TypeScript - Type-safe JavaScript development
- Vite - Fast build tool and development server
- Tailwind CSS v4 - Utility-first CSS framework with modern features
- ShadCN UI - High-quality React components built on Radix UI
- Radix UI - Accessible, unstyled UI primitives
- Lucide React - Beautiful, consistent icon library
- React Icons - Popular icon packs (Simple Icons, etc.)
- Motion - Powerful animation library for React
- Canvas Confetti - Celebration effects
- TW Animate CSS - Additional CSS animations
- React Hook Form - Performant forms with easy validation
- EmailJS - Client-side email sending service
- Date-fns - Modern JavaScript date utility library
- ESLint - Code linting and formatting
- PostCSS - CSS processing and optimization
src/
├── app/
│ ├── components/
│ │ ├── ui/ # ShadCN UI components
│ │ ├── About.tsx # About section
│ │ ├── AnimatedBackground.tsx
│ │ ├── Contact.tsx # Contact form with EmailJS
│ │ ├── Footer.tsx
│ │ ├── Hero.tsx # Landing section
│ │ ├── Navigation.tsx
│ │ ├── Projects.tsx # Project showcase
│ │ └── Skills.tsx # Skills and technologies
│ ├── context/
│ │ ├── DarkModeContext.tsx
│ │ └── LanguageContext.tsx
│ ├── styles/
│ │ ├── fonts.css
│ │ ├── index.css
│ │ ├── tailwind.css
│ │ └── theme.css
│ ├── translations.ts # Multi-language support
│ └── App.tsx
├── main.tsx # Application entry point
└── styles/ # Global styles
- Node.js (v18 or higher)
- npm or pnpm package manager
-
Clone the repository
git clone https://github.com/tarikaentwickler/Portofolio_react.git cd Portofolio_react -
Install dependencies
npm install # or pnpm install -
Environment Setup (for contact form functionality) Create a
.envfile in the root directory:VITE_EMAILJS_SERVICE_ID=your_service_id VITE_EMAILJS_TEMPLATE_ID=your_template_id VITE_EMAILJS_PUBLIC_KEY=your_public_key
-
Start development server
npm run dev # or pnpm dev -
Open your browser Navigate to
http://localhost:5173
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production build locally
The application supports three languages:
- Bosnian (bs) - Default language
- English (en)
- German (de)
Language switching is available in the navigation menu and persists user preferences.
- Light Mode: Clean white backgrounds with dark text
- Dark Mode: Dark backgrounds with light text
- Accent Colors: Purple/blue theme with proper contrast ratios
- Primary Font: System fonts for optimal performance
- Font Sizes: Responsive scaling from mobile to desktop
- Font Weights: Normal (400) and Medium (500)
- Cards: Clean, rounded containers with subtle shadows
- Buttons: Primary and secondary variants with hover states
- Badges: Technology tags with consistent styling
- Forms: Accessible form controls with validation
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
- Path aliases:
@/points tosrc/ - Asset handling: SVG and CSV files supported
- React and Tailwind plugins enabled
- Modern
@sourcedirective for content scanning - Custom CSS properties for theming
- Dark mode support with CSS custom properties
The contact form uses EmailJS for client-side email sending. To set it up:
- Create an account at EmailJS
- Set up a service, email template, and get your credentials
- Add the credentials to your
.envfile
- Profile Image: Personal photo in
src/app/components/assets/ - Project Images: Screenshots in
public/projects/ - Icons: Lucide React and React Icons for consistent iconography
- Personal introduction with profile image
- Call-to-action buttons
- Social media links
- Personal story and background
- Career goals and motivation
- Downloadable CV and cover letter
- Frontend technologies (React, TypeScript, etc.)
- Backend technologies (Node.js, databases)
- Tools and operating systems
- Visual skill representation with icons
- Featured projects with descriptions
- Technology stacks
- GitHub links and live demos
- Project screenshots
- Contact information
- Functional contact form
- Social media links
- Vite: Fast development and optimized production builds
- Code Splitting: Automatic route-based code splitting
- Asset Optimization: Image and font optimization
- CSS Optimization: Tailwind's purging and minification
- Client-side email sending (no server required)
- Environment variables for sensitive data
- No direct database connections
- Secure form validation
react&react-dom: UI frameworktypescript: Type safety@radix-ui/*: UI primitivestailwindcss: Stylinglucide-react: Icons
motion: Animations@emailjs/browser: Email functionalityreact-hook-form: Form handlingdate-fns: Date utilities
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project includes components from:
- Figma Design: Original design from Figma community
- ShadCN: For the excellent UI component library
- Vite Team: For the amazing build tool
- React Community: For the powerful framework
Tarik Abaspahic
- Email: direkt@t-abaspahic.de
- LinkedIn: https://www.linkedin.com/in/tarik-abaspahic-8a6520352
- GitHub: https://github.com/tarikaentwickler
Built with ❤️ using modern web technologies