내 Blog 만들기

내 블로그 만들기

https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/

iPortfolio - Bootstrap Portfolio Websites Template | BootstrapMade

iPortfolio is a modern personal CV and portfolio HTML template. It's creative, minimal and clean design. iPortfolio can be used for many purposes starting from minimal portfolios, freelancers, graphic designers, illustrators, photographers and many others

bootstrapmade.com

테마 다운로드

iPortfolio.zip

4.59MB

폴더 구성

cmd 창 켜서

npx create-react-app frontend-typescript --template typescript 입력

assets, components/common, pages, services, types, utils 폴더만들기

public assets에 원본 파일 다 넣기

src assets에도 원본파일 다 넣기

common에 HeaderCom.tsx, FooterCom.tsx, NotFound.tsx 생성

index.html

원본에서 옮기기

<!DOCTYPE html>

<head>

<meta

name="description"

content="Web site created using create-react-app"

<!--

manifest.json provides metadata used when your web app is installed on a

user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

-->

<!--

Notice the use of %PUBLIC_URL% in the tags above.

It will be replaced with the URL of the `public` folder during the build.

Only files inside the `public` folder can be referenced from the HTML.

Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will

work correctly both with client-side routing and a non-root public URL.

Learn how to configure a non-root public URL by running `npm run build`.

-->

<title>React App</title>

<link

href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"

rel="stylesheet"

<link

href="assets/vendor/bootstrap/css/bootstrap.min.css"

rel="stylesheet"

<link

href="assets/vendor/bootstrap-icons/bootstrap-icons.css"

rel="stylesheet"

<link

href="assets/vendor/glightbox/css/glightbox.min.css"

rel="stylesheet"

</head>

<body>

<!--

This HTML file is a template.

If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.

The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.

To create a production bundle, use `npm run build` or `yarn build`.

-->

</body>

</html>

HeaderCom.tsx

원본 index.html 파일의 Header 부분 가져오기

오류 수정

주석 형식 바꾸기

class -> className으로 바꾸기

img 태그 닫기

// HeaderCom.tsx : rfce

import React from 'react'

function HeaderCom() {

return (

{/*  */}

<h1 className="text-light"><a href="index.html">Do Kwonjae</a></h1>

</div>

<ul>

<li><a href="#about" className="nav-link scrollto"><i className="bx bx-user"></i> <span>About</span></a></li>

<li><a href="#resume" className="nav-link scrollto"><i className="bx bx-file-blank"></i> <span>Resume</span></a></li>

<li><a href="#portfolio" className="nav-link scrollto"><i className="bx bx-book-content"></i> <span>Portfolio</span></a></li>

<li><a href="#services" className="nav-link scrollto"><i className="bx bx-server"></i> <span>Services</span></a></li>

<li><a href="#contact" className="nav-link scrollto"><i className="bx bx-envelope"></i> <span>Contact</span></a></li>

</ul>

</nav>

{/*  */}

</div>

</header>

{/*  */}

</>

)

}

export default HeaderCom

FooterCom.tsx

원본 index.html 파일의 Footer 부분 가져오기

오류 수정

주석 형식 바꾸기

class -> className으로 바꾸기

img 태그 닫기

// FooterCom.tsx : rfce

import React from "react";

function FooterCom() {

return (

{/*  */}

<span>iPortfolio</span>

</strong>

</div>

</div>

</footer>

{/*  */}

</>

);

}

export default FooterCom;

NotFound.tsx

// NotFound.tsx : rfce

import React from 'react'

function NotFound() {

return (

<div>NotFound</div>

)

}

export default NotFound

index.tsx

-- BrowserRouter로 수정

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(

document.getElementById('root') as HTMLElement

);

root.render(

<App />

</BrowserRouter>

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

app.tsx

수정

import React from 'react';

import "./assets/css/style.css";

import './App.css';

import { Route, Routes } from 'react-router-dom';

import HeaderCom from './components/common/HeaderCom';

import Home from './pages/Home';

import FooterCom from './components/common/FooterCom';

import NotFound from './components/common/NotFound';

function App() {

return (

{/* 머리말 */}

{/* 본문 */}

</Routes>

{/* 꼬리말 */}

</div>

);

}

export default App;

pages에 home.tsx 만들기

Home.tsx

수정하기 원본 index.html에서 들고와서

오류 해결

주석처리
img 태그 닫기
div 숫자형식 "" 대신 {}로 감싸기
for -> htmlFor
frameborder="0" style="border:0; width: 100%; height: 290px;" allowfullscreen> ->
frameBorder={0} style={{border:0, width: 100 + "%", height: 290 + "px"}} allowFullScreen>

import React from 'react'

function Home() {

return (

{/*  */}

<h1>Alex Smith</h1>

</div>

</section>

{/*  */}

{/*  */}

<h2>About</h2>

<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>

</div>

</div>

<h3>UI/UX Designer & Web Developer.</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

magna aliqua.

</p>

<ul>

<li><i className="bi bi-chevron-right"></i> <strong>Birthday:</strong> <span>1 May 1995</span></li>

<li><i className="bi bi-chevron-right"></i> <strong>Website:</strong> <span>www.example.com</span></li>

<li><i className="bi bi-chevron-right"></i> <strong>Phone:</strong> <span>+123 456 7890</span></li>

</ul>

</div>

<ul>

<li><i className="bi bi-chevron-right"></i> <strong>Degree:</strong> <span>Master</span></li>

<li><i className="bi bi-chevron-right"></i> <strong>PhEmailone:</strong> <span>email@example.com</span></li>

<li><i className="bi bi-chevron-right"></i> <strong>Freelance:</strong> <span>Available</span></li>

</ul>

</div>

<p>

Officiis eligendi itaque labore et dolorum mollitia officiis optio vero. Quisquam sunt adipisci omnis et ut. Nulla accusantium dolor incidunt officia tempore. Et eius omnis.

Cupiditate ut dicta maxime officiis quidem quia. Sed et consectetur qui quia repellendus itaque neque. Aliquid amet quidem ut quaerat cupiditate. Ab et eum qui repellendus omnis culpa magni laudantium dolores.

</p>

</div>

</section>

{/*  */}

{/*  */}

<h2>Facts</h2>

</div>

<p><strong>Happy Clients</strong> consequuntur quae</p>

</div>

<p><strong>Projects</strong> adipisci atque cum quia aut</p>

</div>

<p><strong>Hours Of Support</strong> aut commodi quaerat</p>

</div>

<p><strong>Hard Workers</strong> rerum asperiores dolor</p>

</div>

</section>

{/*  */}

{/*  */}

<h2>Skills</h2>

</div>

</div>

</div>

<span className="skill">JavaScript <i className="val">75%</i></span>

</div>

</div>

<span className="skill">WordPress/CMS <i className="val">90%</i></span>

</div>

<span className="skill">Photoshop <i className="val">55%</i></span>

</div>

</section>

{/*  */}

{/*  */}

<h2>Resume</h2>

</div>

<h3 className="resume-title">Sumary</h3>

<h4>Alex Smith</h4>

<p><em>Innovative and deadline-driven Graphic Designer with 3+ years of experience designing and developing user-centered digital/print marketing material from initial concept to final, polished deliverable.</em></p>

<ul>

<li>Portland par 127,Orlando, FL</li>

<li>alice.barkley@example.com</li>

</ul>

</div>

<h3 className="resume-title">Education</h3>

<h4>Master of Fine Arts & Graphic Design</h4>

<p><em>Rochester Institute of Technology, Rochester, NY</em></p>

<p>Qui deserunt veniam. Et sed aliquam labore tempore sed quisquam iusto autem sit. Ea vero voluptatum qui ut dignissimos deleniti nerada porti sand markend</p>

</div>

<h4>Bachelor of Fine Arts & Graphic Design</h4>

<p><em>Rochester Institute of Technology, Rochester, NY</em></p>

<p>Quia nobis sequi est occaecati aut. Repudiandae et iusto quae reiciendis et quis Eius vel ratione eius unde vitae rerum voluptates asperiores voluptatem Earum molestiae consequatur neque etlon sader mart dila</p>

</div>

<h3 className="resume-title">Professional Experience</h3>

<h4>Senior graphic design specialist</h4>

<h5>2019 - Present</h5>

<p><em>Experion, New York, NY </em></p>

<ul>

<li>Lead in the design, development, and implementation of the graphic, layout, and production communication materials</li>

<li>Delegate tasks to the 7 members of the design team and provide counsel on all aspects of the project. </li>

<li>Supervise the assessment of all graphic materials in order to ensure quality and accuracy of the design</li>

<li>Oversee the efficient use of production project budgets ranging from $2,000 - $25,000</li>

</ul>

</div>

<h4>Graphic design specialist</h4>

<p><em>Stepping Stone Advertising, New York, NY</em></p>

<ul>

<li>Developed numerous marketing programs (logos, brochures,infographics, presentations, and advertisements).</li>

<li>Managed up to 5 projects or tasks at a given time while under pressure</li>

<li>Recommended and consulted with clients on the most appropriate graphic design</li>

<li>Created 4+ design presentations and proposals a month htmlFor clients and account managers</li>

</ul>

</div>

</section>

{/*  */}

{/*  */}

<h2>Portfolio</h2>

</div>

</ul>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

{/*  */}

{/*  */}

<h2>Services</h2>

</div>

<h4 className="title"><a href="">Lorem Ipsum</a></h4>

<p className="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident</p>

</div>

<h4 className="title"><a href="">Dolor Sitema</a></h4>

<p className="description">Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat tarad limino ata</p>

</div>

<h4 className="title"><a href="">Sed ut perspiciatis</a></h4>

<p className="description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>

</div>

<h4 className="title"><a href="">Magni Dolores</a></h4>

<p className="description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

</div>

<p className="description">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque</p>

</div>

<h4 className="title"><a href="">Eiusmod Tempor</a></h4>

<p className="description">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi</p>

</div>

</section>

{/*  */}

{/*  */}

<h2>Testimonials</h2>

</div>

<p>

Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper.

</p>

<h3>Saul Goodman</h3>

<h4>Ceo & Founder</h4>

</div>

{/*  */}

<p>

Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa.

</p>

<h3>Sara Wilsson</h3>

<h4>Designer</h4>

</div>

{/*  */}

<p>

Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint minim.

</p>

<h3>Jena Karlis</h3>

<h4>Store Owner</h4>

</div>

{/*  */}

<p>

Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem dolore labore illum veniam.

</p>

<h3>Matt Brandon</h3>

<h4>Freelancer</h4>

</div>

{/*  */}

<p>

Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster veniam enim culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam culpa fore nisi cillum quid.

</p>

<h3>John Larson</h3>

<h4>Entrepreneur</h4>

</div>

{/*  */}

</div>

</div>

</section>

{/*  */}

{/*  */}

<h2>Contact</h2>

</div>

<h4>Location:</h4>

<p>A108 Adam Street, New York, NY 535022</p>

</div>

<h4>Email:</h4>

<p>info@example.com</p>

</div>

</div>

</div>

</div>

<label htmlFor="name">Your Email</label>

</div>

<label htmlFor="name">Subject</label>

</div>

<label htmlFor="name">Message</label>

</div>

<div className="loading">Loading</div>

<div className="sent-message">Your message has been sent. Thank you!</div>

</div>

<div className="text-center"><button type="submit">Send Message</button></div>

</form>

</div>

</section>

{/*  */}

</main>

{/*  */}

</>

)

}

export default Home

main.js

/**

* Template Name: iPortfolio

* Updated: Sep 18 2023 with Bootstrap v5.3.2

* Template URL: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/

* Author: BootstrapMade.com

* License: https://bootstrapmade.com/license/

// TODO: 생성자 함수 사용 import

// @srexi/purecounterjs import

import PureCounter from "@srexi/purecounterjs";

// aos import

import AOS from "aos";

// glightbox import

import GLightbox from "glightbox";

// swiper import

import Swiper from "swiper";

/* eslint-disable */

function initMain(){

(function() {

"use strict";

/**

* Easy selector helper function

const select = (el, all = false) => {

el = el.trim()

if (all) {

return [...document.querySelectorAll(el)]

} else {

return document.querySelector(el)

}

/**

* Easy event listener function

const on = (type, el, listener, all = false) => {

let selectEl = select(el, all)

if (selectEl) {

if (all) {

selectEl.forEach(e => e.addEventListener(type, listener))

} else {

selectEl.addEventListener(type, listener)

}

/**

* Easy on scroll event listener

const onscroll = (el, listener) => {

el.addEventListener('scroll', listener)

}

/**

* Navbar links active state on scroll

let navbarlinks = select('#navbar .scrollto', true)

const navbarlinksActive = () => {

let position = window.scrollY + 200

navbarlinks.forEach(navbarlink => {

if (!navbarlink.hash) return

let section = select(navbarlink.hash)

if (!section) return

if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {

navbarlink.classList.add('active')

} else {

navbarlink.classList.remove('active')

}

})

}

window.addEventListener('load', navbarlinksActive)

onscroll(document, navbarlinksActive)

/**

* Scrolls to an element with header offset

const scrollto = (el) => {

let elementPos = select(el).offsetTop

window.scrollTo({

top: elementPos,

behavior: 'smooth'

})

}

/**

* Back to top button

let backtotop = select('.back-to-top')

if (backtotop) {

const toggleBacktotop = () => {

if (window.scrollY > 100) {

backtotop.classList.add('active')

} else {

backtotop.classList.remove('active')

}

window.addEventListener('load', toggleBacktotop)

onscroll(document, toggleBacktotop)

}

/**

* Mobile nav toggle

on('click', '.mobile-nav-toggle', function(e) {

select('body').classList.toggle('mobile-nav-active')

this.classList.toggle('bi-list')

this.classList.toggle('bi-x')

})

/**

* Scrool with ofset on links with a class name .scrollto

on('click', '.scrollto', function(e) {

if (select(this.hash)) {

e.preventDefault()

let body = select('body')

if (body.classList.contains('mobile-nav-active')) {

body.classList.remove('mobile-nav-active')

let navbarToggle = select('.mobile-nav-toggle')

navbarToggle.classList.toggle('bi-list')

navbarToggle.classList.toggle('bi-x')

}

scrollto(this.hash)

}

}, true)

/**

* Scroll with ofset on page load with hash links in the url

window.addEventListener('load', () => {

if (window.location.hash) {

if (select(window.location.hash)) {

scrollto(window.location.hash)

}

});

/**

* Hero type effect

const typed = select('.typed')

if (typed) {

let typed_strings = typed.getAttribute('data-typed-items')

typed_strings = typed_strings.split(',')

new Typed('.typed', {

strings: typed_strings,

loop: true,

typeSpeed: 100,

backSpeed: 50,

backDelay: 2000

});

}

/**

* Skills animation

let skilsContent = select('.skills-content');

if (skilsContent) {

new Waypoint({

element: skilsContent,

offset: '80%',

handler: function(direction) {

let progress = select('.progress .progress-bar', true);

progress.forEach((el) => {

el.style.width = el.getAttribute('aria-valuenow') + '%'

});

}

})

}

/**

* Porfolio isotope and filter

window.addEventListener('load', () => {

let portfolioContainer = select('.portfolio-container');

if (portfolioContainer) {

let portfolioIsotope = new Isotope(portfolioContainer, {

itemSelector: '.portfolio-item'

});

let portfolioFilters = select('#portfolio-flters li', true);

on('click', '#portfolio-flters li', function(e) {

e.preventDefault();

portfolioFilters.forEach(function(el) {

el.classList.remove('filter-active');

});

this.classList.add('filter-active');

portfolioIsotope.arrange({

filter: this.getAttribute('data-filter')

});

portfolioIsotope.on('arrangeComplete', function() {

AOS.refresh()

});

}, true);

}

});

/**

* Initiate portfolio lightbox

const portfolioLightbox = GLightbox({

selector: '.portfolio-lightbox'

});

/**

* Portfolio details slider

new Swiper('.portfolio-details-slider', {

speed: 400,

loop: true,

autoplay: {

delay: 5000,

disableOnInteraction: false

pagination: {

el: '.swiper-pagination',

type: 'bullets',

clickable: true

}

});

/**

* Testimonials slider

new Swiper('.testimonials-slider', {

speed: 600,

loop: true,

autoplay: {

delay: 5000,

disableOnInteraction: false

slidesPerView: 'auto',

pagination: {

el: '.swiper-pagination',

type: 'bullets',

clickable: true

breakpoints: {

320: {

slidesPerView: 1,

spaceBetween: 20

1200: {

slidesPerView: 3,

spaceBetween: 20

}

});

/**

* Animation on scroll

window.addEventListener('load', () => {

AOS.init({

duration: 1000,

easing: 'ease-in-out',

once: true,

mirror: false

})

});

/**

* Initiate Pure Counter

new PureCounter();

})()

}

export default initMain;

저작자표시

index.html

HeaderCom.tsx

FooterCom.tsx

NotFound.tsx

index.tsx

app.tsx

pages에 home.tsx 만들기 Home.tsx

main.js

티스토리툴바

pages에 home.tsx 만들기

Home.tsx