Skip to main content
The Skills and Projects sections help you demonstrate your technical capabilities and showcase your work.

​
Skills

Add your technical skills, soft skills, and competencies to highlight your capabilities.

​
Adding Skills

1

Enter a Skill

Type a skill name in the input field.Examples: React, TypeScript, Project Management, Python
2

Click Add or Press Enter

Submit the form by clicking the Add button or pressing Enter.The skill appears as a tag/badge in the skills list.
3

Add More Skills

Repeat the process to add all your relevant skills.The form clears automatically after each addition.

​
Skill Display

Skills appear as rounded badges with an X button for removal. They use a flex-wrap layout that automatically adjusts to available space.

​
Removing Skills

Click the X icon on any skill badge to remove it. The skill will smoothly fade out with an animation.

​
Skills Data Structure

type Skill = {
  id: string;          // Auto-generated unique identifier
  name: string;        // Skill name (e.g., "React", "TypeScript")
  level?: string;      // Optional skill level (not currently used in UI)
  category?: string;   // Optional category (not currently used in UI)
};
While the level and category fields exist in the data structure, they are not currently exposed in the UI. The form focuses on skill names only for simplicity.

​
Projects

Showcase your personal projects, portfolio pieces, or significant work to demonstrate your practical skills.

​
Adding Projects

1

Click the Add Button

Click the Add button in the Projects card header to create a new project entry.
2

Enter Project Name

Add a clear, descriptive name for your project.Field: name (string)Example: E-commerce Platform, Portfolio Website
3

Add Project URLs

Provide links to view your project.Fields:
  • githubUrl (string): Link to source code repository
  • liveUrl (string): Link to deployed/live version
Examples:
4

Describe the Project

Explain what the project does and your role in building it.Field: description (string, multi-line)Tip: Include the technologies used and key features

​
Project Data Structure

type Project = {
  id: string;           // Auto-generated unique identifier
  name: string;         // Project name
  description: string;  // Project description
  githubUrl: string;    // GitHub repository URL
  liveUrl: string;      // Live demo URL
  technologies: string[]; // Array of technologies (not exposed in current UI)
};
The technologies field exists in the type definition but is not currently used in the form. Technologies can be mentioned in the description field instead.

​
Managing Projects

  • Remove: Click the trash icon in the top-right corner of any project card
  • Edit: Click any field to update it - changes save automatically
  • Empty State: When no projects are added, a helpful message appears
  • Animation: Projects smoothly fade in when added and fade out when removed

​
Form Layout

Both forms follow these design patterns:

​
Skills Form

  • Horizontal input with inline Add button
  • Skills display in a wrapped flex container
  • Each skill is a removable badge

​
Projects Form

  • Two-column grid for name and URLs
  • Full-width description textarea
  • Each project in a bordered, rounded container

​
Tips for Success

Skills: List 8-12 relevant skills. Focus on skills mentioned in job descriptions you’re targeting.
Skills: Group related skills mentally (e.g., add all programming languages, then frameworks, then tools).
Projects: Choose 2-4 of your best projects that demonstrate different skills or solve different problems.
Projects: Make sure your GitHub repositories are clean, have good README files, and your live demos are working before including URLs.
Projects: In the description, focus on the problem you solved, your approach, and the impact or results.

​
Animation and UX

Both sections use Framer Motion animations:
  • Skills: Scale and fade animations (0.8 to 1.0 scale)
  • Projects: Height and opacity animations for smooth card transitions
  • Add Actions: Forms submit with Enter key for keyboard efficiency
  • Remove Actions: Single-click removal with visual feedback
All animations respect user preferences for reduced motion where configured in the browser.

Build docs developers (and LLMs) love

Get started for freeTalk to us