diff --git a/README.md b/README.md index 05a338b..f3d2ded 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,66 @@ # ⚑ 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 YOUR_NAME @@ -47,72 +68,129 @@ Find the navigation section and change `GITFOLIO` to your name: ``` ### 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 - ``` +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

- Your developer journey goes here. What drives you? + Your developer journey goes here. What drives you? What are you passionate about building?

``` ### 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 - - - + + + + + ``` --- ## 🌐 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 @@ -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). -