Homepage Project

Welcome to the Homepage Project! This project is a modern, highly customizable homepage template designed for personal, portfolio, or professional use. It features custom fonts, icon support, modular configuration, and a clean, responsive layout.

---

Table of Contents

• Features
• Project Structure
• Getting Started
• Customization
  • Fonts
  • Icons
  • Configuration
  • Layout
• Usage Examples
• Best Practices
• Screenshots
• Troubleshooting
• Contributing
• License

---

Features

• Custom Fonts: Uses the Onest font family by default, with options for Blogger Sans, Uni Sans, Rubik, Figtree, and Public Sans. Easily add your own fonts.
• Easy Customization: Modify font.css to change fonts or add your own. All styles are modular and easy to update.
• Icon Support: Add and manage SVG icons via icons.js for use throughout your homepage.
• Simple Configuration: Use config.js to adjust settings, links, and personalize your homepage content.
• Modern Design: Clean, minimal, and beautiful layout for any device.
• Responsive Layout: Fully responsive, works on desktops, tablets, and mobile devices.
• Lightweight: No heavy frameworks, fast loading, and easy to maintain.
• Modular Structure: Easily extend or modify components and sections.
• Accessible: Semantic HTML and customizable for accessibility needs.
• Open Source: MIT licensed for personal or commercial use.

---

Project Structure

project homepage/
│
├── font.css      # Font definitions and customizations
├── icons.js      # Icon management and definitions
├── config.js     # Configuration file for homepage settings
├── index.html    # Main HTML file
├── fonts/        # Directory for font files (Onest, Blogger Sans, etc.)
│   ├── Onest/
│   ├── Blogger Sans/
│   ├── Uni Sans/
│   ├── Rubik/
│   └── Figtree/
└── README.md     # Project documentation

---

Getting Started

1. Clone the Repository

git clone https://github.com/Abel-Ajish/homepage.git
cd "project homepage/homepage"

2. Install Fonts

• Download the required font files and place them in the appropriate subfolders under fonts/.
• Update font.css if you add new fonts or change file names.

3. Customize Your Homepage

• Edit config.js to set your homepage title, links, and other settings.
• Update font.css to change the default font or add new font faces.
• Add or modify icons in icons.js.
• Edit index.html to change the layout, add sections, or update content.

4. Preview

• Open index.html in your browser to view your homepage.
• For live reload and advanced development, use a local server (e.g., VS Code Live Server extension).

---

Customization

Fonts

• Default Font: The :root CSS variable --font in font.css controls the default font.
• Adding Fonts:
  1. Place your font files in a new folder under fonts/.
  2. Add a new @font-face rule in font.css:

     @font-face {
       font-family: 'Custom Font';
       src: url('./fonts/CustomFont/CustomFont-Regular.ttf');
     }
     :root {
       --font: 'Custom Font';
     }

• Switching Fonts: Change the --font variable to use any available font family.
• Font Weights & Styles: Add additional @font-face rules for bold, italic, etc.

Icons

• Adding Icons:
  1. Add SVG markup as a string in icons.js:

     // icons.js
     export const githubIcon = '<svg>...</svg>';
     export const twitterIcon = '<svg>...</svg>';

  2. Reference these icons in your HTML or JS as needed.
• Organizing Icons: Group icons by category or usage for easier management.

Configuration

• config.js is the central place for homepage settings:
  • Homepage title
  • Navigation links
  • Social media links
  • Theme preferences
• Example:

  // config.js
  export const homepageTitle = 'Jane Doe | Portfolio';
  export const links = [
    { name: 'GitHub', url: 'https://github.com/Abel-Ajish', icon: 'githubIcon' },
    { name: 'LinkedIn', url: 'https://linkedin.com/in/Abel-Ajish', icon: 'linkedinIcon' },
    { name: 'Blog', url: '/blog/' }
  ];
  export const theme = 'dark';

Layout

• index.html is the main entry point. Use semantic HTML5 elements (<header>, <nav>, <main>, <footer>) for structure.
• Adding Sections: Insert new sections for About, Projects, Contact, etc.
• Styling: Add or update CSS rules in a separate stylesheet or within <style> tags.
• Accessibility: Use aria-labels, alt text, and proper heading structure.

---

Usage Examples

Example: Adding a New Link

// config.js
export const links = [
  ...existing code...
  { name: 'Resume', url: '/resume.pdf', icon: 'fileIcon' }
];

Example: Using a Custom Font

@font-face {
  font-family: 'Lato';
  src: url('./fonts/Lato/Lato-Regular.ttf');
}
:root {
  --font: 'Lato';
}

Example: Adding a New Icon

// icons.js
export const fileIcon = '<svg>...</svg>';

Example: Adding a New Section

<!-- index.html -->
<section id="about">
  <h2>About Me</h2>
  <p>Short bio goes here...</p>
</section>

---

Best Practices

• Keep font files optimized for web (WOFF/WOFF2 preferred for performance).
• Organize icons in icons.js for easy reuse.
• Use semantic HTML for better SEO and accessibility.
• Test on multiple devices to ensure responsive design.
• Keep configuration modular for easy updates.
• Document your changes in the README for future reference.

---

Screenshots

![Homepage Screenshot]

---

Troubleshooting

• Fonts not loading?
  • Ensure font files are in the correct fonts/ subdirectories.
  • Check the src paths in font.css.
  • Use browser dev tools to verify font requests.
• Icons not displaying?
  • Verify SVG markup in icons.js.
  • Make sure you are referencing the correct icon variable in your HTML or JS.
• Layout issues?
  • Use browser developer tools to inspect and debug CSS.
  • Make sure your browser supports modern CSS features.
• Configuration not updating?
  • Check for syntax errors in config.js.
  • Ensure you are saving and reloading the page after changes.

---

Contributing

Contributions are welcome! To contribute:

1. Fork the repository.
2. Create a new branch for your feature or bugfix.
3. Commit your changes with clear messages.
4. Open a pull request describing your changes.

---

License

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

---

Tip: For best results, use modern browsers and ensure your fonts are properly placed in the fonts/ directory. For live development, consider using a local server for hot reload and better performance.