Skip to content

Commit 6a73e92

Browse files
mohammedabidali1453mohammedabidali1453
authored
added all files
1 parent 1e32fc6 commit 6a73e92

26 files changed

+2120
-0
lines changed

Diff for: ‎IMAGES/hackerdp.jpg

145 KB
Loading

Diff for: ‎IMAGES/hackerdp2.jpg

145 KB
Loading

Diff for: ‎IMAGES/kawasaki-clone preview.png

606 KB
Loading

Diff for: ‎IMAGES/login-preview.png

942 KB
Loading

Diff for: ‎IMAGES/saianon.png

114 KB
Loading

Diff for: ‎IMAGES/sailogo.png

116 KB
Loading

Diff for: ‎JAVASCRIPT/matrix.js

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
// Get the canvas element
2+
const canvas = document.getElementById("matrixCanvas");
3+
const ctx = canvas.getContext("2d");
4+
5+
// Set the width and height of the canvas
6+
const canvasWidth = window.innerWidth;
7+
const canvasHeight = window.innerHeight;
8+
canvas.width = canvasWidth;
9+
canvas.height = canvasHeight;
10+
11+
// Create an array of characters
12+
const characters = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
13+
14+
// Create an array of columns
15+
const columns = Math.floor(canvasWidth / 20);
16+
17+
// Initialize the y positions of the columns
18+
const yPositions = [];
19+
20+
for (let i = 0; i < columns; i++) {
21+
yPositions[i] = Math.random() * canvasHeight;
22+
}
23+
24+
// Update the matrix animation
25+
function updateMatrix() {
26+
// Set the background color
27+
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
28+
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
29+
30+
// Set the text color and font
31+
ctx.fillStyle = "green";
32+
ctx.font = "12px timesnewroman";
33+
34+
// Loop through each column
35+
for (let i = 0; i < columns; i++) {
36+
// Select a random character from the array
37+
const character = characters[Math.floor(Math.random() * characters.length)];
38+
39+
// Set the y position of the current column
40+
const y = yPositions[i];
41+
42+
// Draw the character at the current position
43+
ctx.fillText(character, i * 20, y);
44+
45+
// Move the column down by 20 units
46+
yPositions[i] += 20;
47+
48+
// Reset the position if it reaches the bottom of the canvas
49+
if (yPositions[i] > canvasHeight && Math.random() > 0.98) {
50+
yPositions[i] = 0;
51+
}
52+
}
53+
}
54+
55+
// Render the matrix animation
56+
function renderMatrix() {
57+
requestAnimationFrame(renderMatrix);
58+
updateMatrix();
59+
}
60+
61+
// Start the animation
62+
renderMatrix();
63+

Diff for: ‎JAVASCRIPT/typhographic.js

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
function rand(min, max) {
2+
return Math.floor(Math.random() * (max - min + 1)) + min;
3+
}
4+
function getRandomLetter() {
5+
var alphabet = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']
6+
return alphabet[rand(0,alphabet.length - 1)]
7+
}
8+
function getRandomWord(word) {
9+
var text = word.innerHTML
10+
11+
var finalWord = ''
12+
for(var i=0;i<text.length;i++) {
13+
finalWord += text[i] == ' ' ? ' ' : getRandomLetter()
14+
}
15+
16+
return finalWord
17+
}
18+
19+
var word = document.querySelector('p')
20+
var interv = 'undefined'
21+
var canChange = false
22+
var globalCount = 0
23+
var count = 0
24+
var INITIAL_WORD = word.innerHTML;
25+
var isGoing = false
26+
27+
function init() {
28+
if(isGoing) return;
29+
30+
isGoing = true
31+
var randomWord = getRandomWord(word)
32+
word.innerHTML = randomWord
33+
34+
interv = setInterval(function() {
35+
var finalWord = ''
36+
for(var x=0;x<INITIAL_WORD.length;x++) {
37+
if(x <= count && canChange) {
38+
finalWord += INITIAL_WORD[x]
39+
} else {
40+
finalWord += getRandomLetter()
41+
}
42+
}
43+
word.innerHTML = finalWord
44+
if(canChange) {
45+
count++
46+
}
47+
if(globalCount >= 20) {
48+
canChange = true
49+
}
50+
if(count>=INITIAL_WORD.length) {
51+
clearInterval(interv)
52+
count = 0
53+
canChange = false
54+
globalCount = 0
55+
isGoing = false
56+
}
57+
globalCount++
58+
},50)
59+
60+
}
61+
62+
63+
64+
word.addEventListener('mouseenter', init)
65+

Diff for: ‎index.html

