Make skills page as a main page. Fix info

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;

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>
+  );
+}

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'} />;
+};

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

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';

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);

components/Skills/Grid/model.ts

@@ -22,47 +22,47 @@ 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',
     },
     {
       id: 'postgres',
       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/',