diff --git a/README.md b/README.md index c972653..0e53351 100644 --- a/README.md +++ b/README.md @@ -1,39 +1,231 @@ -# portfolio +# 🚀 Killian's Portfolio -This template should help get you started developing with Vue 3 in Vite. +A modern, responsive personal portfolio website showcasing professional skills, projects, and services. Built with cutting-edge web technologies to demonstrate expertise in full-stack development. -## Recommended IDE Setup +![Portfolio Preview](public/portfolio-preview.webp) -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur). +## 🎯 Purpose -## Type Support for `.vue` Imports in TS +This portfolio serves as a professional showcase for **Killian Dal Cin**, a Full Stack Developer specializing in modern web development. The website features: -TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types. +- **Professional Presentation**: Clean, modern design highlighting skills and experience +- **Project Showcase**: Interactive gallery of completed projects with detailed case studies +- **Service Offerings**: Integration with Fiverr marketplace for freelance services +- **Multi-language Support**: Available in English and French +- **Contact Integration**: Direct contact methods and social media links +- **Responsive Design**: Optimized for all devices and screen sizes -## Customize configuration +## ✨ Features -See [Vite Configuration Reference](https://vite.dev/config/). +### 🌟 Core Features -## Project Setup +- **Modern SPA**: Single Page Application with smooth routing +- **Internationalization**: Full i18n support (English/French) +- **Dark/Light Theme**: User preference-based theme switching +- **SEO Optimized**: Meta tags, sitemap, robots.txt +- **Performance Focused**: Lazy loading, optimized assets +- **Accessibility**: WCAG compliant design -```sh -npm install +### 📱 Pages & Sections + +- **Home**: Hero section with introduction and key highlights +- **About**: Detailed background, skills, and experience +- **Projects**: Portfolio gallery with filtering and detailed views +- **Contact**: Multiple contact methods and social links +- **Fiverr**: Showcase of freelance services and offerings + +### 🎨 UI/UX Features + +- **Interactive Gallery**: Modal-based project viewing +- **Smooth Animations**: CSS transitions and scroll behaviors +- **Tech Stack Badges**: Visual representation of technologies used +- **Responsive Design**: Mobile-first approach +- **Loading States**: Smooth user experience with proper feedback + +## 🛠️ Technology Stack + +### **Frontend Framework** + +- **Vue 3** - Composition API with `