├── public
    ├── favicon.png
    ├── images
    │   ├── man.png
    │   ├── blog
    │   │   ├── b1.png
    │   │   ├── b2.png
    │   │   └── b3.png
    │   ├── home-bg.png
    │   ├── port
    │   │   ├── port1.jpg
    │   │   ├── port2.jpg
    │   │   ├── port3.jpg
    │   │   ├── port4.jpg
    │   │   ├── port5.jpg
    │   │   └── port6.jpg
    │   ├── some-facts-bg.png
    │   ├── testimonials-bg.png
    │   └── testimonials
    │   │   ├── team-1.png
    │   │   ├── team-2.png
    │   │   └── team-3.png
    └── index.html
├── src
    ├── components
    │   ├── data
    │   │   ├── images
    │   │   │   └── logo.png
    │   │   └── dummydata.js
    │   ├── common
    │   │   ├── Heading.jsx
    │   │   ├── Footer.jsx
    │   │   └── Header.jsx
    │   ├── home
    │   │   ├── Home.jsx
    │   │   └── Hero.jsx
    │   └── pages
    │   │   ├── Services.jsx
    │   │   ├── Counter.jsx
    │   │   ├── About.jsx
    │   │   ├── Blog.jsx
    │   │   ├── Pages.jsx
    │   │   ├── Testimonials.jsx
    │   │   ├── Contact.jsx
    │   │   └── Portfolio.jsx
    ├── index.js
    ├── App.js
    └── App.css
├── README.md
├── .gitignore
└── package.json


/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Alamin-Portfolio/HEAD/public/favicon.png


--------------------------------------------------------------------------------
/public/images/man.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Alamin-Portfolio/HEAD/public/images/man.png


--------------------------------------------------------------------------------
/public/images/blog/b1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Alamin-Portfolio/HEAD/public/images/blog/b1.png


--------------------------------------------------------------------------------
/public/images/blog/b2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Alamin-Portfolio/HEAD/public/images/blog/b2.png


--------------------------------------------------------------------------------
/public/images/blog/b3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Alamin-Portfolio/HEAD/public/images/blog/b3.png


--------------------------------------------------------------------------------
/public/images/home-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Alamin-Portfolio/HEAD/public/images/home-bg.png


--------------------------------------------------------------------------------
/public/images/port/port1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Alamin-Portfolio/HEAD/public/images/port/port1.jpg


--------------------------------------------------------------------------------
/public/images/port/port2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Alamin-Portfolio/HEAD/public/images/port/port2.jpg


--------------------------------------------------------------------------------
/public/images/port/port3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Alamin-Portfolio/HEAD/public/images/port/port3.jpg


--------------------------------------------------------------------------------
/public/images/port/port4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Alamin-Portfolio/HEAD/public/images/port/port4.jpg


--------------------------------------------------------------------------------
/public/images/port/port5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Alamin-Portfolio/HEAD/public/images/port/port5.jpg


--------------------------------------------------------------------------------
/public/images/port/port6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Alamin-Portfolio/HEAD/public/images/port/port6.jpg


--------------------------------------------------------------------------------
/public/images/some-facts-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Alamin-Portfolio/HEAD/public/images/some-facts-bg.png


--------------------------------------------------------------------------------
/public/images/testimonials-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Alamin-Portfolio/HEAD/public/images/testimonials-bg.png


--------------------------------------------------------------------------------
/src/components/data/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Alamin-Portfolio/HEAD/src/components/data/images/logo.png


--------------------------------------------------------------------------------
/public/images/testimonials/team-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Alamin-Portfolio/HEAD/public/images/testimonials/team-1.png


--------------------------------------------------------------------------------
/public/images/testimonials/team-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Alamin-Portfolio/HEAD/public/images/testimonials/team-2.png


--------------------------------------------------------------------------------
/public/images/testimonials/team-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/Alamin-Portfolio/HEAD/public/images/testimonials/team-3.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Project Demo : https://ornate-manatee-af7564.netlify.app/ 
2 | 
3 | ![screencapture-localhost-3000-2023-06-18-11_36_52](https://github.com/sunil9813/Alamin-Portfolio/assets/67497228/630614e8-2e6d-4e27-887d-3a0eac1ed8ca)
4 | 


--------------------------------------------------------------------------------
/src/components/common/Heading.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | 
 3 | export const Heading = ({ title }) => {
 4 |   return (
 5 |     <>
 6 |       <h2 className='heading' data-aos='zoom-in-down'>
 7 |         {title}
 8 |       </h2>
 9 |     </>
10 |   )
11 | }
12 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import ReactDOM from "react-dom/client"
 3 | import App from "./App"
 4 | 
 5 | const root = ReactDOM.createRoot(document.getElementById("root"))
 6 | root.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>
10 | )
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import "./App.css"
 2 | import { Pages } from "./components/pages/Pages"
 3 | import { useEffect } from "react"
 4 | 
 5 | //npm install --save aos@next
 6 | //aos
 7 | import AOS from "aos"
 8 | import "aos/dist/aos.css"
 9 | 
