A sleek, minimalist landing page that connects your audience to all of your online presences.
๐ Built with Next.js for optimal performance
๐ Styled using TailwindCSS for a modern look
๐ ๏ธ Easy configuration to add or remove links
There are two methods to get started with LinkFolio:
Edit the user.config.ts
file in the app
directory to personalize and tailor your profile to your preferences.
Using this method, you can quickly deploy a LinkFolio page with Vercel using the provided template.
Installation
Install LinkFolio in your Next.js / Tailwind project:
npm install linkfolio
Or using Yarn / Pnpm:
yarn add linkfolio
pnpm add linkfolio
Implementation
Import and utilize the LinkFolio
component in your project:
import { LinkFolio } from "linkfolio";
Add your configuration:
const userConfig = {
avatarSrc: "/assets/avatar.webp",
avatarAlt: "Avatar",
fullName: "Your Name",
alias: "@your_alias",
metaTitle: "LinkFolio",
metaDescription: "LinkFolio",
socialNetworks: [
{
url: "https://github.com/{your_alias}",
iconSrc: githubIcon,
title: "GitHub",
description: "Open-source contributions",
},
],
};
function MyPage() {
return <LinkFolio userConfig={userConfig} />;
}
Add Typewriter effect on Alias:
const userConfig = {
enableTypingAlias: true,
};
LinkFolio uses TailwindCSS for styling. If you wish to customize styles, you can use the default Tailwind configuration tailwind.config.ts
provided with the package.
LinfFolio uses the Raleway
font by default. If you wish to change the font, you can update the font-family
in layout.tsx
:
import { Roboto } from "next/font/google";
const font = Roboto({
weight: "400",
subsets: ["latin"],
display: "swap",
});
To ensure the integrity and functionality of the project, we utilize Playwright for end-to-end testing.
To execute the Playwright tests, run the following command:
npx playwright test
As the project evolves, you might update the UI or functionality, causing the existing reference snapshots to be outdated. In such cases, you'll need to update the snapshots to match the latest changes.
To update the reference snapshots, run:
npx playwright test --update-snapshots
This will run the tests and update any snapshots that don't match the current render of your page.
For a practical implementation of LinkFolio, check out my example repository: My LinkFolio Page.
This repository demonstrates how to integrate and customize LinkFolio in a Next.js project.
If you have ideas to improve or found a bug, do not hesitate to create an issue or submit a pull request.
LinkFolio is open-sourced under the MIT License.