HTML, CSS 및 Javascript를 사용한 반응형 개인 포트폴리오 디자인

34014 단어 incoder css html javascript

안녕하세요 친구 여러분, 오늘 이 블로그에서는 HTML, CSS 및 Javascript를 사용하여 반응형 개인 포트폴리오 디자인을 만드는 방법을 배웁니다. 이전 블로그에서 how to create a custom select input with a search option in HTML, CSS, and Javascript을 보았습니다. 이전에는 HTML, CSS 및 Javascript와 관련된 많은 프로젝트를 공유했습니다. 확인할 수 있습니다here. 이제 포트폴리오 디자인을 만들 차례입니다. 관심이 있으시면 이 블로그를 읽은 후 제 다른 자바스크립트 프로젝트를 확인하실 수 있습니다. 마이Javascript blogs .

온라인 포트폴리오(디지털 포트폴리오 또는 e-포트폴리오라고도 함)는 개인 작업의 온라인 표현입니다. 포트폴리오 웹사이트는 개인이나 회사에 대한 전문적인 정보를 제공하고 그들의 작업을 보여줍니다.

다음을 좋아할 수 있습니다.

Random Password Generator

Responsive Sidebar Menu Design

Glassmorphism login Form

Responsive Animated Card Design

이 [개인 포트폴리오] 사이트는 한 페이지에 Home, About, Services, Teams, Contact의 5개 섹션이 있으며 각 섹션이 매력적이고 눈길을 끕니다. 이 사이트의 홈 페이지 상단에는 왼쪽에 로고가 있는 고정 탐색 모음이 있고 오른쪽에는 일부 탐색 링크가 있습니다. 홈페이지 왼쪽에는 위의 이미지에서 볼 수 있듯이 작가의 직업에 대한 텍스트와 "작업 보기"및 "나를 고용하십시오"라는 두 개의 버튼이 있습니다.

이 포트폴리오가 마음에 들고 소스 코드를 얻고 싶다면 아래에 이 프로그램의 모든 코드를 제공했으며 이 프로그램의 소스 파일을 쉽게 다운로드할 수 있는 이 프로그램의 다운로드 링크도 제공했습니다. 이 포트폴리오를 크리에이티브 커스터마이즈와 함께 사용할 수 있으며 창의력을 발휘하여 이 포트폴리오를 한 단계 끌어올릴 수 있습니다.

미리보기를 사용할 수 있습니다here.

HTML 코드

<!-- --------------------- Created By InCoder --------------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home - Ashutosh Tiwari</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
</head>