10 | function App() {
11 |   //aos
12 |   useEffect(() => {
13 |     AOS.init()
14 |     AOS.refresh()
15 |   }, [])
16 |   return (
17 |     <>
18 |       <Pages />
19 |     </>
20 |   )
21 | }
22 | 
23 | export default App
24 | 


--------------------------------------------------------------------------------
/src/components/common/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { social } from "../data/dummydata"
 3 | 
 4 | const Footer = () => {
 5 |   return (
 6 |     <>
 7 |       <footer>
 8 |         {social.map((item) => (
 9 |           <>
10 |             <i data-aos='zoom-in'>{item.icon}</i>
11 |           </>
12 |         ))}
13 |         <p data-aos='zoom-in'>All Right Resceved 2018</p>
14 |       </footer>
15 |     </>
16 |   )
17 | }
18 | 
19 | export default Footer
20 | 


--------------------------------------------------------------------------------
/src/components/home/Home.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { About } from "../pages/About"
 3 | import { Blog } from "../pages/Blog"
 4 | import { Contact } from "../pages/Contact"
 5 | import { Counter } from "../pages/Counter"
 6 | import { Portfolio } from "../pages/Portfolio"
 7 | import { Services } from "../pages/Services"
 8 | import { Testimonials } from "../pages/Testimonials"
 9 | import { Hero } from "./Hero"
10 | 
11 | export const Home = () => {
12 |   return (
13 |     <>
14 |       <Hero />
15 |       <About />
16 |       <Services />
17 |       <Counter />
18 |       <Portfolio />
19 |       <Testimonials />
20 |       <Blog />
21 |       <Contact />
22 |     </>
23 |   )
24 | }
25 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta name="description" content="Web site created using create-react-app" />
 9 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
10 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
11 |     <title>Alamin Portfolio</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/components/pages/Services.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { Heading } from "../common/Heading"
 3 | import { services } from "../data/dummydata"
 4 | 
 5 | export const Services = () => {
 6 |   return (
 7 |     <>
 8 |       <section className='services'>
 9 |         <div className='container'>
10 |           <Heading title='Services' />
11 |           <div className='content grid3'>
12 |             {services.map((item) => (
13 |               <div className='box' data-aos='flip-left'>
14 |                 <i>{item.icon}</i>
15 |                 <h3>{item.title}</h3>
16 |                 <p>{item.desc}</p>
17 |               </div>
18 |             ))}
19 |           </div>
20 |         </div>
21 |       </section>
22 |     </>
23 |   )
24 | }
25 | 


