Portfolio

Portfolio is a free and open-source personal portfolio website template built with Nuxt.js 3, SCSS, and GSAP, designed to showcase a developer's projects, skills, and career summary. It was created by Bogdan Kostyuk and published on GitHub under the username logotip4ik, with the code released under CC0 1.0 and the images and project contents under CC BY-NC-SA 4.0.

What is Portfolio?

Portfolio is a single-page application template for developers who want a personal portfolio site with animated visuals and smooth scrolling. It takes content such as project descriptions, images, and a developer biography as input, and produces a static Nuxt.js website that can be deployed to any static host. The template runs on Nuxt.js v3, uses Vue 3 under the hood, and the author states that no backend is used — only email forwarding configured through their domain provider, Porkbun.

Key Features

• Nuxt.js 3 core — Built on Nuxt.js v3, the latest version of the Vue-based framework, providing file-based routing, server-side rendering, and static site generation out of the box.
• GSAP animations — Uses GreenSock Animation Platform (GSAP) for smooth, timeline-based transitions between sections and elements.
• OGL background — The landing page background is rendered with OGL, a minimal WebGL library; the author previously used Three.js and mentions alternatives like metaballs.js and particles.js.
• LocomotiveScroll — Integrates LocomotiveScroll to deliver a smooth, inertia-based scrolling experience on desktop PCs.
• SCSS styling — The styles are written in SCSS (Sass), allowing for variables, nesting, and mixins in the portfolio's design system.
• No backend required — The site runs without any server-side logic; contact form emails are handled by forwarding to the domain provider (Porkbun).
• Dual license — Code is freely reusable under CC0 1.0, while the images and project content are protected under CC BY-NC-SA 4.0.

Who is it for?

• Frontend developers who want a ready-made portfolio with modern animations and can customize the Nuxt.js source code to fit their own projects.
• Students or junior developers looking for a clean portfolio template to host on a static platform like Cloudflare Pages (the author's previous portfolio is hosted on pages.dev).
• Design-minded developers who value smooth scroll and WebGL visuals and want to learn how these libraries are integrated into a real project.

What can you do with Portfolio?

• Showcase your projects — display project descriptions, images, and links in a visually animated layout.
• Tell your developer story — present a summary of your learning path and career milestones in a single-page format.
• Deploy quickly — clone the repository, install dependencies with yarn or npm, and run a local dev server; build and deploy to static hosting.

How does Portfolio work?

1. Clone or fork the GitHub repository with git clone https://github.com/logotip4ik/portfolio.
2. Install dependencies using yarn or npm install.
3. Start the local development server with yarn dev or npm run dev.

FAQ

Is Portfolio free to use?

The code is released under CC0 1.0, which means you can use, modify, and redistribute it freely without asking permission. However, the images and project contents on the site are under CC BY-NC-SA 4.0, so you cannot reuse those assets commercially without following the license terms.

Does Portfolio require a backend?

No. The template uses no backend. The author only added email forwarding to their domain provider (Porkbun), so any contact form submissions are handled by external email services rather than custom server code.

What frontend libraries are used?

The template builds on Nuxt.js 3 with Vue 3, and uses GSAP for animations, OGL for the WebGL background, LocomotiveScroll for smooth scrolling, and SCSS for styling. The author notes they previously used Three.js before switching to OGL.

Can I build my own portfolio from this?

Yes. The repository includes full source code, and the usage section documents cloning, installing, and running the project locally with yarn or npm. You can then replace the content and styles to fit your personal brand.