-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathportfolio.html
More file actions
153 lines (144 loc) · 6.36 KB
/
portfolio.html
File metadata and controls
153 lines (144 loc) · 6.36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio - VisionFlow</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header and Navbar -->
<header>
<nav>
<div class="logo">VisionFlow</div>
<ul class="nav-links" id="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="index.html#about">About Us</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="index.html#services">Services</a></li>
<li><a href="index.html#contact">Contact Us</a></li>
</ul>
<div class="menu-toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>
<!-- Portfolio Section -->
<section id="portfolio" class="portfolio-section">
<h2>Our Portfolio</h2>
<!-- Filters -->
<div class="filters">
<button class="filter-button active" data-filter="all">All</button>
<button class="filter-button" data-filter="web">Web Design</button>
<button class="filter-button" data-filter="graphic">Graphic Design</button>
<button class="filter-button" data-filter="uiux">UI/UX</button>
<button class="filter-button" data-filter="data">Data Science</button>
</div>
<!-- Portfolio Grid -->
<div class="portfolio-grid">
<!-- Web Design Projects -->
<div class="portfolio-item web" data-category="web">
<img src="business.jpg" alt="Web Project 1">
<div class="overlay">
<h3>Business project</h3>
<p>Modern website design for a tech startup.</p>
<a href="business.html" class="view-button">View Project</a>
</div>
</div>
<div class="portfolio-item web" data-category="web">
<img src="cafe.jpg" alt="Web Project 2">
<div class="overlay">
<h3>cafe website</h3>
<p>cafe website with a clean and intuitive design.</p>
<a href="cafe.html" class="view-button">View Project</a>
</div>
</div>
<!-- Graphic Design Projects -->
<div class="portfolio-item graphic" data-category="graphic">
<img src="ff-X-pirate2.jpg">
<div class="overlay">
<h3>Thumbnail Design</h3>
<p>Youtube Thumbnail design for a youtuber.</p>
<a href="#" class="view-button">View Project</a>
</div>
</div>
<div class="portfolio-item graphic" data-category="graphic">
<img src="without-logo-Shoes.jpg" alt="Graphic Project2">
<div class="overlay">
<h3>Poster Design</h3>
<p>Poster design for a Store of shoes.</p>
<a href="#" class="view-button">View Project</a>
</div>
</div>
<!-- UI/UX Projects -->
<div class="portfolio-item uiux" data-category="uiux">
<img src="ui1.jpg" alt="UI/UX Project 1">
<div class="overlay">
<h3>UI/UX Project 1</h3>
<p>Mobile app design for a fitness tracker.</p>
<a href="#" class="view-button">View Project</a>
</div>
</div>
<div class="portfolio-item uiux" data-category="uiux">
<img src="ui2.jpg" alt="UI/UX Project 2">
<div class="overlay">
<h3>UI/UX Project 2</h3>
<p>Dashboard design for a SaaS platform.</p>
<a href="#" class="view-button">View Project</a>
</div>
</div>
<!-- Data Science Projects -->
<div class="portfolio-item data" data-category="data">
<img src="https://via.placeholder.com/300x200" alt="Data Project 1">
<div class="overlay">
<h3>Data Project 1</h3>
<p>Predictive analytics for a retail company.</p>
<a href="#" class="view-button">View Project</a>
</div>
</div>
<div class="portfolio-item data" data-category="data">
<img src="https://via.placeholder.com/300x200" alt="Data Project 2">
<div class="overlay">
<h3>Data Project 2</h3>
<p>Machine learning model for fraud detection.</p>
<a href="#" class="view-button">View Project</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<p>© 2025 VisionFlow. All rights reserved. | Designed by <strong>Vineet</strong></p>
</footer>
<!-- JavaScript for Portfolio Filters -->
<script>
// Portfolio Filtering
const filterButtons = document.querySelectorAll('.filter-button');
const portfolioItems = document.querySelectorAll('.portfolio-item');
filterButtons.forEach(button => {
button.addEventListener('click', () => {
// Remove active class from all buttons
filterButtons.forEach(btn => btn.classList.remove('active'));
// Add active class to the clicked button
button.classList.add('active');
// Get the filter category
const filter = button.getAttribute('data-filter');
// Show/hide portfolio items based on the filter
portfolioItems.forEach(item => {
if (filter === 'all' || item.getAttribute('data-category') === filter) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
});
</script>
<script src="script.js"></script>
</body>
</html>