mirror of
https://github.com/XFox111/my-website.git
synced 2026-04-22 07:28:01 +03:00
feat!: site refresh + dependency update
This commit is contained in:
@@ -30,19 +30,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.highlight
|
||||
{
|
||||
color: $colorNeutralForegroundInverted;
|
||||
background-color: $colorNeutralBackgroundInverted;
|
||||
padding: $spacingXXS $spacingNone;
|
||||
|
||||
&::selection
|
||||
{
|
||||
color: $colorNeutralForegroundInverted;
|
||||
background-color: $colorBrandForeground1;
|
||||
}
|
||||
}
|
||||
|
||||
.illustrations
|
||||
{
|
||||
justify-self: center;
|
||||
|
||||
@@ -9,12 +9,11 @@ import Package from "@/../package.json";
|
||||
const FrontSection: React.FC = () => (
|
||||
<section className={ cls.section }>
|
||||
<div className={ cls.content }>
|
||||
<h1>Hello World!</h1>
|
||||
<h2>{ Package.author.name } is here!</h2>
|
||||
<h1>Hello there!</h1>
|
||||
<h2>My name is <span className="hl">{ Package.author.name }</span></h2>
|
||||
<p role="text">
|
||||
I am a software engineer with extensive experience in<br aria-hidden />
|
||||
<span className={ cls.highlight }>.NET and React development</span><br aria-hidden />
|
||||
and you are on my website!
|
||||
I am a <span className="hl">software engineer</span> from Russia<br aria-hidden /> with extensive experience
|
||||
in <span className="hl">.NET and React</span> development
|
||||
</p>
|
||||
<div className={ cls.ctaButtons }>
|
||||
<Button as="next" href={ links.resume }>Download resume</Button>
|
||||
|
||||
+7
-10
@@ -1,13 +1,10 @@
|
||||
export const Bio: React.FC = () => (
|
||||
<>
|
||||
<p>{ bioPremise }</p>
|
||||
<p>My journey as a programmer started in 2018 from a silly free-time hobby. Since then, I have released a couple of personal projects, some of which have become quite popular.</p>
|
||||
<p>Graduated from <a href="https://sut.ru/eng" target="_blank">Bonch-Bruevich University of Telecommunications</a> in 2023 where I got my Bachelor's degree in computer science. It was fun. Took part in a number of hackathons (usually first place for us) as well as science conferences (including those hosted by IEEE). In 2025 got Master's in Radiotechnology.</p>
|
||||
<p>Also, before graduation I managed to work in several different companies in different IT fields (mostly software development, of course).</p>
|
||||
<p>Out-of-box thinking, and constant self-improvement is my life strategy. New tool released? - Yes, please! GitHub is hosting another conference? - Sign me up! There is a new challenging task to complete? - Oh, boy, here we go again! So many things to learn, so little time to spare...</p>
|
||||
<p>Overall, enthusiastic, fast learning and energetic person. Love coding and creating something new. Like to draw and compose music. Aviasim enthusiast. Proud member of the furry community.</p>
|
||||
</>
|
||||
);
|
||||
export const Bio: React.FC = () => <>
|
||||
<p>I am a software engineer who loves desiging and building complex services, creating nice intuitive applications, and solving engineering challenges.</p>
|
||||
<p>I started programming in 2018 because I am not a good artist, and programming allows to bring my visions and ideas to life. My specialty is React and .NET in web development, but I always look out for other fields and tools as well.</p>
|
||||
<p>Thanks to my quick adaptation and communication skills, I can either be a good team player, or handle tasks independently.</p>
|
||||
<p>Graduated from <a href="https://sut.ru/eng" target="_blank">Bonch-Bruevich University of Telecommunications</a>. In 2023 received Bachelor's degree in Computer science, then in 2025 – Master's in Radiotechnology. Despite that, I began my career path much earlier and consider myself a self-taught developer.</p>
|
||||
<p>In my free time I like to play some instruments, pilot a 737 in a flightsim, or just keep working, but on my own pet projects.</p>
|
||||
</>;
|
||||
|
||||
export const bioPremise: string = "My name is Eugene Fox. I am a professional software developer primarily focused on .NET and React projects.";
|
||||
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
const experience: WorkplaceEntry[] =
|
||||
[
|
||||
{ title: "IT/VR tutor", year: "2020", place: "Quantorium", tech: "Unity, STEM" },
|
||||
{ title: "System administrator", year: "2021", place: "Quantorium", tech: "M365, Intune, Azure" },
|
||||
{ title: "Software Engineer", place: "[nordcloud]", tech: "ASP.NET, EF Core" },
|
||||
{ title: "CTO", year: "2022", place: "FoxDev Studio", tech: "Unity, Xamarin, .NET, React, Azure" },
|
||||
{ title: "Senior Software Engineer", year: "2023", place: "A-rial", tech: ".NET, React, DevOps" },
|
||||
{ title: "Senior Software Architect", year: "2024", place: "A-rial", tech: ".NET, React, Embedded devices" },
|
||||
{ title: "Here", place: "Your company" },
|
||||
];
|
||||
|
||||
export default experience;
|
||||
|
||||
export type WorkplaceEntry =
|
||||
{
|
||||
year?: string;
|
||||
place?: string;
|
||||
title: string;
|
||||
tech?: string;
|
||||
};
|
||||
@@ -0,0 +1,95 @@
|
||||
import Button from "@/_components/Button";
|
||||
import { ReactElement } from "react";
|
||||
|
||||
const experience: WorkplaceEntry[] =
|
||||
[
|
||||
{
|
||||
place: "Nordcloud, Saint-Petersburg, RU",
|
||||
title: "Software Engineer",
|
||||
summary: "Working on MightyCall cloud call center product",
|
||||
year: "2021",
|
||||
description: <>
|
||||
<p>Implementing new features and fixing bugs in large-scale distributed VoIP system with ASP.NET and Angular</p>
|
||||
<ul>
|
||||
<li>Completed 2 week onboarding in 3 days.</li>
|
||||
<li>Found and fixed a critical issue in system's build process, improving performance by 40%</li>
|
||||
</ul>
|
||||
</>
|
||||
},
|
||||
{
|
||||
place: "Quantorium, Saint-Petersburg, RU",
|
||||
title: "System administrator",
|
||||
summary: "Administration of school's IT infrastructure",
|
||||
year: "2021",
|
||||
description: <ul>
|
||||
<li>Integrated Microsoft Azure and M365 services which reduced overall workload of the staff by 30%.</li>
|
||||
<li>Implemented Azure Intune services for management of 100+ school devices.</li>
|
||||
<li>Integrated modern interactive solutions into education process during COVID-19 pandemic.</li>
|
||||
<li>Implemented storage inventory system which helped to track 100% of school's inventory.</li>
|
||||
</ul>
|
||||
},
|
||||
{
|
||||
place: "A-rial, Saint-Petersburg, RU",
|
||||
title: "Software Engineer",
|
||||
summary: "Legacy software support and DevOps",
|
||||
year: "2023",
|
||||
description: <>
|
||||
<p>Supporting legacy WLAN controller system, as well as maintaining company's IT infrastructure</p>
|
||||
<p className="hl">Stack: .NET, React, Golang, Vue, Mongo</p>
|
||||
<ul>
|
||||
<li>Built company's IT infrastructure from scratch (email, cloud, git, etc.)</li>
|
||||
<li>Found and fixed several critical bugs in one of the projects which allowed the company to receive next round of investments.</li>
|
||||
<li>Designed and implemented web interface for wireless routers using React</li>
|
||||
<li>Lead critical QA field tests for WLAN controller product.</li>
|
||||
</ul>
|
||||
</>
|
||||
},
|
||||
{
|
||||
place: "A-rial, Saint-Petersburg, RU",
|
||||
title: "Lead Software Engineer",
|
||||
summary: "Working on software for RF Analyzer hardware",
|
||||
year: "2024",
|
||||
description: <>
|
||||
<p>Creating, desiging and implementing RF analyzer software, as well as participating in hardware design.</p>
|
||||
<p className="hl">Stack: ASP.NET (RESTFul API), React, Linux</p>
|
||||
<ul>
|
||||
<li>Implemented both frontend and backend as modular components with ASP.NET and React.</li>
|
||||
<li>Wrote abstraction layers for managing Wi-Fi and SDR hardware in C#.</li>
|
||||
<li>Set up a complete CI/CD pipeline with GitHub Actions.</li>
|
||||
</ul>
|
||||
</>
|
||||
},
|
||||
{
|
||||
place: "A-rial, Saint-Petersburg, RU",
|
||||
title: "Lead System Architect",
|
||||
summary: "Working on WLAN Controller system",
|
||||
year: "2025",
|
||||
description: <>
|
||||
<p>Designing and implementing large-scale distributed WLAN controller system</p>
|
||||
<p className="hl">Stack: ASP.NET (RESTFul API), MongoDB, Postges (EF Core), RabbitMQ (MassTransit), MQTT, Docker.</p>
|
||||
<ul>
|
||||
<li>Designed an architecture of a new event-driven microservice-based system to replace legacy monolith from scratch (HLD + LLD).</li>
|
||||
<li>Wrote a comprehensive techref for each of 16 components.</li>
|
||||
<li>Solo implemented the whole system from start to finish in just 3 months.</li>
|
||||
<li>Designed and wrote an agent service with .NET NativeAOT to operate OpenWRT routers.</li>
|
||||
</ul>
|
||||
</>
|
||||
},
|
||||
{
|
||||
place: "Your company",
|
||||
title: "Here",
|
||||
summary: "Working on new and exciting projects",
|
||||
description: <Button href="/resume">Download resume</Button>
|
||||
},
|
||||
];
|
||||
|
||||
export default experience;
|
||||
|
||||
export type WorkplaceEntry =
|
||||
{
|
||||
year?: string;
|
||||
place?: string;
|
||||
title: string;
|
||||
summary?: string;
|
||||
description?: ReactElement;
|
||||
};
|
||||
+62
-47
@@ -9,7 +9,19 @@ import passwordGeneratorLight from "@/_assets/illustrations/projects/PasswordGen
|
||||
import simpleOtpImg from "@/_assets/illustrations/projects/SimpleOTP.svg";
|
||||
import tabsAsideDark from "@/_assets/illustrations/projects/TabsAside/dark.webp";
|
||||
import tabsAsideLight from "@/_assets/illustrations/projects/TabsAside/light.webp";
|
||||
import * as ic from "@fluentui/react-icons";
|
||||
import Beaker24Regular from "@fluentui/svg-icons/icons/beaker_24_regular.svg";
|
||||
import Branch24Regular from "@fluentui/svg-icons/icons/branch_24_regular.svg";
|
||||
import Code24Regular from "@fluentui/svg-icons/icons/code_24_regular.svg";
|
||||
import Color24Regular from "@fluentui/svg-icons/icons/color_24_regular.svg";
|
||||
import Database24Regular from "@fluentui/svg-icons/icons/database_24_regular.svg";
|
||||
import Desktop24Regular from "@fluentui/svg-icons/icons/desktop_24_regular.svg";
|
||||
import FlashFlow24Regular from "@fluentui/svg-icons/icons/flash_flow_24_regular.svg";
|
||||
import FlashSettings24Regular from "@fluentui/svg-icons/icons/flash_settings_24_regular.svg";
|
||||
import Globe24Regular from "@fluentui/svg-icons/icons/globe_24_regular.svg";
|
||||
import HeartPulse24Regular from "@fluentui/svg-icons/icons/heart_pulse_24_regular.svg";
|
||||
import Phone24Regular from "@fluentui/svg-icons/icons/phone_24_regular.svg";
|
||||
import PhoneDesktop24Regular from "@fluentui/svg-icons/icons/phone_desktop_24_regular.svg";
|
||||
import Server24Regular from "@fluentui/svg-icons/icons/server_24_regular.svg";
|
||||
import { StaticImageData } from "next/image";
|
||||
|
||||
const projects: Project[] =
|
||||
@@ -20,20 +32,20 @@ const projects: Project[] =
|
||||
description:
|
||||
[
|
||||
"During one of the classes at university I struggled to log into my account on a lab computer. I have long random passwords, so I had to type them manually from my phone which took about 5 minutes. I thought that there must be a better way to do this.",
|
||||
"So, I came up with this idea where you can easily send your credentials to any computer by simply scanning a QR code with a password manager app.",
|
||||
"So, I came up with this idea where you can easily send your credentials to any computer by simply scanning a QR code with a password manager app (this was before WebAuthn became widely adopted).",
|
||||
"In the end, I have created a big web service with mobile app and a customer portal, that could authenticate users on any website, and any device within a few seconds."
|
||||
],
|
||||
image: ezlogImg,
|
||||
link: "https://github.com/xfox111/easylogon-web",
|
||||
stack:
|
||||
[
|
||||
{ text: "C#/TypeScript", icon: ic.Code24Regular },
|
||||
{ text: ".NET 6", icon: ic.Server24Regular },
|
||||
{ text: "React/Vite", icon: ic.PhoneDesktop24Regular },
|
||||
{ text: "Xamarin.Forms", icon: ic.Phone24Regular },
|
||||
{ text: "SQL Server", icon: ic.Database24Regular },
|
||||
{ text: "Azure DevOps", icon: ic.Branch24Regular },
|
||||
{ text: "Azure Pipelines/GitHub Actions", icon: ic.FlashFlow24Regular }
|
||||
{ text: "C#/TypeScript", icon: Code24Regular },
|
||||
{ text: ".NET 6", icon: Server24Regular },
|
||||
{ text: "React/Vite", icon: PhoneDesktop24Regular },
|
||||
{ text: "Xamarin.Forms", icon: Phone24Regular },
|
||||
{ text: "SQL Server", icon: Database24Regular },
|
||||
{ text: "Azure DevOps", icon: Branch24Regular },
|
||||
{ text: "Azure Pipelines/GitHub Actions", icon: FlashFlow24Regular }
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -49,12 +61,12 @@ const projects: Project[] =
|
||||
link: "https://github.com/xfox111/TabsAsideExtension",
|
||||
stack:
|
||||
[
|
||||
{ text: "React/WXT", icon: ic.Desktop24Regular },
|
||||
{ text: "TypeScript", icon: ic.Code24Regular },
|
||||
{ text: "Browser extension", icon: ic.FlashSettings24Regular },
|
||||
{ text: "Fluent UI", icon: ic.Color24Regular },
|
||||
{ text: "GitHub", icon: ic.Branch24Regular },
|
||||
{ text: "GitHub Actions", icon: ic.FlashFlow24Regular },
|
||||
{ text: "React/WXT", icon: Desktop24Regular },
|
||||
{ text: "TypeScript", icon: Code24Regular },
|
||||
{ text: "Browser extension", icon: FlashSettings24Regular },
|
||||
{ text: "Fluent UI", icon: Color24Regular },
|
||||
{ text: "GitHub", icon: Branch24Regular },
|
||||
{ text: "GitHub Actions", icon: FlashFlow24Regular },
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -69,10 +81,10 @@ const projects: Project[] =
|
||||
link: "https://github.com/xfox111/SimpleOTP",
|
||||
stack:
|
||||
[
|
||||
{ text: ".NET/C#", icon: ic.Code24Regular },
|
||||
{ text: "MSTest", icon: ic.Beaker24Regular },
|
||||
{ text: "GitHub", icon: ic.Branch24Regular },
|
||||
{ text: "GitHub Actions", icon: ic.FlashFlow24Regular },
|
||||
{ text: ".NET/C#", icon: Code24Regular },
|
||||
{ text: "MSTest", icon: Beaker24Regular },
|
||||
{ text: "GitHub", icon: Branch24Regular },
|
||||
{ text: "GitHub Actions", icon: FlashFlow24Regular },
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -88,32 +100,35 @@ const projects: Project[] =
|
||||
link: "https://github.com/xfox111/PasswordGeneratorExtension",
|
||||
stack:
|
||||
[
|
||||
{ text: "React/Vite", icon: ic.Desktop24Regular },
|
||||
{ text: "TypeScript", icon: ic.Code24Regular },
|
||||
{ text: "Browser extension", icon: ic.FlashSettings24Regular },
|
||||
{ text: "Fluent UI", icon: ic.Color24Regular },
|
||||
{ text: "GitHub", icon: ic.Branch24Regular },
|
||||
{ text: "GitHub Actions", icon: ic.FlashFlow24Regular },
|
||||
{ text: "React/Vite", icon: Desktop24Regular },
|
||||
{ text: "TypeScript", icon: Code24Regular },
|
||||
{ text: "Browser extension", icon: FlashSettings24Regular },
|
||||
{ text: "Fluent UI", icon: Color24Regular },
|
||||
{ text: "GitHub", icon: Branch24Regular },
|
||||
{ text: "GitHub Actions", icon: FlashFlow24Regular },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "GUT.Schedule",
|
||||
title: "GUT.Schedule / Bonch.Calendar",
|
||||
subtitle: "Mobile app that exports Bonch university schedule to e-calendar",
|
||||
description:
|
||||
[
|
||||
"[2019]",
|
||||
"I created this app during my time in Bonch-Bruevich University of Telecommunications as a BS student.",
|
||||
"It was designed to help students to manage their timetable in a more convenient and effective way."
|
||||
"I created this app in 2019 during my time in Bonch-Bruevich University of Telecommunications as a BS student.",
|
||||
"It was designed to help students to manage their timetable in a more convenient and effective way – by exporting their schedule to any calendar app on their Android phones.",
|
||||
"In 2025 I made it into a web-service that can generate web calendars the students can subscribe to directly from their calendar apps, regardless of the platform they are using.",
|
||||
],
|
||||
image: gutScheduleImg,
|
||||
link: "https://github.com/xfox111/GUTSchedule",
|
||||
link: "https://github.com/stars/XFox111/lists/bonch",
|
||||
stack:
|
||||
[
|
||||
{ text: ".NET/C#", icon: ic.Code24Regular },
|
||||
{ text: "Xamarin.Android", icon: ic.Phone24Regular },
|
||||
{ text: "GitHub", icon: ic.Branch24Regular },
|
||||
{ text: "NUnit 3", icon: ic.Beaker24Regular },
|
||||
{ text: "Azure Pipelines", icon: ic.FlashFlow24Regular },
|
||||
{ text: ".NET/C#", icon: Code24Regular },
|
||||
{ text: "Xamarin.Android", icon: Phone24Regular },
|
||||
{ text: "GitHub", icon: Branch24Regular },
|
||||
{ text: "NUnit", icon: Beaker24Regular },
|
||||
{ text: "Azure Pipelines", icon: FlashFlow24Regular },
|
||||
{ text: "React/Vite", icon: Globe24Regular },
|
||||
{ text: "Typescript", icon: Code24Regular },
|
||||
{ text: "GitHub Actions", icon: FlashFlow24Regular },
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -123,19 +138,19 @@ const projects: Project[] =
|
||||
[
|
||||
"[2019]",
|
||||
"My first published app.",
|
||||
"I like to watch videos while working on my projects, but at the time YouTube didn not have a proper picture-in-picture mode and overall had a lot of issues with the UX, so this was my way to fix this.",
|
||||
"Unfortunately, Google doesn't like third-party YouTube clients."
|
||||
"I like to watch videos while working on my projects, but at the time YouTube didn't have a proper picture-in-picture mode and overall had a lot of issues with the UX, so this was my way to fix it.",
|
||||
"Unfortunately, Google doesn't like third-party YouTube clients, so soon after publishing, they revoked app's API access :("
|
||||
],
|
||||
image: foxTubeLight,
|
||||
imageDark: foxTubeDark,
|
||||
link: "https://www.youtube.com/watch?v=Mio9FbxmbhM",
|
||||
stack:
|
||||
[
|
||||
{ text: ".NET/C#", icon: ic.Code24Regular },
|
||||
{ text: "UWP", icon: ic.Desktop24Regular },
|
||||
{ text: "Azure DevOps", icon: ic.Branch24Regular },
|
||||
{ text: "AppCenter", icon: ic.HeartPulse24Regular },
|
||||
{ text: "Azure Pipelines", icon: ic.FlashFlow24Regular },
|
||||
{ text: ".NET/C#", icon: Code24Regular },
|
||||
{ text: "UWP", icon: Desktop24Regular },
|
||||
{ text: "Azure DevOps", icon: Branch24Regular },
|
||||
{ text: "AppCenter", icon: HeartPulse24Regular },
|
||||
{ text: "Azure Pipelines", icon: FlashFlow24Regular },
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -152,10 +167,10 @@ const projects: Project[] =
|
||||
link: "https://github.com/xfox111/MotionDecoder",
|
||||
stack:
|
||||
[
|
||||
{ text: ".NET/C#", icon: ic.Code24Regular },
|
||||
{ text: "WinForms", icon: ic.Desktop24Regular },
|
||||
{ text: "Accord.NET", icon: ic.FlashSettings24Regular },
|
||||
{ text: "GitHub", icon: ic.Branch24Regular },
|
||||
{ text: ".NET/C#", icon: Code24Regular },
|
||||
{ text: "WinForms", icon: Desktop24Regular },
|
||||
{ text: "Accord.NET", icon: FlashSettings24Regular },
|
||||
{ text: "GitHub", icon: Branch24Regular },
|
||||
]
|
||||
}
|
||||
];
|
||||
@@ -175,6 +190,6 @@ export type Project =
|
||||
|
||||
type TechStackItem =
|
||||
{
|
||||
icon: ic.FluentIcon;
|
||||
icon: React.FC;
|
||||
text: string;
|
||||
};
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
import { ImageExport } from "@/_assets/assets";
|
||||
import imgs from "@/_assets/illustrations/skills";
|
||||
import * as ic from "@fluentui/react-icons";
|
||||
|
||||
const skills: Skill[] =
|
||||
[
|
||||
{
|
||||
title: "NodeJS",
|
||||
description: "React, Vite, Next.js, SASS, TypeScript",
|
||||
icon: ic.WindowDevToolsRegular,
|
||||
image: imgs.nodejs
|
||||
},
|
||||
{
|
||||
title: ".NET",
|
||||
description: "ASP.NET, Razor, WinUI/UWP, WPF, WinForms | Xamarin.Forms, MAUI",
|
||||
icon: ic.PhoneDesktopRegular,
|
||||
image: imgs.dotnet
|
||||
},
|
||||
{
|
||||
title: "Architecture & systems",
|
||||
description: "Docker, Nginx, Linux | Modules, microservices",
|
||||
icon: ic.DesktopFlowRegular,
|
||||
image: imgs.architecture
|
||||
},
|
||||
{
|
||||
title: "Databases",
|
||||
description: "Entity Framework, MongoDB",
|
||||
icon: ic.DatabaseMultipleRegular,
|
||||
image: imgs.databases
|
||||
},
|
||||
{
|
||||
title: "Design",
|
||||
description: "Figma, Photoshop, Illustrator",
|
||||
icon: ic.DesignIdeasRegular,
|
||||
// Note, this picture has a special behavior in @/_page_sections/SkillsSection.tsx:24
|
||||
image: imgs.design
|
||||
},
|
||||
{
|
||||
title: "DevOps",
|
||||
description: "GitHub, Azure DevOps, AppCenter, Atlassian",
|
||||
icon: ic.FlashFlowRegular,
|
||||
image: imgs.devops
|
||||
},
|
||||
{
|
||||
title: "Administration",
|
||||
description: "Ansible, M365, Azure, InTune",
|
||||
icon: ic.ConnectedRegular,
|
||||
image: imgs.admin
|
||||
}
|
||||
];
|
||||
|
||||
export default skills;
|
||||
|
||||
export type Skill =
|
||||
{
|
||||
title: string;
|
||||
description: string;
|
||||
icon: ic.FluentIcon;
|
||||
image: ImageExport;
|
||||
};
|
||||
@@ -0,0 +1,105 @@
|
||||
import { ImageExport } from "@/_assets/assets";
|
||||
import imgs from "@/_assets/illustrations/skills";
|
||||
import WindowDevTools24Regular from "@fluentui/svg-icons/icons/window_dev_tools_24_regular.svg";
|
||||
import PhoneDesktop24Regular from "@fluentui/svg-icons/icons/phone_desktop_24_regular.svg";
|
||||
import DesktopFlow24Regular from "@fluentui/svg-icons/icons/desktop_flow_24_regular.svg";
|
||||
import DatabaseMultiple32Regular from "@fluentui/svg-icons/icons/database_multiple_32_regular.svg";
|
||||
import DesignIdeas24Regular from "@fluentui/svg-icons/icons/design_ideas_24_regular.svg";
|
||||
import FlashFlow24Regular from "@fluentui/svg-icons/icons/flash_flow_24_regular.svg";
|
||||
import Connected24Regular from "@fluentui/svg-icons/icons/connected_24_regular.svg";
|
||||
import ShieldKeyhole24Regular from "@fluentui/svg-icons/icons/shield_keyhole_24_regular.svg";
|
||||
import React from "react";
|
||||
|
||||
const skills: Skill[] =
|
||||
[
|
||||
{
|
||||
title: "NodeJS",
|
||||
caption: "React, Vite, Next.js, SASS, TypeScript",
|
||||
description: <>
|
||||
I learned React while being on a 2 week quarantine back in 2020. Since then, it was my go-to framework for frontend in both commercial and personal projects. While .NET is still my main choice for backend, I occasionally use Next.js for smaller projects as well.
|
||||
</>,
|
||||
icon: WindowDevTools24Regular,
|
||||
image: imgs.nodejs
|
||||
},
|
||||
{
|
||||
title: ".NET",
|
||||
caption: "ASP.NET, WebAPI, Minimal API, MVC | MAUI, WinUI",
|
||||
description: <>
|
||||
My bread and butter. The one and only! I learned C# back in 2018 while trying to make a game in Unity. Since then, I have fallen in love with the language and the ecosystem. I have used .NET for everything: web, desktop, mobile, IoT... you name it.
|
||||
</>,
|
||||
icon: PhoneDesktop24Regular,
|
||||
image: imgs.dotnet
|
||||
},
|
||||
{
|
||||
title: "System design",
|
||||
caption: "Clean architecture, Microservices, Event-driven design",
|
||||
description: <>
|
||||
Working for small companies (especially abmitious ones) has its perks. One of them is that you get to do everything, including architecture design. Throughout my career, I have designed a couple of high-load distributed systems, as well as many smaller applications.
|
||||
</>,
|
||||
icon: DesktopFlow24Regular,
|
||||
image: imgs.architecture
|
||||
},
|
||||
{
|
||||
title: "Databases & ORM",
|
||||
caption: "SQL, Postgres, MongoDB, EF Core",
|
||||
description: <>
|
||||
If there is a SQL, then where is prequel?..
|
||||
</>,
|
||||
icon: DatabaseMultiple32Regular,
|
||||
image: imgs.databases
|
||||
},
|
||||
{
|
||||
title: "UI/UX Design",
|
||||
caption: "Figma, Photoshop, Illustrator",
|
||||
description: <>
|
||||
Even though I am not a professional designer, I know a thing or two about good UX, since for the most of the projects, I was usually responsible for it as well.
|
||||
<br /><br />
|
||||
For UI though, I prefer sticking to existing design systems (like Fluent UI or Material). But of course, I can draw a couple of buttons if needed.
|
||||
</>,
|
||||
icon: DesignIdeas24Regular,
|
||||
// Note, this picture has a special behavior in @/_page_sections/SkillsSection.tsx
|
||||
image: imgs.design
|
||||
},
|
||||
{
|
||||
title: "DevOps & Tooling",
|
||||
caption: "Git, Jira, CI/CD automation, Docker",
|
||||
description: <>
|
||||
Back when I was learning programming, whenever I started a new project, I imagined being at a big company with dozens of people working on the same codebase. So, I always tried to make it look like it: version control, documentation, CI/CD, kanban, sprints...<br /><br />
|
||||
Who would've thought that this actually would come in handy!
|
||||
</>,
|
||||
icon: FlashFlow24Regular,
|
||||
image: imgs.devops
|
||||
},
|
||||
{
|
||||
title: "Infrastructure & Administration",
|
||||
caption: "Azure, AWS, Docker, K8S, Nginx, Linux, Ansible",
|
||||
description: <>
|
||||
Thanks to my past experience, I have a solid understanding of how to build and manage infrastructure. I have worked with both cloud and on-premises solutions, as well as different containerization and orchestration tools.
|
||||
</>,
|
||||
icon: Connected24Regular,
|
||||
image: imgs.admin
|
||||
},
|
||||
{
|
||||
title: "Application security",
|
||||
caption: "JWT, WebAuthn, OAuth2, TOTP",
|
||||
description: <>
|
||||
Throughout my work (as a system administrator and as an engineer), I had to learn a lot about best security practices and cybersecurity in general.
|
||||
<br /><br />
|
||||
So, I have experience implementing various authentication and authorization mechanisms (some of which I wrote from scratch by following specifications), as well as securing applications against common vulnerabilities.
|
||||
</>,
|
||||
icon: ShieldKeyhole24Regular,
|
||||
// Note, this picture has a special behavior in @/_page_sections/SkillsSection.tsx
|
||||
image: imgs.security
|
||||
},
|
||||
];
|
||||
|
||||
export default skills;
|
||||
|
||||
export type Skill =
|
||||
{
|
||||
title: string;
|
||||
caption: string;
|
||||
icon: React.FC;
|
||||
image: ImageExport;
|
||||
description: React.ReactElement;
|
||||
};
|
||||
@@ -12,7 +12,7 @@ const socials: Socials =
|
||||
href: "https://www.linkedin.com/in/xfox/",
|
||||
username: "@xfox"
|
||||
},
|
||||
"BlueSky":
|
||||
"Bluesky":
|
||||
{
|
||||
href: "https://bsky.app/profile/xfox111.net",
|
||||
username: "@xfox111.net",
|
||||
|
||||
Reference in New Issue
Block a user