Giter VIP home page Giter VIP logo

reactjs-portfolio's Introduction

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

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. ๐Ÿ’–

reactjs-portfolio's People

Contributors

ramselvaraj avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.