diff --git a/index.html b/index.html new file mode 100644 index 0000000..ff9b29f --- /dev/null +++ b/index.html @@ -0,0 +1,126 @@ + + + + + + William Levy - Portfolio + + + + + +
+
+
+

+ Hi, I'm William Levy +

+

Full Stack Developer & Creative Problem Solver

+ Get In Touch +
+
+
+ +
+
+

About Me

+
+

I'm a passionate developer who loves creating elegant solutions to complex problems. With a focus on clean code and user-centered design, I build applications that make a difference.

+

When I'm not coding, you can find me exploring new technologies, contributing to open source, or enjoying the outdoors.

+
+
+
+ +
+
+

Skills & Technologies

+
+
+

Frontend

+

HTML, CSS, JavaScript, React, Vue.js

+
+
+

Backend

+

Node.js, Python, Java, REST APIs

+
+
+

Database

+

MongoDB, PostgreSQL, MySQL

+
+
+

Tools

+

Git, Docker, AWS, CI/CD

+
+
+
+
+ +
+
+

Featured Projects

+
+
+

Project One

+

A modern web application built with React and Node.js that solves real-world problems.

+
+ React + Node.js + MongoDB +
+
+
+

Project Two

+

An innovative solution using cutting-edge technologies to improve user experience.

+
+ Vue.js + Python + PostgreSQL +
+
+
+

Project Three

+

A scalable platform designed with best practices and modern architecture.

+
+ JavaScript + AWS + Docker +
+
+
+
+
+ +
+
+

Let's Connect

+
+

Interested in working together? Feel free to reach out!

