Ethan Villalovoz

Ethan Villalovoz Personal Website

---

Table of Contents

• Introduction
• Description
• Visuals
• Features
• Prerequisites
• Technologies Used
• QuickStart
• Usage
• Advanced Usage
• Configuration
• Folder Structure
• Automated Tests
• Roadmap
• Contribution Guidelines
• Issue & Pull Request Templates
• Diagrams
• SOLID Principles
• License

---

Introduction

A modern, professional personal website built with Next.js and TypeScript. Designed for researchers, engineers, and professionals to showcase their work, research, and contact information.

---

Description

This site features a responsive, card-based projects page, a vertical timeline for experience, and a contact page with copy-to-clipboard email and downloadable bio/CV. It is fully accessible, SEO-friendly, and easy to customize for your own use. The project is deployed on Vercel for seamless CI/CD.

---

Visuals

---

Features

• Card-based, responsive grid for technical projects
• Vertical timeline for experience and education
• Downloadable and displayed bio/CV
• Copy-to-clipboard email with feedback
• Responsive navigation bar with mobile hamburger menu
• SEO: sitemap.xml and robots.txt auto-generation
• Fully responsive and accessible
• Easy to customize and extend

---

Prerequisites

• Node.js v18+ (recommended: latest LTS)
• npm, yarn, pnpm, or bun (choose one)
• Git

---

Technologies Used

• Next.js (App Router)
• TypeScript
• Tailwind CSS
• Framer Motion
• next-sitemap (SEO)
• Vercel (deployment)

---

QuickStart

1. Clone the repository:

    git clone https://github.com/ethanvillalovoz/ethan-site-rebuild.git
    cd ethan-site-rebuild
   

2. Install dependencies:

    npm install
    # or
    yarn install
    # or
    pnpm install
    # or
    bun install
   

3. Start the development server:

    npm run dev
    # or
    yarn dev
    # or
    pnpm dev
    # or
    bun dev
   

4. Open your browser:
   Visit http://localhost:3000

---

Usage

• Edit content in src/app/ (e.g., projects/page.tsx, about/page.tsx, contact/page.tsx)
• Replace images in public/images/ and documents in public/data/
• The site auto-updates as you save changes

---

Advanced Usage

• SEO:
  Regenerate sitemap.xml and robots.txt after adding/removing pages:

  npx next-sitemap
  

• Custom Domains:
  Configure in the Vercel dashboard under your project’s “Domains” tab.
• Environment Variables:
  Add secrets or API keys in Vercel dashboard or .env.local (see Configuration)

---

Configuration

• Most configuration is handled via next.config.js and environment variables.
• To add environment variables, create a .env.local file:

    NEXT_PUBLIC_SITE_URL=https://your-site.vercel.app
    # Add other variables as needed
  

• For SEO, update next-sitemap.config.js as needed.

---

Folder Structure

ethan-site-rebuild/
├── public/
│   ├── images/
│   ├── data/
│   ├── robots.txt
│   └── sitemap.xml
├── src/
│   ├── app/
│   ├── components/
│   ├── styles/
│   └── ...
├── .github/
│   ├── ISSUE_TEMPLATE/
│   └── PULL_REQUEST_TEMPLATE.md
├── README.md
├── LICENSE
├── next.config.js
├── tailwind.config.js
└── package.json

---

Automated Tests

No automated tests are included yet.
You can add your own tests using Jest or React Testing Library.

---

Roadmap

• Add blog section
• Add automated tests
• Improve accessibility and a11y testing
• Add dark mode toggle
• Enhance project filtering and search
• Add more visuals and animations

---

Contribution Guidelines

Contributions are welcome!
To contribute:

1. Fork the repository
2. Create a new branch (git checkout -b feature/your-feature)
3. Commit your changes
4. Open a pull request

See CONTRIBUTING.md for more details.

---

Issue & Pull Request Templates

• Use the templates in .github/ISSUE_TEMPLATE/ for bug reports and feature requests.
• Pull requests should use .github/PULL_REQUEST_TEMPLATE.md.

---

Diagrams

For architecture and workflow diagrams, use Mermaid.

Example:

flowchart TD
    A[Visitor] -->|Navigates| B(Homepage)
    B --> C{Chooses Page}
    C -->|Projects| D[Projects Page]
    C -->|About| E[About Page]
    C -->|Contact| F[Contact Page]

---

SOLID Principles

This project aims to follow SOLID principles for maintainability:

• Single Responsibility: Each component does one thing.
• Open/Closed: Components are open for extension, closed for modification.
• Liskov Substitution: Components can be replaced by their subtypes.
• Interface Segregation: Prefer small, focused interfaces.
• Dependency Inversion: Depend on abstractions, not concretions.

---

License

This project is open source and available under the MIT License.

---

This site is open source. Improve this page.