Weekly Assignment: Personal Portfolio

Webpage with CSS, Git, JavaScript, and

Cloudflare Pages Hosting
Date: 08/12/2024

Objective:

 Build a personal portfolio webpage using HTML, CSS, and JavaScript.

 Practice JavaScript for interactivity and dynamic content.
 Use Git for version control and Cloudflare Pages for deployment.
 Continue improving English writing skills through descriptive and formal content.

Assignment Overview:

1. HTML Structure (Content)

 Header Section:
o Create a header that includes:
 Your name.
 A short tagline (e.g., "Web Developer | Designer | Blogger").
 A small professional image (e.g., a profile picture).
 About Me Section:
o Write a short paragraph introducing yourself. Describe your goals, skills, and
current learning journey (e.g., learning HTML, CSS, Git).
 Skills Section:
o Create a list of your skills using an unordered list.
o Mention web technologies you’re proficient in (e.g., HTML, CSS, Git).
 Projects Section:
o Showcase 3-4 of your favorite projects.
o Each project should have:
 An image.
 A brief description.
 A link to view more details (e.g., a GitHub repository or a live demo).
 Contact Section:
o Create a contact form with fields for:
 Name.
  Email.
 Message.
o Add a simple message above the form instructing users to contact you.

2. CSS Styling (Design)

 Page Layout:
o Use flexbox or grid layout to arrange the sections (About Me, Skills, Projects,
and Contact) in a visually appealing manner.
 Styling the Header:
o Make the header stand out by adding:
 A background color.
 Padding.
 Centered content.
 Projects Section Styling:
o Use flexbox or grid layout to display your projects side by side, with images
and descriptions.
 Hover Effects:
o Add hover effects to the buttons and project images to make the page more
interactive.
 Responsive Design:
o Use media queries to ensure the page is responsive on both mobile and
desktop screens.

3. JavaScript (Functionality)

Add interactivity and dynamic content using JavaScript. Here are some exercises to practice
JavaScript:

 Form Validation:
o Add JavaScript to validate the contact form before submission.
 Ensure that the name, email, and message fields are not empty.
 Implement basic email format validation (e.g., check for "@" in the
email).
 Interactive Elements:
o Add a dark/light theme toggle button:
 Use JavaScript to switch between a dark and light theme for the page.
 Modify the background-color, color, and other style elements to change
the theme.
 Project Section Filter:
o Create a filtering feature for the projects section:
 Display a list of project categories (e.g., "Web Development",
"Design", "Blogging").
  When a user clicks on a category, use JavaScript to filter and display
only the projects that match the selected category.
 Image Carousel (Optional):
o Add a simple image carousel in the "Projects" section.
 Use JavaScript to create an interactive slideshow of project images.

4. Git Version Control

 Git Setup:
o Initialize a Git repository in your project folder.
o Commit your changes regularly with meaningful commit messages.
 Git Workflow:
o Demonstrate a typical Git workflow by:
 Creating a new branch for new features.
 Making changes.
 Merging with the main branch.

5. Cloudflare Pages Hosting (Deployment)

Here’s where you can introduce Cloudflare Pages and help them deploy their portfolio
project:

 GitHub Pages Setup:

o Create a GitHub repository for your portfolio if you haven’t already.
o Push your HTML and CSS files to the repository, and use GitHub Pages to
deploy the site.
 Cloudflare Pages Deployment:
o Create a Cloudflare account and set up Cloudflare Pages.
o Link your GitHub repository to Cloudflare Pages for automatic deployment.
o Once connected, set the build settings and deploy your portfolio site.
o Ensure that the deployed site is live and can be accessed via a public URL.
 Custom Domain (Optional):
o If you have a custom domain, link it to your Cloudflare Pages project and
configure the DNS settings to point to your Cloudflare Pages deployment.

6. English Writing (Content)

 Introduction:
o Write 5-7 sentences describing yourself, your background, and your current
goals (related to web development). Maintain a professional and formal
tone.
 Skills Description:
 o For the Skills section, write 5-7 sentences explaining each skill you
mentioned (e.g., HTML, CSS, Git).
 Projects:
o For each project in the Projects Section, write a brief description (3-4
sentences). Mention the technology used and the challenges you overcame.

Additional Exercises (Optional):

 JavaScript Animations:
o Add interactive animations to the portfolio using JavaScript (e.g., animations
triggered by scrolling or clicking).
 JavaScript Data Storage:
o Use localStorage or sessionStorage in JavaScript to store user preferences,
such as the selected theme (dark/light mode), and ensure the preference is
remembered when the user revisits the page.
 Add a "Scroll to Top" Button:
o Implement a "Scroll to Top" button using JavaScript. The button should
appear when the user scrolls down, and clicking on it should bring the user
back to the top of the page.

Deliverables:

1. HTML File: index.html

2. CSS File: styles.css
3. JavaScript File: script.js (New)
4. GitHub Repository: Push your portfolio to GitHub and include your JavaScript file.
5. Cloudflare Pages Deployment: Ensure your portfolio is hosted on Cloudflare Pages
with a live URL.
6. English Writing: Include well-written content in the sections described above.

Evaluation Criteria (Updated):

1. HTML Structure:
o Proper usage of semantic HTML elements.
o Well-organized sections (About Me, Skills, Projects, Contact).
2. CSS Styling:
o Effective use of flexbox or grid layout.
o Responsive design using media queries.
o Clean, visually appealing styles for text, buttons, forms, and images.
3. JavaScript Functionality:
o Form validation is implemented.
 o Theme toggle functionality works correctly.
o Filtering feature for projects is functional.
o Interactive or dynamic features like the image carousel or scroll-to-top
button are implemented (optional).
4. Git Workflow:
o Proper usage of Git commands for version control (commit, push, branch).
o Regular commits with clear messages.
5. Cloudflare Pages Hosting:
o The portfolio is successfully deployed on Cloudflare Pages.
o A live link is provided.
o The project is set up for automatic deployment from GitHub.
6. English Writing:
o Clear, grammatically correct content with a professional tone.
o Well-explained skills and projects.
7. Creativity:
o Attention to detail in design and content.
o Use of optional features like animations or an interactive resume.

Conclusion:

This updated assignment will help you improve your skills in HTML, CSS, JavaScript, Git, and
Cloudflare Pages deployment. By combining these technologies, you will gain valuable
experience in full-stack web development and deployment, setting you up for success in the
industry.