Code along with Ernest Achiever from 📺 youtube
Re-learn basic of frontend web development after not actively code for the last few months. The project is about creating portfolio web layout using Next JS.
Preview 👓
Demo: https://nextjs-portfolio-xvferdy.vercel.app
npm install
npm run dev
☑️ max-content
width: max-content
& height: fit-content
sizing html element base on content's height & height.
h3 {
margin: 1.2rem 0 2rem;
position: relative;
width: fit-content;
z-index: 3;
&::before {
content: "";
opacity: 0;
bottom: 0;
// width: 175px;
width: 100%;
height: 14px;
transform: skew(-10deg, -3deg);
background: darken($primary-variant-color, 10%);
z-index: -1;
position: absolute;
transition: 0.3s ease-in-out;
}
☑️ Transparent gradient
background: linear-gradient($primary-color, transparent)
.me {
background: linear-gradient($primary-color, transparent);
width: 22rem;
height: 30rem;
position: absolute;
left: calc(50% - 22rem / 2);
margin-top: 4rem;
border-radius: 12rem 12rem 0 0;
overflow: hidden;
padding: 5rem 1.5rem 1.5rem 1.5rem;
}
☑️ Unselectable element
user-select: none
good for things like carousel.
.quote {
background-color: $background-variant-color;
min-height: 320px;
text-align: center;
padding: 2rem;
border-radius: 2rem;
user-select: none;
}
☑️ word-break
word-break: break-all
to wrap long element (that has no space).
&__option {
background-color: $background-variant-color;
padding: 1.2rem;
border-radius: 1.2rem;
text-align: center;
border: 1px solid transparent;
transition: $transition;
cursor: default;
word-break: break-all;
}
☑️ Auto reset on form submit
e.target.reset()
often used with useRef()
const sendEmail = (e) => {
e.preventDefault();
console.log(form);
emailjs.sendForm(serviceId, templateId, form.current, userId)
e.target.reset();
};