Creating a Personal Portfolio with Jekyll and Custom Css Animations

Creating a personal portfolio is an excellent way to showcase your skills, projects, and experience. Using Jekyll, a static site generator, combined with custom CSS animations, allows for a flexible and visually appealing website. This guide will walk you through the essential steps to build your portfolio.

Setting Up Your Jekyll Environment

First, ensure you have Ruby and Bundler installed on your computer. Then, create a new Jekyll project by running:

jekyll new my-portfolio

Navigate into your project directory:

cd my-portfolio

Start the local server with:

bundle exec jekyll serve

Creating Your Portfolio Content

Modify the index.md file or create new pages to add your projects, skills, and contact information. Use Markdown to structure your content, which Jekyll will convert into HTML.

Adding Custom CSS Animations

To make your portfolio engaging, add custom CSS animations. Create a stylesheet in the assets/css directory, or modify the existing main.scss file.

For example, to animate project cards on hover, add:

.project-card { transition: transform 0.3s, box-shadow 0.3s; }

.project-card:hover { transform: scale(1.05); box-shadow: 0 4px 20px rgba(0,0,0,0.2); }

Integrating Animations into Your Layout

Apply CSS classes to your HTML elements within your Jekyll templates. For example, add the project-card class to your project sections to enable hover effects.

Final Tips for a Stunning Portfolio

Keep your design clean and navigation intuitive. Use animations sparingly to enhance user experience without overwhelming visitors. Regularly update your content to reflect your latest work.

With Jekyll and custom CSS animations, you can create a personalized, professional portfolio that stands out. Happy coding!