Skip to content

Commit 91f4f16

Browse files
realstomanrealstoman
authored
Merge pull request realstoman#6 from NangialaiStoman/ui-3
UI Development Part 3
2 parents 65c596c + 066b8f6 commit 91f4f16

23 files changed

+737
-171
lines changed

‎public/files/Stoman-Resume.pdf

476 KB
Binary file not shown.

‎src/App.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,21 @@ import Home from './pages/Home';
66
import About from './pages/AboutMe';
77
import Projects from './pages/Projects';
88
import Contact from './pages/Contact';
9+
import ProjectSingle from './pages/ProjectSingle';
910

1011
function App() {
1112
return (
12-
<div className=" bg-secondary-light dark:bg-primary-dark transition duration-500">
13+
<div className=" bg-secondary-light dark:bg-primary-dark transition duration-300">
1314
<Router>
1415
<AppHeader></AppHeader>
1516
<Routes>
1617
<Route path="/" element={<Home />} />
1718
<Route path="projects" element={<Projects />} />
19+
<Route
20+
path="projects/single-project"
21+
element={<ProjectSingle />}
22+
/>
23+
1824
<Route path="about" element={<About />} />
1925
<Route path="contact" element={<Contact />} />
2026
</Routes>

‎src/components/AboutClientSingle.js

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
const AboutClientSingle = ({ clients }) => {
1+
const AboutClientSingle = ({ title, image }) => {
22
return (
33
<>
4-
{clients.map((client) => (
5-
<img
6-
src={client.img}
7-
className="w-64 py-5 px-10 border bg-secondary-light border-ternary-light dark:border-ternary-dark shadow-sm rounded-xl mb-8 cursor-pointer"
8-
alt={client.title}
9-
/>
10-
))}
4+
<img
5+
src={image}
6+
className="w-64 py-5 px-10 border bg-secondary-light border-ternary-light dark:border-ternary-dark shadow-sm rounded-xl mb-8 cursor-pointer"
7+
alt={title}
8+
/>
119
</>
1210
);
1311
};

‎src/components/AboutClients.js

Lines changed: 9 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,20 @@
1-
import AmazonImage from '../images/brands/amazon_gray.png';
2-
import SonyImage from '../images/brands/sony_gray.png';
3-
import AdidasImage from '../images/brands/adidas_gray.png';
4-
import FilaImage from '../images/brands/fila_gray.png';
5-
import NBImage from '../images/brands/nb_gray.png';
6-
import SamsungImage from '../images/brands/samsung_gray.png';
7-
import CanonImage from '../images/brands/canon_gray.png';
8-
import PumaImage from '../images/brands/puma_gray.png';
91
import AboutClientSingle from './AboutClientSingle';
10-
11-
const clientsHeading = 'Some of the brands I worked with';
12-
const clientsData = [
13-
{
14-
id: 1,
15-
title: 'Amazon',
16-
img: AmazonImage,
17-
},
18-
{
19-
id: 2,
20-
title: 'Sony',
21-
img: SonyImage,
22-
},
23-
{
24-
id: 3,
25-
title: 'Adidas',
26-
img: AdidasImage,
27-
},
28-
{
29-
id: 4,
30-
title: 'FILA',
31-
img: FilaImage,
32-
},
33-
{
34-
id: 5,
35-
title: 'NB',
36-
img: NBImage,
37-
},
38-
{
39-
id: 6,
40-
title: 'SAMSUNG',
41-
img: SamsungImage,
42-
},
43-
{
44-
id: 7,
45-
title: 'CANON',
46-
img: CanonImage,
47-
},
48-
{
49-
id: 7,
50-
title: 'PUMA',
51-
img: PumaImage,
52-
},
53-
];
2+
import { ClientsData, ClientsHeading } from '../utils/ClientsData';
543

554
const AboutClients = () => {
565
return (
576
<div className="mt-10 sm:mt-20">
587
<p className="text-2xl sm:text-4xl text-primary-dark dark:text-primary-light font-sans font-semibold">
59-
{clientsHeading}
8+
{ClientsHeading}
609
</p>
6110
<div className="grid grid-cols-2 sm:grid-cols-4 mt-10 sm:mt-20 gap-2">
62-
<AboutClientSingle clients={clientsData} />
11+
{ClientsData.map((client) => (
12+
<AboutClientSingle
13+
title={client.title}
14+
image={client.img}
15+
key={client.id}
16+
/>
17+
))}
6318
</div>
6419
</div>
6520
);

‎src/components/AboutMeBio.js

Lines changed: 5 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,18 @@
11
import profileImage from '../images/profile.jpeg';
2-
3-
const bios = [
4-
{
5-
id: 1,
6-
bio: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt totam dolorum, ducimus obcaecati, voluptas facilis molestias nobis ut quam natus similique inventore excepturi optio ipsa deleniti fugit illo. Unde, amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo necessitatibus perspiciatis! Aperiam perferendis labore temporibus, eos culpa corporis recusandae quas, fuga voluptatibus nesciunt odit libero tenetur neque consequatur ea.',
7-
},
8-
{
9-
id: 2,
10-
bio: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta?',
11-
},
12-
{
13-
id: 3,
14-
bio: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta?',
15-
},
16-
{
17-
id: 4,
18-
bio: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt totam dolorum, ducimus obcaecati, voluptas facilis molestias nobis ut quam natus similique inventore excepturi optio ipsa deleniti fugit illo. Unde, amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo necessitatibus perspiciatis! Aperiam perferendis labore temporibus, eos culpa corporis recusandae quas, fuga voluptatibus nesciunt odit libero tenetur neque consequatur ea.',
19-
},
20-
];
2+
import { AboutMeData } from '../utils/AboutMeData';
213

224
const AboutMeBio = () => {
235
return (
246
<div className="block sm:flex sm:gap-10 mt-10 sm:mt-20">
257
{/* About me portfolio image start */}
26-
<div class="w-full sm:w-1/4 mb-7 sm:mb-0">
27-
<img src={profileImage} class="rounded-xl w-96" alt="" />
8+
<div className="w-full sm:w-1/4 mb-7 sm:mb-0">
9+
<img src={profileImage} className="rounded-xl w-96" alt="" />
2810
</div>
2911
{/* About me portfolio image end */}
3012

3113
{/* About me details start */}
32-
<div class="w-full sm:w-3/4 text-left">
33-
{bios.map((bio) => (
14+
<div className="w-full sm:w-3/4 text-left">
15+
{AboutMeData.map((bio) => (
3416
<p
3517
className="mb-4 text-ternary-dark dark:text-ternary-light text-lg"
3618
key={bio.id}

‎src/components/AppBanner.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import ThemeSwitcher from '../hooks/ThemeSwitcher';
1+
import useThemeSwitcher from '../hooks/useThemeSwitcher';
22
import { FiArrowDownCircle } from 'react-icons/fi';
33
import developerLight from '../images/developer.svg';
44
import developerDark from '../images/developer-dark.svg';
55

66
const AppBanner = () => {
7-
const [activeTheme, seTheme] = ThemeSwitcher();
7+
const [activeTheme] = useThemeSwitcher();
88

99
return (
1010
<section className="flex flex-col sm:justify-between items-center sm:flex-row mt-12 sm:mt-2">
@@ -30,7 +30,7 @@ const AppBanner = () => {
3030
<div className="w-full sm:w-2/3 text-right float-right mt-8 sm:mt-0">
3131
<img
3232
src={
33-
activeTheme === 'dark' ? developerDark : developerLight
33+
activeTheme === 'dark' ? developerLight : developerDark
3434
}
3535
alt="Developer"
3636
/>

‎src/components/AppFooter.js

Lines changed: 55 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,39 @@
1-
import { FiGithub, FiTwitter, FiInstagram, FiFeather } from 'react-icons/fi';
1+
import {
2+
FiGithub,
3+
FiTwitter,
4+
FiInstagram,
5+
FiFeather,
6+
FiBook,
7+
} from 'react-icons/fi';
8+
import { Link } from 'react-router-dom';
9+
10+
const socialLinks = [
11+
{
12+
id: 1,
13+
icon: <FiGithub />,
14+
url: 'https://github.com/NangialaiStoman',
15+
},
16+
{
17+
id: 2,
18+
icon: <FiTwitter />,
19+
url: 'https://twitter.com/NangialaiStoman',
20+
},
21+
{
22+
id: 3,
23+
icon: <FiBook />,
24+
url: 'https://stoman.medium.com',
25+
},
26+
{
27+
id: 4,
28+
icon: <FiInstagram />,
29+
url: 'https://instagram.com/NangialaiStoman',
30+
},
31+
{
32+
id: 5,
33+
icon: <FiFeather />,
34+
url: 'https://behance.net/NangialaiStoman',
35+
},
36+
];
237

338
const AppFooter = () => {
439
return (
@@ -10,49 +45,36 @@ const AppFooter = () => {
1045
Follow me
1146
</p>
1247
<ul className="flex gap-4 sm:gap-8">
13-
<a
14-
href="/fb"
15-
target="__blank"
16-
className="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm p-4"
17-
>
18-
<FiGithub className="w-6 sm:w-8 h-6 sm:h-8"></FiGithub>
19-
</a>
20-
<a
21-
href="/fb"
22-
target="__blank"
23-
className="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm p-4"
24-
>
25-
<FiTwitter className="w-6 sm:w-8 h-6 sm:h-8"></FiTwitter>
26-
</a>
27-
<a
28-
href="/fb"
29-
target="__blank"
30-
className="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm p-4"
31-
>
32-
<FiInstagram className="w-6 sm:w-8 h-6 sm:h-8"></FiInstagram>
33-
</a>
34-
<a
35-
href="/fb"
36-
target="__blank"
37-
className="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm p-4"
38-
>
39-
<FiFeather className="w-6 sm:w-8 h-6 sm:h-8"></FiFeather>
40-
</a>
48+
{socialLinks.map((link) => (
49+
<a
50+
href={link.url}
51+
target="__blank"
52+
key={link.id}
53+
className="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm p-4"
54+
>
55+
<i className="text-xl sm:text-2xl md:text-3xl">
56+
{link.icon}
57+
</i>
58+
</a>
59+
))}
4160
</ul>
4261
</div>
4362
{/* Footer social links end */}
4463

4564
{/* Footer copyright start */}
4665
<div className="flex justify-center items-center text-center">
4766
<div className="text-lg text-ternary-dark dark:text-ternary-light">
48-
&copy; Copyright 2021. Vue.js & TailwindCSS Portfolio.
49-
<a
50-
href="https://stoman.me"
67+
<Link to="https://github.com/NangialaiStoman/react-tailwindcss-portfolio">
68+
&copy; 2021. React & TailwindCSS Portfolio
69+
</Link>
70+
.
71+
<Link
72+
to="https://stoman.me"
5173
target="__blank"
5274
className="text-secondary-dark dark:text-secondary-light font-medium uppercase hover:underline ml-1"
5375
>
5476
Stoman
55-
</a>
77+
</Link>
5678
</div>
5779
</div>
5880
{/* Footer copyright end */}

0 commit comments

Comments
 (0)