Obsidian - Elegant portfolio template built on NextJS and Tailwind CSS

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. 💖

Owner
Brayden
Frontend Dev & Designer | React, NextJS, Tailwind | Studio C Fan (the old cast)
Brayden
👨‍🎨 An open-source portfolio template built with React and Tailwind.

??‍?? An open-source portfolio template built with React and Tailwind.

Brayden W 90 Jan 8, 2022
my portfolio website using React/Nextjs and tailwind

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://

Moti Elmakies 0 Dec 28, 2021
Boilerplate-tailwind - A simple boilerplate using NextJS, Typescript, Tailwind, Jest, Storybook and more

This is a Next.js boilerplate using TailwindCSS and other cool stuff. Most of th

React Avançado 4 Jan 13, 2022
Mosaic Lite is a free admin dashboard template built on top of Tailwind CSS and fully coded in React

Mosaic Lite is a responsive dashboard template built on top of TailwindCSS and fully coded in React

Cruip 805 Jan 13, 2022
Cleanfolio - a clean and simple portfolio template for developers, built using React

Cleanfolio - a clean and simple portfolio template for developers, built using React

Raj Shekhar 272 Jan 17, 2022
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Mocking up web app with Vital(speed) Live Demo Features ⚡️ React 17 ?? TypeScript, of course ?? Jest - unitary testing made easy ?? Tailwind with JIT

Josep Vidal 77 Jan 14, 2022
A project template for Vite + TypeScript + React + Tailwind CSS + Blueprint apps :rocket:

itzmono-vite A project template for Vite + TypeScript + React + Tailwind CSS + Blueprint apps ?? Batteries Included ⚡ Vite 2 ??️ TypeScript ?? React ?

Hidekazu Kobayashi 18 Jan 10, 2022
Rohan Kokkula 84 Jan 6, 2022
🚀 Software Developer Portfolio Template that helps you showcase your work and skills as a software developer.

Software Developer Folio ⚡️ A clean, beautiful and responsive portfolio template for Developers! Just change src/portfolio.js to get your personal por

Saad Pasta 2.9k Jan 19, 2022
Responsive Portfolio Template Made With Reactjs

Portfolio Live Preview - Click Here ?? Installation and Setup Instructions Clone down this repository. You will need node.js and git installed globall

Guru Pawar 43 Jan 7, 2022
Modern React Portfolio Template (FREE)

A clean, beautiful, minimal and responsive portfolio template for Developers! To view a live example, click here. Just change src/yourdata.js to get y

Chetan Verma 476 Jan 21, 2022
Demo & testing repository for ts-nextjs-tailwind-starter expansion pack

?? ts-nextjs-tailwind-starter Next.js + Tailwind CSS + TypeScript starter packed with useful development features. Made by Theodorus Clarence Features

Theodorus Clarence 2 Dec 6, 2021
Salvia-kit provides beautiful dashboard templates built with Tailwind CSS for React, Next.js, Vue and Nuxt.js

Salvia-kit provides beautiful dashboard templates built with Tailwind CSS for React, Next.js, Vue and Nuxt.js

salvia-kit 324 Jan 13, 2022
🚀 A web extension starter built with React, Typescript, and Tailwind CSS.

A web extension starter, built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome, Mozilla Firefox, Microsoft Edge, and Brave.

BCIT Design & Development Club (BCIT-DDC) 8 Jan 16, 2022
Minimal-one-page-template - Clean and Minimalistic One Page Template Built With React.js

Minimal One Page Clean and Minimalistic One Page Template. Be sure to send your

Marcos Andre 1 Jan 5, 2022
🔮 Sofia React Template - Admin Dashboard Template built with React

?? Sofia React Template - Admin Dashboard Template built with React

Flatlogic 80 Jan 7, 2022
Personal portfolio built with React, using Formspree, deployed on Netlify.

Personal Portfolio Website This project was built with React.js, and deployed with Netlify. Used Formspree for contact form management, and AOS for sc

Gonca Negis 3 Nov 17, 2021
Tail-kit is a free and open source components and templates kit fully coded with Tailwind css 2.0.

Tail-Kit A beautiful and large components and templates kit for TailwindCSS 2.0 Tail-Kit is Free and Open Source. It does not change or add any CSS to

null 2k Jan 22, 2022
Notus React: Free Tailwind CSS UI Kit and Admin

Notus React A beautiful UI Kit and Admin for Tailwind CSS and React. Start your development with a Free Tailwind CSS and React UI Kit and Admin. Let N

Creative Tim 457 Jan 12, 2022