Open source configurable portfolio project
- Ability to dynamically add projects to the portfolio
- Fully resposive, mobile friendly design
- Easy to edit and extend
- To get started, just clone the repository and run
npm install && npm run dev
:
npm install
npm run dev
Using yarn:
yarn
yarn dev
Example config:
{
logo: "Logo.svg",
name: "John Doe",
techs: [
"Javascript",
"Typescript",
"React",
"Next.JS",
"Figma",
"HTML",
"CSS",
"TailwindCSS",
"ReactNative",
"Electron",
],
mail: "test@gmail.com", // for contact form
social_media: {
github: "https://github.com/mastagoon",
linkedin: "https://www.linkedin.com/in/mastagoon/",
messenger: "https://m.me/sahal.omar0",
},
}
Example project:
{
title: "Example Project",
year: 2020,
thumbnail: "example_project_thumbnail.jpg",
images: [
{
image: "example_project1.jpg",
alt: "Example Project",
caption: "Some Interface",
},
{
image: "example_project2.jpg",
alt: "Example Project",
caption: "Dashboard",
},
],
info: [
{
infoTitle: "What is it?",
infoText:
"This is an example project. It is a project that is meant to be used as a template for new projects.",
},
{
infoTitle: "Who is it for?",
infoText:
"This is an example project. It is a project that is meant to be used as a template for new projects.",
},
{
infoTitle: "What did I do?",
infoText:
"This is an example project. It is a project that is meant to be used as a template for new projects.",
},
{
infoTitle: "Review",
infoText: `"Cool Project." - Mastagoon, Manager`,
},
],
github: "https://github.com/mastagoon",
design: "https://www.figma.com/file/ZXyk5ZzWlBaxbuIHAoEYES/Portfolio",
},
This project uses nodemailer to send mails from the contact form. This needs you to provider an email and password for the account used to send the messages. To configure a gmail account, follow the instructions below:
- Login to your gmail account
- From your "Manage My Google Account" screen, find Sign-in & security > Signing in to Google > App Passwords
- Create and copy the app password, then copy and rename the .env file
cp .example.env .local.env
and configure it as shown below
EMAIL_ADDRESS=text@gmail.com
EMAIL_PASSWORD=somepw
EMAIL_HOST=smtp.gmail.com
Build to static files using npm run build
or yarn build
, you may then deploy to vercel or any hosting service of your choice. Note that the contact form uses a server function to work.