Add a short paragraph describing the features below. What aesthetic and technical choices did you make?
- At least one profile picture
- Biography (at least 100 words)
- Functional Contact Form
- "Projects" section
- Links to external sites, e.g. GitHub and LinkedIn.
I included profile picture of myself made the background match my website background and have a dress on my brand2 color, for visual persons who remember the face better than names I put a rounded small photo of myself in contact section at the end of page. In about section you can read about my background, my approach and values, and also can download my cv. The contact form in second webpage is fully functional allowing visitors to reach out directly, form has curvy edges and is in my brand2 color. The project section has an allocated card in brand1 color for each project showcasing the title and a logo/image of the project. In mobile view the cards will be displayed in a column and in desktop size project section cards will be in rows of three. I have included links to my Github and LinkedIn profile and mailto icon will open in user preferred mailbox with a default subject and greeting content. I keep the flow with using my brand1(#93c572), brand2(#484439), black and white in crisscross or alternating pattern where applicable. I stick with number three, three items on my navbar, three social icons, three cards for my project. I designed a logo in my brand colours and inspired by a Persian embroidery pattern which is called Balochi needlework. Similar pattern also can be found in Persian rugs and tiles. I have deep love for my roots, art and culture.
Add a short paragraph describing the features below. What strategies or design decisions did you work from?
- At least 2 web pages.
- Version controlled with Git
- Deployed on GitHub pages.
- Implements responsive design principles.
- Uses semantic HTML.
In contact section a new web page will appear with the form on it. I used Git to manage and track changes. I worked on develop branch and keep record of codebase. I ran add/commit with related comments/push on develop branch and deploy the final code on my main branch. The website designed for mobile view first and with media queries adjustment applied for bigger size displays. The font on hero section is responsive in different displays. Pointing to logo will bring you to home page. Nav bar menu is interactive and navigate you to the right section. In mobile view nav bar will be shown as a drop down menu by pointing menu icon used checkbox, input, label. The socials icons will be in footer for mobile display and in header for bigger displays. I used meaningful, related names, tags, labels, Alt text for all elements to help search engines and screen reader understand the content and structure.
Add a short paragraph describing the features below, if you included any.
- Different styles for active, hover and focus states.
- Include JavaScript to add some dynamic elements to your site. (Extra tricky!)
I have all my social icons, buttons to download resume or navigating to next page interactive. They will scale up once hover over or will have different border and background colour where applicable.
( Desktop View | Mobile View)
( Header and Hero Section | Bio Section | Projects Section | Contact and Footer Section )
( Header and Hero Section | Hero Section | Bio Section | Bio and Projects Section | Project Section | Contact Section | Contact and Footer Section )
( Header and Hero Section | Bio and Projects Section | Projects Section | Projects and Contact Section | Project, contact and Footer Section)
( First Button Normal Mode | First Button Action Mode | Second Button Normal Mode | Second Button Action Mode )
