# Algofy-Practical-Test---Portfolio
Algofy is a leading digital marketing agency working with dozens of brands across industries and Algofy's Practical Assignment is a task to evaluate problem-solving and understanding of web development concepts as part of their recruitment process. (https://www.algofy.com/).
The project consists of using advanced CSS techniques to Create a responsive webpage which includes the following:
- A navigation bar with three links: Home, About, Contact, and a logo (logos can be premade)
- Application of advanced CSS techniques to enhance the navigation bar and make it mobile-friendly
- A hero section with a heading, a subheading, and a background image (images can be premade)
- An About section with a brief paragraph about yourself and an image and by using JavaScript, allow users to expand and collapse the paragraph on the About section
- Application of CSS grid or flexbox to achieve a visually pleasing layout for this section
- A Contact section with a form that includes fields for name, email, and message
- Application of advanced CSS styling techniques to create an attractive form design.
Implementation of dynamic content rendering using the Liquid templating engine:
- Create a JSON or YAML file that contains an array of objects, each representing a project you've worked on in the past
- Use Liquid to dynamically generate a "Projects" section on your webpage and iterate through the array of project objects and display each project's information, including its name, description, and an image
- Add a link or button to each project that leads to its corresponding GitHub repository
- Use Liquid filters to truncate long project descriptions and ensure they fit neatly within the layout
- HTML
- CSS
- JavaScript
- Vanilla JavaScript
- Netlify
- Git
- Responsive Nav Bar
- Text effect on hover: nav bar items (Home, About, Contact)
- Infinite Marquee
- Vanilla Javascript Masonry
- Typewriter Text Effect
- Smooth Scrolling with mouse, keyboard, or trackpad
- Responsive Grid Layout
- Overlay effect with text on image hover
- Responsive buttons
- Porlane
- NeueMontreal
Shades
- #152a21
- #21352c
Tints
- #e6f3ed
- You will notice that although the assignment requested me to use JSON and Liquid templates, the Liquid template aspect isn't included. (However, if you check my not-so-html folder, you will find a review.html file with every code I commented out because I intend to review them later on and understand why they didn't work as intended) The reason is that I found out not too long ago and I mean a few hours ago that Liquid templates don't work with HTML and JavaScript like I thought, so my JSON code obviously wasn't working. I then quickly found a way to do the same task but with Javascript, by creating a project-imgs.js file that creates an array of posts taking project images, names, descriptions, and links as objects in different variables and a function to iterate through the arrays, ultimately creating the necessary HTML structure. I tested it with images first as a test run to see if my code and logic would work since my JSON file wasn't working. And when it did, I progressively added the other details such as link, description, title, etc. and styled them with CSS, and also used Vanilla Js to create a Responsive MasonryGrid
(https://czacawealth.netlify.app/)
- Use the nav bar to navigate through the sections of the site
- Click the buttons in the hero to access Contact Me or view my projects
- Hover on images to reveal project details in the Project section
- Use mouse, trackpad, and keyboard to scroll through the website (smooth scroll implementation)
Pré-requisitos: npm / yarn
# clone repository
git clone https://github.com/wealthczarena/Algofy-Practical-Assignment---Portfolio
# enter your folder name
cd your-folder-name
# install dependencies
yarn install
# execute the project
yarn startCzarena Wealth