--------------------------------------------------------------------------------
/src/components/pages/Counter.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { project } from "../data/dummydata"
 3 | import CountUp from "react-countup"
 4 | 
 5 | //yarn or npm add react-countup
 6 | 
 7 | export const Counter = () => {
 8 |   return (
 9 |     <>
10 |       <div className='hero counter'>
11 |         <div className='container grid3 grid4'>
12 |           {project.map((item) => (
13 |             <div className='box' data-aos='zoom-in'>
14 |               <i>{item.icon}</i>
15 |               <h1 className='heading'>
16 |                 <CountUp enableScrollSpy duration={2} end={item.num} />
17 |               </h1>
18 |               <h3>{item.title}</h3>
19 |             </div>
20 |           ))}
21 |         </div>
22 |       </div>
23 |     </>
24 |   )
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/pages/About.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { Heading } from "../common/Heading"
 3 | import { about } from "../data/dummydata"
 4 | 
 5 | export const About = () => {
 6 |   return (
 7 |     <>
 8 |       <section className='about'>
 9 |         <div className='container flex'>
10 |           {about.map((val) => (
11 |             <>
12 |               <div className='left' data-aos='fade-down-right'>
13 |                 <img src={val.cover} alt='' />
14 |               </div>
15 |               <div className='right' data-aos='fade-down-left'>
16 |                 <Heading title='About Me' />
17 |                 <p>{val.desc}</p>
18 |                 <p>{val.desc1}</p>
19 |                 <button>Download CV</button>
20 |                 <button className='primaryBtn'>Download CV</button>
21 |               </div>
22 |             </>
23 |           ))}
24 |         </div>
25 |       </section>
26 |     </>
27 |   )
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/home/Hero.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from "react"
 2 | import { home } from "../data/dummydata"
 3 | import Typewriter from "typewriter-effect"
 4 | 
 5 | export const Hero = () => {
 6 |   return (
 7 |     <>
 8 |       <section className='hero'>
 9 |         {home.map((val, i) => (
10 |           <div className='heroContent'>
11 |             <h3 className='fontSize' data-aos='fade-right'>
12 |               {val.text}
13 |             </h3>
14 |             <h1>
15 |               <Typewriter
16 |                 options={{
17 |                   strings: [`${val.name}`, `${val.post}`, `${val.design}`],
18 |                   autoStart: true,
19 |                   loop: true,
20 |                 }}
21 |               />
22 |             </h1>
23 |             <p data-aos='fade-left'>{val.desc}</p>
24 |             <button className='primaryBtn' data-aos='fade-up-right'>
25 |               Download CV
26 |             </button>
27 |           </div>
28 |         ))}
29 |       </section>
30 |     </>
31 |   )
32 | }
33 | 


--------------------------------------------------------------------------------
/src/components/common/Header.jsx:
--------------------------------------------------------------------------------
 1 | import { Menu } from "@mui/icons-material"
 2 | import React, { useState } from "react"
 3 | import { Link } from "react-router-dom"
 4 | import { navlink } from "../data/dummydata"
 5 | import logo from "../data/images/logo.png"
 6 | 
 7 | export const Header = () => {
 8 |   const [responsive, setResponsive] = useState(false)
 9 |   return (
10 |     <>
11 |       <header>
12 |         <div className='container flexsb'>
13 |           <div className='logo'>
14 |             <img src={logo} alt='' data-aos='zoom-in-right' />
15 |           </div>
16 |           <div className={responsive ? "hideMenu" : "nav"}>
17 |             {navlink.map((links, i) => (
18 |               <Link to={links.url} key={i} data-aos='zoom-in-left'>
19 |                 {links.text}
20 |               </Link>
21 |             ))}
22 |           </div>
23 |           <button className='toggle' onClick={() => setResponsive(!responsive)}>
24 |             <Menu className='icon' />
25 |           </button>
26 |         </div>
27 |       </header>
28 |     </>
29 |   )
30 | }
31 | 


--------------------------------------------------------------------------------
/src/components/pages/Blog.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { Heading } from "../common/Heading"
 3 | import { blog } from "../data/dummydata"
 4 | 
 5 | export const Blog = () => {
 6 |   return (
 7 |     <>
 8 |       <section className='blog'>
 9 |         <div className='container'>
10 |           <Heading title='Blog' />
11 |           <div className='content grid3'>
12 |             {blog.map((item) => (
13 |               <div className='box' data-aos='flip-left'>
14 |                 <div className='img' data-aos='fade-up'>
15 |                   <img src={item.cover} alt='' data-aos='fade-down' />
16 |                 </div>
17 |                 <div className='text'>
18 |                   <h3 data-aos='fade-right'>{item.title}</h3>
19 |                   <label data-aos='fade-left'>
20 |                     By {item.author} {item.date}
21 |                   </label>
22 |                   <p data-aos='fade-up-right'>{item.desc}</p>
23 |                 </div>
24 |               </div>
25 |             ))}
26 |           </div>
27 |         </div>
28 |       </section>
29 |     </>
30 |   )
31 | }
32 | 


--------------------------------------------------------------------------------
/src/components/pages/Pages.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
 3 | import Footer from "../common/Footer"
 4 | import { Header } from "../common/Header"
 5 | import { Home } from "../home/Home"
 6 | import { About } from "./About"
 7 | import { Blog } from "./Blog"
 8 | import { Contact } from "./Contact"
 9 | import { Portfolio } from "./Portfolio"
10 | import { Services } from "./Services"
11 | import { Testimonials } from "./Testimonials"
12 | export const Pages = () => {
13 |   return (
14 |     <>
15 |       <Router>
16 |         <Header />
17 |         <Switch>
18 |           <Route exact path='/' component={Home} />
19 |           <Route exact path='/about' component={About} />
20 |           <Route exact path='/services' component={Services} />
21 |           <Route exact path='/portfolio' component={Portfolio} />
22 |           <Route exact path='/testimonials' component={Testimonials} />
23 |           <Route exact path='/blog' component={Blog} />
24 |           <Route exact path='/contact' component={Contact} />
25 |         </Switch>
26 |         <Footer />
27 |       </Router>
28 |     </>
29 |   )
30 | }
31 | 


--------------------------------------------------------------------------------
/src/components/pages/Testimonials.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import Slider from "react-slick"
 3 | import { testimonials } from "../data/dummydata"
 4 | import FormatQuoteIcon from "@mui/icons-material/FormatQuote"
 5 | import "slick-carousel/slick/slick.css"
 6 | import "slick-carousel/slick/slick-theme.css"
 7 | 
 8 | export const Testimonials = () => {
 9 |   const settings = {
10 |     dots: false,
11 |     infinite: true,
12 |     speed: 500,
13 |     slidesToShow: 1,
14 |     slidesToScroll: 1,
15 |   }
16 |   return (
17 |     <>
18 |       <section className='testimonials hero'>
19 |         <div className='container'>
20 |           <Slider {...settings}>
21 |             {testimonials.map((val) => (
22 |               <div className='box'>
23 |                 <i data-aos='zoom-out-up'>
24 |                   <FormatQuoteIcon />
25 |                 </i>
26 |                 <p data-aos='zoom-out-down'>{val.text}</p>
27 |                 <div className='img' data-aos='zoom-out-right'>
28 |                   <img src={val.image} alt='' />
29 |                 </div>
30 |                 <h3 data-aos='zoom-out-left'>{val.name}</h3>
31 |                 <label data-aos='zoom-out'>{val.post}</label>
32 |               </div>
33 |             ))}
34 |           </Slider>
35 |         </div>
36 |       </section>
37 |     </>
38 |   )
39 | }
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "alamin-port",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@emotion/react": "^11.9.3",
 7 |     "@emotion/styled": "^11.9.3",
 8 |     "@mui/icons-material": "^5.8.4",
 9 |     "@mui/material": "^5.9.0",
10 |     "@testing-library/jest-dom": "^5.16.4",
11 |     "@testing-library/react": "^13.3.0",
12 |     "@testing-library/user-event": "^13.5.0",
13 |     "aos": "^3.0.0-beta.6",
14 |     "framer-motion": "^6.5.0",
15 |     "react": "^18.2.0",
16 |     "react-countup": "^6.3.0",
17 |     "react-dom": "^18.2.0",
18 |     "react-router-dom": "^5.3.3",
19 |     "react-scripts": "5.0.1",
20 |     "react-slick": "^0.29.0",
21 |     "slick-carousel": "^1.8.1",
22 |     "typewriter-effect": "^2.19.0",
23 |     "web-vitals": "^2.1.4"
24 |   },
25 |   "scripts": {
26 |     "start": "react-scripts start",
27 |     "build": "react-scripts build",
28 |     "test": "react-scripts test",
29 |     "eject": "react-scripts eject"
30 |   },
31 |   "eslintConfig": {
32 |     "extends": [
33 |       "react-app",
34 |       "react-app/jest"
35 |     ]
36 |   },
37 |   "browserslist": {
38 |     "production": [
39 |       ">0.2%",
40 |       "not dead",
41 |       "not op_mini all"
42 |     ],
43 |     "development": [
44 |       "last 1 chrome version",
45 |       "last 1 firefox version",
46 |       "last 1 safari version"
47 |     ]
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/components/pages/Contact.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { Heading } from "../common/Heading"
 3 | import { contact } from "../data/dummydata"
 4 | 
 5 | export const Contact = () => {
 6 |   return (
 7 |     <>
 8 |       <div className='contact'>
 9 |         <div className='container'>
10 |           <Heading title='Keep In Touch' />
11 |           <div className='content flexsb'>
12 |             <div className='right'>
13 |               <form>
14 |                 <div className='flex'>
15 |                   <input type='text' placeholder='Name' data-aos='flip-left' />
16 |                   <input type='email' placeholder='Email' data-aos='flip-right' />
17 |                 </div>
18 |                 <input type='email' placeholder='Subject' data-aos='flip-up' />
19 |                 <textarea name='' id='' cols='30' rows='10' data-aos='flip-down'></textarea>
20 |                 <button data-aos='zoom-in-up'>Submit</button>
21 |               </form>
22 |             </div>
23 |             <div className='left'>
24 |               {contact.map((item) => (
25 |                 <div className='box' data-aos='zoom-in'>
26 |                   <i>{item.icon}</i>
27 |                   <p>{item.text1}</p>
28 |                   <p>{item.text2}</p>
29 |                 </div>
30 |               ))}
31 |             </div>
32 |           </div>
33 |         </div>
34 |       </div>
35 |     </>
36 |   )
37 | }
38 | 


--------------------------------------------------------------------------------
/src/components/pages/Portfolio.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react"
 2 | import { Heading } from "../common/Heading"
 3 | import { portfolio } from "../data/dummydata"
 4 | import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined"
 5 | 
 6 | const allCategory = ["all", ...new Set(portfolio.map((item) => item.category))]
 7 | export const Portfolio = () => {
 8 |   const [list, setLists] = useState(portfolio)
 9 |   const [category, setCategory] = useState(allCategory)
10 |   console.log(setCategory)
11 | 
12 |   const filterItems = (category) => {
13 |     const newItems = portfolio.filter((item) => item.category === category)
14 |     setLists(newItems)
15 |     if (category === "all") {
16 |       setLists(portfolio)
17 |       return
18 |     }
19 |   }
20 | 
21 |   return (
22 |     <>
23 |       <article>
24 |         <div className='container'>
25 |           <Heading title='Portfolio' />
26 |           <div className='catButton'>
27 |             {category.map((category) => (
28 |               <button className='primaryBtn' onClick={() => filterItems(category)} data-aos='zoom-out-down'>
29 |                 {category}
30 |               </button>
31 |             ))}
32 |           </div>
33 |           <div className='content grid3'>
34 |             {list.map((item) => (
35 |               <div className='box' data-aos='fade-up'>
36 |                 <div className='img'>
37 |                   <img src={item.cover} alt='' />
38 |                 </div>
39 |                 <div className='overlay'>
40 |                   <h3>{item.title}</h3>
41 |                   <span>{item.name}</span>
42 |                   <VisibilityOutlinedIcon />
43 |                 </div>
44 |               </div>
45 |             ))}
46 |           </div>
47 |         </div>
48 |       </article>
49 |     </>
50 |   )
51 | }
52 | 


--------------------------------------------------------------------------------
/src/components/data/dummydata.js:
--------------------------------------------------------------------------------
  1 | import { Settings, CropRotate, ViewInAr, PieChart, Code, BarChart, CloudOutlined, FavoriteBorder, Public, PersonOutlined, AddLocationAltOutlined, PhoneIphone, EmailOutlined, Facebook, Twitter, Instagram, YouTube } from "@mui/icons-material"
  2 | 
  3 | export const navlink = [
  4 |   {
  5 |     url: "/",
  6 |     text: "Home",
  7 |   },
  8 |   {
  9 |     url: "/about",
 10 |     text: "About",
 11 |   },
 12 |   {
 13 |     url: "/services",
 14 |     text: "Services",
 15 |   },
 16 |   {
 17 |     url: "/portfolio",
 18 |     text: "Portfolio",
 19 |   },
 20 |   {
 21 |     url: "/testimonials",
 22 |     text: "Testimonials",
 23 |   },
 24 |   {
 25 |     url: "/blog",
 26 |     text: "Blog",
 27 |   },
 28 |   {
 29 |     url: "/contact",
 30 |     text: "Contact",
 31 |   },
 32 | ]
 33 | export const home = [
 34 |   {
 35 |     text: "HELLO I'M",
 36 |     name: "ALAMIN MUSA",
 37 |     post: "WEB DESIGNER",
 38 |     design: "UI / UX DESIGNER",
 39 |     desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book",
 40 |   },
 41 | ]
 42 | export const about = [
 43 |   {
 44 |     desc: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur",
 45 |     desc1: "magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor si voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur",
 46 |     cover: "./images/man.png",
 47 |   },
 48 | ]
 49 | export const services = [
 50 |   {
 51 |     id: 1,
 52 |     icon: <Settings />,
 53 |     title: "Creative Design",
 54 |     desc: "Lorem Ipsum simply text of the printing and type setting industry when an unknown printing simply",
 55 |   },
 56 |   {
 57 |     id: 2,
 58 |     icon: <CropRotate />,
 59 |     title: "Clean Code",
 60 |     desc: "Lorem Ipsum simply text of the printing and type setting industry when an unknown printing simply",
 61 |   },
 62 |   {
 63 |     id: 3,
 64 |     icon: <ViewInAr />,
 65 |     title: "Responsive Design",
 66 |     desc: "Lorem Ipsum simply text of the printing and type setting industry when an unknown printing simply",
 67 |   },
 68 |   {
 69 |     id: 4,
 70 |     icon: <PieChart />,
 71 |     title: "Material UI	",
 72 |     desc: "Lorem Ipsum simply text of the printing and type setting industry when an unknown printing simply",
 73 |   },
 74 |   {
 75 |     id: 5,
 76 |     icon: <Code />,
 77 |     title: "Material UI Icons",
 78 |     desc: "Lorem Ipsum simply text of the printing and type setting industry when an unknown printing simply",
 79 |   },
 80 |   {
 81 |     id: 6,
 82 |     icon: <BarChart />,
 83 |     title: "Awesome Support",
 84 |     desc: "Lorem Ipsum simply text of the printing and type setting industry when an unknown printing simply",
 85 |   },
 86 | ]
 87 | export const project = [
 88 |   {
 89 |     id: 1,
 90 |     icon: <CloudOutlined />,
 91 |     num: "89",
 92 |     title: "HAPPY CLIENTS",
 93 |   },
 94 |   {
 95 |     id: 2,
 96 |     icon: <FavoriteBorder />,
 97 |     num: "231",
 98 |     title: "PROJECTS COMPLEATED",
 99 |   },
100 |   {
101 |     id: 3,
102 |     icon: <Public />,
103 |     num: "108",
104 |     title: "FILES DOWNLOADED",
105 |   },
106 |   {
107 |     id: 4,
108 |     icon: <PersonOutlined />,
109 |     num: "1446",
110 |     title: "LIENS OF CODE",
111 |   },
112 | ]
113 | export const portfolio = [
114 |   {
115 |     id: 1,
116 |     cover: "../images/port/port1.jpg",
117 |     name: "Brand",
118 |     category: "marketing",
119 |     title: "Brex Logo",
120 |   },
121 |   {
122 |     id: 2,
123 |     cover: "../images/port/port2.jpg",
124 |     name: "Brand",
125 |     category: "design",
126 |     title: "Brex Logo",
127 |   },
128 |   {
129 |     id: 3,
130 |     cover: "../images/port/port3.jpg",
131 |     name: "Brand",
132 |     category: "development",
133 |     title: "Brex Logo",
134 |   },
135 |   {
136 |     id: 4,
137 |     cover: "../images/port/port4.jpg",
138 |     name: "Brand",
139 |     category: "marketing",
140 |     title: "Brex Logo",
141 |   },
142 |   {
143 |     id: 5,
144 |     cover: "../images/port/port5.jpg",
145 |     name: "Brand",
146 |     category: "design",
147 |     title: "Brex Logo",
148 |   },
149 |   {
150 |     id: 6,
151 |     cover: "../images/port/port6.jpg",
152 |     name: "Brand",
153 |     category: "development",
154 |     title: "Brex Logo",
155 |   },
156 | ]
157 | export const testimonials = [
158 |   {
159 |     id: 1,
160 |     text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitordapibus dictum.Fusce faucibus ligula scelerisque, eleifend turpis in",
161 |     image: "./images/testimonials/team-1.png",
162 |     name: "Alamin Musa",
163 |     post: "Front End Developer",
164 |   },
165 |   {
166 |     id: 2,
167 |     text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitordapibus dictum.Fusce faucibus ligula scelerisque, eleifend turpis in",
168 |     image: "./images/testimonials/team-2.png",
169 |     name: "Alex Ander",
170 |     post: "Back End Developer",
171 |   },
172 |   {
173 |     id: 3,
174 |     text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitordapibus dictum.Fusce faucibus ligula scelerisque, eleifend turpis in",
175 |     image: "./images/testimonials/team-3.png",
176 |     name: "GorkCoder",
177 |     post: "React Developer",
178 |   },
179 | ]
180 | export const blog = [
181 |   {
182 |     id: 1,
183 |     title: "Master These Awesome",
184 |     date: "Jun 27, 2022",
185 |     author: "Dorian Gray",
186 |     desc: "Lorem Ipsum has been standard. Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been",
187 |     cover: "./images/blog/b1.png",
188 |   },
189 |   {
190 |     id: 2,
191 |     title: "Best Design Items to Appeal",
192 |     date: "Jun 27, 2022",
193 |     author: "Dorian Gray",
194 |     desc: "Lorem Ipsum has been standard. Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been",
195 |     cover: "./images/blog/b2.png",
196 |   },
197 |   {
198 |     id: 3,
199 |     title: "The 20 Best Lightroom Presets",
200 |     date: "Jun 27, 2022",
201 |     author: "Dorian Gray",
202 |     desc: "Lorem Ipsum has been standard. Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been",
203 |     cover: "./images/blog/b3.png",
204 |   },
205 | ]
206 | export const contact = [
207 |   {
208 |     icon: <AddLocationAltOutlined />,
209 |     text1: "2651 Main Street, Suit 124",
210 |     text2: "Seattle, WA, 98101",
211 |   },
212 |   {
213 |     icon: <PhoneIphone />,
214 |     text1: "0123456789",
215 |     text2: "0345627891",
216 |   },
217 |   {
218 |     icon: <EmailOutlined />,
219 |     text1: "hello@thetheme.io",
220 |     text2: "inf0@brex-theme.io",
221 |   },
222 | ]
223 | export const social = [
224 |   {
225 |     icon: <Facebook />,
226 |   },
227 |   {
228 |     icon: <Twitter />,
229 |   },
230 |   {
231 |     icon: <Instagram />,
232 |   },
233 |   {
234 |     icon: <YouTube />,
235 |   },
236 | ]
237 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");
  2 | * {
  3 |   padding: 0;
  4 |   margin: 0;
  5 |   box-sizing: border-box;
  6 | }
  7 | :root {
  8 |   --primaryBackground: #212222;
  9 |   --secondaryBackground: #2f3030;
 10 |   --primaryColor: #e0a80d;
 11 |   --greyDark: #7d8792;
 12 |   --headingColor: #2d2e2e;
 13 |   --white: #fff;
 14 |   --black: #000;
 15 |   --sliver: #bac8d3;
 16 | }
 17 | body {
 18 |   background-color: var(--headingColor);
 19 |   color: var(--white);
 20 |   font-family: "Poppins", sans-serif;
 21 | }
 22 | a {
 23 |   color: var(--greyDark);
 24 |   text-decoration: none;
 25 |   transition: 0.5s;
 26 | }
 27 | a:hover {
 28 |   color: var(--primaryColor);
 29 | }
 30 | p {
 31 |   color: var(--sliver);
 32 |   font-size: 15px;
 33 |   line-height: 30px;
 34 |   margin: 20px 0;
 35 | }
 36 | h1,
 37 | h2,
 38 | h3,
 39 | h4,
 40 | h5,
 41 | h6 {
 42 |   font-weight: 400;
 43 | }
 44 | .container {
 45 |   max-width: 80%;
 46 |   margin: auto;
 47 | }
 48 | .flexsb {
 49 |   display: flex;
 50 |   justify-content: space-between;
 51 | }
 52 | button {
 53 |   border: none;
 54 |   outline: none;
 55 |   background: none;
 56 |   font-size: 17px;
 57 |   background-color: var(--primaryColor);
 58 |   color: var(--white);
 59 |   padding: 15px 50px;
 60 |   border-radius: 50px;
 61 |   margin-top: 20px;
 62 |   cursor: pointer;
 63 | }
 64 | .fontSize {
 65 |   font-size: 20px;
 66 | }
 67 | .primaryBtn {
 68 |   background: none;
 69 |   border: 2px solid var(--primaryColor);
 70 | }
 71 | /*---------header-------------*/
 72 | header {
 73 |   background-color: var(--headingColor);
 74 |   height: 10vh;
 75 |   line-height: 10vh;
 76 |   position: sticky;
 77 |   top: 0;
 78 |   left: 0;
 79 |   width: 100%;
 80 |   z-index: 999;
 81 | }
 82 | header a {
 83 |   margin-left: 40px;
 84 | }
 85 | .toggle {
 86 |   cursor: pointer;
 87 |   color: var(--white);
 88 |   display: none;
 89 | }
 90 | @media screen and (max-width: 768px) {
 91 |   header .nav {
 92 |     display: none;
 93 |   }
 94 |   header a {
 95 |     width: 100%;
 96 |     display: block;
 97 |     color: var(--white);
 98 |   }
 99 |   .toggle {
100 |     display: block;
101 |     font-size: 25px;
102 |     background: none;
103 |   }
104 |   .hideMenu {
105 |     display: block;
106 |     position: absolute;
107 |     top: 10vh;
108 |     left: 0;
109 |     width: 100%;
110 |     background-color: var(--headingColor);
111 |   }
112 | }
113 | /*---------header-------------*/
114 | section {
115 |   height: 90vh;
116 |   display: flex;
117 |   align-items: center;
118 | }
119 | .flex {
120 |   display: flex;
121 | }
122 | 
123 | /*---------hero-------------*/
124 | .hero {
125 |   position: relative;
126 | }
127 | .hero::after {
128 |   content: "";
129 |   position: absolute;
130 |   top: 0;
131 |   left: 0;
132 |   background-image: url("../public/images/home-bg.png");
133 |   background-size: cover;
134 |   background-attachment: fixed;
135 |   z-index: -1;
136 |   width: 100%;
137 |   height: 90vh;
138 | }
139 | .heroContent {
140 |   max-width: 50%;
141 |   margin: auto;
142 |   text-align: center;
143 | }
144 | .hero h1 {
145 |   font-size: 60px;
146 |   font-weight: 600;
147 |   color: var(--primaryColor);
148 | }
149 | 
150 | /*---------hero-------------*/
151 | .heading {
152 |   font-size: 30px;
153 |   color: var(--primaryColor);
154 |   font-weight: 600;
155 |   text-align: center;
156 |   margin-bottom: 60px;
157 | }
158 | 
159 | /*---------about-------------*/
160 | .about .primaryBtn {
161 |   margin-left: 20px;
162 | }
163 | .about .heading {
164 |   text-align: left;
165 |   margin: 0;
166 | }
167 | .left {
168 |   width: 35%;
169 | }
170 | .right {
171 |   width: 65%;
172 | }
173 | 
174 | /*---------about-------------*/
175 | .grid3 {
176 |   display: grid;
177 |   grid-template-columns: repeat(3, 1fr);
178 |   grid-gap: 30px;
179 | }
180 | 
181 | /*---------services-------------*/
182 | .services .box {
183 |   background-color: var(--primaryBackground);
184 |   padding: 35px;
185 | }
186 | .services i {
187 |   color: var(--primaryColor);
188 | }
189 | .services h3 {
190 |   margin-top: 20px;
191 | }
192 | /*---------services-------------*/
193 | .grid4 {
194 |   grid-template-columns: repeat(4, 1fr);
195 |   height: 50vh;
196 |   place-items: center;
197 |   text-align: center;
198 | }
199 | 
200 | /*---------counter-------------*/
201 | .counter {
202 |   margin-top: 80px;
203 |   position: relative;
204 | }
205 | .hero.counter::after {
206 |   background-image: url("../public/images/some-facts-bg.png");
207 |   height: 50vh;
208 | }
209 | .counter h1 {
210 |   margin: 0;
211 | }
212 | /*---------counter-------------*/
213 | /*---------portfolio-------------*/
214 | 
215 | article {
216 |   margin-top: 50px;
217 |   margin-bottom: 80px;
218 | }
219 | article img {
220 |   width: 100%;
221 |   height: 100%;
222 | }
223 | article .box {
224 |   position: relative;
225 |   transition: 0.5s;
226 | }
227 | .overlay {
228 |   position: absolute;
229 |   top: 0;
230 |   left: 0;
231 |   display: flex;
232 |   align-items: center;
233 |   justify-content: center;
234 |   flex-direction: column;
235 |   width: 100%;
236 |   height: 100%;
237 |   opacity: 0;
238 |   cursor: pointer;
239 |   transition: 0.5s;
240 |   z-index: 2;
241 | }
242 | .overlay::after {
243 |   content: "";
244 |   position: absolute;
245 |   top: 0;
246 |   left: 0;
247 |   width: 100%;
248 |   height: 100%;
249 |   background-color: var(--primaryColor);
250 |   opacity: 0;
251 |   transition: 0.5s;
252 |   z-index: -1;
253 | }
254 | article .box:hover .overlay::after,
255 | article .box:hover .overlay {
256 |   opacity: 1;
257 | }
258 | .catButton {
259 |   display: flex;
260 |   justify-content: center;
261 |   align-items: center;
262 |   margin: 40px 0;
263 | }
264 | .catButton button {
265 |   text-transform: capitalize;
266 |   margin-right: 20px;
267 | }
268 | /*---------portfolio-------------*/
269 | /*---------testimonials-------------*/
270 | .testimonials {
271 |   display: flex;
272 |   align-items: center;
273 |   justify-content: center;
274 |   text-align: center;
275 | }
276 | .testimonials::after {
277 |   background-image: url("../public/images/testimonials-bg.png");
278 | }
279 | .testimonials .box {
280 |   max-width: 60%;
281 | }
282 | .testimonials i {
283 |   background-color: var(--white);
284 |   font-size: 20px;
285 |   padding: 15px;
286 |   margin: 30px 0;
287 |   display: inline-block;
288 |   color: var(--primaryColor);
289 | }
290 | .testimonials .img {
291 |   display: flex;
292 |   align-items: center;
293 |   justify-content: center;
294 |   width: 120px;
295 |   height: 120px;
296 |   margin: auto;
297 |   border-radius: 50%;
298 |   border: 3px solid var(--primaryColor);
299 | }
300 | .testimonials img {
301 |   width: 100px;
302 |   height: 100px;
303 |   background-size: cover;
304 |   border-radius: 50%;
305 |   object-fit: cover;
306 | }
307 | label {
308 |   color: var(--primaryColor);
309 |   margin: 10px 0;
310 |   display: inline-block;
311 | }
312 | /*---------testimonials-------------*/
313 | /*---------blog-------------*/
314 | .blog img {
315 |   width: 100%;
316 | }
317 | .blog .box {
318 |   background-color: var(--primaryBackground);
319 |   border-radius: 10px;
320 | }
321 | .blog .text {
322 |   padding: 10px 30px;
323 | }
324 | /*---------blog-------------*/
325 | /*---------contact-------------*/
326 | .contact {
327 |   margin: 20px 0;
328 | }
329 | .contact .right,
330 | .contact .left {
331 |   padding: 20px;
332 | }
333 | .contact .flex input:nth-child(1) {
334 |   margin-right: 10px;
335 | }
336 | .contact button,
337 | .contact textarea,
338 | .contact input {
339 |   width: 100%;
340 |   padding: 20px;
341 |   border: none;
342 |   outline: none;
343 |   margin: 10px 0;
344 |   border-radius: 5px;
345 | }
346 | /*---------contact-------------*/
347 | /*---------footer-------------*/
348 | footer {
349 |   text-align: center;
350 |   background-color: var(--primaryBackground);
351 |   padding: 70px;
352 |   margin-top: 50px;
353 | }
354 | footer i {
355 |   margin: 5px;
356 |   color: var(--primaryColor);
357 | }
358 | /*---------footer-------------*/
359 | @media screen and (max-width: 768px) {
360 |   .hero {
361 |     height: 60vh;
362 |   }
363 |   .heroContent {
364 |     max-width: 80%;
365 |   }
366 | 
367 |   .hero::after {
368 |     background-image: url("../public/images/home-bg.png");
369 |     background-size: cover;
370 |     object-fit: cover;
371 |     width: 100%;
372 |     height: 60vh;
373 |   }
374 |   section {
375 |     height: auto;
376 |     padding-top: 50px;
377 |   }
378 |   .contact .flexsb,
379 |   .about .flex {
380 |     flex-direction: column;
381 |   }
382 |   .right,
383 |   .left {
384 |     width: 100%;
385 |   }
386 |   .grid4,
387 |   .grid3 {
388 |     grid-template-columns: repeat(2, 1fr);
389 |   }
390 |   article {
391 |     margin: 0;
392 |     padding-bottom: 50px;
393 |   }
394 | }
395 | 


--------------------------------------------------------------------------------