Skip to content

A portfolio website template that was built targeting developers or business professionals who want to display their work in a clean and visually appealing way. It requires only one json file to setup, provides a perfect score on Google lighthouse audit, SEO friendly, optimized for mobile, easily plugs in to Google Analytics, theming capabilities.

Notifications You must be signed in to change notification settings

mdoudy90/Better-Portfolio-Website-Builder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

95 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Better Portfolio Website Builder

Live version - mdoudy.com

Next.js | Vercel | Redux Toolkit | Sass


πŸš€ Simple to setup and deploy (all data goes into 1 json file)

🏎 Google lighthouse audit perfect score

πŸ“Š Google Analytics ready

πŸ”Ž SEO friendly

πŸ“± Optimized for mobile and tablet

πŸ“‹ Cross browser tested

🎨 Customizable color themes




Installation

Install Dependencies

yarn

Start development server

yarn run dev

# or to clear .next cache and run dev

yarn run no-cache-dev

Adding your data

To populate the website with your data, navigate to src/client/lib/data.json and update each section accordingly. Sample data (capitalized) and images have been added to help.

To ensure images are served properly, place them in public/images and reference them like this: /images/EXAMPLE.png

data.json schema overview:

Settings

sideBarLocation available options: "left" or "right"

projectCards

  • for projectCards alternating style, add projectCards section heading to showAlternatingCards array
  • for less space between cards, add projectCards section heading to compactView array
"settings": {
  "sideBarLocation": "right",
  "projectCards": {
    "showAlternatingCards": ["WORK", "PROJECTS"],
    "compactView": ["PROJECTS"]
  }
}
Meta

Data used for SEO purposes

"meta": {
  "title": "META TITLE",
  "description": "META DESC",
  "mobileIcon": "/mobile-icon.png",
  "favIcon": "/favicon.ico",
  "language": "en-US",
  "canonical": "CANONICAL URL",
  "url": "URL",
  "twitterHandle": "TWITTER HANDLE"
}
Social

Used to show clickable social media icons in the sidebar. These are optional, so for the ones that are not needed, delete the corresponding lines.

"social": {
  "linkedin": "LINKEDIN URL",
  "github": "GITHUB URL",
  "instagram": "INSTAGRAM URL",
  "twitter": "TWITTER URL"
}
Document

Add a PDF version of your resume or other document to public/docs and add the corresponding path and desired file-name here.

"document": {
  "fileName": "MY-RESUME.pdf",
  "path": "/docs/temp.pdf"
}
Header
This displays the main header portion of the page. These are optional, so for the ones that are not needed, delete the corresponding lines. The ctaText is displayed in the button.
"header": {
  "preHeading": "Hello, my name is",
  "heading": "FIRST LAST",
  "subHeading": "JOB TITLE",
  "text": "SHORT INTRO",
  "ctaText": "Get In Touch"
}
Sections

Add the desired sections here using the format below.

The available types are about, projectCards, gallery, and contact. The headings of each will be used as the keys throughout the site, so these are required aand need to be unique.

Multiple instances of projectCards can be used, as long as the headings are unique.

These are all optional, so if a certain section is not needed, delete the corresponding lines.

"sections": [
  {
    "type": "about",
    "heading": "ABOUT ME"
  },
  {
    "type": "projectCards",
    "heading": "WORK"
  },
  {
    "type": "projectCards",
    "heading": "PROJECTS"
  },
  {
    "type": "gallery",
    "heading": "MY GALLERY"
  },
  {
    "type": "contact",
    "heading": "CONTACT"
  }
]
About

Fills the about section.

If html is needed rather than text for the content, replace the content key with contentHtml.

image is optional, so if not needed, delete the line.

"about": {
  "content": [
    "LOREM IPSUM DOLOR SIT AMET CONSECTETUR ADIPISICING ELIT.",
    "LOREM IPSUM DOLOR SIT AMET CONSECTETUR ADIPISICING ELIT."
  ],
  "image": "/images/about/TEMP-ME.png"
}
Project Cards