<body>
    <!-- --------------------- Home Section --------------------- -->
    <section class="home-section" id="home-section">
        <header class="navbar">
            <div class="logo">
                <a href="javascript:void(0)">
                    <p>Ashutosh Tiwari</p>
                </a>
            </div>
            <nav>
                <div class="menuBtn">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <ul>
                    <li><a href="javascript:void(0)" id="home">Home</a></li>
                    <li><a href="#about-section" id="about">About</a></li>
                    <li><a href="#services-section" id="service">Services</a></li>
                    <li><a href="#team-section" id="team">Team</a></li>
                    <li><a href="#contact-section" id="contact">Contact</a></li>
                </ul>
            </nav>
        </header>
        <div class="home">
            <div class="welcomeSection">
                <h1>Welcome!</h1>
                <p>I am a <span class="auto-type"></span></p>
                <div class="welcomeAction">
                    <a href="#"><button class="inBtn inBtn-outline">View Work</button></a>
                    <a href="#"><button class="inBtn inBtn-primary">Hire Me</button></a>
                </div>
            </div>
        </div>
    </section>
    <!-- --------------------- Home Section End --------------------- -->

    <!-- --------------------- About Section --------------------- -->
    <section class="about-section" id="about-section">
        <div class="skills">
            <div class="sectionTitle">About Me</div>
            <div class="skillContainer">
                <div class="progressBar">
                    <p>HTML</p>
                    <div class="progress">
                        <div class="percent" data-percent="80%"></div>
                    </div>
                </div>
                <div class="progressBar">
                    <p>CSS</p>
                    <div class="progress">
                        <div class="percent" data-percent="60%"></div>
                    </div>
                </div>
                <div class="progressBar">
                    <p>Javascript</p>
                    <div class="progress">
                        <div class="percent" data-percent="40%"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="image">
        </div>
        <div class="details">
            <div class="name">
                <h6>Who Am I</h6>
                <h3>Ashutosh Tiwari</h3>
            </div>
            <h4 class="profession">Web Designer</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci rerum nemo architecto facilis quibusdam
                autem facere at nam. Ex fugiat molestiae perferendis ut<br><br> placeat explicabo eveniet numquam porro
                vero, quia nam possimus, non animi itaque eaque voluptate ad. Hic eveniet fuga enim libero mollitia
                consectetur vitae soluta maxime deleniti, ipsa in accusantium corporis tenetur</p>
            <div class="followMe">
                <p>Follow Me:</p>
                <i class="fa-brands fa-facebook"></i>
                <i class="fa-brands fa-twitter"></i>
                <i class="fa-brands fa-instagram"></i>
                <i class="fa-brands fa-dev"></i>
            </div>
        </div>
    </section>

    <!-- --------------------- About Section End --------------------- -->

    <!-- --------------------- Services Section --------------------- -->

    <section class="services-section" id="services-section">
        <div class="serviceTitle">Services</div>
        <div class="cards">
            <div class="card">
                <div class="icon">
                    <i class="fa-solid fa-pencil"></i>
                </div>
                <div class="title">
                    <p>Web Design</p>
                </div>
                <div class="desc">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, ipsam.
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fa-brands fa-codepen"></i>
                </div>
                <div class="title">
                    <p>Web Development</p>
                </div>
                <div class="desc">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, ipsam.
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fa-brands fa-blogger-b"></i>
                </div>
                <div class="title">
                    <p>Blogging</p>
                </div>
                <div class="desc">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, ipsam.
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fa-solid fa-handshake-simple"></i>
                </div>
                <div class="title">
                    <p>Freelance</p>
                </div>
                <div class="desc">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, ipsam.
                </div>
            </div>
        </div>
    </section>

    <!-- --------------------- Services Section End --------------------- -->

    <!-- --------------------- Team Section --------------------- -->

    <section class="team-section" id="team-section">
        <div class="teamTitle">My Team</div>
        <div class="tramMembers owl-carousel">
            <div class="memberCard">
                <div class="img"></div>
                <div class="name">Jhon Deo</div>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
            <div class="memberCard">
                <div class="img"></div>
                <div class="name">Jhon Deo</div>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
            <div class="memberCard">
                <div class="img"></div>
                <div class="name">Jhon Deo</div>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
            <div class="memberCard">
                <div class="img"></div>
                <div class="name">Jhon Deo</div>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
        </div>
    </section>

    <!-- --------------------- Team Section End --------------------- -->

    <!-- --------------------- Contact Section --------------------- -->

    <section class="contact-section" id="contact-section">
        <div class="contactTitle">Contact Me</div>
        <div class="container">
            <div class="details">
                <div class="phone">
                    <p>Phone: <br><span>+91 9684357286</span></p>
                </div>
                <div class="address">
                    <p>Address: <br><span>A 1858, xyz place state, country.</span></p>
                </div>
                <div class="email">
                    <p>Email: <br><span>[email protected]</span></p>
                </div>
            </div>
            <div class="contact-form">
                <div class="input-group">
                    <div class="input-field">
                        <input type="text" placeholder="Name:">
                    </div>
                    <div class="input-field">
                        <input type="email" placeholder="Email:">
                    </div>
                </div>
                <div class="input-field">
                    <textarea placeholder="Message:" cols="30" rows="6"></textarea>
                </div>
                <button class="inBtn inBtn-primary">Submit</button>
            </div>
        </div>
    </section>

    <!-- --------------------- Contact Section End --------------------- -->

    <!-- --------------------- Footer Section --------------------- -->

    <footer class="footer">
        <h4 class="footerLogo">Ashutosh Tiwari</h4>
        <div class="followMe">
            <i class="fa-brands fa-facebook"></i>
            <i class="fa-brands fa-twitter"></i>
            <i class="fa-brands fa-instagram"></i>
            <i class="fa-brands fa-instagram"></i>
            <i class="fa-brands fa-blogger-b"></i>
        </div>
        <div class="copyright">
            <p>Copyright <i class="fa-regular fa-copyright"></i> 2022 <span>Ashutosh Tiwari</span>. Created By InCoder</p>
        </div>
    </footer>

    <!-- --------------------- Footer Section End --------------------- -->

    <div class="backToTop">
        <i class="fa-solid fa-arrow-up"></i>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

