Skip to content

Commit 6a6862c

Browse files
BuddhadebKonerBuddhadebKoner
committed
make responsive all pages
1 parent 5a983d1 commit 6a6862c

File tree

16 files changed

+426
-290
lines changed

16 files changed

+426
-290
lines changed

‎src/Components/Footer/Footer.jsx

+18-38
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,42 @@
11
import React from 'react';
22
import { Link } from 'react-router-dom';
3-
// styles are heree
43
import '../../Styles/Footer.css';
54
import { documentdata } from '../../assets/documentdata';
65

7-
86
export default function Footer() {
97
return (
108
<footer className="footer">
119
<div className="footer-container">
1210
<div className="footer-section">
1311
<h3>About Us</h3>
1412
<p>
15-
31st march 2024 <br /> this is the first project of my road to lerning my react js<br /> to build my own portpolio, creadit to some youtube chanals
13+
31st March 2024 <br /> This is the first project of my road to learning React.js<br /> to build my own portfolio, credit to some YouTube channels
1614
<br />
17-
<div className="creadit-links">
18-
1. <a href="https://www.youtube.com/@KG_Coding" target='blank'>Prasant Sir</a> &nbsp;
19-
2. <a href="https://www.youtube.com/@ThapaTechnical" target='blank'>Thapa Sir</a> &nbsp;
20-
3. <a href="https://www.youtube.com/@chaiaurcode" target='blank'>Hitesh Sir</a>&nbsp;
15+
<div className="credit-links">
16+
1. <a href="https://www.youtube.com/@KG_Coding" target='_blank' rel="noopener noreferrer">Prasant Sir</a> &nbsp;
17+
2. <a href="https://www.youtube.com/@ThapaTechnical" target='_blank' rel="noopener noreferrer">Thapa Sir</a> &nbsp;
18+
3. <a href="https://www.youtube.com/@chaiaurcode" target='_blank' rel="noopener noreferrer">Hitesh Sir</a>&nbsp;
2119
</div>
2220
</p>
2321
</div>
2422
<div className="footer-section">
2523
<h3>Quick Links</h3>
26-
<ul>
27-
<li>
28-
<Link to={""}>Home</Link>
29-
</li>
30-
<li>
31-
<Link to={"/about"}>About</Link>
32-
</li>
33-
<li>
34-
<Link to={""}>Services</Link>
35-
</li>
36-
<li>
37-
<Link to={"aboutwebinfo"}>Contribute</Link>
38-
</li>
39-
</ul>
24+
<div className="links">
25+
<Link to={""}>Home</Link>
26+
<Link to={"/about"}>About</Link>
27+
<Link to={""}>Services</Link>
28+
<Link to={"aboutwebinfo"}>Contribute</Link>
29+
</div>
4030
</div>
4131
<div className="footer-section">
4232
<h3>Connect</h3>
43-
<ul>
44-
<li>
45-
<a href={documentdata.gitlink} target='_blank'>GitHub</a>
46-
</li>
47-
<li>
48-
<a href={documentdata.xlink} target='_blank'>X</a>
49-
</li>
50-
<li>
51-
<a href={documentdata.linkedinlink} target='_blank'>Linkedin</a>
52-
</li>
53-
<li>
54-
<a href={documentdata.instaLink} target='_blank'>Instagram</a>
55-
</li>
56-
<li>
57-
<a href={documentdata.fblink} target='_blank'>Facebook</a>
58-
</li>
59-
</ul>
33+
<div className="links">
34+
<a href={documentdata.gitlink} target='_blank' rel="noopener noreferrer">GitHub</a>
35+
<a href={documentdata.xlink} target='_blank' rel="noopener noreferrer">X</a>
36+
<a href={documentdata.linkedinlink} target='_blank' rel="noopener noreferrer">LinkedIn</a>
37+
<a href={documentdata.instaLink} target='_blank' rel="noopener noreferrer">Instagram</a>
38+
<a href={documentdata.fblink} target='_blank' rel="noopener noreferrer">Facebook</a>
39+
</div>
6040
</div>
6141
</div>
6242
<div className="footer-bottom">

‎src/Components/Navbar/Navbar.jsx

+21-9
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
1-
import React from 'react'
1+
import React, { useState } from 'react'
22
import assets from '../../assets/icons/icons'
33
import { Link, NavLink, useLocation } from 'react-router-dom'
4-
// styles are here
54
import '../../Styles/Navbar.css'
65
import { Helmet } from 'react-helmet'
76

87
export default function Navbar() {
8+
const [isMenuOpen, setIsMenuOpen] = useState(false);
99
const location = useLocation();
1010

11-
// Mapping routes to titles
1211
const routeTitles = {
1312
"/": "Buddhadebs Home",
1413
"/github": "Buddhadebs GitHub",
1514
"/newsfeed": "Buddhadebs NewsFeed",
1615
"/login": "Buddhadebs Login",
17-
"/getstarted": "Buddhadebs EXplore"
16+
"/getstarted": "Buddhadebs Explore"
1817
};
1918

20-
// Get the current title based on the current path
2119
const currentTitle = routeTitles[location.pathname] || "Buddhadebs Home";
2220

21+
const toggleMenu = () => {
22+
setIsMenuOpen(!isMenuOpen);
23+
};
24+
2325
return (
2426
<>
2527
<Helmet>
@@ -38,7 +40,6 @@ export default function Navbar() {
3840
>
3941
GitHub
4042
</NavLink>
41-
4243
<NavLink
4344
to="/newsfeed"
4445
className={({ isActive }) =>
@@ -47,7 +48,6 @@ export default function Navbar() {
4748
>
4849
News
4950
</NavLink>
50-
5151
<NavLink
5252
to="/login"
5353
className={({ isActive }) =>
@@ -56,15 +56,27 @@ export default function Navbar() {
5656
>
5757
Login
5858
</NavLink>
59-
6059
<NavLink
6160
to="/getstarted"
6261
className='super'
6362
>
6463
Get Started
6564
</NavLink>
6665
</div>
67-
</div >
66+
<div className="hamburger-container" onClick={toggleMenu}>
67+
{!isMenuOpen ? (
68+
<img src={assets.hamburger} alt="Open Menu" />
69+
) : (
70+
<img src={assets.close} alt="Close Menu" />
71+
)}
72+
</div>
73+
<div className={`hamburger-menu ${isMenuOpen ? 'open' : ''}`}>
74+
<NavLink to="/github" onClick={toggleMenu}>GitHub</NavLink>
75+
<NavLink to="/newsfeed" onClick={toggleMenu}>News</NavLink>
76+
<NavLink to="/login" onClick={toggleMenu}>Login</NavLink>
77+
<NavLink to="/getstarted" onClick={toggleMenu}>Get Started</NavLink>
78+
</div>
79+
</div>
6880
</>
6981
)
7082
}

‎src/Components/Profile/Profile.jsx

-8
Original file line numberDiff line numberDiff line change
@@ -74,14 +74,6 @@ export default function Profile() {
7474
>
7575
<img src={assets.threeDot} alt="" className='mail-icon' />
7676
</NavLink>
77-
78-
<div className="show-threedot-container">
79-
{showText && (
80-
<div className="threedots-popup">
81-
<p>Create Your own<br />Website !</p>
82-
</div>
83-
)}
84-
</div>
8577
</div>
8678
</div>
8779
</div>

‎src/Components/Webinfo/Webinfo.jsx

+36-36
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,48 @@
11
import React from 'react';
2-
3-
// styles are here
42
import '../../Styles/Webinfo.css';
53

64
export default function Webinfo() {
75
return (
86
<div className="webinfo-container">
97
<div className="webinfo-content">
10-
<h1 className="webinfo-title">React Portfolio Website</h1>
11-
<p className="webinfo-description">Welcome to my React portfolio website! This repository contains the code for my personal portfolio website built using React and Vite.</p>
12-
<p className="webinfo-link">You can view the live website <a href="https://buddhadebkoner.github.io/ExploreBuddhadebKoner/">here</a>.</p>
13-
<div className="webinfo-section">
14-
<h2 className="webinfo-section-title">Installation</h2>
15-
<p className="webinfo-section-description">To run this project locally, follow these steps:</p>
16-
<ol className="webinfo-list">
17-
<li className="webinfo-list-item">Clone the repository to your local machine:</li>
18-
</ol>
19-
<pre className="webinfo-code"><code>git clone https://github.com/BuddhadebKoner/ExploreBuddhadebKoner.git</code></pre>
20-
</div>
21-
<div className="webinfo-section">
22-
<h2 className="webinfo-section-title">Navigate to the project directory</h2>
23-
<pre className="webinfo-code"><code>cd ExploreBuddhadebKoner</code></pre>
24-
</div>
25-
<div className="webinfo-section">
26-
<h2 className="webinfo-section-title">Install dependencies using npm</h2>
27-
<pre className="webinfo-code"><code>npm install react react-dom react-router-dom</code></pre>
28-
<pre className="webinfo-code"><code>npm install --save-dev vite @vitejs/plugin-react</code></pre>
29-
</div>
30-
<div className="webinfo-section">
31-
<h2 className="webinfo-section-title">Usage</h2>
32-
<p className="webinfo-section-description">Once you've installed the dependencies, you can start the development server by running:</p>
33-
<pre className="webinfo-code"><code>npm run dev</code></pre>
34-
<p className="webinfo-section-description">This command will start the development server and open the website in your default web browser. You can then make changes to the code and see the results in real-time.</p>
35-
</div>
36-
<div className="webinfo-section">
37-
<h2 className="webinfo-section-title">Build</h2>
38-
<p className="webinfo-section-description">To build the project for production, run:</p>
39-
<pre className="webinfo-code"><code>npm run build</code></pre>
40-
<p className="webinfo-section-description">This command will create an optimized build of the website in the dist directory.</p>
41-
</div>
428
<div className="webinfo-section">
43-
<h2 className="webinfo-section-title">Contributing</h2>
44-
<p className="webinfo-section-description">Contributions are welcome! If you find any bugs or have suggestions for improvements, please open an issue or submit a pull request.</p>
9+
<h1 className="webinfo-section-title">Skills and Interests</h1>
10+
<p className="webinfo-section-description">
11+
Here's a glimpse into my skills, interests, and what defines me:
12+
</p>
4513
</div>
14+
<ul className="webinfo-list">
15+
<li className="webinfo-list-item">
16+
<h2 className="webinfo-item-title">MERN Stack Developer</h2>
17+
<p className="webinfo-item-description">
18+
Proficient in building full-stack web applications using MongoDB, Express.js, React.js, and Node.js.
19+
</p>
20+
</li>
21+
<li className="webinfo-list-item">
22+
<h2 className="webinfo-item-title">Programming Languages</h2>
23+
<p className="webinfo-item-description">
24+
Skilled in C++, C, and Python, with a strong foundation in algorithmic thinking and problem-solving.
25+
</p>
26+
</li>
27+
<li className="webinfo-list-item">
28+
<h2 className="webinfo-item-title">Content Creator</h2>
29+
<p className="webinfo-item-description">
30+
Enjoy creating engaging content, blending creativity and humor, especially in meme creation and digital content.
31+
</p>
32+
</li>
33+
<li className="webinfo-list-item">
34+
<h2 className="webinfo-item-title">Messi Enthusiast</h2>
35+
<p className="webinfo-item-description">
36+
Passionate about football, particularly a fan of Lionel Messi and avidly follow matches and career highlights.
37+
</p>
38+
</li>
39+
<li className="webinfo-list-item">
40+
<h2 className="webinfo-item-title">Learning in Public</h2>
41+
<p className="webinfo-item-description">
42+
Embrace the philosophy of learning in public, sharing knowledge, and documenting learning journeys to inspire others.
43+
</p>
44+
</li>
45+
</ul>
4646
</div>
4747
</div>
4848
);

‎src/Styles/Currentproject.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
/* Mobile */
8383
@media (max-width: 500px) {
8484
.current-project-box {
85-
padding: 0 1rem;
85+
padding: 0 2px;
8686
}
8787

8888
.current-project-container {

0 commit comments

Comments
 (0)