The application is working perfectly, and the Navbar behaves as expected. However, I don't know why the spacing between my components got suddenly messed up.
- App.css doesn't contain anything/doesn't have any code
Here's my Index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Here's my Tailwind.config.js:
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}",],
theme: {
extend: {},
},
plugins: [],
}
Here's my App.jsx:
import './App.css';
import About from './components/About';
import Contact from './components/Contact';
import Home from './components/Home';
import Navbar from './components/Navbar';
import Skills from './components/Skills';
import Work from './components/Work';
function App() {
return (
<div className="App">
<Navbar />
<Home />
<About />
<Skills />
<Work />
<Contact />
</div>
);
};
export default App;
Here's my Navbar.jsx:
import React, {useState} from 'react';
import Logo from '../assets/logo1.png';
import { FaBars, FaTimes, FaGithub } from 'react-icons/fa';
import { HiOutlineMail } from 'react-icons/hi';
import { Link } from 'react-scroll';
const Navbar = () => {
const [ nav, setNav ] = useState(false);
const handleClick = () => setNav(!nav);
return (
<div className='fixed w-full h-[80px] flex justify-between items-center px-4 bg-[#08192f] text-gray-300'>
<div>
<img
src={Logo}
alt=''
style={{width: '50px' }} />
</div>
{}
<ul className='hidden md:flex font-bold'>
<li>
<Link to="home" smooth={true} duration={500}>
Home
</Link>
</li>
<li>
<Link to="about" smooth={true} duration={500}>
About
</Link>
</li>
<li>
<Link to="skills" smooth={true} duration={500}>
Skills
</Link>
</li>
<li>
<Link to="work" smooth={true} duration={500}>
Work
</Link>
</li>
<li>
<Link to="contact" smooth={true} duration={500}>
Contact
</Link>
</li>
</ul>
{}
<div onClick={handleClick} className='md:hidden z-10 cursor-pointer'>
{!nav ? <FaBars /> : <FaTimes />}
</div>
{}
<ul className={!nav ? 'hidden' : 'absolute top-0 left-0 w-full h-screen bg-[#0a192f] flex flex-col justify-center items-center'}>
<li className='py-6 text-4xl'>
<Link onClick={handleClick} to="home" smooth={true} duration={500}>
Home
</Link>
</li>
<li className='py-6 text-4xl'>
<Link onClick={handleClick} to="about" smooth={true} duration={500}>
About
</Link>
</li>
<li className='py-6 text-4xl'>
<Link onClick={handleClick} to="skills" smooth={true} duration={500}>
Skills
</Link>
</li>
<li className='py-6 text-4xl'>
<Link onClick={handleClick} to="work" smooth={true} duration={500}>
Work
</Link>
</li>
<li className='py-6 text-4xl'>
<Link onClick={handleClick} to="contact" smooth={true} duration={500}>
Contact
</Link>
</li>
</ul>
{}
<div className='hidden lg:flex fixed flex-col top-[35%] left-0'>
<ul>
<li className='w-[160px] h-[60px] flex justify-between items-center ml-[-100px] hover:ml-[-10px] duration-300 bg-red-600'>
<a className='flex justify-between items-center w-full text-gray-300 font-bold' href='https://github.com/BeastPleasure'> Github<FaGithub size={30} /> </a>
</li>
<li className='w-[160px] h-[60px] flex justify-between items-center ml-[-100px] hover:ml-[-10px] duration-300 bg-yellow-600'>
<a className='flex justify-between items-center w-full text-gray-300 font-bold' href='https://docs.google.com/forms/d/e/1FAIpQLSevdLMPC3ipm-Hmxhbluwm_vEUSdJCmr45vwsxE_n6cBn8WcA/viewform'> Email<HiOutlineMail size={30} /> </a>
</li>
{}
</ul>
</div>
</div>
);
};
export default Navbar;
Here's my Home.jsx:
import React from 'react';
import {HiArrowNarrowRight} from 'react-icons/hi';
const Home = () => {
return (
<div name='home' className='w-full h-screen bg-[#08192f]'>
{}
<div className='max-w-[1000px] mx-auto px-8 flex flex-col justify-center h-full'>
<p className='text-yellow-700'> Hi, my name is </p>
<h1 className='text-4xl sm:text-7xl font-bold text-[#ccd6f6]'> Jonas </h1>
<h2 className='text-4xl sm:text-7xl font-bold text-[#8892b0]'> I'm a Web Developer </h2>
<p className='text-[#8892b0] py-4 max-w-[700px]'>
I'm a Web Developer specializing in building and occasionally
designing exceptional digital experiences. Currently, I'm focused
on building responsive web applications; specifically, front end views.
</p>
<div>
<button className='text-white group border-2 px-6 py-3 my-2 flex items-center hover:bg-red-600 hover:border-red-600'>
View Work
<span className='group-hover:rotate-90 duration-300'>
<HiArrowNarrowRight className='ml-3 '/>
</span>
</button>
</div>
</div>
</div>
);
};
export default Home;
Here's my About.jsx:
import React from 'react';
const About = () => {
return (
<div name='about' className='w-full h-screen bg-[#0a192f] text-gray-300'>
<div className='flex flex-col justify-center items-center w-full h-full'>
<div className='max-w-[1000px] w-full grid grid-cols-2 gap-8'>
<div className='sm:text-right pb-8 pl-4'>
<p className='text-4xl font-bold inline border-b-4 border-pink-600'>
About
</p>
</div>
<div></div>
</div>
<div className='max-w-[1000px] w-full grid sm:grid-cols-2 gap-8 px-4'>
<div className='sm:text-right text-4xl font-bold'>
<p> Hey! I'm Landry, and nice to meet you. Please take a look around. </p>
</div>
<div>
<p>
I am passionate about building excellent software that improves
the lives of those around me. I specialize in creating software
for clients ranging from individuals and small-businesses all the
way to large enterprise corporations. What would you do if you had
a software expert available at your fingertips?
</p>
</div>
</div>
</div>
</div>
);
};
export default About;
Here's my Skills.jsx:
import React from 'react';
import HTML from '../assets/html.png';
import CSS from '../assets/css.png';
import JavaScript from '../assets/javascript.png';
import ReactImg from '../assets/react.png';
import Node from '../assets/node.png';
import FireBase from '../assets/firebase.png';
import GitHub from '../assets/github.png';
import Tailwind from '../assets/tailwind.png';
import Mongo from '../assets/mongo.png';
const Skills = () => {
return (
<div name='skills' className='w-full h-screen bg-[#0a192f] text-gray-300 '>
{}
<div className='max-w-[1000px] mx-auto p-4 flex flex-col justify-center w-full h-full'>
<div>
<p className='text-4xl font-bold inline border-b-4 border-orange-600 '> Skills </p>
<p className='py-4'> These are the technologies I've worked with</p>
</div>
<div className='w-full grid grid-cols-2 sm:grid-cols-4 gap-4 text-center py-8'>
<div className='shadow-md shadow-[#040c16] hover:scale-110 duration-500'>
<img className='w-20 mx-auto' src={HTML} alt="HTML icon" />
<p className='my-4'> HTML </p>
</div>
<div className='shadow-md shadow-[#040c16] hover:scale-110 duration-500'>
<img className='w-20 mx-auto' src={CSS} alt="HTML icon" />
<p className='my-4'> CSS </p>
</div>
<div className='shadow-md shadow-[#040c16] hover:scale-110 duration-500'>
<img className='w-20 mx-auto' src={JavaScript} alt="HTML icon" />
<p className='my-4'> JAVASCRIPT </p>
</div>
<div className='shadow-md shadow-[#040c16] hover:scale-110 duration-500'>
<img className='w-20 mx-auto' src={ReactImg} alt="HTML icon" />
<p className='my-4'> REACT </p>
</div>
<div className='shadow-md shadow-[#040c16] hover:scale-110 duration-500'>
<img className='w-20 mx-auto' src={GitHub} alt="HTML icon" />
<p className='my-4'> GITHUB </p>
</div>
<div className='shadow-md shadow-[#040c16] hover:scale-110 duration-500'>
<img className='w-20 mx-auto' src={Node} alt="HTML icon" />
<p className='my-4'>NODE JS</p>
</div>
<div className='shadow-md shadow-[#040c16] hover:scale-110 duration-500'>
<img className='w-20 mx-auto' src={Mongo} alt="HTML icon" />
<p className='my-4'> MONGO DB </p>
</div>
<div className='shadow-md shadow-[#040c16] hover:scale-110 duration-500'>
<img className='w-20 mx-auto' src={Tailwind} alt="HTML icon" />
<p className='my-4'> TAILWIND </p>
</div>
<div className='shadow-md shadow-[#040c16] hover:scale-110 duration-500'>
<img className='w-20 mx-auto' src={FireBase} alt="HTML icon" />
<p className='my-4'> FIREBASE </p>
</div>
</div>
</div>
</div>
);
};
export default Skills;
Here's my Work.jsx:
import React from 'react';
import proj1 from '../assets/projects/1.JPG';
import proj2 from '../assets/projects/2.JPG';
import proj3 from '../assets/projects/3.JPG';
import proj4 from '../assets/projects/4.JPG';
import proj5 from '../assets/projects/5.JPG';
import proj6 from '../assets/projects/6.JPG';
const Work = () => {
return (
<div name='work' className='w-full md:h-screen text-gray-300 bg-[#0a192f]'>
<div className='max-w-[1000px] mx-auto p-4 flex flex-col justify-center w-full h-full'>
<div className='pb-8'>
<p className='text-4xl font-bold inline border-b-4 text-gray-300 border-yellow-600'>
Work
</p>
<p className='py-6'> Check out some of my recent work</p>
</div>
{}
<div
className="grid sm:grid-cols-2 md:grid-cols-3 gap-4"
>
{}
{}
<div
style={{ backgroundImage: `url(${proj1})` }}
className="shadow-lg shadow-[#040c16] group container rounded-md flex justify-center text-center items-center mx-auto content-div "
>
{}
<div className="opacity-0 group-hover:opacity-100 ">
<span className="text-2xl font bold text-white tracking-wider ">
Tesla clone
</span>
<div className="pt-8 text-center ">
<a href='/'>
<button
className="text-center rounded-lg px-4 py-3 m-2 bg-white text-gray-700 font-bold text-lg"
type="button"
onClick={(e) => {
e.preventDefault();
window.location.href='https://teslaclone-f2n.pages.dev/';
}}
>
Demo
</button>
</a>
<a href='/'>
<button
className="text-center rounded-lg px-4 py-3 m-2 bg-white text-gray-700 font-bold text-lg"
type="button"
onClick={(e) => {
e.preventDefault();
window.location.href='https://github.com/BeastPleasure/TeslaClone.git';
}}
>
Code
</button>
</a>
</div>
</div>
</div>
{}
{}
<div
style={{ backgroundImage: `url(${proj2})` }}
className="shadow-lg shadow-[#040c16] group container rounded-md flex justify-center text-center items-center mx-auto content-div "
>
{}
<div className="opacity-0 group-hover:opacity-100 ">
<span className="text-2xl font bold text-white tracking-wider ">
Airbnb clone
</span>
<div className="pt-8 text-center ">
<a href='/'>
<button
className="text-center rounded-lg px-4 py-3 m-2 bg-white text-gray-700 font-bold text-lg"
type="button"
onClick={(e) => {
e.preventDefault();
window.location.href='https://airbnbclone-8y7.pages.dev/';
}}
>
Demo
</button>
</a>
<a href='/'>
<button
className="text-center rounded-lg px-4 py-3 m-2 bg-white text-gray-700 font-bold text-lg"
type="button"
onClick={(e) => {
e.preventDefault();
window.location.href='https://github.com/BeastPleasure/AirbnbClone.git';
}}
>
Code
</button>
</a>
</div>
</div>
</div>
{}
{}
<div
style={{ backgroundImage: `url(${proj3})` }}
className="shadow-lg shadow-[#040c16] group container rounded-md flex justify-center text-center items-center mx-auto content-div "
>
{}
<div className="opacity-0 group-hover:opacity-100 ">
<span className="text-2xl font bold text-white tracking-wider ">
Imdb movie app
</span>
<div className="pt-8 text-center ">
<a href='/'>
<button
className="text-center rounded-lg px-4 py-3 m-2 bg-white text-gray-700 font-bold text-lg"
type="button"
onClick={(e) => {
e.preventDefault();
window.location.href='https://movieapp-5h5.pages.dev/';
}}
>
Demo
</button>
</a>
<a href='/'>
<button
className="text-center rounded-lg px-4 py-3 m-2 bg-white text-gray-700 font-bold text-lg"
type="button"
onClick={(e) => {
e.preventDefault();
window.location.href='https://github.com/BeastPleasure/MovieApp.git';
}}
>
Code
</button>
</a>
</div>
</div>
</div>
{}
{}
<div
style={{ backgroundImage: `url(${proj4})` }}
className="shadow-lg shadow-[#040c16] group container rounded-md flex justify-center text-center items-center mx-auto content-div "
>
{}
<div className="opacity-0 group-hover:opacity-100 ">
<span className="text-2xl font bold text-white tracking-wider ">
Uber Eats clone
</span>
<div className="pt-8 text-center ">
<a href='/'>
<button
className="text-center rounded-lg px-4 py-3 m-2 bg-white text-gray-700 font-bold text-lg"
type="button"
onClick={(e) => {
e.preventDefault();
window.location.href='https://foodapp-26w.pages.dev/';
}}
>
Demo
</button>
</a>
<a href='/'>
<button
className="text-center rounded-lg px-4 py-3 m-2 bg-white text-gray-700 font-bold text-lg"
type="button"
onClick={(e) => {
e.preventDefault();
window.location.href='https://github.com/BeastPleasure/TheFoodApp.git';
}}
>
Code
</button>
</a>
</div>
</div>
</div>
{}
{}
<div
style={{ backgroundImage: `url(${proj5})` }}
className="shadow-lg shadow-[#040c16] group container rounded-md flex justify-center text-center items-center mx-auto content-div "
>
{}
<div className="opacity-0 group-hover:opacity-100 ">
<span className="text-2xl font bold text-white tracking-wider ">
2048-Game
</span>
<div className="pt-8 text-center ">
<a href='/'>
<button
className="text-center rounded-lg px-4 py-3 m-2 bg-white text-gray-700 font-bold text-lg"
type="button"
onClick={(e) => {
e.preventDefault();
window.location.href='https://game2048-7n0.pages.dev/';
}}
>
Demo
</button>
</a>
<a href='/'>
<button
className="text-center rounded-lg px-4 py-3 m-2 bg-white text-gray-700 font-bold text-lg"
type="button"
onClick={(e) => {
e.preventDefault();
window.location.href='https://github.com/BeastPleasure/Game-2048.git';
}}
>
Code
</button>
</a>
</div>
</div>
</div>
{}
{}
<div
style={{ backgroundImage: `url(${proj6})` }}
className="shadow-lg shadow-[#040c16] group container rounded-md flex justify-center text-center items-center mx-auto content-div "
>
{}
<div className="opacity-0 group-hover:opacity-100 ">
<span className="text-2xl font bold text-white tracking-wider ">
Crypto Website
</span>
<div className="pt-8 text-center ">
<a href='/'>
<button
className="text-center rounded-lg px-4 py-3 m-2 bg-white text-gray-700 font-bold text-lg"
type="button"
onClick={(e) => {
e.preventDefault();
window.location.href='https://cryptowebsite.pages.dev/';
}}
>
Demo
</button>
</a>
<a href='/'>
<button
className="text-center rounded-lg px-4 py-3 m-2 bg-white text-gray-700 font-bold text-lg"
type="button"
onClick={(e) => {
e.preventDefault();
window.location.href='https://github.com/BeastPleasure/CryptoWebsite.git';
}}
>
Code
</button>
</a>
</div>
</div>
</div>
{}
</div>
</div>
</div>
);
};
export default Work;
Here's my Contact.jsx:
import React from 'react';
const Contact = () => {
return (
<div name='contact' className='w-full h-screen bg-[#0a192f] flex justify-center items-center p-4'>
<form method='POST' action="https://getform.io/f/1abdd257-d0b7-46b3-af7b-fc640301ea08" className='flex flex-col max-w-[600px] w-full'>
<div className='pb-8'>
<p className='text-4xl font-bold inline border-b-4 border-green-600 text-gray-300'> Contact</p>
<p className='text-gray-300 py-4'> Submit the form below and I'll get back to you very soon</p>
</div>
<input className='bg-[#ccd6f6] p-2' type="text" placeholder='Name' name='name' />
<input className='my-4 p-2 bg-[#ccd6f6]' type="email" placeholder='Email' name='email' />
<textarea className='bg-[#ccd6f6] p-2' name="message" rows="10" placeholder='Message'></textarea>
<button className='text-white border-2 hover:bg-yellow-600 hover:border-yellow-600 px-4 py-3 my-8 mx-auto flex items-center'> Let's Collaborate </button>
</form>
</div>
);
};
export default Contact;
Here's my Index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;900&display=swap');
@layer base {
body {
@apply font-[Raleway];
}
li {
@apply px-4;
@apply cursor-pointer;
}
}
.content-div {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 250px;
}
.content-div:hover {
background-image: linear-gradient(
to right,
rgba(112, 157, 255, 0.8),
hsla(242, 74%, 61%, 0.8)
)!important;
}
What I have tried:
I tried changing a few things but was still unable to get the components to have the same spacing (top and bottom).
Please keep the answer beginner friendly as I'm still very new to Tailwind CSS.
Thank You.
Submit an article or tip