CSS 코드

/* --------------------- Created By InCoder --------------------- */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background: linear-gradient(45deg, #010207, #00070d);
}

a {
  color: #fff;
  text-decoration: none;
}

/* ---------------- navbar ---------------- */

.navbar {
  display: flex;
  height: 4.2rem;
  padding: 0 1.5rem;
  position: relative;
  align-items: center;
  justify-content: space-between;
}

.navbar.active {
  z-index: 2;
  width: 100%;
  position: fixed;
  background: #021422;
  animation: showMenu 0.3s;
}

@keyframes showMenu {
  from {
    transform: translateY(-2rem);
  }
  to {
    transform: translateY(0rem);
  }
}

.navbar .logo {
  font-weight: 600;
  font-size: clamp(1rem, 4vw, 1.6rem);
}

.navbar nav ul {
  display: flex;
}

.navbar nav ul li {
  margin: 0 0.6rem;
  list-style: none;
  position: relative;
  text-transform: uppercase;
}

.navbar nav ul li::before {
  content: "";
  left: 0;
  top: -2px;
  height: 1px;
  background: #fff;
  position: absolute;
  transform: scale(0);
  width: calc(50% - 0.5rem);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.18, 0.02, 0, 1.99);
}

.navbar nav ul li:hover::before {
  transform: scale(1);
}

.navbar nav ul li::after {
  content: "";
  right: 0;
  bottom: -2px;
  height: 1px;
  background: #fff;
  position: absolute;
  transform: scale(0);
  width: calc(50% - 0.5rem);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.18, 0.02, 0, 1.99);
}

.navbar nav ul li:hover::after {
  transform: scale(1);
}

.menuBtn {
  z-index: 2;
  width: 3rem;
  height: 3rem;
  display: none;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}

.menuBtn span {
  height: 0.18rem;
  position: absolute;
  border-radius: 8px;
  background-color: #fff;
  transition: 0.3s;
}

.menuBtn span:nth-child(1) {
  left: 10%;
  width: 50%;
  transform: translateY(-12px);
}

.menuBtn.active span:nth-child(1) {
  left: 10%;
  width: 80%;
  transform: translateY(0px) rotate(45deg);
}

.menuBtn span:nth-child(2) {
  width: 80%;
}

.menuBtn.active span:nth-child(2) {
  opacity: 0;
  transform: translateX(40px);
}

.menuBtn span:nth-child(3) {
  left: 10%;
  width: 50%;
  transform: translateY(12px);
}

.menuBtn.active span:nth-child(3) {
  left: 10%;
  width: 80%;
  transform: translateY(0px) rotate(135deg);
}

/* ---------------- navbar end ---------------- */

/* ---------------- Home Section ---------------- */

.home-section {
  color: #fff;
  height: 100vh;
  overflow-y: hidden;
  background: url("https://drive.google.com/uc?id=1DXKOaZJ72G-FG07apoiXRDZXQ9KUNuLp&export=view")
    no-repeat right bottom / clamp(35rem, 50vw, 70rem);
}

.home {
  width: 100%;
  display: flex;
  min-height: 110vh;
  align-items: center;
}

.home .welcomeSection {
  width: 100%;
  height: 15vh;
  display: flex;
  align-items: center;
  justify-content: end;
  flex-direction: column;
}

.home .welcomeSection h1,
p {
  width: max-content;
}

.home .welcomeSection h1 {
  font-weight: 200;
  font-size: clamp(2rem, 8vw, 6rem);
}

.home .welcomeSection p {
  font-size: clamp(2rem, 8vw, 6rem);
}

.home .welcomeSection p span {
  color: #d28021;
}

