Security fix noopener noreferrer 1344795794978397750

.eslintrc

@@ -41,11 +41,11 @@
     "object-curly-spacing": ["error", "never"],
     "react/jsx-curly-brace-presence": [2, "never"],
     "react/jsx-no-duplicate-props": "error",
-    "react/jsx-sort-props": "error",
+    "react/jsx-sort-props": "off",
     "react/react-in-jsx-scope": "off",
     "react/no-unescaped-entities": "off",
     "simple-import-sort/exports": "error",
-    "simple-import-sort/imports": "error",
+    "simple-import-sort/imports": "off",
     "sort-imports": "off",
     "jsx-a11y/no-onchange": "off",
     "jsx-a11y/no-autofocus": "off",

README.md

@@ -24,6 +24,16 @@
 
 #### If this template has helped you and you'd like to support my work, feel free to [♥️ Sponsor](https://github.com/sponsors/tbakerx) the project
 
+### 📚 Documentation
+
+For a detailed guide on getting started, architecture overview, and component usage, please refer to our full documentation:
+- **[Documentation Home](docs/README.md)**
+- **[Getting Started](docs/GETTING_STARTED.md)**
+- **[Architecture Overview](docs/ARCHITECTURE.md)**
+- **[Components Guide](docs/COMPONENTS.md)**
+
+---
+
 ### 🎉 Version 2 is here! New features:
 1. Completely rebuilt with React and full typescript support
 2. Built on the [Next.js](https://nextjs.org/) framework for easy server side rendering/static generation, image optimization, api routes, and deployment
@@ -81,4 +91,3 @@ Deploying your new site to Vercel is simple, and can be done by following their
 ## Forkers
 
 [![Forkers repo roster for @tbakerx/react-resume-template](https://reporoster.com/forks/dark/tbakerx/react-resume-template)](https://github.com/tbakerx/react-resume-template/network/members)
-

docs/ARCHITECTURE.md

@@ -0,0 +1,83 @@
+# Architecture Overview
+
+This document provides a technical overview of the React Resume Template. It's meant for developers who want to understand the stack, how the application is structured, and how data flows through the application.
+
+## Core Technologies
+
+The project relies on a modern frontend stack:
+- **Next.js (v14)**: The core framework providing routing, React Server Components (where applicable), server-side rendering (SSR), and static site generation (SSG). This allows the resume to be fully indexed by search engines (SEO) and performant.
+- **React (v18)**: For rendering the user interface using functional components and hooks.
+- **TypeScript**: The entire codebase is typed. This helps catch errors early and provides excellent developer experience (DX) through autocomplete and inline documentation.
+- **Tailwind CSS (v3)**: A utility-first CSS framework. Most styling is done via Tailwind utility classes directly in the React components, minimizing the need for custom CSS files.
+- **Headless UI & Heroicons**: Used for accessible, unstyled UI components and SVG icons.
+
+---
+
+## Directory Structure
+
+The project follows a standard Next.js directory layout with a dedicated `src/` directory.
+
+```plaintext
+react-resume-template/
+├── .github/          # GitHub Actions (e.g., CI/CD workflows)
+├── public/           # Static assets (favicons, manifest)
+├── src/
+│   ├── components/   # React components
+│   │   ├── Icon/     # Reusable SVG icon components
+│   │   ├── Layout/   # Page wrapper/layout component
+│   │   └── Sections/ # Major feature components (Hero, About, Resume, etc.)
+│   ├── data/         # Configuration data and TypeScript definitions
+│   │   ├── data.tsx  # Centralized resume content
+│   │   └── dataDef.ts# TypeScript interfaces for the data
+│   ├── hooks/        # Custom React hooks (e.g., useWindow, useIntersection)
+│   ├── images/       # Static image files imported into data.tsx
+│   └── pages/        # Next.js Pages Router
+│       ├── api/      # Next.js API Routes (empty by default)
+│       ├── _app.tsx  # Custom App component for global styles/layout
+│       ├── _document.tsx # Custom Document for HTML/Body tags
+│       └── index.tsx # Main entry point (Home page)
+├── next.config.js    # Next.js configuration
+├── package.json      # Dependencies and scripts
+├── tailwind.config.js# Tailwind theme and plugin configuration
+└── tsconfig.json     # TypeScript compiler options
+```
+
+---
+
+## Data Flow & Architecture
+
+One of the key design patterns in this project is separating the **presentation layer** (React components) from the **data layer** (content). This ensures that non-developers can update the content without fear of breaking the UI.
+
+### 1. `src/data/data.tsx`
+This file acts as the "database" for the application. It exports structured objects (typed via `dataDef.ts`) containing personal information, skills, portfolio items, and social links.
+
+### 2. `src/pages/index.tsx`
+This is the root page component. It acts as the orchestrator.
+- It imports the specific section components from `src/components/Sections/`.
+- It renders a `Page` layout component.
+- It maps the static data from `data.tsx` and passes it as props (or renders the components that consume the static data directly).
+
+### 3. `src/components/Sections/`
+Each section (e.g., `Hero.tsx`, `About.tsx`, `Portfolio.tsx`) is responsible for rendering a distinct part of the single-page layout.
+- The sections are typically assigned a unique `id` (e.g., `id="about"`).
+- The `Header.tsx` component tracks the active section via the `useIntersection` hook and updates the navigation styling accordingly (e.g., underlining the "About" link when scrolling past the About section).
+
+### 4. Styling (Tailwind CSS)
+The vast majority of styling is handled via Tailwind. You'll see classes like `flex flex-col md:flex-row items-center justify-center p-4 bg-stone-900 text-white`.
+- The main configuration file `tailwind.config.js` extends the default theme.
+- A small `src/globalStyles.scss` file exists for minimal global overrides or specific animations not easily achievable via Tailwind utilities.
+
+---
+
+## Next Steps for Developers
+If you are modifying the codebase:
+1. **Adding a new section**:
+   - Define a new data interface in `src/data/dataDef.ts`.
+   - Add the data block in `src/data/data.tsx`.
+   - Create a new component in `src/components/Sections/`.
+   - Import and render it in `src/pages/index.tsx`.
+   - Add the new section to the `SectionId` enum and navigation items in `src/data/data.tsx` to ensure the header links to it.
+2. **Contact Form Logic**:
+   - The default `ContactForm.tsx` manages state and validates input but does not send emails.
+   - You can create an API route in `src/pages/api/contact.ts` to handle the POST request.
+   - Use a service like SendGrid, Nodemailer, or a serverless function to dispatch the email.

docs/COMPONENTS.md

@@ -0,0 +1,72 @@
+# Components Guide
+
+This guide details the primary React components that structure the application, focusing on the ones found in `src/components/Sections`. Each major part of the resume page is broken into its own component for maintainability and modularity.
+
+---
+
+## 🏗 Directory: `src/components/Sections`
+
+This folder contains the core visual blocks that make up the single-page application. Most of these components receive their data directly from `src/data/data.tsx` by importing the variables.
+
+### 1. `Header.tsx`
+This component is fixed to the top of the viewport on desktop or serves as a mobile menu toggle on smaller screens.
+- **Navigation:** Dynamically generates links based on `SectionId` enum values in `src/data/data.tsx`.
+- **Scroll Tracking:** Utilizes a custom hook (`useIntersection`) to determine which section is currently visible in the viewport and highlights the corresponding navigation item.
+
+### 2. `Hero.tsx`
+The first section users see when landing on the site.
+- **Content:** Displays the background image (`heroImage`), the user's name (`heroData.name`), a short bio (`heroData.description`), and primary call-to-action buttons (e.g., Download Resume, Contact).
+- **Styling:** Typically uses a full-screen height layout with overlaid text and buttons. The background image uses Next.js Image component for optimization.
+
+### 3. `About.tsx`
+Provides detailed information about the individual.
+- **Profile Image:** Displays a circular avatar (`profilepic`).
+- **Text Block:** Renders the descriptive paragraph (`aboutData.description`).
+- **List Items:** A responsive grid showing `aboutItems` (e.g., Location, Age, Email, Employment Status).
+
+### 4. `Resume.tsx`
+This is arguably the most complex component, as it breaks down work experience, education, and skills.
+- **Timeline Items (Education & Work):** Renders vertical chronological lists based on the `education` and `experience` arrays from the data file. It extracts dates, titles, and descriptive content.
+- **Skills (Progress Bars):** Iterates over `skills` groupings (e.g., Frontend, Backend, Spoken languages) and renders individual progress bars based on the numeric value out of a maximum (usually 10).
+
+### 5. `Portfolio.tsx`
+A visual showcase of projects.
+- **Grid Layout:** Displays `portfolioItems` in a responsive grid.
+- **Images:** Uses the Next.js `<Image>` component to render optimized thumbnails.
+- **Hover Effects:** Includes overlay effects that reveal the project title, description, and an external link icon when hovered over.
+
+### 6. `Testimonials.tsx`
+Displays quotes from colleagues or clients.
+- **Background:** Features an overlaid background image (`testimonialImage`).
+- **Carousel / List:** Iterates over the `testimonialData` array to display the quotes and the authors.
+
+### 7. `Contact.tsx`
+The section for getting in touch.
+- **Contact Info Grid:** Displays methods of contact (e.g., Email, Phone, LinkedIn) based on the `contactData` array.
+- **ContactForm:** A sub-component (`ContactForm.tsx`) that renders the input fields (Name, Email, Message) and handles local state and basic validation.
+  - *Note:* Out of the box, the form does not send emails. A backend service (e.g., an API route or a third-party form handler) must be implemented.
+
+### 8. `Footer.tsx`
+The bottom bar of the website.
+- **Social Links:** Displays icons linked to the user's social profiles based on the `socialLinks` array.
+- **Copyright:** Displays the current year and the user's name.
+
+---
+
+## 🛠 Shared Components
+
+### `Layout / Page.tsx`
+This component acts as a wrapper for the entire application. It accepts metadata props (Title, Description) and configures the HTML `<head>` using Next.js `<Head>`. It sets up the main semantic HTML structure.
+
+### `Icon / Icon.tsx`
+A versatile, customizable SVG wrapper used throughout the application to render vector icons consistently. It often interfaces with the imported SVGs or Heroicons.
+
+---
+
+## 💡 Best Practices
+
+- When creating a new component or section, try to follow the established pattern:
+  1. Create a TypeScript interface for the data in `src/data/dataDef.ts`.
+  2. Instantiate that data in `src/data/data.tsx`.
+  3. Import the data into the component and map over it to render the UI.
+- Keep Tailwind classes inline where possible. If a set of classes is repeated frequently, consider abstracting it into a smaller React component rather than creating custom CSS classes.

docs/GETTING_STARTED.md

@@ -0,0 +1,119 @@
+# Getting Started
+
+Welcome to the **Getting Started** guide. This document walks you through setting up the React Resume Template locally, installing dependencies, and customizing the site with your personal information.
+
+---
+
+## 🚀 Prerequisites
+
+Before you start, make sure your machine has the following tools installed:
+
+1. **[Node.js](https://nodejs.org/)**: Recommended to use LTS (18.x or 20.x).
+2. **[Yarn](https://yarnpkg.com/)**: The preferred package manager used in this repository (`npm` will also work, but `yarn` is recommended as the project includes a `yarn.lock` file).
+
+---
+
+## 🛠 Installation
+
+Follow these steps to set up the project on your machine:
+
+1. **Clone the Repository**
+   If you haven't already, fork the [original repository](https://github.com/tbakerx/react-resume-template) and clone your fork locally:
+   ```bash
+   git clone https://github.com/YOUR_USERNAME/react-resume-template.git
+   cd react-resume-template
+   ```
+
+2. **Install Dependencies**
+   Run the following command to download and install all required packages:
+   ```bash
+   yarn install
+   ```
+
+3. **Start the Development Server**
+   Start Next.js in development mode. The app will usually run at `http://localhost:3000`.
+   ```bash
+   yarn dev
+   ```
+
+---
+
+## 📝 Customizing Your Resume
+
+The main selling point of this template is that you do not need to touch React code to build your site. All the data that powers the resume sections is stored in one single configuration file.
+
+### 1. The Data File
+Navigate to `src/data/data.tsx`. This file contains the entirety of the information displayed on the website.
+
+Inside `data.tsx`, you'll find defined constants that map to different sections of the page, such as:
+
+- `heroData`: Your name, role, a brief description, and main call-to-actions.
+- `aboutData`: Detailed text about yourself and profile image.
+- `resumeData`: Your work history and education.
+- `skills`: A categorized list of your technical skills with percentage values.
+- `portfolioItems`: A collection of projects you've worked on, including images and links.
+- `testimonialData`: Quotes or testimonials from people you've worked with.
+- `contactData`: Information for the contact section (email, location, social links).
+
+### 2. Updating Data
+To update the content, simply replace the placeholder strings and arrays in `src/data/data.tsx` with your own details.
+
+For example, to update the Hero section:
+```tsx
+export const heroData: Hero = {
+  imageSrc: heroImage,
+  name: `I'm John Doe.`,
+  description: (
+    <>
+      <p className="prose-sm text-stone-200 sm:prose-base lg:prose-lg">
+        I'm a <strong className="text-stone-100">Full Stack Software Engineer</strong> currently working
+        at <strong className="text-stone-100">Acme Corp</strong>.
+      </p>
+    </>
+  ),
+  actions: [
+    {
+      href: '/assets/resume.pdf',
+      text: 'Resume',
+      primary: true,
+      Icon: ArrowDownTrayIcon,
+    },
+    {
+      href: `#${SectionId.Contact}`,
+      text: 'Contact',
+      primary: false,
+    },
+  ],
+};
+```
+
+### 3. Updating Images
+The project relies on static images stored in the `src/images/` directory. By default, these images are imported into `data.tsx` at the top of the file:
+```tsx
+import heroImage from '../images/header-background.webp';
+import porfolioImage1 from '../images/portfolio/portfolio-1.jpg';
+import profilepic from '../images/profilepic.jpg';
+import testimonialImage from '../images/testimonial.webp';
+```
+
+**How to add your own images:**
+1. Place your `.jpg`, `.png`, or `.webp` files in `src/images/` (or a subdirectory like `src/images/portfolio/`).
+2. Import the new image into `src/data/data.tsx`.
+3. Reference the imported image variable in the appropriate section's data block.
+
+### 4. Updating the Contact Form
+By default, the template only manages state and UI for the Contact form. Due to the variety of backend services (Formspree, Netlify Forms, SendGrid, etc.), you are expected to implement the actual submission logic.
+
+If you are a developer, head to `src/components/Sections/Contact/ContactForm.tsx` to handle the `onSubmit` logic and make the API call to your preferred email/form provider.
+
+---
+
+## 🚀 Deployment
+
+The project is built using [Next.js](https://nextjs.org/) and can be easily deployed to [Vercel](https://vercel.com/) (recommended) or any host that supports Node.js apps.
+
+To deploy via Vercel:
+1. Create an account on Vercel.
+2. Link your GitHub account and import your forked repository.
+3. Vercel will automatically detect the Next.js setup. Click "Deploy".
+4. Within minutes, your resume website will be live!

docs/README.md

@@ -0,0 +1,27 @@
+# React Resume Template Documentation
+
+Welcome to the documentation for the **React Resume Template**. This project is a customizable, responsive, and server-side rendered personal resume website built with modern web technologies.
+
+## Purpose
+
+This template provides an easy-to-use foundation for developers to create their own personal resume or portfolio website. By editing a single data file, you can instantly populate the site with your own information, skills, portfolio items, and contact details without needing to write custom React components from scratch.
+
+For developers looking to extend or customize the template further, the codebase is fully structured using modern React and Next.js practices, making it simple to scale and maintain.
+
+## Documentation Contents
+
+This documentation is divided into several guides to help you get the most out of the project, whether you just want to launch your own resume or contribute to the template's development.
+
+- **[Getting Started](GETTING_STARTED.md)**: A guide for users on how to clone, install, and run the project locally. It also covers how to customize the site by editing the main data configuration file.
+- **[Architecture Overview](ARCHITECTURE.md)**: A technical deep dive into the project's stack (Next.js, React, TypeScript, Tailwind CSS) and directory structure. Ideal for developers wanting to understand how the application works under the hood.
+- **[Components Guide](COMPONENTS.md)**: An overview of the core React components that make up the different sections of the resume website, such as the Hero, About, Resume, Portfolio, and Contact sections.
+
+## Built With
+
+- **[Next.js](https://nextjs.org/)** (v14): For server-side rendering, static site generation, and optimized performance.
+- **[React](https://reactjs.org/)** (v18): A JavaScript library for building user interfaces.
+- **[TypeScript](https://www.typescriptlang.org/)**: Adding static types for safer code and better developer experience.
+- **[Tailwind CSS](https://tailwindcss.com/)**: A utility-first CSS framework for rapid UI development and styling.
+
+---
+If you find this template helpful, consider leaving a ⭐ on the [original GitHub repository](https://github.com/tbakerx/react-resume-template) to support the author!