Add personal portfolio project idea

src/data/projects/portfolio-website.md

@@ -0,0 +1,55 @@
+---
+title: 'Personal Portfolio'
+description: 'Convert the previous simple HTML website into a personal portfolio.'
+isNew: false
+sort: 3
+difficulty: 'beginner'
+nature: 'CSS'
+skills:
+  - 'CSS'
+  - 'Responsive Design'
+  - 'Box Model'
+  - 'Typography'
+  - 'Color Theory'
+  - 'Flexbox'
+seo:
+  title: 'Create a Personal Portfolio Website Using HTML and CSS'
+  description: 'Learn how to style a website using CSS by converting a simple HTML website into a personal portfolio.'
+  keywords:
+    - 'basic css'
+    - 'css project idea'
+    - 'responsive design'
+    - 'html and css'
+roadmapIds:
+  - 'frontend'
+
+---
+
+> The goal of this project is to teach you how to style a website using CSS. You will take the structure from the [previous HTML-only project](/projects/basic-html-website) and apply various CSS techniques to enhance its appearance and responsiveness.
+
+In this project, you will style the HTML website structure you created previously [in a different project](/projects/basic-html-website). The focus will be on learning how to use CSS to create responsive layouts, apply color and typography, and enhance the overall design of your website.
+
+Rough mockup of the website structure is given below. Do not worry about the design details i.e. colors backgrounds etc at this stage; we are not looking for a beautiful design, but a well-structured and responsive website. Just focus on making the layout same as the mockup and ensuring it looks good on different screen sizes.
+
+[![Styled HTML Website](https://assets.roadmap.sh/guest/portfolio-template-xdhki.png)](https://assets.roadmap.sh/guest/portfolio-template-xdhki.png)
+
+## Submission Requirements
+
+Your submission should include:
+
+- A fully styled, responsive website with the same structure as the previous project.
+- Consistent use of a chosen color scheme and typography.
+- Proper use of CSS techniques like Flexbox, media queries, and the box model.
+- A responsive navigation bar and well-styled contact form.
+
+## Bonus Points
+
+For bonus points, you can:
+
+- Use [Google Fonts](https://fonts.google.com/) to enhance the typography of your website.
+- Look into [GitHub Pages](https://pages.github.com/) or [Cloudflare Pages](https://pages.cloudflare.com/) to host your website for free.
+- Add support for dark mode using CSS variables.
+
+---
+
+After completing this project, you will have a solid understanding of how to style a basic HTML website using CSS. You can move on to more advanced topics, such as CSS animations, transitions, and grid layouts, in future projects.