.welcomeAction {
  margin-top: 1.5rem;
}

.welcomeAction button {
  margin: 0 0.6rem;
}

.welcomeAction button:last-child {
  padding: 0.4rem 2rem !important;
}

.inBtn {
  outline: none;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 50rem;
  padding: 0.4rem 1.4rem;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out,
    border 0.2s ease-in-out;
}

.inBtn-primary {
  color: #fff;
  background: #d28021;
  border: 2px solid #d28021;
}

.inBtn-primary:hover {
  color: #d28021;
  background: #ffffff;
  border: 2px solid #fff;
}

.inBtn-outline {
  color: #fff;
  background: transparent;
  border: 2px solid #fff;
}

.inBtn-outline:hover {
  color: #d28021;
  background: #ffffff;
  border: 2px solid #fff;
}

/* ---------------- Home Section End ---------------- */

/* ---------------- About Section ---------------- */

.about-section {
  height: 42rem;
  display: flex;
  background: #010910;
  justify-content: center;
}

.about-section :is(.skills, .image, .details) {
  width: 25rem;
  height: 100%;
  margin: 0 1rem;
  max-width: 25rem;
}

.about-section .sectionTitle {
  font-weight: 800;
  color: #0d141b;
  padding-top: 10.6rem;
  font-size: clamp(4rem, 4vw, 5rem);
  transition: color 0.3s ease-in-out;
}

.about-section:hover .sectionTitle {
  color: transparent;
  -webkit-text-stroke: 1px #212830;
}

.skillContainer {
  width: 100%;
  color: #fff;
  margin-top: 1rem;
  margin-left: 1rem;
}

.skillContainer .progressBar {
  margin-top: 1rem;
}

.skillContainer .progress {
  height: 0.5rem;
  margin-top: 0.8rem;
  border-radius: 50rem;
  background: #191f25;
}

.skillContainer .progress .percent {
  height: 100%;
  width: 0%;
  position: relative;
  border-radius: 50rem;
  transition: all 1.5s;
  background: #d28021;
}

.skillContainer .progress .percent::before {
  top: -16px;
  right: 0;
  font-size: 0.7rem;
  position: absolute;
  content: attr(data-percent);
}

.about-section .image {
  max-height: 100%;
  overflow: hidden;
  background: #0b141c
    url("https://drive.google.com/uc?id=1gTOPNHrZna3qVr2k-99ais05B6KS7jN2&export=view")
    no-repeat center bottom;
  background-position-y: 7rem;
}

.about-section .details {
  color: #fff;
  padding-top: 8.6rem;
}

.about-section .details .name h6 {
  font-size: 1rem;
  font-weight: 200;
  letter-spacing: 8px;
  text-transform: uppercase;
}

.about-section .details .name h3 {
  font-weight: 600;
  font-size: 1.5rem;
  margin-top: 0.5rem;
  width: max-content;
  letter-spacing: 2px;
  background: #d28021;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  padding: 0px 0.5rem 0.3rem 0.5rem;
}

.about-section .details p {
  font-size: 0.9rem;
  line-height: 26px;
  max-width: fit-content;
  color: rgb(255 255 255 / 60%);
}

.about-section .details .profession {
  font-weight: 400;
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}

.about-section .details .followMe {
  display: flex;
  align-items: center;
}

.about-section .details .followMe p {
  color: #d28021;
  margin-right: 0.4rem;
}

.about-section .details .followMe i {
  cursor: pointer;
  margin: 2rem 1rem;
  transition: color 0.3s;
  color: rgb(255 255 255 / 60%);
}

.about-section .details .followMe i:hover {
  color: #fff;
}

/* ---------------- About Section End ---------------- */

/* ---------------- Service Section ---------------- */

.services-section {
  background: #040c13;
  padding-bottom: 1.2rem;
}

.serviceTitle {
  font-weight: 800;
  color: #0d141b;
  text-align: center;
  padding-top: 1.6rem;
  font-size: clamp(4rem, 4vw, 5rem);
  transition: color 0.3s ease-in-out;
}

.services-section:hover .serviceTitle {
  color: transparent;
  -webkit-text-stroke: 1px #212830;
}

