✨ Elegant portfolio template built on NextJS and Tailwind.

Overview

Obsidian

Obsidian banner

Obsidian is a minimal and lightweight portfolio template built on NextJS and TailwindCSS.

Setup

First, start by clicking the 'Use this template' button. It will create a clone of this repository.

Step one

Then, name it whatever ya want. (Just not "animated-palm-tree" haha)

Step two

Once finished creating your new repository, enter the following command into your terminal: (replace the values with your github username and repository name from earlier and enter into that directory)

git clone https://github.com/<--USER-->/<--REPO-->
cd <--FOLDER-NAME-->

Install the dependencies

Ba-da-boom! Your code is all there.... however you need to install dependencies like React, NextJS, and TailwindCSS into your project so the stuff actually works! Do so by installing them with the package manager of your choice:

# NPM
npm i

# Yarn
yarn

Edit content

Now, before you run it locally, you should edit the content first!

To do so, open the data/config.js file and edit the values to what makes you, you!

Also, replace the image located in public/static/profile.png with a picture of yourself! Or a cool avatar! Or just keep it the same if you are actually LeBron James! (Hey LeBron if you're looking at this, then "hello world" to you!)

Change the Favicon

So... you want to change that icon that shows up on your browser tab for your portfolio? (aka: A "Favicon")

LeBron Favicon

Follow these steps:

  1. Create your logo and download it on your computer

  2. Go to a favicon generator site like favicon.io, go through the steps to get you icon files.

  3. Place those files in the public/static/favicon/ like so:

    Favicon folder

Then it should be ready!

Try it out!

Run locally!

To see it in action in your browser, run the dev script:

# NPM
npm run dev

# Yarn
yarn dev

Ta-da! 🎉

Deploy onto a live website!

Now, how do you get this published for all the world to see? Vercel is an awesome and 100% free option for this.

Signup for free with your Github account and click the "New Project" button on your dashboard.

New Project button

Import the github repository you just created then after some loading...

Mission accomplished

You're brand new portfolio should be ready to go!

Share it with some friends, family members, employers?


About the developer

@BraydenTW

Hey there! My name is Brayden and I'm a Frontend Developer and Designer building and designing awesome stuff for the web! I like to work with technologies like NextJS, TailwindCSS, and exploring the JavaScript ecosystem.

Like my work?

Buy Me A Coffee: @BraydenW   PayPal: @BraydenTW

Thank you so much for your support. 💖

You might also like...

Portfólio desenvolvido com NextJs e integrado com GraphCms e api do Github.📁

Portfólio desenvolvido com NextJs e integrado com GraphCms e api do Github.📁

🌐 Portfolio (Bio) Aplicação JamStack desenvolvida com NextJs integrado ao GraphCms. 🚀 Projeto | Tecnologias | Rodar Aplicação | Bibliotecas | Licenç

Apr 26, 2022

A Notion themed portfolio developed with NextJS, deployed on Vercel.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Jul 19, 2022

Starter template for a personal website blog, built with Next.js, MDX, and Tailwind CSS.

nextjs-mdx-blog-theme View: demo site Framework: Next.js Deployment: Vercel Content: MDX Styling: Tailwind CSS Running Locally $ git clone https://git

Dec 26, 2022

A Tailwind plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and all variations.

Tailwind Labeled Groups A plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and

Nov 21, 2022

✨ View all of your GitHub stats and compare your stats with friends, made using nextjs and tailwind.

Octotastic All of your GitHub Stats in one place. Features: View your own stats or any other user's stats. View advanced stats using graphs and charts

Sep 6, 2022

My personal Website, where I share my blog and project. Build using Nextjs and Tailwind CSS

My personal Website, where I share my blog and project. Build using Nextjs and Tailwind CSS

Personal Blog This is my portfolio website built with Next.js, Tailwind CSS and hosted with Vercel. Perfect Light House Score 🛠 Installation & Set Up

Dec 24, 2022

⏪ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more

⏪ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more

⏪ Rewinds – Remix Tailwind Starter Kit Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries. This is an example demo to combine the

Dec 24, 2022

Fullstack Turborepo starter. Typescript, Nestjs, Nextjs, Tailwind, Prisma, Github Actions, Docker, And Reverse proxy configured

Turborepo (NestJS + Prisma + NextJS + Tailwind + Typescript + Jest) Starter This is fullstack turborepo starter. It comes with the following features.

Jan 9, 2023

Twitter clone using Nextjs, Tailwind CSS and Firebase

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Aug 16, 2022
Comments
  • trying to build this samething in react.

    trying to build this samething in react.

    hey i am trying to build this same thing with react. but everything is working fine but my dark mode is not working properly. when dark mode is enabled and i refresh the page the screen flashes white. how do i fix this? i am using next-themes package in my project. if you could help me fixing this dark mode flashing issue. here is my repo https://github.com/abdarker/abdarker.github.io and it's live in here you can check the flashing issue when it is in dark mode and click refresh page https://abdarker.github.io

    opened by abdarker 2
Owner
Brayden
Frontend Dev & Designer | React, NextJS, Tailwind | Studio C Fan (the old cast)
Brayden
Personal developer portfolio written with NextJS and Tailwind CSS.

Developer Portfolio This is a Next.js, Tailwind CSS blogging starter template. Probably the most feature rich nextjs markdown blogging template out th

Max Geller 1 Dec 20, 2021
My-portfolio - 🪶 My portfolio built with Remix, ChakraUI...

Welcome to Remix! Remix Docs Deployment After having run the create-remix command and selected "Vercel" as a deployment target, you only need to impor

jotyy 5 Oct 31, 2022
A minimal norui portfolio example built with NextJS and powered by Notion 🚀.

Minimal Norui A minimal norui portfolio example built with NextJS and powered by Notion ?? . Links Demo Site Documentation Minimal Norui Notion Databa

Joeylene Rivera 4 Nov 13, 2022
portfolio-project is a npm package to automatically update your projects section in your portfolio website. It will fetch the selected repositories directly from your GitHub account.

portfolio-project Those days of manually updating portfolio website after every new project made are gone ⚡ Yesss . . . you read that right. ?? portfo

Gaurav Gulati 15 Aug 3, 2021
Bookworm is a minimal NextJs Tailwind blog starter template.

Bookworm Light Nextjs Blog Template ????View Live Preview Download Download this template from Github Installation After downloading the template, you

Themefisher 46 Dec 23, 2022
Web app to search,get, watch animes (built with Nextjs, Tailwind)

Animeinfo An anime discovery, made with NextJs and TailwindCSS. Please deploy your own version of the site, by following the instructions. Please foll

Ethiel ADIASSA 4 May 24, 2022
A responsive and open source portfolio for software developers (Next.js & Tailwind CSS version).

Software Developer Portfolio ?? A responsive and open source portfolio for software developers (Next.js & Tailwind CSS version). Website Screenshot In

Ismailium 10 Nov 28, 2022
This is my portfolio GitHub clone website. The frontend is build using NextJS and TailwindCSS.

Github Clone Portfolio Website Tech Stack used: NextJS Tailwind CSS The contact form in this website is connected to Notion. If you want to integrate

Unnati Bamania 22 Oct 5, 2022
Portfólio de projetos pessoais feito com NextJs e lib de animação Framer Motion

Portfólio - Carlos Amorim Esse portfólio foi criado para mostrar meus projetos e habilidades. ?? Projeto criado com as seguintes tecnologias: ✔️ NextJ

Carlos Amorim 13 May 12, 2022
Portfólio desenvolvido com NextJs e integrado com GraphCms e api do Github.📁

?? Portfolio (Bio) Aplicação JamStack desenvolvida com NextJs integrado ao GraphCms. ?? Projeto | Tecnologias | Rodar Aplicação | Bibliotecas | Licenç

Tiago Pierre de Mendonça 3 Jun 22, 2022