Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/skyybbanerjee/tailwindcss-portfolio
My Portfolio in TailwindCSS
https://github.com/skyybbanerjee/tailwindcss-portfolio
react-icons reactjs tailwindcss
Last synced: 3 days ago
JSON representation
My Portfolio in TailwindCSS
- Host: GitHub
- URL: https://github.com/skyybbanerjee/tailwindcss-portfolio
- Owner: skyybbanerjee
- Created: 2024-07-03T11:12:04.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-07-03T11:12:28.000Z (6 months ago)
- Last Synced: 2024-12-27T19:29:43.292Z (12 days ago)
- Topics: react-icons, reactjs, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 63.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#### Setup Vite and Tailwind
[Tailwind Docs](https://tailwindcss.com/docs/guides/vite)
- setup vite project
```sh
npm create vite@latest my-project -- --template react
cd my-project
```
- add tailwind
```sh
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
- rename to tailwind.config.cjs
- add following content
```js
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
```
- remove App.css
- delete contents of index.css
- delete contents of App.jsx
- change title
```js
const App = () => {
return
App;
};
export default App;
```
- Add the Tailwind directives to your CSS
index.css
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Tailwind directives are instructions that decide how Tailwind CSS creates the styles for your website. They control the global styles, component styles, and utility classes.
- start the project "npm run dev"
- setup first tailwind classes in App.jsx
App.jsx
```js
const App = () => {
return
Tailwind project
;
};
export default App;
```
#### Assets
- get assets from "project-assets"
- images from Undraw
[Undraw Docs](https://undraw.co/)
#### Install More Libraries
```sh
npm i nanoid react-icons
```
#### Useful Tailwind Extensions
- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
- [Tailwind Fold](https://marketplace.visualstudio.com/items?itemName=stivo.tailwind-fold)
#### Navbar Component
- explore 'links' array in data.jsx
- setup components/navbar
- import links
- setup return and render in App.jsx
```js
import { links } from '../data';
const Navbar = () => {
return (
);
};
export default Navbar;
```
#### Hero Component
- setup components/Hero
- setup return
- render in App.jsx
```js
import heroImg from '../assets/hero.svg';
import { FaGithubSquare, FaLinkedin, FaTwitterSquare } from 'react-icons/fa';
const Hero = () => {
return (
);
};
export default Hero;
```
#### Repeating Styles
index.css
```css
@layer components {
.align-element {
@apply mx-auto max-w-7xl px-8;
}
}
```
- replace in Hero and Navbar
#### Skills
- explore skills array in data.jsx
- create Skills,SkillsCard and SectionTitle components
- setup return and render in App.jsx
Skills.jsx
```js
import SkillsCard from './SkillsCard';
import { skills } from '../data';
import SectionTitle from './SectionTitle';
const Skills = () => {
return (
{skills.map((skill) => {
return ;
})}
);
};
export default Skills;
```
SectionTitle.jsx
```js
const SectionTitle = ({ text }) => {
return (
{text}
);
};
export default SectionTitle;
```
SkillsCard.jsx
```js
const SkillsCard = ({ icon, title, text }) => {
return (
{icon}
{title}
{text}
);
};
export default SkillsCard;
```
#### Global Styles
index.html
```html
```
#### About
- create About component and render in App.jsx
```js
import aboutSvg from '../assets/about.svg';
import SectionTitle from './SectionTitle';
const About = () => {
return (
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro
omnis exercitationem tempora, aliquid deleniti tenetur vero esse
praesentium eaque dicta fugiat? Molestiae expedita, nulla neque
error porro sint distinctio possimus!
);
};
export default About;
```
#### Projects
- explore "projects" array in data.jsx
- create Projects and ProjectsCard components
- setup return and render in App.jsx
Projects.jsx
```js
import ProjectsCard from './ProjectsCard';
import { projects } from '../data';
import SectionTitle from './SectionTitle';
const Projects = () => {
return (
{projects.map((project) => {
return ;
})}
);
};
export default Projects;
```
ProjectsCard.jsx
```js
import { FaGithubSquare, FaLinkedin, FaTwitterSquare } from 'react-icons/fa';
import { TbWorldWww } from 'react-icons/tb';
const ProjectsCard = ({ url, img, github, title, text }) => {
return (
);
};
export default ProjectsCard;
```
#### Extra Challenge
- setup projects in CMS