.services-section .cards {
  color: #fff;
  display: flex;
  margin-top: 1rem;
  align-items: center;
  justify-content: center;
}

.services-section .cards .card {
  width: 14rem;
  display: flex;
  margin: 0 0.4rem;
  max-width: 16rem;
  align-items: center;
  margin-bottom: 1.2rem;
  background: #010910;
  flex-direction: column;
  justify-content: center;
}

.services-section .cards .card .icon {
  z-index: 1;
  font-size: 3rem;
  color: #d28021;
  margin-top: 2rem;
  position: relative;
  margin-bottom: 1.6rem;
}

.services-section .cards .card .icon::before {
  content: "";
  top: 50%;
  left: 50%;
  width: 4rem;
  height: 4rem;
  padding: 0.4rem;
  position: absolute;
  border-radius: 1rem;
  background: rgb(255 255 255 / 5%);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}

.services-section .cards .card:hover {
  color: #fff !important;
}

.services-section .cards .card:hover .icon::before {
  background: rgb(210 128 33 / 10%);
  transform: translate(-50%, -50%) rotate(90deg);
}

.services-section .cards .card .desc {
  font-size: 0.8rem;
  margin-top: 1rem;
  max-width: 10rem;
  line-height: 20px;
  text-align: center;
  margin-bottom: 0.8rem;
  color: rgb(255 255 255 / 60%);
}

/* ---------------- Service Section End ---------------- */

/* ---------------- Team Section ---------------- */

.teamTitle {
  font-weight: 800;
  color: #010910;
  text-align: center;
  padding-top: 1.6rem;
  margin-bottom: 1rem;
  font-size: clamp(4rem, 4vw, 5rem);
  transition: color 0.3s ease-in-out;
}

.team-section:hover .teamTitle {
  color: transparent;
  -webkit-text-stroke: 1px #212830;
}

.tramMembers {
  color: #fff;
  display: flex;
  padding-top: 1rem;
  align-items: center;
  justify-content: center;
}

.tramMembers .memberCard {
  width: 16rem;
  display: flex;
  margin: 0 1rem;
  max-width: 20rem;
  align-items: center;
  margin-bottom: 1rem;
  border-radius: 0.8rem;
  flex-direction: column;
  justify-content: center;
  transition: background 0.3s ease-in-out;
  border: 2px solid rgb(255 255 255 / 6%);
}

.tramMembers .memberCard:hover {
  background: rgb(210 128 33 / 10%);
}

.memberCard .img {
  width: 6rem;
  height: 6rem;
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  border-radius: 50rem;
  background: url("https://drive.google.com/uc?id=1fEVU_QIj8GnWow6tEvWMHd772Sl-Qcsq&export=view")
    no-repeat center / 100%;
}

.memberCard .img::before {
  content: "";
  top: 50%;
  left: 50%;
  width: 120%;
  z-index: -1;
  height: 120%;
  position: absolute;
  border-radius: 50rem;
  transform: translate(-50%, -50%);
  background: rgb(255 255 255 / 3%);
  transition: background 0.3s ease-in-out;
}

.tramMembers .memberCard:hover .img::before {
  background: rgb(210 128 33 / 10%);
}

.memberCard .name {
  font-size: 1.2rem;
}

.memberCard p {
  font-size: 0.9rem;
  max-width: 12rem;
  text-align: center;
  margin-bottom: 1rem;
}

.owl-item.active {
  display: grid;
  place-items: center;
}

.owl-nav {
  display: none;
}

.owl-dots {
  display: flex;
  margin-bottom: 3rem;
  align-items: center;
  justify-content: center;
}

.owl-dots .owl-dot {
  width: 1.5rem;
  height: 0.8rem;
  margin: 0 0.4rem;
  border-radius: 50rem;
  transition: width 0.3s, transform 0.3s;
  border: 2px solid rgb(255 255 255 / 20%) !important;
}

.owl-dots .owl-dot.active {
  width: 2.5rem;
  transform: scale(1.1);
  background: rgb(13 20 27);
  border: 2px solid rgb(13 20 27) !important;
}

/* ---------------- Team Section End ---------------- */