+
+ Email + GitHub + LinkedIn +
+
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..70e1b8a --- /dev/null +++ b/script.js @@ -0,0 +1,69 @@ +// Smooth scrolling for navigation links +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); +}); + +// Navbar scroll effect and active link highlighting +const navbar = document.querySelector('.navbar'); +const sections = document.querySelectorAll('section[id]'); +const navLinks = document.querySelectorAll('.nav-links a'); + +window.addEventListener('scroll', () => { + const currentScroll = window.pageYOffset; + + // Update navbar shadow + if (currentScroll > 100) { + navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)'; + } else { + navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.05)'; + } + + // Update active navigation links + let current = ''; + sections.forEach(section => { + const sectionTop = section.offsetTop; + if (currentScroll >= sectionTop - 100) { + current = section.getAttribute('id'); + } + }); + + navLinks.forEach(link => { + link.classList.remove('active'); + if (link.getAttribute('href').slice(1) === current) { + link.classList.add('active'); + } + }); +}); + +// Intersection Observer for fade-in animations +const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' +}; + +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); +}, observerOptions); + +// Observe all cards +document.querySelectorAll('.skill-card, .project-card').forEach(card => { + card.style.opacity = '0'; + card.style.transform = 'translateY(20px)'; + card.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; + observer.observe(card); +}); + diff --git a/style.css b/style.css new file mode 100644 index 0000000..7fa90d4 --- /dev/null +++ b/style.css @@ -0,0 +1,398 @@ +/* Modern Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* CSS Variables for consistent theming */ +:root { + --primary-color: #2563eb; + --secondary-color: #1e40af; + --text-color: #1f2937; + --text-light: #6b7280; + --bg-color: #ffffff; + --bg-alt: #f9fafb; + --border-color: #e5e7eb; + --shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + --transition: all 0.3s ease; +} + +/* Base Styles */ +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + line-height: 1.6; + color: var(--text-color); + background: var(--bg-color); +} + +html { + scroll-behavior: smooth; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; +} + +/* Navbar */ +.navbar { + position: fixed; + top: 0; + width: 100%; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); + z-index: 1000; + transition: var(--transition); +} + +.navbar .container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; +} + +.logo { + font-size: 1.5rem; + font-weight: 700; + color: var(--primary-color); + letter-spacing: -0.05em; +} + +.nav-links { + display: flex; + list-style: none; + gap: 2rem; +} + +.nav-links a { + text-decoration: none; + color: var(--text-color); + font-weight: 500; + transition: var(--transition); + position: relative; +} + +.nav-links a::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 2px; + background: var(--primary-color); + transition: var(--transition); +} + +.nav-links a:hover { + color: var(--primary-color); +} + +.nav-links a:hover::after { + width: 100%; +} + +/* Hero Section */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + position: relative; + overflow: hidden; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,'); + background-size: cover; + opacity: 0.3; +} + +.hero-content { + text-align: center; + color: white; + position: relative; + z-index: 1; + animation: fadeInUp 1s ease; +} + +.hero-title { + font-size: 3.5rem; + font-weight: 700; + margin-bottom: 1rem; + line-height: 1.2; +} + +.highlight { + background: linear-gradient(120deg, #ffffff 0%, #e0e7ff 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.hero-subtitle { + font-size: 1.5rem; + margin-bottom: 2rem; + opacity: 0.95; +} + +.cta-button { + display: inline-block; + padding: 1rem 2.5rem; + background: white; + color: var(--primary-color); + text-decoration: none; + border-radius: 50px; + font-weight: 600; + transition: var(--transition); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); +} + +.cta-button:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); +} + +/* Sections */ +.section { + padding: 5rem 0; +} + +.section-alt { + background: var(--bg-alt); +} + +.section-title { + font-size: 2.5rem; + text-align: center; + margin-bottom: 3rem; + font-weight: 700; + position: relative; + display: inline-block; + left: 50%; + transform: translateX(-50%); +} + +.section-title::after { + content: ''; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 4px; + background: var(--primary-color); + border-radius: 2px; +} + +/* About Section */ +.about-content { + max-width: 800px; + margin: 0 auto; + text-align: center; + font-size: 1.1rem; + color: var(--text-light); + line-height: 1.8; +} + +.about-content p { + margin-bottom: 1.5rem; +} + +/* Skills Grid */ +.skills-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-top: 3rem; +} + +.skill-card { + background: white; + padding: 2rem; + border-radius: 12px; + box-shadow: var(--shadow); + transition: var(--transition); +} + +.skill-card:hover { + transform: translateY(-5px); + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); +} + +.skill-card h3 { + color: var(--primary-color); + margin-bottom: 1rem; + font-size: 1.3rem; +} + +.skill-card p { + color: var(--text-light); +} + +/* Projects Grid */ +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 3rem; +} + +.project-card { + background: white; + padding: 2rem; + border-radius: 12px; + box-shadow: var(--shadow); + transition: var(--transition); + border-left: 4px solid var(--primary-color); +} + +.project-card:hover { + transform: translateY(-5px); + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); +} + +.project-card h3 { + color: var(--text-color); + margin-bottom: 1rem; + font-size: 1.5rem; +} + +.project-card p { + color: var(--text-light); + margin-bottom: 1.5rem; +} + +.project-tags { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +.tag { + background: var(--bg-alt); + color: var(--primary-color); + padding: 0.4rem 0.8rem; + border-radius: 20px; + font-size: 0.85rem; + font-weight: 500; +} + +/* Contact Section */ +.contact-content { + text-align: center; + max-width: 600px; + margin: 0 auto; +} + +.contact-content p { + font-size: 1.1rem; + color: var(--text-light); + margin-bottom: 2rem; +} + +.contact-links { + display: flex; + justify-content: center; + gap: 2rem; + flex-wrap: wrap; +} + +.contact-link { + display: inline-block; + padding: 0.8rem 2rem; + background: var(--primary-color); + color: white; + text-decoration: none; + border-radius: 50px; + font-weight: 600; + transition: var(--transition); +} + +.contact-link:hover { + background: var(--secondary-color); + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4); +} + +/* Footer */ +.footer { + background: var(--text-color); + color: white; + text-align: center; + padding: 2rem 0; +} + +/* Animations */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Responsive Design */ +@media (max-width: 768px) { + .nav-links { + gap: 1rem; + } + + .hero-title { + font-size: 2.5rem; + } + + .hero-subtitle { + font-size: 1.2rem; + } + + .section-title { + font-size: 2rem; + } + + .skills-grid, + .projects-grid { + grid-template-columns: 1fr; + } + + .contact-links { + flex-direction: column; + align-items: center; + } +} + +@media (max-width: 480px) { + .container { + padding: 0 1rem; + } + + .navbar .container { + padding: 1rem; + } + + .nav-links { + gap: 0.5rem; + font-size: 0.9rem; + } + + .hero-title { + font-size: 2rem; + } + + .hero-subtitle { + font-size: 1rem; + } +}