diff options
Diffstat (limited to 'static/index.html')
| -rw-r--r-- | static/index.html | 170 |
1 files changed, 163 insertions, 7 deletions
diff --git a/static/index.html b/static/index.html index 0e5ea7b..d5b5cd4 100644 --- a/static/index.html +++ b/static/index.html @@ -1,8 +1,164 @@ -<html> - <head> - <title>This is a good page!</title> - </head> - <body> - Hello, world! - </body> +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Alex Chen - Creative Developer</title> + <link rel="stylesheet" href="styles.css"> + <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> +</head> +<body> + <nav class="navbar"> + <div class="nav-container"> + <div class="nav-logo">AC</div> + <ul class="nav-menu"> + <li><a href="#home" class="nav-link">Home</a></li> + <li><a href="#about" class="nav-link">About</a></li> + <li><a href="#projects" class="nav-link">Projects</a></li> + <li><a href="#contact" class="nav-link">Contact</a></li> + </ul> + <div class="hamburger"> + <span></span> + <span></span> + <span></span> + </div> + </div> + </nav> + + <main> + <section id="home" class="hero"> + <div class="hero-content"> + <h1 class="hero-title"> + <span class="gradient-text">Creative Developer</span> + <br>& Digital Designer + </h1> + <p class="hero-subtitle">Crafting beautiful digital experiences with modern web technologies</p> + <div class="hero-buttons"> + <button class="btn btn-primary">View My Work</button> + <button class="btn btn-secondary">Get In Touch</button> + </div> + </div> + <div class="hero-visual"> + <div class="floating-card card-1"></div> + <div class="floating-card card-2"></div> + <div class="floating-card card-3"></div> + </div> + </section> + + <section id="about" class="about"> + <div class="container"> + <h2 class="section-title">About Me</h2> + <div class="about-grid"> + <div class="about-text"> + <p>I'm a passionate full-stack developer with 5+ years of experience creating digital solutions that combine beautiful design with robust functionality.</p> + <div class="skills"> + <div class="skill-item">React</div> + <div class="skill-item">TypeScript</div> + <div class="skill-item">Node.js</div> + <div class="skill-item">Python</div> + <div class="skill-item">AWS</div> + <div class="skill-item">Design Systems</div> + </div> + </div> + <div class="about-stats"> + <div class="stat"> + <div class="stat-number">50+</div> + <div class="stat-label">Projects Completed</div> + </div> + <div class="stat"> + <div class="stat-number">5+</div> + <div class="stat-label">Years Experience</div> + </div> + <div class="stat"> + <div class="stat-number">25+</div> + <div class="stat-label">Happy Clients</div> + </div> + </div> + </div> + </div> + </section> + + <section id="projects" class="projects"> + <div class="container"> + <h2 class="section-title">Featured Projects</h2> + <div class="projects-grid"> + <div class="project-card"> + <div class="project-image"></div> + <div class="project-content"> + <h3>E-Commerce Platform</h3> + <p>Modern React-based shopping platform with real-time inventory management</p> + <div class="project-tags"> + <span>React</span> + <span>Node.js</span> + <span>MongoDB</span> + </div> + </div> + </div> + <div class="project-card"> + <div class="project-image"></div> + <div class="project-content"> + <h3>Analytics Dashboard</h3> + <p>Data visualization dashboard with interactive charts and real-time updates</p> + <div class="project-tags"> + <span>Vue.js</span> + <span>D3.js</span> + <span>Python</span> + </div> + </div> + </div> + <div class="project-card"> + <div class="project-image"></div> + <div class="project-content"> + <h3>Mobile App</h3> + <p>Cross-platform mobile application for task management and productivity</p> + <div class="project-tags"> + <span>React Native</span> + <span>Firebase</span> + <span>Redux</span> + </div> + </div> + </div> + </div> + </div> + </section> + + <section id="contact" class="contact"> + <div class="container"> + <h2 class="section-title">Let's Work Together</h2> + <div class="contact-content"> + <div class="contact-info"> + <h3>Get in touch</h3> + <p>Ready to start your next project? Let's discuss how we can bring your ideas to life.</p> + <div class="contact-item"> + <strong>Email:</strong> alex@example.com + </div> + <div class="contact-item"> + <strong>Phone:</strong> +1 (555) 123-4567 + </div> + </div> + <form class="contact-form"> + <div class="form-group"> + <input type="text" placeholder="Your Name" required> + </div> + <div class="form-group"> + <input type="email" placeholder="Your Email" required> + </div> + <div class="form-group"> + <textarea placeholder="Your Message" rows="5" required></textarea> + </div> + <button type="submit" class="btn btn-primary">Send Message</button> + </form> + </div> + </div> + </section> + </main> + + <footer class="footer"> + <div class="container"> + <p>© 2025 Alex Chen. All rights reserved.</p> + </div> + </footer> + + <script src="script.js"></script> +</body> </html> |