Skip to content

Commit a5f6f50

Browse files
nxr-dinenxr-dine
committed
some chamges
1 parent abd8ef7 commit a5f6f50

File tree

9 files changed

+414
-41
lines changed

9 files changed

+414
-41
lines changed

‎README.md‎

Lines changed: 48 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,63 @@
1-
# Mini HTML, CSS, and JavaScript Projects
1+
# Projects Portfolio Showcase
22

3-
This repository contains a collection of mini projects built with HTML, CSS, and JavaScript.
3+
A clean, responsive website that showcases my web development projects with descriptions, features, and direct links to each project.
44

5-
## Projects
5+
## Overview
66

7-
### Project 1 - Responsive Card Slider (CSS, HTML, and JS):
7+
This portfolio website displays my collection of web projects in an organized, visually appealing manner. Each project is presented with:
88

9-
<div style="display: flex; align-items: center;">
10-
<p style="flex: 1;">A sleek slider that displays cards in a responsive layout, enabling users to browse content easily with smooth transitions.</p>
11-
<img src="Project 1 - Responsive Card Slider/Screenshot.png" alt="Responsive Card Slider Preview" width="800" style="flex: 1;">
12-
</div>
9+
- Project image/screenshot
10+
- Brief description
11+
- Technologies used
12+
- Key features
13+
- Link to view the actual project
1314

14-
---
15+
## Projects Included
1516

16-
### Project 2 - Lux (CSS and HTML):
17+
1. **Responsive Card Slider** - A modern card slider with touch support and responsive design
18+
2. **Lux Web Template** - A responsive web template for services and portfolios
19+
3. **Portfolio** - A personal web developer portfolio
20+
4. **Product Landing Page** - A headphones product showcase
21+
5. **Joulx Shoes Landing Page** - A shoe brand landing page
22+
6. **Weather App** - A weather forecast application
1723

18-
<div style="display: flex; align-items: center;">
19-
<p style="flex: 1;">Lux is a responsive web template for services and portfolios, featuring a clean design for agencies and freelancers.</p>
20-
<img src="Project 2 - Lux/lux-preview.png" alt="Lux Preview" width="300" style="flex: 1;">
21-
</div>
24+
## Structure
2225

23-
---
26+
```
27+
portfolio-showcase/
28+
├── index.html # Main portfolio page
29+
├── styles.css # CSS styles for the portfolio
30+
├── script.js # Optional JavaScript for interactivity
31+
├── images/ # Contains project screenshots
32+
│ ├── project1.jpg
33+
│ ├── project2.jpg
34+
│ └── ...
35+
├── Project 1 - Responsive Card Slider/
36+
├── Project 2 - Lux/
37+
├── Project 3 - Portfolio/
38+
├── Project 4 - Product-Landing-Page/
39+
├── Project 5 - Adidas/
40+
├── Project 6 - Weather app/
41+
└── README.md
42+
```
2443

25-
### Project 3 - Portfolio (CSS, HTML, and JS):
26-
<div style = "display: flex; justify-content: space-between">
27-
<p>This portfolio showcases my work and skills as a web developer using HTML, CSS, and JavaScript.</p> <img src="Project 3 - Portfolio/portfolio-preview.png" alt="Portfolio Preview" width="700">
28-
</div>
44+
## Setup Instructions
2945

30-
---
46+
1. Clone the repository
47+
2. Ensure all project folders are in the root directory
48+
3. Add project screenshots to the `images` folder
49+
4. Open `index.html` in your browser to view the portfolio
3150

32-
### Project 4 - Product Landing Page (CSS and HTML):
51+
## Technologies Used
3352

34-
<div style="display: flex; align-items: center;">
35-
<p style="flex: 1;">A sleek, responsive page showcasing a product, features, testimonials, and a call-to-action button.</p>
36-
<img src="Project 4 - Product-Landing-Page/product-landing-preview.png" alt="Product Landing Page Preview" width="700" style="flex: 1;">
37-
</div>
53+
- HTML5
54+
- CSS3
55+
- JavaScript (optional animations)
3856

39-
---
57+
## Customization
4058

