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

Last update: May 17, 2022

react-tailwind-portfolio

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

Open React template preview

Made with 💙 by Brayden W.

Live demo

Check out the live demo here 👉️ https://braydentw.github.io/react-tailwind-portfolio

Table of contents

Usage

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm install

To install the dependencies package.

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

Google Analytics Setup

This template uses the React Google Analytics Module.

In order to track visitors, you need to set an environment variable called REACT_APP_GA_CODE storing your GA Tracking ID.

Terms and License

  • Released under the GPL.
  • Use it for personal and commercial projects, but please don’t republish, redistribute, or resell the template.
  • Attribution is not required, although it is really appreciated.

Like my work?

Buy Me A Coffee

Made by @BraydenTW

GitHub

https://github.com/BraydenTW/react-tailwind-portfolio
Comments
  • 1. Hacktoberfest contribution

    Is this repository accepting hacktoberfest contribution and is it active? I wanted to contribute by making a small enhancement to showcase the projects. If @BraydenTW can respond in time, I'll start working on the feature.

    Thanks.

    Reviewed by naveennamani at 2021-10-25 16:15
  • 2. The data should be passed through props instead of hard coding

    I went through the repository and i found out that in order to use this portfolio template you need to hard code the data and i don't think that is the right way of using the data ,the data should be passed through props and props may collect that data through a JSON file as mentioned in #1

    Reviewed by shishirtiwari23 at 2021-10-02 05:37
  • 3. Major Changes In Repository

    What were the issue #1 and #3 ?

    • To Make the components more dynamic
    • To add a JSON file for the data

    What this PR do ?

    This PR has done some major changes in the repository and those changes are

    • added a new component named SkillCard.js which is used in Skills.js component
    • added a file in assets named data.js where you can provide the data and manipulate it easily as mentioned in #1 ,but instead of JSON file i have added a js type file because it gives more options and flexibility to work with over JSON
    • passed the data through props instead of hard coding the data as the mentioned in #3
    • made a few improvements in Skills.js and now user is not limited to show only 3 skill card user just need to provide the additional data in data.js file

    What issues are fixed ?

    This PR fixes #1 and also fixes #3

    Reviewed by shishirtiwari23 at 2021-10-02 14:11
  • 4. Add accessible names to icon links

    Brayden, nice job putting this template together and sharing it. I noticed that the icon links do not have any accessible names, meaning screenreader users would not know what each link represents. I'm suggesting that you add accessible names using Tailwind's sr-only class. That there is no visual impact but it's much nicer for screenreader users to hear the words themselves rather than listen to a whole URL being read out.

    I think it is especially useful to fix stuff like this in templates because everybody who uses a template inherits the accessibility decisions (good or bad) made by the developer.

    Reviewed by marktnoonan at 2020-10-17 22:09
  • 5. Use JSON file to edit the contents of the portfolio

    Hey mate, what you think about having a JSON as an input to generate the portfolio? That way anyone could have their own folio only changing the file.

    Reviewed by diogo405 at 2020-10-17 09:30
This is a react portfolio template build using react, typescript and tailwind css. It help developers and designers to showcase their work

React Portfolio Using Tailwind UI This project include a portfolio template which is built using React and Tailwind CSS. It help developer and designe

Oct 30, 2021
Portfolio - A Simple Portfolio page Built with next.js
Portfolio - A Simple Portfolio page Built with next.js

Portfolio Início Essas instruções fornecerão uma cópia do projeto instalado e fu

May 11, 2022
Volt React is a free and open source admin dashboard template built in React.js and based on the latest version of the Bootstrap 5
Volt React is a free and open source admin dashboard template built in React.js and based on the latest version of the Bootstrap 5

Volt React is a free and open source admin dashboard template built in React.js and based on the latest version of the Bootstrap 5 CSS framework. It features over 100 UI elements, plugins, and example based built with React components.

May 12, 2022
Tail-kit is a free and open source components and templates kit fully coded with Tailwind css 2.0.
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

May 18, 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

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

May 11, 2022
Developer Portfolio built with the help of a react template
Developer Portfolio built with the help of a react template

Developer Portfolio Want to create a professional portfolio but cannot figure out how to? Use Developer Portfolio and create your own personalised por

May 14, 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://

Dec 28, 2021
Free and open-source MERN Stack CRUD Application built with React v17+, RRDv6+, Node.js, Express.js MongoDB and Mongoose ODM
Free and open-source MERN Stack CRUD Application built with React v17+, RRDv6+, Node.js, Express.js MongoDB and Mongoose ODM

?? MERN Stack CRUD Application Free and open-source MERN Stack CRUD Application built with React v17+, RRDv6+, Node.js, Express.js MongoDB and Mongoos

May 4, 2022
Apr 9, 2022
🚀 Software Developer Portfolio Template that helps you showcase your work and skills as a software developer.
🚀 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

May 16, 2022
Open-source Spaced Repetition System Built With React.js
Open-source Spaced Repetition System Built With React.js

Flashy Open-source Spaced Repetition System. View Demo · Report Bug · Request Fe

Feb 11, 2022
Modern React Portfolio Template (FREE)
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

May 13, 2022
Responsive Portfolio Template Made With Reactjs
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

May 6, 2022
🚀 my portfolio thingy which also happens to be a template
🚀 my portfolio thingy which also happens to be a template

Welcome to my Portfolio Note: This is a portfolio template, feel free to use it. And star it if you liked :P ✨ Live Demo Using the template To use thi

Apr 26, 2022
Mosaic Lite is a free admin dashboard template built on top of Tailwind CSS and fully coded in React
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

May 17, 2022
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

Apr 30, 2022
Minimal-one-page-template - Clean and Minimalistic One Page Template Built With React.js
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

Mar 7, 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.
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

May 9, 2022
An ethereum, next.js, and react.js boilerplate using only open source libraries
An ethereum, next.js, and react.js boilerplate using only open source libraries

An ethereum, next.js, and react.js boilerplate using only open source libraries

May 8, 2022