|
|
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Bilel Ayari - Portfolio</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| line-height: 1.6; |
| color: #333; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| min-height: 100vh; |
| } |
| |
| .container { |
| max-width: 1000px; |
| margin: 0 auto; |
| background: white; |
| box-shadow: 0 0 20px rgba(0,0,0,0.1); |
| border-radius: 10px; |
| overflow: hidden; |
| margin-top: 20px; |
| margin-bottom: 20px; |
| } |
| |
| header { |
| background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); |
| color: white; |
| padding: 60px 20px; |
| text-align: center; |
| position: relative; |
| } |
| |
| header::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>'); |
| opacity: 0.3; |
| } |
| |
| header h1 { |
| font-size: 3em; |
| margin-bottom: 10px; |
| position: relative; |
| z-index: 1; |
| } |
| |
| header p { |
| font-size: 1.2em; |
| opacity: 0.9; |
| position: relative; |
| z-index: 1; |
| } |
| |
| .profile-container { |
| position: relative; |
| z-index: 1; |
| margin-top: 30px; |
| } |
| |
| img.profile { |
| width: 180px; |
| height: 180px; |
| border-radius: 50%; |
| border: 5px solid rgba(255,255,255,0.3); |
| object-fit: cover; |
| transition: transform 0.3s ease; |
| } |
| |
| img.profile:hover { |
| transform: scale(1.05); |
| } |
| |
| .profile-placeholder { |
| width: 180px; |
| height: 180px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, #3498db, #2980b9); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 4em; |
| color: white; |
| margin: 0 auto; |
| border: 5px solid rgba(255,255,255,0.3); |
| transition: transform 0.3s ease; |
| } |
| |
| .profile-placeholder:hover { |
| transform: scale(1.05); |
| } |
| |
| section { |
| padding: 40px; |
| } |
| |
| h2 { |
| color: #2c3e50; |
| border-bottom: 3px solid #3498db; |
| padding-bottom: 10px; |
| margin-bottom: 25px; |
| font-size: 1.8em; |
| position: relative; |
| } |
| |
| h2::after { |
| content: ''; |
| position: absolute; |
| bottom: -3px; |
| left: 0; |
| width: 50px; |
| height: 3px; |
| background: #e74c3c; |
| } |
| |
| .about-me { |
| background: #f8f9fa; |
| padding: 30px; |
| border-radius: 10px; |
| margin-bottom: 30px; |
| border-left: 5px solid #3498db; |
| } |
| |
| ul { |
| list-style: none; |
| padding: 0; |
| } |
| |
| li { |
| margin: 15px 0; |
| padding: 15px; |
| background: #f8f9fa; |
| border-radius: 8px; |
| border-left: 4px solid #3498db; |
| transition: all 0.3s ease; |
| } |
| |
| li:hover { |
| background: #e3f2fd; |
| transform: translateX(5px); |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
| } |
| |
| li strong { |
| color: #2c3e50; |
| display: block; |
| margin-bottom: 5px; |
| } |
| |
| .skills-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: 20px; |
| margin-top: 20px; |
| } |
| |
| .skill-category { |
| background: #f8f9fa; |
| padding: 20px; |
| border-radius: 10px; |
| border-top: 4px solid #3498db; |
| } |
| |
| .skill-category h3 { |
| color: #2c3e50; |
| margin-bottom: 15px; |
| font-size: 1.2em; |
| } |
| |
| .languages-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| gap: 15px; |
| margin-top: 20px; |
| } |
| |
| .language-item { |
| background: linear-gradient(135deg, #3498db, #2980b9); |
| color: white; |
| padding: 15px; |
| border-radius: 8px; |
| text-align: center; |
| transition: transform 0.3s ease; |
| } |
| |
| .language-item:hover { |
| transform: translateY(-5px); |
| } |
| |
| footer { |
| background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); |
| color: white; |
| text-align: center; |
| padding: 30px; |
| position: relative; |
| } |
| |
| .contact-info { |
| font-size: 1.1em; |
| } |
| |
| .contact-info a { |
| color: #3498db; |
| text-decoration: none; |
| transition: color 0.3s ease; |
| } |
| |
| .contact-info a:hover { |
| color: #2980b9; |
| } |
| |
| |
| @media (max-width: 768px) { |
| .container { |
| margin: 10px; |
| border-radius: 0; |
| } |
| |
| header { |
| padding: 40px 20px; |
| } |
| |
| header h1 { |
| font-size: 2.2em; |
| } |
| |
| section { |
| padding: 20px; |
| } |
| |
| .skills-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .languages-grid { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
| |
| @media (max-width: 480px) { |
| header h1 { |
| font-size: 1.8em; |
| } |
| |
| .languages-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
| |
| |
| @keyframes fadeInUp { |
| from { |
| opacity: 0; |
| transform: translateY(30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| section { |
| animation: fadeInUp 0.6s ease-out; |
| } |
| |
| section:nth-child(even) { |
| animation-delay: 0.1s; |
| } |
| |
| section:nth-child(odd) { |
| animation-delay: 0.2s; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <header> |
| <h1>Bilel Ayari</h1> |
| <p>Student in Business Intelligence and Informatics</p> |
| <div class="profile-container"> |
| <img src="profile.jpg" alt="Bilel Dali" class="profile"> |
| </div> |
| </header> |
| |
| <section> |
| <h2>About Me</h2> |
| <div class="about-me"> |
| <p>A motivated second-year student pursuing a License in Business Intelligence and Informatics, seeking to leverage my skills, teamwork experience, and diverse work background to contribute effectively to a dynamic organization while continuing to grow professionally.</p> |
| </div> |
| </section> |
|
|
| <section> |
| <h2>Education</h2> |
| <ul> |
| <li>Institut Supérieur d'Administration des Affaires, Tunis, Tunisia – 2024 – Present and successful</li> |
| <li>Lycée Raoued, Tunis, Tunisia – Graduated: 2024</li> |
|
|
| </ul> |
| </section> |
|
|
| <section> |
| <h2>Work Experience</h2> |
| <ul> |
| <li>Ramada Plaza Hotel, Tunis (2024): Assisted in food and beverage preparation and service, ensuring high-quality customer satisfaction. Supported bar operations, maintaining cleanliness and organization while serving guests efficiently i work also like a agent case .</li> |
| <li>Centre Commercial Gammart, Tunis (Summer 2023): Performed computer hardware installations and resolved operating system issues. Conducted general maintenance tasks to ensure smooth operations at the commercial center.</li> |
| <li>Centre Commercial Gammart, Tunis (2022 - 3 months): Ensured the safety and security of the premises by monitoring activities and maintaining order. Collaborated with the team to manage access control and address safety concerns.</li> |
|
|
| </ul> |
| </section> |
|
|
| <section> |
| <h2>Projects & Achievements</h2> |
| <ul> |
| <li> |
| <strong>Forsa.tn - E-commerce Landing Page</strong> |
| <p>Developed a professional e-commerce landing page for fitness equipment sales. Features bilingual content (Arabic/French), responsive design, product showcase, and integrated order form with payment options. Deployed on Netlify with modern web technologies.</p> |
| <p><a href="https://68439d2c8563083912ee48d7--forsatn.netlify.app/" target="_blank" style="color: #3498db; text-decoration: none;">🔗 View Live Project</a></p> |
| </li> |
| <li>Programmed and developed a website as part of a group project, showcasing strong coding and teamwork skills. (tech used: HTML/CSS, JavaScript, SQL.)</li> |
| <li>Seminar Evaluator (Suminaire de Travail): Participated in evaluating and providing feedback for professional seminars, demonstrating analytical and critical thinking abilities.</li> |
| <li>Admin at Club Tunivision: Actively contributed to organizing events and managing club activities, enhancing leadership and organizational skills.</li> |
|
|
| </ul> |
| </section> |
|
|
| <section> |
| <h2>Certifications</h2> |
| <ul> |
| <li>EVOVISION Conference (The Z Hotel, Sfax, Tunisia | April 26, 2025): Awarded for active participation and contribution to the success of the EVOVISION conference focused on personal development and leadership for youth.</li> |
| <li>EFSET English Certification (B1 Level Achieved): B1 level proficiency in English, demonstrating intermediate language skills for professional and academic use.</li> |
|
|
| </ul> |
| </section> |
|
|
| <section> |
| <h2>Skills</h2> |
| <div class="skills-grid"> |
| <div class="skill-category"> |
| <h3>Programming & Web Development</h3> |
| <p>Website Programming (HTML, CSS, JavaScript, Python basics)</p> |
| </div> |
| <div class="skill-category"> |
| <h3>Database Management</h3> |
| <p>Database Management (MySQL, Access)</p> |
| </div> |
| <div class="skill-category"> |
| <h3>Software & Tools</h3> |
| <p>Tools: Excel (Advanced), Visual Studio Code, PowerPoint, Word</p> |
| </div> |
| <div class="skill-category"> |
| <h3>Technical Skills</h3> |
| <p>Computer Hardware Installation, Operating System Troubleshooting, AI Tools: Proficient in using AI to streamline and simplify work processes, Adaptability to New Technologies: Quick learner in adopting emerging tools and platforms</p> |
| </div> |
| <div class="skill-category"> |
| <h3>Soft Skills</h3> |
| <p>Teamwork and Collaboration, Leadership (Admin in Club Tunivision SFAX), Problem-Solving, Time Management</p> |
| </div> |
|
|
| </div> |
| </section> |
|
|
| <section> |
| <h2>Languages</h2> |
| <div class="languages-grid"> |
| <div class="language-item"> |
| <strong>Arabic</strong><br>Advanced (Native or near-native proficiency) |
| </div> |
| <div class="language-item"> |
| <strong>French</strong><br>Advanced (Professional working proficiency) |
| </div> |
| <div class="language-item"> |
| <strong>English</strong><br>Proficient (Working proficiency) |
| </div> |
| <div class="language-item"> |
| <strong>German</strong><br>Basic (Limited working proficiency) |
| </div> |
|
|
| </div> |
| </section> |
| </div> |
| |
| <footer> |
| <div class="contact-info"> |
| Contact me: <a href="mailto:ba336158@gmail.com">ba336158@gmail.com</a> |
| </div> |
| </footer> |
| </body> |
| </html> |
|
|
