My Portfolio & Blog Website

View my portfolio and blog website

About The Project

Welcome to the repository for my personal portfolio and blog website. This project showcases my work, skills, and thoughts using modern web development technologies and practices.

Built With

• Eleventy
• TailwindCSS
• DecapCMS
• Netlify

Eleventy (11ty)

I chose Eleventy as the static site generator for this project due to its flexibility and simplicity. Eleventy allows me to:

• Use the Nunjucks templating language (which I have experience of when working on the MOD Digital website).
• Create a fast, lightweight site with excellent performance out of the box.

TailwindCSS

For styling, I opted for TailwindCSS because:

• It provides a utility-first approach, allowing for rapid UI development.
• It's highly customizable, enabling me to create a unique design that reflects my personal brand.
• The built-in purge feature ensures that only the CSS I use is included in the final build, resulting in a smaller file size.

Code Quality Tools

To maintain code quality and consistency, I've implemented:

• Prettier for consistent code formatting across the project.
• ESLint with custom configs and airbnb-base for enforcing coding standards and catching potential errors early in the development process.

Content Management and Deployment

I integrated DecapCMS headlessCMS to manage my blog posts and portfolio content as it provides a user-friendly interface for content creation and editing, while keeping my content as part of my Git repository.

For deployment I opted for Netlify because it offers:

• Seamless integration with my Git workflow, enabling continuous deployment.
• Built-in CI/CD pipeline that automatically builds and deploys my site when I push changes to GitHub.
• Easy setup for custom domains and SSL certificates.
• Excellent performance with a global CDN.
• Integrates well with DecapCMS and allows sign in using Netlify Identity.

Getting Started

To get a local copy up and running follow these simple steps.

Installation

1. Clone the repo

   git clone https://github.com/alandavidhenry/portfolio-blog.git

2. Install NPM packages

   npm install

3. Run

   npm start

Roadmap

• Add webpage images
• Add close button on expandable cards
• Add animation to expandable cards
• Add dark mode

See the open issues for a full list of proposed features (and known issues).

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Alan Henry - LinkedIn

Project Link: https://github.com/alandavidhenry/portfolio-blog

Acknowledgments

• Best-README-Template