/* ---------------- Contact Section ---------------- */

.contact-section {
  background: #040c13;
}

.contactTitle {
  font-weight: 800;
  color: #0d141b;
  text-align: center;
  padding-top: 1.6rem;
  font-size: clamp(4rem, 4vw, 5rem);
  transition: color 0.3s ease-in-out;
}

.contact-section:hover .contactTitle {
  color: transparent;
  -webkit-text-stroke: 1px #212830;
}

.contact-section .container {
  display: flex;
  margin-top: 1.2rem;
  align-items: center;
  padding-bottom: 2rem;
  justify-content: space-evenly;
}

.contact-section .container .details {
  margin-right: 1rem;
  color: rgb(255 255 255 / 40%);
}

.contact-section .container .details p {
  color: #d28021;
  margin-top: 0.8rem;
}

.contact-section .container .details span {
  color: rgb(255 255 255 / 40%);
}

.contact-section .container .contact-form .input-group {
  display: flex;
  margin-bottom: 1rem;
  justify-content: space-between;
}

.contact-section .container .contact-form .input-field {
  margin: 0 0.4rem;
}

.contact-section .container .contact-form .input-field input {
  height: 2.8rem;
  padding: 0 0.6rem;
  border-radius: 2rem;
  background: transparent;
  color: rgb(255 255 255 / 50%);
  border: 2px solid rgb(255 255 255 / 25%);
}

.contact-section .container .contact-form .input-field input:focus {
  outline: none;
  border: 2px solid #d28021 !important;
}

.contact-section .container .contact-form .input-field textarea {
  height: auto;
  width: 100%;
  padding: 0 0.6rem;
  padding-top: 0.4rem;
  border-radius: 1.2rem;
  background: transparent;
  color: rgb(255 255 255 / 50%);
  border: 2px solid rgb(255 255 255 / 25%);
}

.contact-section .container .contact-form .input-field textarea:focus {
  outline: none;
  border: 2px solid #d28021 !important;
}

.contact-section .container .contact-form button {
  float: right;
  margin-top: .6rem;
  margin-right: 1rem;
}

@media (max-width: 700px) {
  .contact-section .container {
    display: block;
  }

  .contact-section .container .details {
    width: 90%;
    margin: 0 1rem;
    margin-bottom: 2rem;
  }

  .contact-section .container .contact-form {
    margin: 0 .58rem;
    overflow-x: hidden;
  }

  .contact-section .container .contact-form .input-group {
    flex-direction: column;
  }

  .contact-section .container .contact-form .input-group input {
    width: 100%;
    margin-top: .5rem;
  }
}

/* ---------------- Contact Section End ---------------- */

/* ---------------- Footer Section ---------------- */

.footer{
  overflow-x: hidden;
  background: #010309;
}

.footer .footerLogo {
  font-size: 2rem;
  margin-top: .4rem;
  text-align: center;
  margin-bottom: .4rem;
  color: rgb(255 255 255 / 80%);
}

.footer .followMe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: rgb(255 255 255 / 50%);
}

.footer .followMe i {
  cursor: pointer;
  font-size: 1.4rem;
  position: relative;
  margin: 1.5rem 1.4rem;
}

