Kausar Portfolio – Technigo Bootcamp Project 2025 #56
Conversation
KausarShangareeva
changed the title
Nicolinabl
left a comment
Nicolinabl
left a comment
There was a problem hiding this comment.
Great work!
I love that you followed the design but still added a bit of your personality to it (tags and icons). Also love you photos. Responsivity works really well, it looks good on all screens i checked. Important note though: you only got 78 as score on accessibility via lighthouse, requirement was at least 95. So go in there and check what you need to do to improve your score :)
Regarding your folder structure i found it interesting to see how we have done it quite differently. I see that you hav created a components folder for each section, interesting approach, it made it easy for me to look at the right components you used in each section. Little note there aswell though, some folders are named with first letter in uppercase and some in lowercase, i did the same in my project and later i have learned that it is best to stick to either or :)
| # Portfolio | ||
| # 🏡 Kausar Portfolio | ||
|
|
||
| **Kausar Portfolio** is a modern, interactive portfolio website built during Technigo’s JavaScript Bootcamp (August 2025). The project showcases my skills, projects, blog articles, and tech stack, demonstrating responsive design, dynamic content, and interactive UI components. |
There was a problem hiding this comment.
Great readme! Very detailed :) My only input here is that you could mention that you used react already in first section.
| @@ -0,0 +1,128 @@ | |||
| import styled from "styled-components"; | |||
There was a problem hiding this comment.
Nice that you did all the typography in one file, i understand it makes it less messy as it reduces import statements in other files. It was a little hard for me to find though among all of your folders. Maybe it could be in your styles folder instead?
| `; | ||
|
|
||
| export function SectionTitle({ children, ...props }) { | ||
| return <TitleStyle {...props}>{children}</TitleStyle>; |
There was a problem hiding this comment.
On all the other h1,h3,h4 etc you have named the components in similar pattern " TitleH1", "TitleH3", but on the h2 you named it "SectionTitle". Is there a reason for that? If not, my suggestion is that you keep consistency in naming and also name that "TitleH2", so it is easier to understand what is what :)
| @@ -0,0 +1,64 @@ | |||
| import { SectionTitle } from "../../assets/Typography"; | |||
There was a problem hiding this comment.
the imports for SectionTitle and TitleH1 could be combined in one import: import { SectionTitle, TitleH1 } from "../../assets/Typography"
makes it shorter :)
| gap: 120px; | ||
| `; | ||
|
|
||
| const SectionDiv = styled.div` |
There was a problem hiding this comment.
good choice of name, makes it easy for me to understand what is what
|
|
||
| export const GlobalStyles = createGlobalStyle` | ||
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); |
There was a problem hiding this comment.
I imported my fonts in the html file as i understood it would render the font quicker than if you import it in globalStyles file. Not sure which is best approach, but could be worth looking into :)
There was a problem hiding this comment.
Edit: i saw now that you also have imported google fonts in the html file
| html, body { | ||
| font-family: "Montserrat", sans-serif; | ||
| background-color: FFFFFF; |
There was a problem hiding this comment.
Missing a # here (for background color)
| *, *::after, *::before { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; |
| <GlobalStyles /> | ||
| <HeroSection /> | ||
| <TechSection /> | ||
| <FeaturedProjectsSection /> | ||
| <SkillsSection /> | ||
| <BlogSection /> | ||
| <FooterSection /> |
| @@ -0,0 +1,29 @@ | |||
| { | |||
| "name": "Kausar", | |||
There was a problem hiding this comment.
Nice work that you created and used several json files to structure your data :)
Thank you for your feedback regarding accessibility. I’ve made the necessary updates, and the accessibility metrics have improved significantly. I appreciate your attention to detail and your help 😍🚩 |
3 participants
Hi there! 👋
I built Kausar Portfolio as part of my Technigo JavaScript Bootcamp 2025 journey. This interactive portfolio showcases my projects, skills, and blog articles in a clean, responsive design with dynamic UI components.
Key Features:
This project helped me practice React, responsive design, interactive UI, and combining design with coding. Hope you enjoy exploring it! 🌟