41-
### Project 5 - Joulx Shoes Landing Page (HTML and CSS):
59+
You can easily customize this portfolio by editing:
4260

43-
<div style="display: flex; align-items: center;">
44-
<p style="flex: 1;">A stylish Joulx landing page with a gradient background and sections for men's, women's, and kids' shoes. </p>
45-
<img src="Project 5 - Adidas/screenshot.png" alt="Joulx Shoes Landing Page Preview" width="700" style="flex: 1;">
46-
</div>
47-
48-
---
49-
50-
## Getting Started
51-
52-
To get a copy of this project up and running on your local machine, follow these simple steps:
53-
54-
1. Clone the repository:
55-
```bash
56-
git clone https://github.com/NoureddineBou/HTML-CSS-JS-mini-projects.git
61+
- Color scheme in CSS variables (in `styles.css`)
62+
- Project descriptions and details in `index.html`
63+
- Adding or removing project cards as needed

‎images/project1.png‎

41.5 KB
Loading

‎images/project2.png‎

417 KB
Loading

‎images/project3.png‎

733 KB
Loading

‎images/project4.png‎

383 KB
Loading

‎images/project5.png‎

382 KB
Loading

‎index.html‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>My Web Projects Portfolio</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<header>
11+
<h1>My Web Projects Portfolio</h1>
12+
<p>A showcase of my HTML, CSS, and JavaScript projects</p>
13+
</header>
14+
15+
<div class="container">
16+
<div class="projects-grid">
17+
<!-- Project 1 -->
18+
<div class="project-card">
19+
<div class="project-image">
20+
<img src="images/project1.jpg" alt="Responsive Card Slider">
21+
</div>
22+
<div class="project-content">
23+
<h3>Responsive Card Slider</h3>
24+
<p>A modern, lightweight responsive card slider that automatically adapts to different screen sizes.</p>
25+
<div class="tech-stack">
26+
<span class="tech">HTML</span>
27+
<span class="tech">CSS</span>
28+
<span class="tech">JavaScript</span>
29+
</div>
30+
<div>
31+
<strong>Key Features:</strong>
32+
<ul>
33+
<li>Fully Responsive Design</li>
34+
<li>Touch & Keyboard Support</li>
35+
<li>Smooth Transitions</li>
36+
<li>No Dependencies</li>
37+
</ul>
38+
</div>
39+
<a href="Project 1 - Responsive Card Slider/index.html" class="btn">View Project</a>
40+
</div>
41+
</div>
42+
43+
<!-- Project 2 -->
44+
<div class="project-card">
45+
<div class="project-image">
46+
<img src="images/project2.jpg" alt="Lux Web Template">
47+
</div>
48+
<div class="project-content">
49+
<h3>Lux Web Template</h3>
50+
<p>A responsive web template designed for showcasing services, portfolios, and contact information.</p>
51+
<div class="tech-stack">
52+
<span class="tech">HTML</span>
53+
<span class="tech">CSS</span>
54+
<span class="tech">Font Awesome</span>
55+
<span class="tech">Google Fonts</span>
56+
</div>
57+
<div>
58+
<strong>Key Features:</strong>
59+
<ul>
60+
<li>Responsive Design</li>
61+
<li>Easy Navigation</li>
62+
<li>Service Showcase</li>
63+
<li>Portfolio Section</li>
64+
</ul>
65+
</div>
66+
<a href="Project 2 - Lux/index.html" class="btn">View Project</a>
67+
</div>
68+
</div>
69+
70+
<!-- Project 3 -->
71+
<div class="project-card">
72+
<div class="project-image">
73+
<img src="images/project3.jpg" alt="Portfolio">
74+
</div>
75+
<div class="project-content">
76+
<h3>Portfolio</h3>
77+
<p>A personal portfolio showcasing work and skills as a web developer.</p>
78+
<div class="tech-stack">
79+
<span class="tech">HTML</span>
80+
<span class="tech">CSS</span>
81+
<span class="tech">JavaScript</span>
82+
</div>
83+
<div>
84+
<strong>Key Features:</strong>
85+
<ul>
86+
<li>Responsive Design</li>
87+
<li>Interactive Elements</li>
88+
<li>Visually Appealing Homepage</li>
89+
</ul>
90+
</div>
91+
<a href="Project 3 - Portfolio/index.html" class="btn">View Project</a>
92+
</div>
93+
</div>
94+
95+
<!-- Project 4 -->
96+
<div class="project-card">
97+
<div class="project-image">
98+
<img src="images/project4.jpg" alt="Product Landing Page">
99+
</div>
100+
<div class="project-content">
101+
<h3>Product Landing Page</h3>
102+
<p>A product landing page for headphones featuring images and overlay effects.</p>
103+
<div class="tech-stack">
104+
<span class="tech">HTML</span>
105+
<span class="tech">CSS</span>
106+
</div>
107+
<div>
108+
<strong>Key Features:</strong>
109+
<ul>
110+
<li>Product Showcase</li>
111+
<li>Image Overlays</li>
112+
<li>Visual Design</li>
113+
</ul>
114+
</div>
115+
<a href="Project 4 - Product-Landing-Page/index.html" class="btn">View Project</a>
116+
</div>
117+
</div>
118+
119+
<!-- Project 5 -->
120+
<div class="project-card">
121+
<div class="project-image">
122+
<img src="images/project5.jpg" alt="Joulx Shoes Landing Page">
123+
</div>
124+
<div class="project-content">
125+
<h3>Joulx Shoes Landing Page</h3>
126+
<p>A simple yet elegant landing page for a fictional shoe brand, Joulx.</p>
127+
<div class="tech-stack">
128+
<span class="tech">HTML</span>
129+
<span class="tech">CSS</span>
130+
</div>
131+
<div>
132+
<strong>Key Features:</strong>
133+
<ul>
134+
<li>Responsive Design</li>
135+
<li>Modern Navigation</li>
136+
<li>Gradient Effects</li>
137+
<li>Call-to-action Buttons</li>
138+
</ul>
139+
</div>
140+
<a href="Project 5 - Adidas/index.html" class="btn">View Project</a>
141+
</div>
142+
</div>
143+
144+
<!-- Project 6 -->
145+
<div class="project-card">
146+
<div class="project-image">
147+
<img src="images/project6.jpg" alt="Weather App">
148+
</div>
149+
<div class="project-content">
150+
<h3>Weather App</h3>
151+
<p>A weather application providing current conditions and forecasts.</p>
152+
<div class="tech-stack">
153+
<span class="tech">HTML</span>
154+
<span class="tech">CSS</span>
155+
<span class="tech">JavaScript</span>
156+
</div>
157+
<div>
158+
<strong>Key Features:</strong>
159+
<ul>
160+
<li>Weather Data Display</li>
161+
<li>Forecast Information</li>
162+
<li>User-friendly Interface</li>
163+
</ul>
164+
</div>
165+
<a href="Project 6 - Weather app/index.html" class="btn">View Project</a>
166+
</div>
167+
</div>
168+
</div>
169+
</div>
170+
171+
<footer>
172+
<p>© 2025 My Portfolio. All rights reserved.</p>
173+
</footer>
174+
</body>
175+
</html>

‎script.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
document.addEventListener("DOMContentLoaded", function () {
2+
// Add fade-in animation to project cards
3+
const cards = document.querySelectorAll(".project-card");
4+
5+
function checkScroll() {
6+
cards.forEach((card) => {
7+
const cardTop = card.getBoundingClientRect().top;
8+
const windowHeight = window.innerHeight;
9+
10+
if (cardTop < windowHeight * 0.9) {
11+
card.style.opacity = "1";
12+
card.style.transform = "translateY(0)";
13+
}
14+
});
15+
}
16+
17+
// Initialize card styles
18+
cards.forEach((card) => {
19+
card.style.opacity = "0";
20+
card.style.transform = "translateY(20px)";
21+
card.style.transition = "opacity 0.5s ease, transform 0.5s ease";
22+
});
23+
24+
// Check initial positions
25+
checkScroll();
26+
27+
// Check on scroll
28+
window.addEventListener("scroll", checkScroll);
29+
});

0 commit comments

Comments
 (0)