{"id":29245787,"url":"https://github.com/arnobt78/webdev-portfolio--tailwindcss-fundamental-project-8","last_synced_at":"2025-07-03T22:38:16.815Z","repository":{"id":301977875,"uuid":"938824302","full_name":"arnobt78/WebDev-Portfolio--TailwindCSS-Fundamental-Project-8","owner":"arnobt78","description":"This is a portfolio project built using React and TailwindCSS. The project showcases various sections including a hero section, skills, about, and projects. It is designed to be responsive and visually appealing.","archived":false,"fork":false,"pushed_at":"2025-06-29T22:37:50.000Z","size":68,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-29T23:27:55.210Z","etag":null,"topics":["nanoid","netlify-deployment","portfolio","portfolio-template","portfolio-website","react","react-icons","react-vite","reactjs","tailwind-css","tailwindcss","tailwindcss-fundamental"],"latest_commit_sha":null,"homepage":"https://webdev-portfolio-arnob.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnobt78.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-25T15:03:03.000Z","updated_at":"2025-06-29T22:37:54.000Z","dependencies_parsed_at":"2025-06-29T23:37:56.785Z","dependency_job_id":null,"html_url":"https://github.com/arnobt78/WebDev-Portfolio--TailwindCSS-Fundamental-Project-8","commit_stats":null,"previous_names":["arnobt78/webdev-portfolio--tailwindcss-fundamental-project-8"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/arnobt78/WebDev-Portfolio--TailwindCSS-Fundamental-Project-8","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FWebDev-Portfolio--TailwindCSS-Fundamental-Project-8","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FWebDev-Portfolio--TailwindCSS-Fundamental-Project-8/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FWebDev-Portfolio--TailwindCSS-Fundamental-Project-8/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FWebDev-Portfolio--TailwindCSS-Fundamental-Project-8/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/WebDev-Portfolio--TailwindCSS-Fundamental-Project-8/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FWebDev-Portfolio--TailwindCSS-Fundamental-Project-8/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263415911,"owners_count":23463109,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nanoid","netlify-deployment","portfolio","portfolio-template","portfolio-website","react","react-icons","react-vite","reactjs","tailwind-css","tailwindcss","tailwindcss-fundamental"],"created_at":"2025-07-03T22:38:15.392Z","updated_at":"2025-07-03T22:38:16.788Z","avatar_url":"https://github.com/arnobt78.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebDev Portfolio - TailwindCSS Fundamental Project 8\n\n---\n\n\u003cimg width=\"1000\" alt=\"Screenshot 2025-02-25 at 16 09 38\" src=\"https://github.com/user-attachments/assets/285d8ead-1fd4-4db6-a062-18146946ced3\" /\u003e\u003cimg width=\"1000\" alt=\"Screenshot 2025-02-25 at 16 09 54\" src=\"https://github.com/user-attachments/assets/dd7e6661-994a-441c-bdba-456ce42a52d6\" /\u003e\u003cimg width=\"1000\" alt=\"Screenshot 2025-02-25 at 16 10 15\" src=\"https://github.com/user-attachments/assets/ab5a7be3-200a-4ec3-b428-f647463c0a38\" /\u003e\u003cimg width=\"1000\" alt=\"Screenshot 2025-02-25 at 16 10 47\" src=\"https://github.com/user-attachments/assets/3461eef8-d4a3-4214-af37-b61323a09c69\" /\u003e\n\n---\n\n## Project Summary\n\nWebDev Portfolio is a modern, responsive personal portfolio website built with **React** and **TailwindCSS**. The goal of this project is to demonstrate fundamental web development concepts, focusing on component-based architecture, utility-first CSS, and modern front-end workflows using Vite.\n\nDesigned with both learning and practical use in mind, this portfolio showcases a developer’s professional identity, skills, and projects. It can be reused as a template for your own portfolio or serve as a learning resource for best practices in React and TailwindCSS.\n\n- **Live-Demo:** https://webdev-portfolio-arnob.netlify.app/\n\n---\n\n## Table of Contents\n\n1. [Project Features](#project-features)\n2. [Live Demo](#live-demo)\n3. [Technology Stack](#technology-stack)\n4. [Project Structure](#project-structure)\n5. [Setup and Installation](#setup-and-installation)\n6. [Component \u0026 Data Walkthrough](#component--data-walkthrough)\n7. [Functionality \u0026 Usage](#functionality--usage)\n8. [Useful Tailwind Extensions](#useful-tailwind-extensions)\n9. [Assets](#assets)\n10. [Examples \u0026 Code Snippets](#examples--code-snippets)\n11. [Keywords](#keywords)\n12. [Conclusion](#conclusion)\n\n---\n\n## Project Features\n\n- **Responsive Design**: Looks great on all screen sizes.\n- **Component Architecture**: Modular React components (Navbar, Hero, About, Skills, Projects).\n- **Dynamic Data**: Centralized data for navigation, skills, and projects.\n- **TailwindCSS Styling**: Utility-first CSS with clean, maintainable classes.\n- **Modern Workflow**: Vite for fast development and hot reloading.\n- **Reusable Template**: Easily adapt for your own portfolio.\n\n---\n\n## Technology Stack\n\n- **React** (via Vite)\n- **TailwindCSS**\n- **JavaScript (ES6+)**\n- **nanoid** (for unique keys)\n- **react-icons** (for scalable icons)\n\n---\n\n## Project Structure\n\n```\n.\n├── .gitignore\n├── index.html\n├── package.json\n├── package-lock.json\n├── postcss.config.js\n├── public/\n│   └── vite.svg\n├── README.md\n├── src/\n│   ├── App.jsx\n│   ├── assets/\n│   │   ├── about.svg\n│   │   ├── hero.svg\n│   │   └── react.svg\n│   ├── components/\n│   │   ├── About.jsx\n│   │   ├── Hero.jsx\n│   │   ├── Navbar.jsx\n│   │   ├── Projects.jsx\n│   │   ├── ProjectsCard.jsx\n│   │   ├── SectionTitle.jsx\n│   │   ├── Skills.jsx\n│   │   └── SkillsCard.jsx\n│   ├── data.jsx\n│   ├── index.css\n│   └── main.jsx\n├── tailwind.config.cjs\n└── vite.config.js\n```\n\n---\n\n## Setup and Installation\n\n### Prerequisites\n\n- Node.js and npm installed\n\n### 1. Create a Vite + React Project\n\nFollow the [Vite + Tailwind Docs](https://tailwindcss.com/docs/guides/vite):\n\n```sh\nnpm create vite@latest my-project -- --template react\ncd my-project\n```\n\n### 2. Install TailwindCSS\n\n```sh\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\n### 3. Configure TailwindCSS\n\nEdit `tailwind.config.cjs` (or rename from `.js`):\n\n```js\n/** @type {import('tailwindcss').Config} */\nexport default {\n  content: [\"./index.html\", \"./src/**/*.{js,ts,jsx,tsx}\"],\n  theme: { extend: {} },\n  plugins: [],\n};\n```\n\n### 4. Clean Up\n\n- Remove `App.css`\n- Clear contents of `index.css` and `App.jsx` to start fresh\n\n### 5. Add Tailwind Directives\n\nIn `src/index.css`:\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n### 6. Install Additional Dependencies\n\n```sh\nnpm i nanoid react-icons\n```\n\n### 7. Run the Project\n\n```sh\nnpm run dev\n```\n\n---\n\n## Component \u0026 Data Walkthrough\n\n### Navbar\n\nDisplays navigation links, reads from the `links` array in `data.jsx`.\n\n```jsx\nimport { links } from \"../data\";\n...\n{links.map((link) =\u003e (\n  \u003ca key={link.id} href={link.href} ...\u003e{link.text}\u003c/a\u003e\n))}\n```\n\n---\n\n### Hero\n\nMain introduction section with developer’s name, title, tagline, and social links.\n\n```jsx\n\u003ch1 className=\"text-7xl font-bold tracking-wider\"\u003eI'm Arnob\u003c/h1\u003e\n\u003cp className=\"mt-4 text-3xl text-slate-700 capitalize tracking-wide\"\u003eFront-End Developer\u003c/p\u003e\n```\n\n---\n\n### Skills\n\nDisplays tech stack/skills, dynamically from `skills` in `data.jsx`.\n\n```jsx\n{skills.map((skill) =\u003e \u003cSkillsCard key={skill.id} {...skill} /\u003e)}\n```\n\n---\n\n### About\n\nInformation about the developer, includes an SVG illustration and a short bio.\n\n---\n\n### Projects\n\nLists individual portfolio projects, each as a card with an image, title, and description.\n\n```jsx\n{projects.map((project) =\u003e \u003cProjectsCard key={project.id} {...project} /\u003e)}\n```\n\n---\n\n### Data File (`src/data.jsx`)\n\nCentralizes all navigation links, skills, and portfolio projects.\n\n```jsx\nexport const links = [\n  { id: nanoid(), href: \"#home\", text: \"home\" },\n  ...\n];\n\nexport const skills = [\n  {\n    id: nanoid(),\n    title: \"HTML\u0026CSS\",\n    icon: \u003cFaHtml5 ... /\u003e,\n    text: \"Highly skilled in HTML \u0026 CSS...\"\n  },\n  ...\n];\n\nexport const projects = [\n  {\n    id: nanoid(),\n    img: \"...\",\n    url: \"...\",\n    github: \"...\",\n    title: \"first project\",\n    text: \"...\",\n  },\n  ...\n];\n```\n\n---\n\n## Functionality \u0026 Usage\n\n- **Navigation:** Single-page scrolling via navbar links\n- **Section Titles:** Each section uses `SectionTitle` for headings\n- **Skills/Projects:** Mapped dynamically from data source\n- **Styling:** All layout and design uses Tailwind utility classes for rapid development and consistency\n- **Assets:** SVGs for illustrations, easily replaceable for personal branding\n- **Deployment:** Easily deployable to Netlify, Vercel, or any static hosting provider\n\n---\n\n## Useful Tailwind Extensions\n\n- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)\n- [Tailwind Fold](https://marketplace.visualstudio.com/items?itemName=stivo.tailwind-fold)\n\n---\n\n## Assets\n\nAll SVG illustrations from [Undraw](https://undraw.co/).\n\n---\n\n## Examples \u0026 Code Snippets\n\n### Example: Navbar Component\n\n```jsx\nimport { links } from \"../data\";\n\nconst Navbar = () =\u003e (\n  \u003cnav className=\"bg-emerald-100\"\u003e\n    \u003cdiv className=\"align-element py-4 flex flex-col sm:flex-row sm:gap-x-16 sm:items-center sm:py-8\"\u003e\n      \u003ch2 className=\"text-3xl font-bold\"\u003e\n        Web\u003cspan className=\"text-emerald-600\"\u003eDev\u003c/span\u003e\n      \u003c/h2\u003e\n      \u003cdiv className=\"flex gap-x-3\"\u003e\n        {links.map((link) =\u003e (\n          \u003ca key={link.id} href={link.href} className=\"capitalize text-lg tracking-wide hover:text-emerald-600 duration-300\"\u003e\n            {link.text}\n          \u003c/a\u003e\n        ))}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/nav\u003e\n);\n\nexport default Navbar;\n```\n\n---\n\n### Example: Tailwind Utility Usage\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n---\n\n### Example: Skill Card Data\n\n```jsx\n{\n  id: nanoid(),\n  title: \"React\",\n  icon: \u003cFaReact className=\"h-16 w-16 text-emerald-500\" /\u003e,\n  text: \"Advanced proficiency in React, developing efficient and interactive front-end applications with a strong emphasis on component-based architecture.\",\n}\n```\n\n---\n\n## Keywords\n\n`React`, `TailwindCSS`, `Portfolio`, `Vite`, `Component-based`, `Frontend`, `Javascript`, `Responsive Design`, `nanoid`, `react-icons`, `Web Developer`, `Single Page Application`, `Undraw`, `Netlify`\n\n---\n\n## Conclusion\n\nThis project is an excellent starting point for anyone looking to build their own personal portfolio or learn modern front-end best practices. By combining React’s power and TailwindCSS’s flexibility, you can quickly develop professional and visually appealing web applications. Feel free to fork, experiment, and use this as your own developer portfolio!\n\n---\n\n## More\n\n- [View complete source on GitHub](https://github.com/arnobt78/WebDev-Portfolio--TailwindCSS-Fundamental-Project-8)\n- [See live demo](https://webdev-portfolio-arnob.netlify.app/)\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fwebdev-portfolio--tailwindcss-fundamental-project-8","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Fwebdev-portfolio--tailwindcss-fundamental-project-8","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fwebdev-portfolio--tailwindcss-fundamental-project-8/lists"}