diff --git a/app/globals.css b/app/globals.css
index fb4cdc6..e3e2538 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -132,8 +132,12 @@ p {
   padding: 0;
   width: 500px;
   height: 500px;
+  max-width: 100%;;
   position: absolute;
-  display: none;
+  visibility: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   z-index: 3;
 }
 
@@ -169,40 +173,35 @@ p {
 }
 
 .detailHeader {
-  position: absolute;
   cursor: default;
   pointer-events: none;
   user-select: none;
-  top: 30px;
+  margin-top: 30px;
   width: 100%;
   max-width: 500px;
   text-align: center;
   color: #FFFFFF;
   font-size: 50px;
-  text-shadow: rgba(0,0,0, 0.4) 0em 0em 0.3em;
+  text-shadow: rgba(0,0,0, 0.4) 0em 0em 0.1em;
   font-family: 'Conv_Curse Casual',Sans-Serif;
 }
 
 .detailDescription {
-  position: absolute;
   pointer-events: none;
   cursor: default;
   user-select: none;
-  top: 90px;
-  left: 0;
   padding: 0 20px;
   text-align: left;
   white-space: break-spaces;
   color: #FFFFFF;
   font-size: 18px;
-  text-shadow: rgba(0,0,0, 0.4) 0em 0em 0.3em;
+  text-shadow: rgba(0,0,0, 0.4) 0em 0em 0.1em;
   font-family: Calibri, Arial, Helvetica, sans-serif;
 }
 
 .detailName{
-  position: absolute;
   cursor: default;
-  top: 455px;
+  margin-bottom: 30px;
   width: 100%;
   text-align: center;
   color: #000000;
diff --git a/app/home/page.tsx b/app/home/page.tsx
new file mode 100644
index 0000000..ebd645e
--- /dev/null
+++ b/app/home/page.tsx
@@ -0,0 +1,11 @@
+import Footer from '@/components/Footer';
+import Home from '@/components/Home';
+
+export default function Homepage(): JSX.Element {
+  return (
+    <div className="bg">
+      <Home />
+      <Footer />
+    </div>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
index ebd645e..51bc780 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,11 +1,10 @@
-import Footer from '@/components/Footer';
-import Home from '@/components/Home';
+import Skills from '@/components/Skills';
+import { Metadata } from 'next';
 
-export default function Homepage(): JSX.Element {
-  return (
-    <div className="bg">
-      <Home />
-      <Footer />
-    </div>
-  );
-}
+export const metadata: Metadata = {
+  title: 'About me',
+};
+
+export default (): JSX.Element => {
+  return <Skills version={process.env.version || 'unknown'} />;
+};
diff --git a/app/skills/page.tsx b/app/skills/page.tsx
deleted file mode 100644
index 8c7b9e3..0000000
--- a/app/skills/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import Skills from '@/components/Skills';
-import { Metadata } from 'next';
-
-export const metadata: Metadata = {
-  title: 'Skills',
-};
-
-export default (): JSX.Element => {
-  return <Skills version={process.env.version || 'unknown'} />;
-};
diff --git a/components/Portfolio/index.tsx b/components/Portfolio/index.tsx
index 717a495..c837e44 100644
--- a/components/Portfolio/index.tsx
+++ b/components/Portfolio/index.tsx
@@ -25,9 +25,9 @@ export default (): JSX.Element => {
       <p>
         <span>Full-Stack web developer</span>
         <br />
-        <span className={styles.commonTitle}>Age</span> 35 y.o.
+        <span className={styles.commonTitle}>Age</span> 36 y.o.
         <br />
-        <span className={styles.commonTitle}>City</span> Moscow
+        <span className={styles.commonTitle}>City</span> Aktau
         <br />
         <span className={styles.commonTitle}>English</span> B+
       </p>
@@ -37,51 +37,63 @@ export default (): JSX.Element => {
           <p>Work examples:</p>
           <p>
             <a
-              href="https://github.com/4-life/chat-io"
+              href="https://github.com/4-life/nft-marketplace"
               target="_blank"
               rel="noreferrer"
               className={styles.iconLink}
             >
               <Image src="/icons/git.svg" alt="Github" width={20} height={20} />
-              Group chat app
+              NFT Marketplace
             </a>
-            &nbsp;(React, Socket.io, CRA, MUI, tests)
+            &nbsp;(React, Sass)
           </p>
           <p>
             <a
-              href="https://github.com/4-life/backend-ts"
+              href="https://github.com/4-life/hello-world"
               target="_blank"
               rel="noreferrer"
               className={styles.iconLink}
             >
               <Image src="/icons/git.svg" alt="Github" width={20} height={20} />
-              Rest-Api service
+              GraphQL boilerplate
             </a>
-            &nbsp;(Express, PostgreSQL, Sequelize, tests)
+            &nbsp;(TypeGraphQL, TypeORM, Apollo, NextJS)
           </p>
           <p>
             <a
-              href="https://github.com/4-life/storybook-boilerplate"
+              href="https://github.com/4-life/chat-io"
               target="_blank"
               rel="noreferrer"
               className={styles.iconLink}
             >
               <Image src="/icons/git.svg" alt="Github" width={20} height={20} />
-              Storybook boilerplate
+              Group chat app
             </a>
-            &nbsp;(Storybook, React, Sass)
+            &nbsp;(React, Socket.io, MUI, e2e tests)
           </p>
           <p>
             <a
-              href="https://github.com/4-life/nft-marketplace"
+              href="https://github.com/4-life/backend-ts"
               target="_blank"
               rel="noreferrer"
               className={styles.iconLink}
             >
               <Image src="/icons/git.svg" alt="Github" width={20} height={20} />
-              NFT Marketplace
+              Rest-Api service
             </a>
-            &nbsp;(React, Sass)
+            &nbsp;(Express, PostgreSQL, Sequelize, unit tests)
+          </p>
+          <p>
+            <a
+              href="https://github.com/4-life/storybook-boilerplate"
+              target="_blank"
+              rel="noreferrer"
+              className={styles.iconLink}
+            >
+              <Image src="/icons/git.svg" alt="Github" width={20} height={20} />
+              Storybook boilerplate
+            </a>
+            &nbsp;(Storybook, React, Sass)
           </p>
           <p>
             <a
diff --git a/components/Skills/Grid/SkillViewer.ts b/components/Skills/Grid/SkillViewer.ts
index 9b74041..70683a2 100644
--- a/components/Skills/Grid/SkillViewer.ts
+++ b/components/Skills/Grid/SkillViewer.ts
@@ -15,15 +15,8 @@ export default class SkillViewer {
 
   constructor(el: HTMLDivElement) {
     this.view = document.createElement('div');
-    this.view.style.position = 'absolute';
     this.view.className = this.viewClassname;
     this.div = document.createElement('div');
-    this.div.style.width = '100%';
-    this.div.style.maxWidth = '500px';
-    this.div.style.height = '500px';
-    this.view.style.width = '100%';
-    this.view.style.maxWidth = '500px';
-    this.view.style.height = '500px';
     el.appendChild(this.view);
     this.closeButton = document.createElement('button');
     this.closeButton.className = 'closeButtonSmall';
diff --git a/components/Skills/Grid/index.ts b/components/Skills/Grid/index.ts
index 489c98c..3e109c5 100644
--- a/components/Skills/Grid/index.ts
+++ b/components/Skills/Grid/index.ts
@@ -179,8 +179,8 @@ export default function init(el: HTMLDivElement | null): void {
   canvas.style.top = '0px';
   canvas.style.left = '0px';
   canvas.style.cursor = 'pointer';
+  canvas.style.transition = 'all 1s ease-in-out';
   el.appendChild(canvas);
-  canvas.style.display = 'none';
   fadeIn(canvas);
   canvas.addEventListener('mousedown', onMouseDown);
   canvas.addEventListener('mouseup', onMouseUp);
diff --git a/components/Skills/Grid/model.ts b/components/Skills/Grid/model.ts
index 1f09ef6..1fe35da 100644
--- a/components/Skills/Grid/model.ts
+++ b/components/Skills/Grid/model.ts
@@ -22,39 +22,39 @@ export type SkillModel = {
 const model: { content: SkillModel[]; layout: number[] } = {
   content: [
     {
-      id: 'aws',
-      gridImage: ['libs/aws.png'],
-      copy: 'Microservices',
+      id: 'js',
+      gridImage: ['libs/js.png'],
+      copy: 'JavaScript',
       story:
-        'I have production expirence with Amazon Web Services such as S3, EC2, Lambda, Cognito, Amplify, IAM, SNS, RDS and Kinesis.\n\nAlso I had migration experience from a monolith to AWS microservices.\n\n In the most cases I use AWS CDK to deploy project',
-      color: '#04273a',
-      textColor: '#ffffff',
+        'Advanced knowledge of JavaScript (ES6+) with solid experience in asynchronous programming, API integration, modular architecture, and performance optimization.\n\nWrite clean, efficient, and well-structured code.',
+      color: '#f1ee00',
+      textColor: '#000000',
       scale: 0.7,
-      url: 'aws.amazon.com/',
-      theme: themeDefault,
+      url: 'tc39.es/',
+      theme: 'white',
     },
     {
       id: 'ionic',
       gridImage: ['libs/ionic.png'],
       copy: 'Ionic',
       story:
-        'I developed two hybrid mobile apps for Android. Apps use Google Maps for positioning sensors. I added code-push to deploy updates.\n\nOne app released on Google Play',
-      color: '#dddddd',
+        'Built two hybrid Android apps using Ionic and AngularJS, with Google Maps integration for sensor positioning. Added CodePush for over-the-air updates.\n\nOne app was published on Google Play.',
+      color: '#b8d3ff',
       textColor: '#4e8ef7',
       scale: 0.7,
       url: 'ionicframework.com/',
       theme: 'white',
     },
     {
-      id: 'js',
-      gridImage: ['libs/js.png'],
-      copy: 'JavaScript',
+      id: 'me',
+      gridImage: ['me.png'],
+      copy: '',
       story:
-        'I use the last features of JS (ES6) such as DOM manipulating (without jQuery), async/await, modules etc.\n\nI know dynamic typing, how a garbage collector works, how to profile code in a browser console etc',
-      color: '#f1ee00',
+        'Hi, I\'m Pavel\n\nFull-stack web developer with 10+ years of experience building web and mobile applications.\n\nComfortable across the entire stack — from database design and backend APIs to frontend UIs. Check out my portfolio for selected projects.',
+      color: '#fff',
       textColor: '#000000',
-      scale: 0.7,
-      url: 'tc39.es/',
+      scale: 1,
+      url: '4life.work/portfolio',
       theme: 'white',
     },
     {
@@ -62,7 +62,7 @@ const model: { content: SkillModel[]; layout: number[] } = {
       gridImage: ['libs/postgres.png'],
       copy: 'PostgresSQL',
       story:
-        'The most of my projects use PostgresSQL database. I use pgadmin4 for manual access to DB, simple library pg-promise for NodeJS and popular ORMs: TypeORM and Sequelize',
+        'PostgreSQL is my go-to database. I use pgAdmin 4 for manual access, pg-promise for lightweight Node.js queries, and TypeORM or Sequelize as ORMs depending on the project.',
       color: '#336791',
       textColor: '#ffffff',
       scale: 0.7,
@@ -72,7 +72,8 @@ const model: { content: SkillModel[]; layout: number[] } = {
       id: 'angular',
       gridImage: ['libs/angular.png'],
       copy: 'AngularJS',
-      story: 'I have some projects on AngularJS, for example Ionic apps use AngularJS',
+      story:
+        'Used AngularJS in several projects, including Ionic mobile apps. Familiar with directives, services, and the MVC pattern that shaped my early approach to frontend architecture.',
       color: '#b4b4b4',
       textColor: '#c4473a',
       scale: 0.7,
@@ -83,7 +84,7 @@ const model: { content: SkillModel[]; layout: number[] } = {
       gridImage: ['libs/nodejs.png'],
       copy: 'NodeJS',
       story:
-        'I have some projects on NodeJS. Some of this project use Express or NestJS. In some cases I use NodeJS in AWS Lambda as RestApi service',
+        'My primary backend runtime. I build REST APIs with Express for lightweight services and NestJS for structured, enterprise-scale projects.\n\nAlso use Node.js in AWS Lambda for serverless endpoints.',
       color: '#303030',
       textColor: '#ffffff',
       scale: 0.7,
@@ -93,7 +94,8 @@ const model: { content: SkillModel[]; layout: number[] } = {
       id: 'github',
       gridImage: ['libs/github.png'],
       copy: 'CI/CD',
-      story: 'I always try to use CI/CD automation such as Github Actions or Bitbucket Pipeline',
+      story:
+        'Integrate CI/CD into every project. Use GitHub Actions for GitHub-hosted repos and Bitbucket Pipelines for Bitbucket. Automate linting, testing, building, and deployments on every push.',
       color: '#002f67',
       textColor: '#ffffff',
       scale: 0.7,
@@ -103,50 +105,54 @@ const model: { content: SkillModel[]; layout: number[] } = {
       id: 'react',
       gridImage: ['libs/react.png'],
       copy: 'React',
-      story: 'The last 3 years I use React on a front-end',
+      story:
+        'My main frontend framework for the past several years. Work with hooks, context, and Redux for state management. Also use React Query for server state and component libraries like MUI.',
       color: '#222',
       textColor: '#00d8ff',
       scale: 0.7,
-      url: 'facebook.github.io/react/',
+      url: 'react.dev/',
     },
     {
       id: 'nextjs',
       gridImage: ['libs/next.png'],
       copy: 'NextJS',
-      story: 'Current website based on NextJS',
-      color: '#fff',
+      story:
+        'My preferred React framework for production web apps — this website is built with Next.js. Use it for SSR, SSG, and API routes, deploying via Vercel or self-hosted setups.',
+      color: '#adadadff',
       textColor: '#333',
       scale: 0.7,
       url: 'nextjs.org/',
       theme: 'white',
     },
     {
-      id: 'redux',
-      gridImage: ['libs/redux.png'],
-      copy: 'State Management',
-      story: 'For a state management system in the most cases I use Saga',
-      color: '#555555',
-      textColor: '#999999',
+      id: 'aws',
+      gridImage: ['libs/aws.png'],
+      copy: 'Microservices',
+      story:
+        'Production experience with AWS: S3, EC2, Lambda, Cognito, Amplify, IAM, SNS, RDS and Kinesis.\n\nMigrated a monolith architecture to AWS microservices. Use AWS CDK for infrastructure as code and deployments.',
+      color: '#04273a',
+      textColor: '#ffffff',
       scale: 0.7,
-      url: 'redux-saga.js.org/',
+      url: 'aws.amazon.com/',
+      theme: themeDefault,
     },
     {
       id: 'mocha',
       gridImage: ['libs/mocha.png'],
-      copy: 'Testing',
+      copy: 'Tests',
       story:
-        'I always try to write code with tests. I use TestCafe for e2e testing and Mocha + Chai for unit and integrational testing',
-      color: '#ffffff',
-      textColor: '#333333',
+        'Testing is part of my regular development workflow. I write unit and integration tests using Mocha + Chai, and implement end-to-end testing with TestCafe to ensure reliability and production stability.',
+      color: '#493449ff',
+      textColor: '#ffffff',
       scale: 0.7,
       url: 'mochajs.org/',
-      theme: 'white',
+      theme: 'default',
     },
     {
       id: 'typescript',
       gridImage: ['libs/typescript.png'],
       copy: 'Typescript',
-      story: `I can't imagine Javascript code without typing sysytem. A lot of bugs can be avoided just using strict types. I use Typescript in any kind of project`,
+      story: `Can't imagine a JavaScript project without a type system. Strict typing prevents entire categories of bugs at compile time. Use TypeScript across the full stack \u2014 Node.js backends, React frontends, and mobile apps.`,
       color: '#007acc',
       textColor: '#ffffff',
       scale: 0.7,
@@ -157,7 +163,7 @@ const model: { content: SkillModel[]; layout: number[] } = {
       gridImage: ['libs/vue.png'],
       copy: 'Vue',
       story: 'I created one production website using Vue',
-      color: '#cccccc',
+      color: '#e8fff9',
       textColor: '#435466',
       scale: 0.7,
       url: 'vuejs.org/',
diff --git a/components/Skills/Grid/utils.ts b/components/Skills/Grid/utils.ts
index 2c742a4..29429e7 100644
--- a/components/Skills/Grid/utils.ts
+++ b/components/Skills/Grid/utils.ts
@@ -21,30 +21,12 @@ export const SOUNDS = {
 };
 
 export function fadeOut(el: HTMLElement): void {
-  let opacity = 1;
-
-  const timer = setInterval(() => {
-    if (opacity <= 0.1) {
-      clearInterval(timer);
-      el.style.display = 'none';
-    }
-
-    el.style.opacity = `${opacity}`;
-    opacity -= opacity * 0.1;
-  }, 10);
+  setTimeout(() => (el.style.opacity = '0'), 200);
+  setTimeout(() => (el.style.visibility = 'hidden'), 1000);
 }
 
 export function fadeIn(el: HTMLElement): void {
-  let opacity = 0.01;
-
-  el.style.display = 'block';
-
-  const timer = setInterval(() => {
-    if (opacity >= 1) {
-      clearInterval(timer);
-    }
-
-    el.style.opacity = `${opacity}`;
-    opacity += opacity * 0.1;
-  }, 10);
+  el.style.opacity = '0';
+  el.style.visibility = 'visible';
+  setTimeout(() => (el.style.opacity = '1'), 200);
 }
diff --git a/components/Skills/Skills.module.css b/components/Skills/Skills.module.css
index 9064a7d..8339b96 100644
--- a/components/Skills/Skills.module.css
+++ b/components/Skills/Skills.module.css
@@ -1,5 +1,5 @@
 .bg {
-  background: #505050;
+  background: #fff;
 }
 
 .title {
@@ -10,7 +10,7 @@
   height: 100vh;
   font-size: 1.1rem;
   font-weight: 400;
-  color: #f5f5f5;
+  color: #333333;
 }
 
 .footer{
@@ -35,9 +35,3 @@
 .footer .footerSound {
   margin: 5px 12px;
 }
-
-.home a {
-  padding: 10px;
-  margin-right: 10px;
-  color: #fff;
-}
diff --git a/components/Skills/index.tsx b/components/Skills/index.tsx
index be19b33..3040643 100644
--- a/components/Skills/index.tsx
+++ b/components/Skills/index.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useRef } from 'react';
-import Link from 'next/link';
 import Script from 'next/script';
 import SoundButton from '@/components/SoundButton';
 import Theme from '@/components/SoundButton/types';
@@ -19,15 +18,16 @@ export default ({ version }: Props): JSX.Element => {
   return (
     <>
       <div className={styles.bg} ref={ref}>
-        <div className={styles.title}>My Skills (beta)</div>
+        <div className={styles.title}>Hi, I&apos;m Pavel</div>
 
         <div className={styles.footer}>
           <div className={styles.footerMenu}>
-            <b className={styles.home}>
-              <Link href="/">Home</Link>
-            </b>
-            <span>My Skills (beta)</span>
-            <span>&nbsp;{version}</span>
+            <p>
+              ABOUT ME
+              <br />
+              {new Date(Number(process.env.date) * 1000).getFullYear() || ''}{' '}
+              <span>&nbsp;{version}</span>
+            </p>
           </div>
           <div className={styles.footerSound}>
             <SoundButton theme={Theme.white} label />
diff --git a/public/images/libs/vue.png b/public/images/libs/vue.png
index 2fe5022..409a0d9 100644
Binary files a/public/images/libs/vue.png and b/public/images/libs/vue.png differ
diff --git a/public/images/me.png b/public/images/me.png
new file mode 100644
index 0000000..20aafea
Binary files /dev/null and b/public/images/me.png differ