Портфолио Sunnat Bakidjanov — Frontend-разработчик

. . .
0 %

Hello,
I'm Sunnat

|
S C R O L L

Scroll section

Progress of my skills

0
%
HTML
HTML5
Semantic layout
BEM
Page structure optimization
Working with forms
Valid and cross-browser code
0
%
CSS
CSS3
Responsive design for different screens
CSS animations
SASS, SCSS, LESS
CSS Variables
JavaScript integration
0
%
JavaScript
ES6+
Working with the DOM
SPA
Creating Animations with JavaScript
Working with Arrays and Objects
Error Handling
0
%
React
React
JSX
Redux
React-router-dom
Next
React hooks

My projects

I don't have any projects to share yet But they will appear soon

My way

Uses

Equipment and Software I Use for Development

Scroll title

S C R O L L

Equipment

Lenovo – 32″ G32qc-10 Curved Monitor, VA, 144Hz, 1mc, QHD(2560×1440) 2K
13th Gen Intel(R) Core(TM) i7-13700KF 3.40 GHz | 2x Kingston DDR5 16GB 5200Mhz | RGB 12GB GeForce RTX3060
Gaming Chair Cougar ARMOR ONE Sky Blue
Cougar E-Deimus 120
Keyboard ASUS | ROG | FALCHION |
Cougar Minos X5
Logitech 920 HD Pro Stream
Maono DGM20S

Software

VSCode
Figma
PerfectPixel
Bootstrap
Git

Linters

for code cleanliness
for debugging
for code quality
for code review and fixes
for code improvement

Settings

Linter settings that I use

Paste this code into .prettierrc

Install Prettier if it is not already installed: npm install --save-dev prettier 

{
  "semi": false,
  "bracketSpacing": true,
  "useTabs": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "arrowParens": "avoid",
  "trailingComma": "es5",
  "printWidth": 250,
  "proseWrap": "never",
  "endOfLine": "auto"
}

Paste this code into eslint.config.json

Install ESLint and Prettier if they are not already installed: npm install --save-dev eslint prettier

Add plugins: npm install --save-dev eslint-plugin-prettier eslint-plugin-html @eslint/js 

{
  "env": {
	"browser": true,
	"es2021": true
  },
  "extends": [
	"eslint:recommended",
	"plugin:@eslint/js/recommended",
	"plugin:prettier/recommended",
	"plugin:html/recommended"
  ],
  "plugins": [
	"prettier",
	"html"
  ],
  "overrides": [
	{
	  "files": [
		"*.js",
		"*.jsx",
		"*.ts",
		"*.tsx"
	  ],
	  "languageOptions": {
		"globals": {
		"window": "readonly",
		"document": "readonly",
		"navigator": "readonly"
		}
	  },
	  "rules": {
		"prettier/prettier": [
		  "warn",
		  {
			"endOfLine": "auto"
		  }
		]
	  }
	}
  ],
  "rules": {}
}

Paste this code into .stylelintrc.json

Install Stylelint and Prettier if they are not already installed: npm install --save-dev stylelint prettier

Add plugins: npm install --save-dev stylelint-config-standard stylelint-config-standard-scss stylelint-prettier stylelint-order stylelint-scss 

