Skip to content

Commit 6c771b9

Browse files
MOHAMMED-FARHANUDDINMOHAMMED-FARHANUDDIN
authored
Add files via upload
0 parents  commit 6c771b9

File tree

3 files changed

+261
-0
lines changed

3 files changed

+261
-0
lines changed

‎index.html‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Farhan | Portfolio</title>
8+
9+
<!-- Linking CSS -->
10+
<link rel="stylesheet" href="style.css">
11+
</head>
12+
13+
<body>
14+
<nav>
15+
<ul>
16+
<li><a href="#about">About</a></li>
17+
<li><a href="#skills">Skills</a></li>
18+
<li><a href="#projects">Projects</a></li>
19+
<li><a href="#contact">Contact</a></li>
20+
</ul>
21+
</nav>
22+
23+
24+
<!-- Header Section -->
25+
<header>
26+
<h1>Mohammed Farhanuddin</h1>
27+
<p>Student | Developer | Learner</p>
28+
</header>
29+
30+
<!-- About Section -->
31+
<section id="about">
32+
<h2>About Me</h2>
33+
<p>
34+
I am an Electrical and Electronics Engineering (EEE) student with a strong passion for
35+
electronics, coding, and emerging AI technologies. I enjoy building real-world projects,
36+
learning new tools, and improving my technical skills every day.
37+
</p>
38+
39+
</section>
40+
41+
<!-- Skills Section -->
42+
<section id="skills">
43+
<h2>Skills</h2>
44+
<ul>
45+
<li>HTML</li>
46+
<li>CSS</li>
47+
<li>JavaScript</li>
48+
<li>C++</li>
49+
<li>Python</li>
50+
</ul>
51+
</section>
52+
53+
<!-- Projects Section -->
54+
<section id="projects">
55+
<h2>Projects</h2>
56+
57+
<div class="project-card">
58+
<h3>Portfolio Website</h3>
59+
<p>A clean and responsive portfolio website to showcase my skills, projects, and achievements.</p>
60+
</div>
61+
62+
<div class="project-card">
63+
<h3>TODO App</h3>
64+
<p>Upcoming: A simple task manager app using C++/Python.</p>
65+
</div>
66+
67+
<div class="project-card">
68+
<h3>Weather App</h3>
69+
<p>Upcoming: A weather forecasting app using API integration.</p>
70+
</div>
71+
72+
<!-- Add more project cards here in future -->
73+
</section>
74+
75+
<section id="contact">
76+
<h2>Contact Information</h2>
77+
<p><strong>Email:</strong> mohammedfarhanuddin789@gmail.com</p>
78+
<p><strong>Phone:</strong> 9141411768</p>
79+
<p><strong>Location:</strong> Bangalore, India</p>
80+
</section>
81+
82+
83+
84+
<!-- Contact Section -->
85+
<section id="social">
86+
<h2>Social Profiles</h2>
87+
<ul>
88+
<li><a href="https://www.linkedin.com/in/mohammed-farhanuddin-664749200/" target="_blank">LinkedIn</a></li>
89+
<li><a href="https://leetcode.com/u/MOHAMMEDFARHANUDDIN/"target="blank">LeetCode</a></li>
90+
<li><a href="https://github.com/MOHAMMED-FARHANUDDIN" target="_blank">GitHub</a></li>
91+
<li><a href="https://www.instagram.com/fa.rhan_46/" target="_blank">Instagram</a></li>
92+
</ul>
93+
</section>
94+
95+
96+
<!-- Linking JS -->
97+
<script src="script.js"></script>
98+
</body>
99+
100+
</html>

‎script.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// Smooth scrolling effect for navigation (future use)
2+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
3+
anchor.addEventListener("click", function(e) {
4+
e.preventDefault();
5+
document.querySelector(this.getAttribute("href")).scrollIntoView({
6+
behavior: "smooth"
7+
});
8+
});
9+
});
10+
11+
// Fade-in animation when sections appear
12+
const sections = document.querySelectorAll("section");
13+
14+
const observer = new IntersectionObserver((entries) => {
15+
entries.forEach(entry => {
16+
if (entry.isIntersecting) {
17+
entry.target.style.opacity = 1;
18+
entry.target.style.transform = "translateY(0px)";
19+
}
20+
});
21+
}, { threshold: 0.3 });
22+
23+
sections.forEach(section => {
24+
section.style.opacity = 0;
25+
section.style.transform = "translateY(40px)";
26+
section.style.transition = "all 0.7s ease-out";
27+
observer.observe(section);
28+
});

‎style.css‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
/* Google Font */
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
3+
4+
/* General Styling */
5+
body {
6+
font-family: 'Poppins', sans-serif;
7+
margin: 0;
8+
padding: 0;
9+
background: #f5f5f5;
10+
color: #333;
11+
}
12+
13+
header {
14+
text-align: center;
15+
padding: 60px 20px;
16+
background: #4a90e2;
17+
color: white;
18+
}
19+
20+
header h1 {
21+
font-size: 2.5rem;
22+
margin-bottom: 10px;
23+
}
24+
25+
header p {
26+
font-size: 1.2rem;
27+
}
28+
29+
/* Sections */
30+
section {
31+
padding: 40px 20px;
32+
max-width: 800px;
33+
margin: auto;
34+
}
35+
36+
h2 {
37+
font-size: 1.8rem;
38+
color: #4a90e2;
39+
margin-bottom: 10px;
40+
}
41+
42+
/* Skills List */
43+
ul {
44+
list-style-type: none;
45+
padding: 0;
46+
}
47+
48+
li {
49+
background: white;
50+
padding: 12px;
51+
margin: 8px 0;
52+
border-radius: 8px;
53+
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
54+
}
55+
56+
/* Contact Section */
57+
#contact p {
58+
font-size: 1.1rem;
59+
font-weight: 600;
60+
color: #555;
61+
}
62+
/* Navigation Bar */
63+
nav {
64+
background: white;
65+
box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
66+
position: sticky;
67+
top: 0;
68+
z-index: 1000;
69+
}
70+
71+
nav ul {
72+
display: flex;
73+
justify-content: center;
74+
padding: 10px;
75+
margin: 0;
76+
}
77+
78+
nav ul li {
79+
margin: 0 20px;
80+
list-style: none;
81+
}
82+
83+
nav ul li a {
84+
text-decoration: none;
85+
color: #4a90e2;
86+
font-weight: 600;
87+
font-size: 1rem;
88+
transition: 0.3s;
89+
}
90+
91+
nav ul li a:hover {
92+
color: #0d6efd;
93+
}
94+
95+
/* Project Card Styling */
96+
.project-card {
97+
background: white;
98+
padding: 20px;
99+
margin: 15px 0;
100+
border-radius: 12px;
101+
box-shadow: 0px 3px 8px rgba(0,0,0,0.1);
102+
}
103+
104+
.project-card h3 {
105+
margin: 0 0 10px;
106+
color: #4a90e2;
107+
}
108+
109+
/* Social Profiles Section */
110+
#social ul {
111+
list-style: none;
112+
padding: 0;
113+
}
114+
115+
#social ul li {
116+
margin: 10px 0;
117+
}
118+
119+
#social ul li a {
120+
text-decoration: none;
121+
color: #4a90e2;
122+
font-size: 1.1rem;
123+
font-weight: 600;
124+
}
125+
126+
#social ul li a:hover {
127+
color: #0d6efd;
128+
}
129+
130+
#contact p {
131+
font-size: 1.1rem;
132+
margin: 8px 0;
133+
}

0 commit comments

Comments
 (0)