Fills each projectCards sections. Each projectCards section heading needs to be specified here with the desired corresponding data. In this example, the WORK and PROJECTS headings are used.

title, description, tools, links, image, and highlights are all optional, so if not needed, delete the corresponding lines.

highlights fills out the data used in the specified project's onClick popover.

If html is needed rather than text for the description, replace the description key with descriptionHtml.

"projectCards": {
  "WORK": [
    {
      "title": "WORK PROJECT 1",
      "description": "LOREM IPSUM DOLOR SIT AMET CONSECTETUR ADIPISICING ELIT.",
      "tools": ["TOOL 1", "TOOL 2"],
      "links": {
        "github": "GITHUB URL",
        "website": "WEBSITE URL"
      },
      "image": "/images/projectCards/TEMP-WORK-PROJECT-1-BANNER.png",
      "highlights": [
        {
          "heading": "POINT 1",
          "details": [
            "LOREM IPSUM DOLOR SIT AMET CONSECTETUR ADIPISICING ELIT.",
            "LOREM IPSUM DOLOR SIT AMET CONSECTETUR ADIPISICING ELIT."
          ],
          "media": "/images/projectCards/TEMP-WORK-PROJECT-1-POINT-1.gif"
        },
        {
          "heading": "POINT 2",
          "details": [
            "LOREM IPSUM DOLOR SIT AMET CONSECTETUR ADIPISICING ELIT."
          ]
        }
      ]
    },
    {
      "title": "WORK PROJECT 2",
      "description": "LOREM IPSUM DOLOR SIT AMET CONSECTETUR ADIPISICING ELIT."
    }
  ],
  "PROJECTS": [
    {
      "title": "PROJECT 1",
      "description": "LOREM IPSUM DOLOR SIT AMET CONSECTETUR ADIPISICING ELIT."
    }
  ]
}
Gallery

Fills out the gallery section of the site.

thumbnail is optional, but advised to reduce load time if images are too large.

"gallery": [
  {
    "image": "/images/gallery/TEMP-GALLERY-IMAGE.png",
    "thumbnail": "/images/gallery/TEMP-GALLERY-IMAGE-THUMBNAIL.png"
  },
  {
    "image": "/images/gallery/TEMP-GALLERY-IMAGE.png",
    "thumbnail": "/images/gallery/TEMP-GALLERY-IMAGE-THUMBNAIL.png"
  }
]
Contact

Fills out the contact section.

If html is needed rather than text, replace the text key with textHtml.

ctaText corresponds to the button text.

"contact": {
  "text": "LOREM IPSUM DOLOR SIT AMET CONSECTETUR ADIPISICING ELIT.",
  "ctaText": "Send Email",
  "email": "EMAIL@EMAIL.COM"
}

Updating color themes

To customize the colors, navigate to styles/utilities/_variables.scss and update the following of each theme:

$theme-1-color-1: #ccd6f6; /* primary text */
$theme-1-color-2: #8892b0; /* secondary text */
$theme-1-color-3: #48e4ff; /* contrasting color */
$theme-1-color-4: #0b1a2f; /* primary background */
$theme-1-color-5: #122341; /* secondary background */

Deploying

The easiest way to deploy is via Vercel, built by the same folks behind Next.js.

If using Vercel:

In Build & Development Settings, override the build command to yarn run build or your own command if updated.

To add Google Analytics capabilities:

Add your GA Tracking ID as an environment variable under the name, NEXT_PUBLIC_GA_ID

For additional details and help, check out the Next.js deployment documentation.


Attributions

Design aspects inspired by bchiang7 and components I've built in Helbiz.


Questions?

Feel free to email me here.

About

A portfolio website template that was built targeting developers or business professionals who want to display their work in a clean and visually appealing way. It requires only one json file to setup, provides a perfect score on Google lighthouse audit, SEO friendly, optimized for mobile, easily plugs in to Google Analytics, theming capabilities.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published