{
  "extends": [
	"stylelint-config-standard",
	"stylelint-config-standard-scss",
	"stylelint-prettier/recommended"
  ],
  "plugins": [
	"stylelint-prettier", 
	"stylelint-order",
	"stylelint-scss"
  ],
  "rules": {
	"prettier/prettier": true,
	"color-hex-length": "short",
	"order/order": [
	  [
		"dollar-variables",
		"custom-properties",
		"at-rules",
		"declarations",
		{
		  "type": "at-rule",
		  "name": "supports"
		},
		{
		  "type": "at-rule",
		  "name": "media"
		},
		"rules"
	  ],
	  { "severity": "warning" }
	],
	"order/properties-order": [
	  {
		"groupName": "CSSModule",
		"properties": ["composes"],
		"emptyLineBefore": "never"
	  },
	  {
		"groupName": "Positioning",
		"properties": [
		  "position",
		  "z-index",
		  "top",
		  "right",
		  "bottom",
		  "left"
		],
		"emptyLineBefore": "never"
	  },
	  {
		"groupName": "Display",
		"properties": [
		  "display",
		  "grid",
		  "flex",
		  "flex-direction",
		  "align-items",
		  "justify-content",
		  "flex-grow",
		  "flex-shrink",
		  "flex-basis",
		  "grid-gap",
		  "grid-template-columns"
		],
		"emptyLineBefore": "never",
		"noEmptyLineBetween": true
	  },
	  {
		"groupName": "Box model",
		"properties": [
		  "box-sizing",
		  "margin",
		  "margin-top",
		  "margin-right",
		  "margin-bottom",
		  "margin-left",
		  "padding",
		  "padding-top",
		  "padding-right",
		  "padding-bottom",
		  "padding-left",
		  "width",
		  "min-width",
		  "max-width",
		  "height",
		  "min-height",
		  "max-height"
		],
		"emptyLineBefore": "never",
		"noEmptyLineBetween": true
	  },
	  {
		"groupName": "Typography",
		"properties": [
		  "font",
		  "font-family",
		  "font-style",
		  "font-variant",
		  "font-weight",
		  "line-height",
		  "font-size",
		  "color",
		  "letter-spacing",
		  "text-indent",
		  "text-align",
		  "text-decoration",
		  "text-transform",
		  "text-shadow",
		  "text-overflow",
		  "white-space",
		  "word-spacing",
		  "word-break"
		],
		"emptyLineBefore": "never",
		"noEmptyLineBetween": true
	  },
	  {
		"groupName": "Backgrounds",
		"properties": [
		  "background",
		  "background-image",
		  "background-position",
		  "background-size",
		  "background-repeat",
		  "background-origin",
		  "background-clip",
		  "background-attachment",
		  "background-color"
		],
		"emptyLineBefore": "never",
		"noEmptyLineBetween": true
	  },
	  {
		"groupName": "Borders",
		"properties": [
		  "border",
		  "border-top",
		  "border-right",
		  "border-bottom",
		  "border-left",
		  "border-width",
		  "border-top-width",
		  "border-right-width",
		  "border-bottom-width",
		  "border-left-width",
		  "border-style",
		  "border-top-style",
		  "border-right-style",
		  "border-bottom-style",
		  "border-left-style",
		  "border-color",
		  "border-top-color",
		  "border-right-color",
		  "border-bottom-color",
		  "border-left-color",
		  "border-radius",
		  "border-top-right-radius",
		  "border-top-left-radius",
		  "border-bottom-right-radius",
		  "border-bottom-left-radius",
		  "border-collapse"
		],
		"emptyLineBefore": "never",
		"noEmptyLineBetween": true
	  },
	  {
		"groupName": "Others",
		"properties": [
		  "opacity", 
		  "cursor"
		],
		"emptyLineBefore": "never",
		"unspecified": "bottom"
	  }
	]
  },
  "overrides": [
	{
	  "files": ["*.scss"],
	  "rules": {
		"scss/at-each-key-value-single-line": true,
		"scss/at-extend-no-missing-placeholder": true,
		"scss/load-no-partial-leading-underscore": true,
		"scss/load-partial-extension": "always",
		"selector-class-pattern": null,
		"scss/dollar-variable-pattern": null,
		"block-no-empty": null,
		"order/order": null
	  }	
	},
	{
	  "files": ["*.css"],
	  "rules": {
		"prettier/prettier": true,
		"selector-class-pattern": null,
		"no-descending-specificity": null,
		"no-duplicate-selectors": null,
		"value-no-vendor-prefix": null,
		"rule-empty-line-before": null,
		"at-rule-empty-line-before": null,
		"color-function-notation": null,
		"alpha-value-notation": null,
		"property-no-vendor-prefix": null
	  }
	}
  ]
}

Paste this code into settings.json 

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
	"source.fixAll.stylelint": "always",
	"source.fixAll": "always"
  },
  "stylelint.validate": [
	"css",
	"scss"
  ],
  "editor.formatOnSave": true,
  "prettier.requireConfig": true,
  "workbench.iconTheme": "vscode-icons",
  "editor.linkedEditing": true,
  "[html]": {
	"editor.defaultFormatter": null
  },
  "liveServer.settings.donotShowInfoMsg": true,
  "htmlhint.enable": true,
  "htmlhint.documentSelector": [
	"html"

  ],
  "htmlhint.options": {
	"attr-lowercase": true,
	"attr-value-double-quotes": true,
	"attr-no-duplication": true,
	"attr-value-not-empty": true,
	"title-require": true,
	"alt-require": true,
	"attr-unsafe-chars": true,
	"tag-pair": true,
	"tagname-lowercase": true,
	"doctype-first": true,
	"tag-self-close": false,
	"spec-char-escape": true,
	"style-disabled": true,
	"inline-style-disabled": true,
	"inline-script-disabled": true,
	"head-script-disabled": true,
	"id-unique": true,
	"src-not-empty": true,
	"space-tab-mixed-disabled": true,
	"doctype-html5": true,
	"input-requires-label": true
  },
  "workbench.editor.enablePreview": false,
  "vscode-edge-devtools.webhintInstallNotification": true,
  "git.autofetch": true,
  "workbench.editorAssociations": {
	"*.scss": "default"
  }
}

Resume

Download my Resume or Send me a Message

Let’s Make Great Ideas Happen

Scroll title

S C R O L L

Sunnat Bakidjanov's Resume

Click to download full resume in PDF format

Download

Email me

If you have any questions, email me!

Выйти на пустую страницу

About me

I am passionate about application development, striving for constant development and solving interesting problems

Scroll Title

S C R O L L

A little about myself

Hi, I’m Sunnat!

27 year old passionate front-end developer creating intuitive and engaging web apps. I'm a tech enthusiast who enjoys turning ideas into beautiful digital experiences. Problem solving is my forte, I'm a lifelong learner and always on the hunt for new knowledge. When I'm not writing code, you can find me exploring new design trends, the latest frameworks, or enjoying some good games.

G-mail

Telegram

Github

My Experience

Freelance projects (independent practice)
—
Education

Intensive study of HTML, CSS, JavaScript, as well as modern development tools such as SASS/SCSS, Git and React. Creation of several projects: adaptive sites, web pages with interactive elements, first applications on React. Work with version control systems (Git). Constant improvement of skills and learning new technologies.

Total experience: