Skip to content

Commit 1b00450

Browse files
author
Programming-Sai
committed
Optimizing images
1 parent d8a6de4 commit 1b00450

File tree

17 files changed

+599
-650
lines changed

17 files changed

+599
-650
lines changed

‎next.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const nextConfig = {
66
compress: true,
77
output: "export",
88
basePath: BASE_PATH, // Use the imported base path
9-
// assetPrefix: `${BASE_PATH}/`,
9+
assetPrefix: `${BASE_PATH}/`,
1010
};
1111

1212
export default nextConfig;

‎src/app/[slug]/page.jsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import Glow from "@/components/glow/Glow";
1111
import Wrapper from "@/components/pagewrapper/Wrapper";
1212
import Navbar from "@/components/navbar/Navbar";
1313
import Footer from "@/components/footer/Footer";
14+
import BASE_PATH from "../../../base";
1415

1516
// Temporary slugs for development purposes
1617
const temporarySlugs = [
@@ -56,9 +57,14 @@ const SingleBlogPage = () => {
5657
</div>
5758
<div
5859
className={styles.item}
59-
style={{ "--img": 'url("/fashion.png")' }}
60+
style={{ "--img": `url("${BASE_PATH}/fashion.png")` }}
6061
>
61-
<Image fill alt="f" src="/fashion.png" className={styles.img} />
62+
<Image
63+
fill
64+
alt="f"
65+
src={`${BASE_PATH}/fashion.png`}
66+
className={styles.img}
67+
/>
6268
</div>
6369
</div>
6470
<div className={styles.content}>

‎src/app/admin/settings/page.jsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
} from "@fortawesome/free-brands-svg-icons";
1818
import Image from "next/image";
1919
import Link from "next/link";
20+
import BASE_PATH from "../../../../base";
2021

2122
const Settings = () => {
2223
const {
@@ -48,7 +49,7 @@ const Settings = () => {
4849
<div className={styles.profileImgContainer}>
4950
<Image
5051
fill
51-
src="/fashion.png"
52+
src={`${BASE_PATH}/fashion.png`}
5253
alt="profile picture"
5354
className={styles.img}
5455
/>
@@ -99,8 +100,8 @@ const Settings = () => {
99100
fill
100101
src={
101102
theme === "light"
102-
? "/snow-theme-light.png"
103-
: "/snow-theme-dark.png"
103+
? `${BASE_PATH}/snow-theme-light.png`
104+
: `${BASE_PATH}/snow-theme-dark.png`
104105
}
105106
/>
106107
</div>
@@ -129,8 +130,8 @@ const Settings = () => {
129130
fill
130131
src={
131132
theme === "light"
132-
? "/bubble-theme-light.png"
133-
: "/bubble-theme-dark.png"
133+
? `${BASE_PATH}/bubble-theme-light.png`
134+
: `${BASE_PATH}/bubble-theme-dark.png`
134135
}
135136
/>
136137
</div>

‎src/app/login/page.jsx‎

Lines changed: 53 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import React from 'react'
2-
import styles from './login.module.css';
3-
import Image from 'next/image';
4-
import Link from 'next/link';
1+
import React from "react";
2+
import styles from "./login.module.css";
3+
import Image from "next/image";
4+
import Link from "next/link";
5+
import BASE_PATH from "../../../base";
56

67
const Login = () => {
78
return (
@@ -11,29 +12,56 @@ const Login = () => {
1112
<div className={styles.loginContainer}>
1213
<h1>Sign In With</h1>
1314
<div className={styles.links}>
14-
15-
<Link href='/login'>
16-
<Image className={styles.img} src='/facebook.png' width={90} height={90} />
17-
</Link>
18-
<Link href='/login'>
19-
<Image className={styles.img} src='/X.png' width={90} height={90} />
20-
</Link>
21-
<Link href='/login'>
22-
<Image className={styles.img} src='/Google.png' width={90} height={90} />
23-
</Link>
24-
<Link href='/login'>
25-
<Image className={styles.img} src='/Github.png' width={90} height={90} />
26-
</Link>
27-
<Link href='/login'>
28-
<Image className={styles.img} src='/LinkedIn.png' width={90} height={90} />
29-
</Link>
30-
15+
<Link href="/login">
16+
<Image
17+
className={styles.img}
18+
src={`${BASE_PATH}/facebook.png`}
19+
width={90}
20+
height={90}
21+
alt="Facebook"
22+
/>
23+
</Link>
24+
<Link href="/login">
25+
<Image
26+
className={styles.img}
27+
src={`${BASE_PATH}/X.png`}
28+
width={90}
29+
height={90}
30+
alt="X"
31+
/>
32+
</Link>
33+
<Link href="/login">
34+
<Image
35+
className={styles.img}
36+
src={`${BASE_PATH}/Google.png`}
37+
width={90}
38+
height={90}
39+
alt="Google"
40+
/>
41+
</Link>
42+
<Link href="/login">
43+
<Image
44+
className={styles.img}
45+
src={`${BASE_PATH}/Github.png`}
46+
width={90}
47+
height={90}
48+
alt="Github"
49+
/>
50+
</Link>
51+
<Link href="/login">
52+
<Image
53+
className={styles.img}
54+
src={`${BASE_PATH}/LinkedIn.png`}
55+
width={90}
56+
height={90}
57+
alt="LinkedIn"
58+
/>
59+
</Link>
3160
</div>
32-
3361
</div>
3462
</div>
3563
</div>
36-
)
37-
}
64+
);
65+
};
3866

39-
export default Login
67+
export default Login;

‎src/components/commentsection/CommentSection.jsx‎

Lines changed: 43 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,53 @@
1-
import React from 'react';
2-
import styles from './commentsection.module.css';
3-
import Image from 'next/image';
4-
import Glow from '../glow/Glow';
1+
import React from "react";
2+
import styles from "./commentsection.module.css";
3+
import Image from "next/image";
4+
import Glow from "../glow/Glow";
5+
import BASE_PATH from "../../../base";
6+
7+
const comments = Array.from({ length: 5 }, () => ({
8+
username: "Jane Smith",
9+
date: "25 Nov 2025",
10+
text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias nam eaque aliquam quod recusandae ut culpa dicta pariatur incidunt id tempora, officia laudantium vel, ea omnis modi est! Nam, corrupti?",
11+
imageSrc: `${BASE_PATH}/fashion.png`,
12+
}));
513

614
const CommentSection = ({ width }) => {
715
return (
8-
<div className={styles.container} style={ {width: width } }>
16+
<div className={styles.container} style={{ width: width }}>
917
<div className={styles.postsContainer}>
10-
11-
<div className={styles.item}>
12-
<div className={styles.imgContainer}>
13-
<Image src='/fashion.png' fill className={styles.img} alt='fashion' objectFit='cover' />
14-
</div>
15-
<div className={styles.post}>
16-
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias nam eaque aliquam quod recusandae ut culpa dicta pariatur incidunt id tempora, officia laudantium vel, ea omnis modi est! Nam, corrupti?</h4>
17-
<div className={styles.timeDate}>
18-
<p className={styles.username}>Jane Smith</p>
19-
<p>25 Nov 2025</p>
20-
</div>
21-
</div>
22-
</div>
23-
24-
<div className={styles.item}>
25-
<div className={styles.imgContainer}>
26-
<Image src='/fashion.png' fill className={styles.img} alt='fashion' objectFit='cover' />
27-
</div>
28-
<div className={styles.post}>
29-
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias nam eaque aliquam quod recusandae ut culpa dicta pariatur incidunt id tempora, officia laudantium vel, ea omnis modi est! Nam, corrupti?</h4>
30-
<div className={styles.timeDate}>
31-
<p className={styles.username}>Jane Smith</p>
32-
<p>25 Nov 2025</p>
33-
</div>
34-
</div>
35-
</div>
36-
37-
<div className={styles.item}>
38-
<div className={styles.imgContainer}>
39-
<Image src='/fashion.png' fill className={styles.img} alt='fashion' objectFit='cover' />
40-
</div>
41-
<div className={styles.post}>
42-
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias nam eaque aliquam quod recusandae ut culpa dicta pariatur incidunt id tempora, officia laudantium vel, ea omnis modi est! Nam, corrupti?</h4>
43-
<div className={styles.timeDate}>
44-
<p className={styles.username}>Jane Smith</p>
45-
<p>25 Nov 2025</p>
18+
{comments.map((comment, index) => (
19+
<div className={styles.item} key={index}>
20+
<div className={styles.imgContainer}>
21+
<Image
22+
src={comment.imageSrc}
23+
fill
24+
className={styles.img}
25+
alt={comment.username}
26+
objectFit="cover"
27+
/>
4628
</div>
47-
</div>
48-
</div>
49-
50-
<div className={styles.item}>
51-
<div className={styles.imgContainer}>
52-
<Image src='/fashion.png' fill className={styles.img} alt='fashion' objectFit='cover' />
53-
</div>
54-
<div className={styles.post}>
55-
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias nam eaque aliquam quod recusandae ut culpa dicta pariatur incidunt id tempora, officia laudantium vel, ea omnis modi est! Nam, corrupti?</h4>
56-
<div className={styles.timeDate}>
57-
<p className={styles.username}>Jane Smith</p>
58-
<p>25 Nov 2025</p>
29+
<div className={styles.post}>
30+
<h4>{comment.text}</h4>
31+
<div className={styles.timeDate}>
32+
<p className={styles.username}>{comment.username}</p>
33+
<p>{comment.date}</p>
34+
</div>
5935
</div>
6036
</div>
61-
</div>
62-
63-
<div className={styles.item}>
64-
<div className={styles.imgContainer}>
65-
<Image src='/fashion.png' fill className={styles.img} alt='fashion' objectFit='cover' />
66-
</div>
67-
<div className={styles.post}>
68-
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias nam eaque aliquam quod recusandae ut culpa dicta pariatur incidunt id tempora, officia laudantium vel, ea omnis modi est! Nam, corrupti?</h4>
69-
<div className={styles.timeDate}>
70-
<p className={styles.username}>Jane Smith</p>
71-
<p>25 Nov 2025</p>
72-
</div>
73-
</div>
74-
</div>
75-
<Glow
76-
top='-30%'
77-
left='-10%'
78-
width={500}
79-
height={500}
80-
color='#F0E711'
81-
mtop='-20%'
82-
mleft='20%'
83-
/>
37+
))}
38+
39+
<Glow
40+
top="-30%"
41+
left="-10%"
42+
width={500}
43+
height={500}
44+
color="#F0E711"
45+
mtop="-20%"
46+
mleft="20%"
47+
/>
8448
</div>
8549
</div>
86-
)
87-
}
50+
);
51+
};
8852

89-
export default CommentSection
53+
export default CommentSection;

‎src/components/contactheorsection/ContactHeroSection.jsx‎

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,45 @@
1-
import React from 'react'
2-
import styles from './contactherosection.module.css';
3-
import Image from 'next/image';
4-
import Glow from '../glow/Glow';
1+
import React from "react";
2+
import styles from "./contactherosection.module.css";
3+
import Image from "next/image";
4+
import Glow from "../glow/Glow";
5+
import BASE_PATH from "../../../base";
56

67
const ContactHeroSection = () => {
78
return (
89
<div className={styles.container}>
910
<div className={`${styles.item} ${styles.heroImgContainer}`}>
10-
<Image fill src='/heroAnimation.gif' className={styles.img} />
11+
<Image
12+
fill
13+
src={`${BASE_PATH}/heroAnimation.gif`}
14+
className={styles.img}
15+
/>
1116
</div>
1217
<Glow
13-
top='50%'
14-
left='20%'
15-
width={500}
16-
height={500}
17-
color='purple'
18-
mtop='50%'
19-
mleft='-10%'
18+
top="50%"
19+
left="20%"
20+
width={500}
21+
height={500}
22+
color="purple"
23+
mtop="50%"
24+
mleft="-10%"
2025
/>
2126
<Glow
22-
top='0%'
23-
left='80%'
24-
width={500}
25-
height={500}
26-
color='gold'
27-
mtop='0%'
28-
mleft='0%'
27+
top="0%"
28+
left="80%"
29+
width={500}
30+
height={500}
31+
color="gold"
32+
mtop="0%"
33+
mleft="0%"
2934
/>
3035
<div className={`${styles.item} ${styles.heroTextContainer}`}>
31-
<h3>Feel free to reach out to us with any questions or feedback using the form below!</h3>
36+
<h3>
37+
Feel free to reach out to us with any questions or feedback using the
38+
form below!
39+
</h3>
3240
</div>
3341
</div>
34-
)
35-
}
42+
);
43+
};
3644

37-
export default ContactHeroSection
45+
export default ContactHeroSection;

0 commit comments

Comments
 (0)