+221
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Portfolio | Mohammed Abid Ali</title>
8+
9+
<link rel="icon" type="png|image" href="IMAGES/saianon.png">
10+
<link rel="icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
11+
12+
<link rel="stylesheet" href="style.css">
13+
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
14+
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
15+
16+
</head>
17+
<body>
18+
19+
<canvas id="matrixCanvas"></canvas>
20+
<!-- Matrix -->
21+
<script src="/JAVASCRIPT/matrix.js"></script>
22+
23+
<header class="header">
24+
<a href="#" class="logo">{Portfolio} </a>
25+
26+
<nav class="navbar">
27+
<a href="#home" style="--i:1;" class="active">Home</a>
28+
<a href="#about" style="--i:2;">About</a>
29+
<a href="#skills" style="--i:3;">Skills</a>
30+
<a href="#projects" style="--i:4;">Projects</a>
31+
<a href="#contact" style="--i:5;">Contact</a>
32+
</nav>
33+
</header>
34+
35+
<section id="home" class="home">
36+
37+
<div class="home-content" data-scroll data-scroll-speed="-5" >
38+
<h3 class="mu">Hello, It's me</h3>
39+
<h1>Mohammed Abid Ali</h1>
40+
<h3>And I'm a <span class="pro-text">
41+
<script>
42+
var typed = new Typed(".pro-text", {
43+
strings: [
44+
"Full Stack Developer",
45+
"Frontend Developer",
46+
"Programmer",
47+
"Creative Coder",
48+
49+
],
50+
typeSpeed: 100,
51+
backSpeed: 100,
52+
backDelay: 1000,
53+
loop: true
54+
});
55+
</script>
56+
</span></h3>
57+
58+
<!-- <p> &emsp; &emsp;This portfolio highlights my passion for web development and my commitment to developing practices. <br> <br>
59+
&emsp; &emsp;I have acquired fundamental knowledge and skills in various areas of web development,
60+
allowing me to contribute to the developers of organizations and individuals. <br> <br>
61+
&emsp; &emsp;Developed multiple clones of websites that were based on front-end.
62+
</p> -->
63+
64+
<p>
65+
This portfolio highlights my passion for web development, creativity, and dedication to continuous learning.
66+
Through various projects and experiments, I’ve honed skills that I can bring to any professional setting.
67+
I believe in building user-friendly, functional, and visually engaging web pages that make an impact.
68+
</p>
69+
70+
<div class="home-sci">
71+
<a href="https://github.com/mohammedabidali1453" target="_blank"><i class='bx bxl-github'></i></a>
72+
<a href="https://www.linkedin.com/in/mohammed-abid-ali-502846320" target="_blank"><i class='bx bxl-linkedin' ></i></a>
73+
<a href="https://wa.me/7981943110" target="_blank"><i class='bx bxl-whatsapp'></i></a>
74+
<a href="https://x.com/Default1453?t=wAwwwKnDKJdvF3aSbU7CKw&s=09" target="_blank"><i class='bx bxl-twitter'></i></a>
75+
</div>
76+
<a href="https://wa.me/7981943110" class="btn-box" download="">Connect With Me</a>
77+
</div>
78+
79+
<div class="home-img">
80+
<div class="glowing-circle">
81+
<span></span>
82+
<span></span>
83+
<div class="image">
84+
<img src="/IMAGES/saianon.png" alt="">
85+
</div>
86+
</div>
87+
</div>
88+
89+
</section>
90+
<section id="about" class="about">
91+
<div class="about-content">
92+
<h3>About Me</h3>
93+
<p>I'm Mohammed Abid Ali, a passionate web developer with a focus on building user-friendly and efficient websites. With a foundation in front-end and full-stack development, I love turning creative ideas into reality through code. I'm committed to continuous learning and am excited to take on new challenges in web development.</p>
94+
<a href="#" class="btn-box">Learn More</a>
95+
</div>
96+
<div class="about-img">
97+
<img src="IMAGES/hackerdp.jpg" alt="Profile Picture">
98+
</div>
99+
</section>
100+
101+
<section id="skills">
102+
<h2 style="color: green;">Skills</h2>
103+
<div class="skills-container">
104+
<div class="skill">
105+
<h3>HTML</h3>
106+
<div class="progress-bar">
107+
108+
<div class="progress" style="width: 60%;"></div>
109+
</div>
110+
</div>
111+
<div class="skill">
112+
<h3>CSS</h3>
113+
<div class="progress-bar">
114+
<div class="progress" style="width: 55%;"></div>
115+
</div>
116+
</div>
117+
<div class="skill">
118+
<h3>JavaScript</h3>
119+
<div class="progress-bar">
120+
<div class="progress" style="width: 10%;"></div>
121+
</div>
122+
</div>
123+
<div class="skill">
124+
<h3>Python</h3>
125+
<div class="progress-bar">
126+
<div class="progress" style="width: 25%;"></div>
127+
</div>
128+
</div>
129+
<div class="skill">
130+
<h3>MySQL</h3>
131+
<div class="progress-bar">
132+
<div class="progress" style="width: 15%;"></div>
133+
</div>
134+
</div>
135+
<!-- <div class="skill">
136+
<h3>Django</h3>
137+
<div class="progress-bar">
138+
<div class="progress" style="width: 15%;"></div>
139+
</div>
140+
</div> -->
141+
</div>
142+
</section>
143+
144+
145+
<section id="projects">
146+
<h2>Projects</h2>
147+
148+
<div class="project">
149+
<h3>Kawasaki Ninja H2R Website Clone</h3>
150+
151+
<!-- Project Description -->
152+
<p>This project is a clone of the Kawasaki Ninja H2R website, showcasing the powerful design and style of the legendary bike.</p>
153+
154+
<!-- Project Image -->
155+
<img src="IMAGES/kawasaki-clone preview.png" alt="Kawasaki Ninja H2R preview" class="project-image">
156+
157+
<!-- Project Button -->
158+
<a href="projects/Kawasaki/index.html" class="project-button" target="_blank">View Project</a>
159+
</div>
160+
161+
<div class="project">
162+
<h3>Login Form</h3>
163+
164+
<!-- Project Description -->
165+
<p>This project is a simple and responsive login form, designed with HTML and CSS, providing a user-friendly interface.</p>
166+
167+
<!-- Project Image -->
168+
<img src="IMAGES/login-preview.png" alt="Login Form preview" class="project-image">
169+
170+
<!-- Project Button with link to HTML file -->
171+
<a href="projects/LoginForm/index.html" class="project-button" target="_blank">View Project</a>
172+
</div>
173+
</section>
174+
175+
<section id="contact">
176+
<h2>Contact Me</h2>
177+
<p>If you have any questions or would like to get in touch, feel free to reach out!</p>
178+
179+
<!-- <form action="https://api.web3forms.com/submit" method="POST">
180+
<input type="hidden" name="access_key" value="3198ce3b-e875-4985-8e9e-c97477d5f8ef">
181+
<label for="name">Name:</label>
182+
<input type="text" id="name" name="name" required>
183+
184+
<label for="email">Email:</label>
185+
<input type="email" id="email" name="email" required>
186+
187+
<label for="message">Message:</label>
188+
<textarea id="message" name="message" rows="4" required></textarea>
189+
190+
<button type="submit">Send Message</button>
191+
</form> -->
192+
193+
<form action="https://api.web3forms.com/submit" method="POST">
194+
195+
<!-- Replace with your Access Key -->
196+
<input type="hidden" name="access_key" value="3198ce3b-e875-4985-8e9e-c97477d5f8ef">
197+
198+
<!-- Form Inputs. Each input must have a name="" attribute -->
199+
<input type="text" name="name" required>
200+
<input type="email" name="email" required>
201+
<textarea name="message" required></textarea>
202+
203+
<!-- Honeypot Spam Protection -->
204+
<input type="checkbox" name="botcheck" class="hidden" style="display: none;">
205+
206+
<!-- Custom Confirmation / Success Page -->
207+
<!-- <input type="hidden" name="redirect" value="https://mywebsite.com/thanks.html"> -->
208+
209+
<button type="submit">Submit Form</button>
210+
211+
</form>
212+
</section>
213+
214+
<footer>
215+
<p>&copy; Copyright 2024. All rights reserved</p>
216+
</footer>
217+
218+
219+
220+
</body>
221+
</html>

Diff for: ‎projects/Kawasaki/images/h2r main image top 2.png

366 KB
Loading

Diff for: ‎projects/Kawasaki/images/h2r main image top.png

693 KB
Loading

Diff for: ‎projects/Kawasaki/images/h2r main pic.jpg

80.3 KB
Loading

Diff for: ‎projects/Kawasaki/images/kawasaki logo.png

63.9 KB
Loading

Diff for: ‎projects/Kawasaki/images/ninja h2r content 2.png

328 KB
Loading

Diff for: ‎projects/Kawasaki/images/ninja h2r content last.jpg

120 KB
Loading

Diff for: ‎projects/Kawasaki/images/ninja h2r content3.jpg

90.2 KB
Loading

Diff for: ‎projects/Kawasaki/images/ninja h2r engine.jpg

111 KB
Loading

Diff for: ‎projects/Kawasaki/images/ninja h2r features.jpg

96.1 KB
Loading

0 commit comments

Comments
 (0)