mirror of https://github.com/kortix-ai/suna.git
331 lines
15 KiB
HTML
331 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>My Portfolio</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="container">
|
|
<h1 class="logo">My Portfolio</h1>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#home">Home</a></li>
|
|
<li><a href="#about">About</a></li>
|
|
<li><a href="#skills">Skills</a></li>
|
|
<li><a href="#projects">Projects</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
<div class="hamburger">
|
|
<div class="bar"></div>
|
|
<div class="bar"></div>
|
|
<div class="bar"></div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section id="home" class="hero">
|
|
<div class="container">
|
|
<div class="hero-content">
|
|
<h1>Hello, I'm <span class="highlight">Your Name</span></h1>
|
|
<p class="tagline">Web Developer & Designer</p>
|
|
<div class="cta-buttons">
|
|
<a href="#projects" class="btn primary-btn">View My Work</a>
|
|
<a href="#contact" class="btn secondary-btn">Contact Me</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="about" class="about">
|
|
<div class="container">
|
|
<h2 class="section-title">About Me</h2>
|
|
<div class="about-content">
|
|
<div class="about-image">
|
|
<div class="image-placeholder">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
</div>
|
|
<div class="about-text">
|
|
<p>Hello! I'm a passionate web developer with a keen eye for design and a love for creating seamless user experiences. With a background in [Your Background], I bring a unique perspective to every project I work on.</p>
|
|
<p>I enjoy solving complex problems and turning ideas into reality through clean and efficient code. When I'm not coding, you can find me [Your Hobbies/Interests].</p>
|
|
<div class="about-details">
|
|
<div class="detail">
|
|
<i class="fas fa-graduation-cap"></i>
|
|
<span>Education: [Your Education]</span>
|
|
</div>
|
|
<div class="detail">
|
|
<i class="fas fa-briefcase"></i>
|
|
<span>Experience: [Years] years</span>
|
|
</div>
|
|
<div class="detail">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
<span>Location: [Your Location]</span>
|
|
</div>
|
|
</div>
|
|
<a href="#" class="btn primary-btn">Download Resume</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="skills" class="skills">
|
|
<div class="container">
|
|
<h2 class="section-title">My Skills</h2>
|
|
<div class="skills-content">
|
|
<div class="skill-category">
|
|
<h3>Frontend Development</h3>
|
|
<div class="skills-grid">
|
|
<div class="skill-item">
|
|
<div class="skill-icon"><i class="fab fa-html5"></i></div>
|
|
<h4>HTML5</h4>
|
|
<div class="skill-bar">
|
|
<div class="skill-level" style="width: 90%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="skill-item">
|
|
<div class="skill-icon"><i class="fab fa-css3-alt"></i></div>
|
|
<h4>CSS3</h4>
|
|
<div class="skill-bar">
|
|
<div class="skill-level" style="width: 85%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="skill-item">
|
|
<div class="skill-icon"><i class="fab fa-js"></i></div>
|
|
<h4>JavaScript</h4>
|
|
<div class="skill-bar">
|
|
<div class="skill-level" style="width: 80%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="skill-item">
|
|
<div class="skill-icon"><i class="fab fa-react"></i></div>
|
|
<h4>React</h4>
|
|
<div class="skill-bar">
|
|
<div class="skill-level" style="width: 75%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="skill-category">
|
|
<h3>Other Skills</h3>
|
|
<div class="skills-grid">
|
|
<div class="skill-item">
|
|
<div class="skill-icon"><i class="fas fa-database"></i></div>
|
|
<h4>SQL</h4>
|
|
<div class="skill-bar">
|
|
<div class="skill-level" style="width: 70%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="skill-item">
|
|
<div class="skill-icon"><i class="fab fa-git-alt"></i></div>
|
|
<h4>Git</h4>
|
|
<div class="skill-bar">
|
|
<div class="skill-level" style="width: 85%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="skill-item">
|
|
<div class="skill-icon"><i class="fas fa-mobile-alt"></i></div>
|
|
<h4>Responsive Design</h4>
|
|
<div class="skill-bar">
|
|
<div class="skill-level" style="width: 90%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="skill-item">
|
|
<div class="skill-icon"><i class="fas fa-paint-brush"></i></div>
|
|
<h4>UI/UX</h4>
|
|
<div class="skill-bar">
|
|
<div class="skill-level" style="width: 75%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="projects" class="projects">
|
|
<div class="container">
|
|
<h2 class="section-title">My Projects</h2>
|
|
<div class="project-filters">
|
|
<button class="filter-btn active" data-filter="all">All</button>
|
|
<button class="filter-btn" data-filter="web">Web Development</button>
|
|
<button class="filter-btn" data-filter="design">Design</button>
|
|
<button class="filter-btn" data-filter="other">Other</button>
|
|
</div>
|
|
<div class="projects-grid">
|
|
<div class="project-card" data-category="web">
|
|
<div class="project-image">
|
|
<div class="image-placeholder">
|
|
<i class="fas fa-laptop-code"></i>
|
|
</div>
|
|
</div>
|
|
<div class="project-info">
|
|
<h3>Project Title 1</h3>
|
|
<p>A brief description of the project and your role in it. Explain the technologies used and the problems solved.</p>
|
|
<div class="project-tags">
|
|
<span>HTML</span>
|
|
<span>CSS</span>
|
|
<span>JavaScript</span>
|
|
</div>
|
|
<div class="project-links">
|
|
<a href="#" class="btn small-btn"><i class="fas fa-eye"></i> Live Demo</a>
|
|
<a href="#" class="btn small-btn"><i class="fab fa-github"></i> Source Code</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-card" data-category="design">
|
|
<div class="project-image">
|
|
<div class="image-placeholder">
|
|
<i class="fas fa-paint-brush"></i>
|
|
</div>
|
|
</div>
|
|
<div class="project-info">
|
|
<h3>Project Title 2</h3>
|
|
<p>A brief description of the project and your role in it. Explain the technologies used and the problems solved.</p>
|
|
<div class="project-tags">
|
|
<span>Figma</span>
|
|
<span>UI/UX</span>
|
|
<span>Prototyping</span>
|
|
</div>
|
|
<div class="project-links">
|
|
<a href="#" class="btn small-btn"><i class="fas fa-eye"></i> Live Demo</a>
|
|
<a href="#" class="btn small-btn"><i class="fab fa-github"></i> Source Code</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-card" data-category="web">
|
|
<div class="project-image">
|
|
<div class="image-placeholder">
|
|
<i class="fas fa-mobile-alt"></i>
|
|
</div>
|
|
</div>
|
|
<div class="project-info">
|
|
<h3>Project Title 3</h3>
|
|
<p>A brief description of the project and your role in it. Explain the technologies used and the problems solved.</p>
|
|
<div class="project-tags">
|
|
<span>React</span>
|
|
<span>Node.js</span>
|
|
<span>MongoDB</span>
|
|
</div>
|
|
<div class="project-links">
|
|
<a href="#" class="btn small-btn"><i class="fas fa-eye"></i> Live Demo</a>
|
|
<a href="#" class="btn small-btn"><i class="fab fa-github"></i> Source Code</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-card" data-category="other">
|
|
<div class="project-image">
|
|
<div class="image-placeholder">
|
|
<i class="fas fa-cogs"></i>
|
|
</div>
|
|
</div>
|
|
<div class="project-info">
|
|
<h3>Project Title 4</h3>
|
|
<p>A brief description of the project and your role in it. Explain the technologies used and the problems solved.</p>
|
|
<div class="project-tags">
|
|
<span>Python</span>
|
|
<span>Data Analysis</span>
|
|
<span>Visualization</span>
|
|
</div>
|
|
<div class="project-links">
|
|
<a href="#" class="btn small-btn"><i class="fas fa-eye"></i> Live Demo</a>
|
|
<a href="#" class="btn small-btn"><i class="fab fa-github"></i> Source Code</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact" class="contact">
|
|
<div class="container">
|
|
<h2 class="section-title">Get In Touch</h2>
|
|
<div class="contact-content">
|
|
<div class="contact-info">
|
|
<div class="contact-item">
|
|
<div class="contact-icon">
|
|
<i class="fas fa-envelope"></i>
|
|
</div>
|
|
<div class="contact-details">
|
|
<h3>Email</h3>
|
|
<p>your.email@example.com</p>
|
|
</div>
|
|
</div>
|
|
<div class="contact-item">
|
|
<div class="contact-icon">
|
|
<i class="fas fa-phone"></i>
|
|
</div>
|
|
<div class="contact-details">
|
|
<h3>Phone</h3>
|
|
<p>+1 (123) 456-7890</p>
|
|
</div>
|
|
</div>
|
|
<div class="contact-item">
|
|
<div class="contact-icon">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
</div>
|
|
<div class="contact-details">
|
|
<h3>Location</h3>
|
|
<p>City, Country</p>
|
|
</div>
|
|
</div>
|
|
<div class="social-links">
|
|
<a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
|
|
<a href="#" class="social-link"><i class="fab fa-github"></i></a>
|
|
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
|
|
<a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="contact-form">
|
|
<form id="contactForm">
|
|
<div class="form-group">
|
|
<label for="name">Name</label>
|
|
<input type="text" id="name" name="name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">Email</label>
|
|
<input type="email" id="email" name="email" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="subject">Subject</label>
|
|
<input type="text" id="subject" name="subject" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="message">Message</label>
|
|
<textarea id="message" name="message" rows="5" required></textarea>
|
|
</div>
|
|
<button type="submit" class="btn primary-btn">Send Message</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2023 My Portfolio. All Rights Reserved.</p>
|
|
<div class="footer-links">
|
|
<a href="#home">Home</a>
|
|
<a href="#about">About</a>
|
|
<a href="#skills">Skills</a>
|
|
<a href="#projects">Projects</a>
|
|
<a href="#contact">Contact</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<div class="scroll-to-top">
|
|
<i class="fas fa-arrow-up"></i>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |