⚡ Next Bootstrap Portfolio

• A Next.js app to show a person's portfolio using HTML, Javascript & Bootstrap/Bootswatch styling.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Next Bootstrap Portfolio
  • 📄 Table of contents
  • 📚 General Info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General Info

• Bootstrap navbar, progress bar used
• Vercel Next.js is for server-rendered react apps. It has automatic code splitting, simple page-based routing, built-in CSS support and hot reloading. Every component file in the pages folder is treated as a page.
• Next Custom Document

📷 Screenshots

.

📶 Technologies

• Node.js v16 javascript runtime using the Chrome V8 engine.
• React v17 Javascript library.
• Next v12 minimalist framework for rendering react apps on the server.
• Bootstrap v5
• Bootswatch v5 theme
• NProgress bars v0.2.0, requires nprogress.css, imported in _document.js
• Classnames v2 JavaScript utility for conditionally joining classNames together.

💾 Setup

• npm run dev runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

💻 Code Examples

• Layout.js effects to handle navigation

	useEffect(() => {
    const handleRouteChange = (url) => {
      NProgress.start();
    }

		router.events.on("routeChangeStart", handleRouteChange);
		router.events.on("routeChangeComplete", () => NProgress.done());
		router.events.on("routeChangeError", () => NProgress.done());

		return () => {
			router.events.off("routeChangeStart", handleRouteChange);
		};
	}, []);

📋 Status & To-Do List

• Status: Working
• To-Do: Test SSR, improve styling, update data, fix menu burger button toggle if needed,

👏 Inspiration

• Fazt code: Nextjs Portafolio Simple | Ejemplo Práctico de Next.js in Spanish
• Pagepro: PROS AND CONS OF NEXTJS IN 2021

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: [email protected]