.footer .followMe i::after{
  content: "";
  top: 50%;
  left: 50%;
  width: 160%;
  height: 160%;
  padding: .2rem;
  position: absolute;
  border-radius: .6rem;
  background: rgb(255 255 255 / 5%);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.footer .followMe i:hover::after {
  background: rgb(210 128 33 / 10%);
  transform: translate(-50%, -50%) rotate(90deg);
}

.footer .copyright {
  display: flex;
  margin-bottom: 1rem;
  justify-content: center;
  color: rgb(255 255 255 / 50%);
}

.footer .copyright span {
  cursor: pointer;
  color: #d28021;
}

/* ---------------- Footer Section End ---------------- */

.backToTop {
  opacity: 0;
  right: 1rem;
  bottom: 1rem;
  width: 2.5rem;
  display: grid;
  color: #fff;
  height: 2.5rem;
  cursor: pointer;
  position: fixed;
  place-items: center;
  pointer-events: none;
  border-radius: 0.4rem;
  background: #021422;
  transition: opacity 0.3s ease-in-out;
}

.backToTop.show {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 665px) {
  .navbar nav ul {
    top: 0%;
    z-index: 1;
    left: -100%;
    width: 100%;
    height: 100vh;
    position: absolute;
    align-items: center;
    background: #010910;
    flex-direction: column;
    justify-content: center;
    transition: left 0.4s ease-in-out;
  }

  .navbar nav ul.show {
    left: 0;
  }

  .navbar nav ul li {
    font-size: 1.2rem;
    margin: clamp(1rem, 4vh, 1.8rem) 0;
  }

  .menuBtn {
    display: flex;
  }

  .services-section .cards {
    display: grid;
    grid-template-columns: auto auto;
  }
}

@media (max-width: 480px) {
  .services-section .cards {
    display: grid;
    overflow-x: hidden;
    margin: 0 1rem;
    grid-template-columns: auto;
  }

  .services-section .cards .card {
    width: 20rem;
    max-width: 20rem;
  }
}

@media (max-width: 800px) {
  .about-section {
    flex-wrap: wrap;
  }

  .skillContainer {
    width: calc(100% - 3rem);
  }

  .about-section .sectionTitle {
    padding-top: 3.8rem;
  }

  .about-section .sectionTitle {
    text-align: center;
    font-size: clamp(3rem, 4vw, 5rem);
  }

  .about-section :is(.skills, .details) {
    height: auto;
  }

  .about-section {
    height: 100%;
  }

  .welcomeAction button:last-child {
    padding: 0.4rem 1rem !important;
  }

  .about-section .image {
    height: 70vh;
    margin-top: 3rem;
    margin-bottom: 2rem;
    background-size: 25rem;
    background-position-y: 0%;
  }

  .about-section .details {
    padding-top: 1rem;
  }
}

자바스크립트 코드

var typed = new Typed('.auto-type', {
    strings: ["Developer.",
        "Designer.",
        "Blogger.",
        "Freelancer."],
    smartBackspace: true,
    typeSpeed: 100,
    typeSpeed: 100,
    backSpeed: 50,
    loop: true,
})

let btn = document.querySelector('.menuBtn')
let menu = document.querySelector('.navbar nav ul')
let links = document.querySelectorAll('.navbar nav ul li')
let navbar = document.querySelector('.navbar')
let backToTop = document.querySelector('.backToTop')
let progressPercent = document.querySelectorAll('.percent')

links.forEach(link => {
    link.addEventListener('click', e => {
        let id = e.target.getAttribute('id')
        if(id == 'home'){
            window.scrollTo(0, 0)
        }
    })
})


btn.addEventListener('click', function () {
    btn.classList.toggle('active')
    menu.classList.toggle('show')
})

backToTop.addEventListener('click', function () {
    window.scrollTo(0, 0)
})

function setNavbarClass() {
    if (window.scrollY > 167) {
        navbar.classList.add('active')
        backToTop.classList.add('show')
    } else {
        navbar.classList.remove('active')
        backToTop.classList.remove('show')
    }
}

function progress() {
    progressPercent.forEach(percentDiv => {
        if (window.scrollY >= 533) {
            let percent = percentDiv.dataset.percent
            percentDiv.style.width = percent
        }
    })
}
progress()
setNavbarClass()

window.addEventListener('scroll', (e) => {
    setNavbarClass()
    progress()
})

var owl = $('.owl-carousel');
owl.owlCarousel({
    loop: true,
    nav: true,
    margin: 10,
    center: true,
    autoplay: true,
    autoplayTimeout: 1500,
    responsive: {
        0: {
            items: 1
        },
        540: {
            items: 2
        },
        960: {
            items: 3
        },
        1200: {
            items: 4
        },
        1500: {
            items: 5
        }
    }
});

Reference

이 문제에 관하여(HTML, CSS 및 Javascript를 사용한 반응형 개인 포트폴리오 디자인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/incoderweb/responsive-personal-portfolio-design-using-html-css-and-javascript-2mfh

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

StoreKit 오류 처리

C 프로그래밍을 처음 접하는 사람을 도와주세요: 이중 연결 목록

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다