xvferdy / nextjs-portfolio

⭐ ⭐ ⭐ ⭐ ⭐

nextjs-portfolio

Code along with Ernest Achiever from 📺 youtube

About the Project

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

Installation

npm install

npm run dev

📦 Highlighted package

• emailjs-com
• react-icons
• swiper

What I learned

☑️ max-content

width: max-content & height: fit-content sizing html element base on content's height & height.

styles/scss/components_portfolio.scss

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)

styles/scss/components_header.scss

.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.

styles/scss/components_quotes.scss

.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).

styles/scss/components_contact.scss

&__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()

components/Contact.jsx

  const sendEmail = (e) => {
    e.preventDefault();
    console.log(form);
    emailjs.sendForm(serviceId, templateId, form.current, userId)
    e.target.reset();
  };

To Top ⤴️