Andrea Bertarione Portfolio

A modern, interactive portfolio website showcasing backend development expertise and creative projects. Built with Svelte 5 and deployed on Vercel.

🌐 Live Demo

View Portfolio →

🚀 About This Project

This portfolio represents my journey as a backend developer and lifelong learner. Built with Svelte 5, it combines modern web technologies with interactive design to showcase my skills, experience, and passion for creating robust digital solutions[1][2].

Key Highlights

• Modern Tech Stack: Built with Svelte 5, SvelteKit, and Vite
• Responsive Design: Optimized for desktop and mobile experiences
• Interactive Elements: Swipeable skills deck and smooth animations
• Performance Optimized: Static site generation for fast loading
• SEO Ready: Configured with meta tags and proper structure

🛠️ Tech Stack

Core Framework

• Svelte 5 - Latest version with enhanced reactivity[2]
• SvelteKit - Full-stack framework for building web applications[2]
• Vite - Fast build tool and development server[2]

Development Tools

• JavaScript - JavaScript development
• CSS3 - Modern styling with custom properties
• Vercel - Deployment and hosting platform[2]

Key Dependencies

• @sveltejs/adapter-static - Static site adapter for deployment[2]
• svelte-gestures - Touch gesture handling for mobile interactions[2]
• svelte-match-media - Responsive design utilities[2]
• sk-seo - SEO optimization tools[2]
• @fontsource/fira-mono - Typography enhancement[2]

🎯 Current Features

📱 Responsive Navigation

• Clean, minimal navigation bar[16]
• Mobile-friendly hamburger menu
• Smooth scrolling between sections
• Dynamic menu state management

🏠 Hero Section

• Animated typewriter effect for profession display[4][5]
• Engaging introduction with call-to-action buttons
• Responsive layout adaptation for different screen sizes
• Professional headshot integration

👨‍💻 About Section

• Dynamic content generation with personal story[6][15]
• Age and experience calculation
• Professional background highlighting backend expertise
• Skills overview covering Node.js, TypeScript, Angular, and databases[15]

🎴 Interactive Skills Deck

• Swipeable Card Interface: Touch-friendly skill browsing[7][25]
• Gesture Controls: Left/right swipe navigation[25]
• Visual Skill Indicators: Progress bars and proficiency levels
• Detailed Descriptions: Comprehensive skill explanations
• Mobile Optimized: Responsive design for all devices

🎨 Visual Elements

• Custom SVG Components: Interactive arrows and navigation elements[17][18]
• Smooth Animations: Fade-in effects and transitions
• Modern Typography: Fira Mono font integration
• Professional Imagery: Optimized profile photos and assets[10]

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm, pnpm, or yarn package manager

Installation

1. Clone the repository git clone https://github.com/Andrea-Bertarione/portfolio.git cd portfolio

text

2. Install dependencies npm install

or pnpm install

or yarn install

text

3. Start development server npm run dev

or npm run dev -- --open # Opens in browser automatically

text

4. Access the application

• Local: http://localhost:5173
• Network: http://0.0.0.0:5173 (configured for external access)[2]

Building for Production

Build the application npm run build

Preview production build locally npm run preview

text

📋 Available Scripts

🔧 Configuration

Static Site Generation

The project uses @sveltejs/adapter-static for generating static files suitable for deployment on Vercel and other static hosting platforms[8].

SEO Optimization

• Meta tags configured for search engines
• Open Graph tags for social media sharing
• Structured data for better indexing
• Optimized images and performance

Responsive Design

• Mobile-first approach
• Breakpoint-based layouts
• Touch-optimized interactions
• Progressive enhancement

🛣️ Roadmap

🎯 Phase 1: Foundation (✅ Completed)

• Project Setup: Svelte 5 migration and modern tooling[1]
• Core Sections: Home, About, and Skills pages[4][6][7]
• Responsive Navigation: Mobile-friendly menu system[16]
• Interactive Skills: Swipeable deck with gesture controls[25]
• Performance: Static site optimization and SEO setup
• Deployment: Vercel hosting with custom domain

📊 Phase 2: Portfolio Showcase (🚧 In Progress)

• Projects Gallery: Interactive showcase of development work
• GitHub Integration: Automatic repository data fetching
• Project Filters: Filter by technology, type, and complexity
• Live Demos: Embedded previews and deployment links
• Case Studies: Detailed project breakdowns and challenges

💼 Phase 3: Professional Features (📋 Planned)

• Contact Form: Integrated messaging system with validation
• Resume Download: PDF generation with latest information
• Blog Integration: Technical articles and development insights
• Testimonials: Client and colleague recommendations
• Timeline: Career progression and milestone visualization

🎨 Phase 4: Enhanced Experience (🔮 Future)

• Theme System: Dark/light mode toggle with persistence
• Animations: Advanced micro-interactions and page transitions
• 3D Elements: WebGL components for visual impact
• Performance Analytics: Real-time site performance monitoring
• Accessibility: WCAG 2.1 AA compliance and screen reader optimization

🌐 Phase 5: Content Management (💡 Vision)

• CMS Integration: Easy content updates without code changes
• Multi-language: Italian and English language support
• Analytics Dashboard: Visitor insights and engagement metrics
• API Endpoints: Headless content delivery for future integrations
• Progressive Web App: Offline capabilities and native app features

🤝 Contributing

While this is a personal portfolio project, I welcome feedback and suggestions! Feel free to:

1. Report Issues: Found a bug or have a suggestion? Open an issue
2. Share Ideas: Have ideas for improvements? Start a discussion
3. Code Reviews: Feedback on code quality and best practices is always appreciated

Development Guidelines

• Follow existing code style and conventions
• Test changes across different devices and browsers
• Ensure accessibility standards are maintained
• Update documentation for new features

📄 License

This project is open source and available under the MIT License.

👨‍💻 About the Developer

Andrea Bertarione (Berta) - Backend Developer & Creative Problem Solver[15]

• 🎓 Computer Science student at University of Turin[15]
• 💼 Specializing in Node.js, TypeScript, and modern web technologies[15]
• 🎮 Passionate about game development with Godot[15]
• 🎲 Dungeon Master and storytelling enthusiast[15]
• 🌍 Based in Turin, Italy[15]

Connect With Me

• Portfolio: https://portfolio-berta.vercel.app/
• GitHub: Andrea-Bertarione
• Email: Available through portfolio contact form

This portfolio represents my first major project with Svelte 5, showcasing both technical skills and creative problem-solving abilities. It's continuously evolving as I learn new technologies and expand my expertise.[15]