Skip to content

Improve README documentation #142

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ChristoBiju wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Improve README documentation #142

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
259 changes: 194 additions & 65 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,118 +1,196 @@
# ⚡ GITFOLIO

A beginner-friendly developer portfolio template with a retro-futuristic cyberpunk aesthetic. Fork it, customize it, deploy it - no design skills required, (promise!)
A beginner-friendly developer portfolio template with a retro-futuristic cyberpunk aesthetic. Fork it, customize it, and deploy it — no design skills required. (Promise!)

![Gitfolio Preview](https://img.shields.io/badge/Next.js-16.0.10-black?style=flat-square&logo=next.js) ![Tailwind CSS](https://img.shields.io/badge/Tailwind-4-38B2AC?style=flat-square&logo=tailwind-css) ![TypeScript](https://img.shields.io/badge/TypeScript-5-3178C6?style=flat-square&logo=typescript)
## 🚀 Quick Start

---
### Prerequisites

## 🚀 Quick Start
Before getting started, make sure you have:

### Option 1: Use This Template (Recommended)
* [Node.js](https://nodejs.org/) installed
* npm installed (included with Node.js)
* A GitHub account if you plan to deploy your portfolio using GitHub Pages

1. Click the **"Use this template"** button at the top of this repo
2. Name your new repository (e.g., `my-portfolio`)
3. Clone your new repo and start customizing!
### Option 1: Use This Template (Recommended)

### Option 2: Fork & Clone
1. Click the **"Use this template"** button at the top of this repository.
2. Select **"Create a new repository"**.
3. Give your repository a name, such as `my-portfolio`.
4. Clone your new repository:

```bash
# Clone the repository
git clone https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git
cd YOUR_REPO_NAME
```

5. Install the dependencies:

# Install dependencies
```bash
npm install
```

6. Start the development server:

# Start the development server
```bash
npm run dev
```

7. Open http://localhost:3000 in your browser.

### Option 2: Fork & Clone

If you want to contribute to GITFOLIO or create your own fork:

```bash
git clone https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git
cd YOUR_REPO_NAME
npm install
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) to see your portfolio.
Open http://localhost:3000 to view the portfolio locally.

---

## ✏️ Customize Your Portfolio

All your content lives in **one file**: `app/page.tsx`
All of your portfolio content lives in **`app/page.tsx`**, making it easy to personalize the template.

**Beginner Tip:** A quick way to start contributing is to improve button text or section copy in `app/page.tsx`. This helps you understand the code structure while making meaningful improvements.
### 1. Update Your Name or Brand

Find the navigation section and replace `GITFOLIO` with your name or brand:

### 1. Update Your Name/Brand
Find the navigation section and change `GITFOLIO` to your name:
```tsx
<Link href="/">
YOUR_NAME
</Link>
```

### 2. Add Your Projects
Look for the `ProjectCard` components and update them:

Find the `ProjectCard` components and replace the example projects with your own:

```tsx
<ProjectCard
<ProjectCard
title="MY_PROJECT"
description="What this project does and why it's awesome."
tags={["REACT", "TYPESCRIPT", "API"]}
color="cyan" // Options: cyan, fuchsia, purple, yellow
color="cyan"
href="https://github.com/you/project"
/>
```

Available colors include:

```text
cyan
fuchsia
purple
yellow
```

### 3. Write Your Bio
Find the `// ABOUT_ME` section and tell your story:

Find the `// ABOUT_ME` section and add your developer story:

```tsx
<p>
Your developer journey goes here. What drives you?
Your developer journey goes here. What drives you?
What are you passionate about building?
</p>
```

### 4. Update Your Skills
Customize the `STACK_TRACE` and `PROTOCOLS` lists with your actual tech stack and values.

Customize the `STACK_TRACE` and `PROTOCOLS` lists with your actual technologies, skills, and interests.

### 5. Add Your Photo
Drop your photo in the `/public` folder as `me.png` (or update the filename in `page.tsx`).

### 6. Update Social Links
Find the footer section and add your actual social media URLs:
Place your profile photo in the `/public` folder as `me.png`.

Alternatively, update the filename in `app/page.tsx` if you want to use a different filename.

### 6. Update Your Social Links

Find the footer section and replace the example links with your own:

```tsx
<SocialLink href="https://github.com/YOUR_USERNAME" label="GITHUB" />
<SocialLink href="https://linkedin.com/in/YOUR_USERNAME" label="LINKEDIN" />
<SocialLink href="https://twitter.com/YOUR_USERNAME" label="TWITTER" />
<SocialLink
href="https://github.com/YOUR_USERNAME"
label="GITHUB"
/>

<SocialLink
href="https://linkedin.com/in/YOUR_USERNAME"
label="LINKEDIN"
/>

<SocialLink
href="https://twitter.com/YOUR_USERNAME"
label="TWITTER"
/>
```

---

## 🌐 Deploy to GitHub Pages

This template is pre-configured for GitHub Pages deployment.
GITFOLIO includes a GitHub Actions workflow for deploying your portfolio to GitHub Pages.

### Step 1: Update the Base Path

In `app/page.tsx`, update the `basePath` variable with your repository name:
In `app/page.tsx`, update the `basePath` value with your repository name:

```tsx
const basePath = process.env.NODE_ENV === "production" ? "/YOUR_REPO_NAME" : "";
const basePath =
process.env.NODE_ENV === "production"
? "/YOUR_REPO_NAME"
: "";
```

### Step 2: Enable GitHub Pages

1. Go to your repo's **Settings** → **Pages**
2. Under "Build and deployment", select **GitHub Actions**
3. Push to `main` branch—the included workflow will build and deploy automatically
1. Open your repository on GitHub.
2. Go to **Settings → Pages**.
3. Under **Build and deployment**, select **GitHub Actions**.
4. Push your changes to the `main` branch.
5. GitHub Actions will build and deploy your portfolio automatically.

Your portfolio will be available at:

Your site will be live at: `https://YOUR_USERNAME.github.io/YOUR_REPO_NAME`
```text
https://YOUR_USERNAME.github.io/YOUR_REPO_NAME
```

---

## 📁 Project Structure
## 🧪 Test Your Changes Locally

Before deploying your portfolio, you can check that the project builds successfully:

```bash
npm run lint
npm run build
```

To start the production server locally after building:

```bash
npm run start
```

---

## 📁 Project Structure

```text
├── app/
│ ├── page.tsx # 👈 Main content (edit this!)
│ ├── layout.tsx # Root layout & metadata
│ ├── page.tsx # Main portfolio content
│ ├── layout.tsx # Root layout and metadata
│ └── globals.css # Global styles
├── public/
│ └── me.png # 👈 Your profile photo
│ └── me.png # Profile photo
├── .github/
│ └── workflows/ # GitHub Pages deployment
└── next.config.ts # Next.js configuration
Expand All @@ -122,57 +200,108 @@ Your site will be live at: `https://YOUR_USERNAME.github.io/YOUR_REPO_NAME`

## 🎨 Design Features

- **Cyberpunk Aesthetic**: Neon cyan, fuchsia, and yellow accents on deep space background
- **Terminal Typography**: Monospaced fonts for that coder vibe
- **Interactive Elements**: Glowing hover effects, pulsing status indicator, smooth animations
- **Responsive**: Looks great on mobile, tablet, and desktop
- **Accessible**: Semantic HTML and proper contrast ratios
* **Cyberpunk Aesthetic** — Neon cyan, fuchsia, and yellow accents on a deep-space background
* **Terminal Typography** — Monospaced fonts for a developer-focused look
* **Interactive Elements** — Glowing hover effects, pulsing status indicators, and smooth animations
* **Responsive Design** — Optimized for mobile, tablet, and desktop
* **Accessible** — Uses semantic HTML and accessible color contrast

---

## 🛠️ Tech Stack

| Technology | Version | Purpose |
|------------|---------|---------|
| [Next.js](https://nextjs.org/) | 16 | React framework with App Router |
| [React](https://react.dev/) | 19 | UI library |
| [Tailwind CSS](https://tailwindcss.com/) | 4 | Utility-first styling |
| [TypeScript](https://www.typescriptlang.org/) | 5 | Type safety |
| Technology | Version | Purpose |
| --------------------------------------------- | ------: | ------------------------------- |
| [Next.js](https://nextjs.org/) | 16 | React framework with App Router |
| [React](https://react.dev/) | 19 | UI library |
| [Tailwind CSS](https://tailwindcss.com/) | 4 | Utility-first styling |
| [TypeScript](https://www.typescriptlang.org/) | 5 | Type safety |

---

## 📝 Available Scripts

| Command | Description |
| --------------- | -------------------------------- |
| `npm run dev` | Start the development server |
| `npm run build` | Build the project for production |
| `npm run start` | Start the production server |
| `npm run lint` | Run ESLint |

---

## 🤝 Contributing

Contributions are welcome! If you find a bug, spot an issue in the documentation, or have an idea for improving GITFOLIO, feel free to contribute.

### Contribution Workflow

1. Fork the repository.
2. Clone your fork locally.
3. Create a new branch:

```bash
git checkout -b feature/your-feature
```

4. Make your changes.
5. Test your changes locally.
6. Commit your changes:

```bash
git commit -m "Improve README documentation"
```

7. Push your branch:

```bash
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
git push origin feature/your-feature
```

8. Open a Pull Request and describe what you changed.

For additional contribution guidelines, see [CONTRIBUTING.md](CONTRIBUTING.md).

---

## 🤝 Contributing
## 🐛 Troubleshooting

Found a bug or have an improvement idea? Contributions are welcome!
### The development server will not start

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/awesome-feature`)
3. Commit your changes (`git commit -m 'Add awesome feature'`)
4. Push to the branch (`git push origin feature/awesome-feature`)
5. Open a Pull Request
Make sure Node.js and npm are installed:

See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
```bash
node --version
npm --version
```

Then reinstall the project dependencies:

```bash
rm -rf node_modules
npm install
npm run dev
```

On Windows, you can delete the `node_modules` folder manually and then run:

```bash
npm install
npm run dev
```

### The portfolio looks different after deployment

If assets or links are not loading correctly on GitHub Pages, verify that the `basePath` matches your repository name.

---

## 📄 License

This project is open source under the [MIT License](LICENSE). Feel free to use it for your own portfolio!
This project is open source under the [MIT License](LICENSE). Feel free to use it for your own portfolio.

---

## 💜 Credits

Made with ❤️ by [GitHub for Beginners](https://gh.io/gfb) and [GitHub Copilot](https://gh.io/gfb-copilot).