josufh/low-level-guy.com
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign site as bilingual CV

Browse Source
This commit is contained in:
Joshua
2026-06-07 18:48:42 +09:00
parent ea90cc5d58
commit 6f9cc0bbbb
12 changed files with 784 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Views/Home/Cv.cshtml
+145
View File
@@ -0,0 +1,145 @@
@{
ViewData["Title"] = "CV";
}
<div class="cv-page">
<header class="cv-header">
<div>
<p class="cv-eyebrow">Curriculum Vitae</p>
<h1>Joshua Ferrer</h1>
<p class="cv-role">Software Engineer / Technical Lead</p>
</div>
<address class="cv-contact">
<a href="mailto:josuferrer@outlook.com">josuferrer@outlook.com</a>
<a href="https://low-level-guy.com">low-level-guy.com</a>
<a href="https://git.low-level-guy.com/josufh" target="_blank" rel="noopener noreferrer">git.low-level-guy.com/josufh</a>
<span>Tokyo, Japan</span>
<a href="/cv?lang=ja">Japanese version</a>
</address>
</header>
<section class="cv-section">
<h2>Profile</h2>
<p>
Software engineer based in Tokyo, working across backend development, infrastructure, requirements
definition, specification writing, and technical leadership. Experienced with .NET, C, Flutter, Linux,
cloud environments, CI/CD, and internal business systems.
</p>
<p>
Owns source code quality, coding standards, infrastructure operations, and technical research for new
projects, with practical experience in architecture decisions, code review, debugging, infrastructure
setup, and defect prevention before release.
</p>
</section>
<section class="cv-section">
<h2>Experience</h2>
<article class="cv-entry">
<div class="cv-entry__header">
<div>
<h3>Nihon Kyoiku Create Co., Ltd. (株式会社日本教育クリエイト)</h3>
<p>Software Engineer / Technical Lead, IT Solutions Business Department (ITソリューション事業部)</p>
</div>
<span>2024/09 - Present</span>
</div>
<ul>
<li>Backend and application development for internal business systems.</li>
<li>Requirements definition with clients and specification writing.</li>
<li>Infrastructure management, cloud VM provisioning, CI/CD setup, and source control administration.</li>
<li>Code review, coding standard maintenance, technical investigation, and defect prevention before release.</li>
<li>Developed and deployed an internal approval system (稟議システム) used by more than 1,000 users.</li>
<li>Administers Gitea and Redmine environments used by a 15-person department.</li>
<li>Deployed five projects of varying size, including a 1.5-year company-wide approval system project.</li>
<li>Improved manual workflows through automation, coding standards, code review, and cloud deployment practices.</li>
</ul>
</article>
</section>
<section class="cv-section">
<h2>Additional Experience</h2>
<details class="cv-details">
<summary>Keio Plaza Hotel (京王プラザホテル) - Lobby / Customer Service</summary>
<article class="cv-entry cv-details__body">
<div class="cv-entry__header">
<div>
<h3>Keio Plaza Hotel (京王プラザホテル)</h3>
<p>Lobby and customer service, Shinjuku</p>
</div>
<span>2023/04</span>
</div>
<ul>
<li>Handled customer service in Japanese, English, Spanish, and occasional Chinese.</li>
<li>Used business Japanese and keigo (敬語) in a hotel environment.</li>
<li>Built Excel-based workflow automation as a secondary responsibility.</li>
</ul>
</article>
</details>
</section>
<section class="cv-section">
<h2>Selected Projects</h2>
<article class="cv-entry">
<div class="cv-entry__header">
<div>
<h3>Personal Git Server</h3>
<p>Public repositories and project references</p>
</div>
<span>Ongoing</span>
</div>
<ul>
<li><a href="https://git.low-level-guy.com/josufh" target="_blank" rel="noopener noreferrer">git.low-level-guy.com/josufh</a></li>
<li>Detailed project writeups will be added as selected repositories are finalized.</li>
<li>Open source activity includes reporting issues to improve .NET tutorial sample code.</li>
</ul>
</article>
</section>
<section class="cv-section cv-columns">
<div>
<h2>Technical Skills</h2>
<ul>
<li><strong>Primary:</strong> C#, .NET, ASP.NET, C</li>
<li><strong>Application:</strong> Dart, Flutter, HTML, JavaScript / TypeScript, Node.js</li>
<li><strong>Databases:</strong> MySQL, PostgreSQL</li>
<li><strong>Cloud:</strong> AWS, Google Cloud, Oracle Cloud, Azure</li>
<li><strong>DevOps:</strong> Gitea Actions CI/CD, Docker, Linux server administration</li>
<li><strong>Testing:</strong> xUnit</li>
<li><strong>Tools:</strong> Neovim / Vim, VS Code</li>
<li><strong>Secondary:</strong> Python</li>
</ul>
</div>
<div>
<h2>Languages</h2>
<ul>
<li>English - professional / TOEIC 965</li>
<li>Japanese - professional / JLPT N2</li>
<li>Spanish - native</li>
<li>Catalan - native</li>
<li>Chinese - intermediate / HSK 3</li>
<li>Japanese Sign Language - beginner / JSL Grade 5</li>
</ul>
</div>
</section>
<section class="cv-section">
<h2>Education</h2>
<article class="cv-entry">
<div class="cv-entry__header">
<div>
<h3>Tokyo Business and Language College (東京ビジネス外語カレッジ)</h3>
<p>IT Business (ITビジネス), Ikebukuro</p>
</div>
<span>2021/04 - 2023/03</span>
</div>
<p>Business program with IT-focused coursework.</p>
</article>
</section>
<section class="cv-section">
<h2>Role Interests</h2>
<p>
Interested in software engineering, architecture, project leadership, internal systems, infrastructure,
and technology research roles. Open to remote work and office-based collaboration.
</p>
</section>
</div>
Views/Home/Cv.cshtml.css
+142
View File
@@ -0,0 +1,142 @@
.cv-page {
max-width: 920px;
margin: 0 auto;
padding: 3rem 0 4rem;
color: #111827;
}
.cv-header {
display: flex;
justify-content: space-between;
gap: 2rem;
padding-bottom: 2rem;
border-bottom: 2px solid #111827;
}
.cv-eyebrow {
margin: 0 0 0.6rem;
color: #5b6472;
font-size: 0.85rem;
text-transform: uppercase;
}
.cv-header h1 {
margin: 0;
font-size: 3rem;
line-height: 1;
}
.cv-role {
margin: 0.75rem 0 0;
color: #374151;
font-size: 1.2rem;
}
.cv-contact {
display: grid;
align-content: start;
gap: 0.35rem;
margin: 0;
font-style: normal;
text-align: right;
}
.cv-contact a {
color: #111827;
text-decoration: none;
}
.cv-contact a:hover {
text-decoration: underline;
}
.cv-section {
padding: 2rem 0;
border-bottom: 1px solid #d1d5db;
}
.cv-section h2 {
margin: 0 0 1rem;
color: #111827;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
}
.cv-section p,
.cv-section li {
color: #374151;
line-height: 1.65;
}
.cv-entry {
display: grid;
gap: 0.75rem;
}
.cv-entry__header {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.cv-entry h3 {
margin: 0;
font-size: 1.1rem;
}
.cv-entry__header p {
margin: 0.25rem 0 0;
}
.cv-entry__header span {
flex: 0 0 auto;
color: #5b6472;
}
.cv-section ul {
margin: 0;
padding-left: 1.2rem;
}
.cv-details {
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 1rem;
background: #ffffff;
}
.cv-details summary {
cursor: pointer;
color: #111827;
font-weight: 700;
}
.cv-details__body {
margin-top: 1rem;
}
.cv-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
@media (max-width: 760px) {
.cv-header,
.cv-entry__header {
display: grid;
}
.cv-contact {
text-align: left;
}
.cv-header h1 {
font-size: 2.35rem;
}
.cv-columns {
grid-template-columns: 1fr;
}
}
Views/Home/CvJa.cshtml
+145
View File
@@ -0,0 +1,145 @@
@{
ViewData["Title"] = "日本語CV";
}
<div class="cv-page">
<header class="cv-header">
<div>
<p class="cv-eyebrow">職務経歴書</p>
<h1>Joshua Ferrer</h1>
<p class="cv-role">ソフトウェアエンジニア / テクニカルリード</p>
</div>
<address class="cv-contact">
<a href="mailto:josuferrer@outlook.com">josuferrer@outlook.com</a>
<a href="https://low-level-guy.com">low-level-guy.com</a>
<a href="https://git.low-level-guy.com/josufh" target="_blank" rel="noopener noreferrer">git.low-level-guy.com/josufh</a>
<span>東京都, 日本</span>
<a href="/cv?lang=en">English version</a>
</address>
</header>
<section class="cv-section">
<h2>プロフィール</h2>
<p>
東京を拠点とするソフトウェアエンジニアです。バックエンド開発、インフラ、要件定義、
仕様書作成、技術リードを担当しています。.NET、C、Flutter、Linux、クラウド環境、
CI/CD、社内業務システムの経験があります。
</p>
<p>
ソースコード品質、コーディング規約、インフラ運用、新規プロジェクト向けの技術調査を担当し、
アーキテクチャ判断、コードレビュー、デバッグ、インフラ構築、リリース前の不具合防止に取り組んでいます。
</p>
</section>
<section class="cv-section">
<h2>職務経験</h2>
<article class="cv-entry">
<div class="cv-entry__header">
<div>
<h3>株式会社日本教育クリエイト</h3>
<p>ソフトウェアエンジニア / テクニカルリード, ITソリューション事業部</p>
</div>
<span>2024/09 - 現在</span>
</div>
<ul>
<li>社内業務システムのバックエンドおよびアプリケーション開発。</li>
<li>クライアントとの要件定義および仕様書作成。</li>
<li>インフラ管理、クラウドVM構築、CI/CD設定、ソースコード管理の運用。</li>
<li>コードレビュー、コーディング規約の整備、技術調査、リリース前の不具合防止。</li>
<li>1,000名以上が利用する社内稟議システムを開発・デプロイ。</li>
<li>15名規模の部署で利用されるGiteaおよびRedmine環境を管理。</li>
<li>1.5年規模の全社向け稟議システムを含む、大小5件のプロジェクトをデプロイ。</li>
<li>自動化、コーディング規約、コードレビュー、クラウドデプロイ運用により手作業を削減。</li>
</ul>
</article>
</section>
<section class="cv-section">
<h2>その他の経験</h2>
<details class="cv-details">
<summary>京王プラザホテル - ロビー / 接客</summary>
<article class="cv-entry cv-details__body">
<div class="cv-entry__header">
<div>
<h3>京王プラザホテル</h3>
<p>ロビー・接客, 新宿</p>
</div>
<span>2023/04</span>
</div>
<ul>
<li>日本語、英語、スペイン語、および一部中国語で接客対応。</li>
<li>ホテル業務の中でビジネス日本語および敬語を使用。</li>
<li>副次的な業務としてExcelによるワークフロー自動化を作成。</li>
</ul>
</article>
</details>
</section>
<section class="cv-section">
<h2>プロジェクト</h2>
<article class="cv-entry">
<div class="cv-entry__header">
<div>
<h3>個人Gitサーバー</h3>
<p>公開リポジトリおよびプロジェクト参照</p>
</div>
<span>継続中</span>
</div>
<ul>
<li><a href="https://git.low-level-guy.com/josufh" target="_blank" rel="noopener noreferrer">git.low-level-guy.com/josufh</a></li>
<li>選定したリポジトリについて、詳細なプロジェクト説明を今後追加予定。</li>
<li>.NETチュートリアルのサンプルコード改善のため、Issue報告などの活動があります。</li>
</ul>
</article>
</section>
<section class="cv-section cv-columns">
<div>
<h2>技術スキル</h2>
<ul>
<li><strong>主力:</strong> C#, .NET, ASP.NET, C</li>
<li><strong>アプリケーション:</strong> Dart, Flutter, HTML, JavaScript / TypeScript, Node.js</li>
<li><strong>データベース:</strong> MySQL, PostgreSQL</li>
<li><strong>クラウド:</strong> AWS, Google Cloud, Oracle Cloud, Azure</li>
<li><strong>DevOps:</strong> Gitea Actions CI/CD, Docker, Linuxサーバー管理</li>
<li><strong>テスト:</strong> xUnit</li>
<li><strong>ツール:</strong> Neovim / Vim, VS Code</li>
<li><strong>補助:</strong> Python</li>
</ul>
</div>
<div>
<h2>言語</h2>
<ul>
<li>英語 - 業務レベル / TOEIC 965</li>
<li>日本語 - 業務レベル / JLPT N2</li>
<li>スペイン語 - ネイティブ</li>
<li>カタルーニャ語 - ネイティブ</li>
<li>中国語 - 中級 / HSK 3</li>
<li>日本手話 - 初級 / JSL Grade 5</li>
</ul>
</div>
</section>
<section class="cv-section">
<h2>学歴</h2>
<article class="cv-entry">
<div class="cv-entry__header">
<div>
<h3>東京ビジネス外語カレッジ</h3>
<p>ITビジネス, 池袋</p>
</div>
<span>2021/04 - 2023/03</span>
</div>
<p>ビジネスを中心に、IT要素を含むコースを修了。</p>
</article>
</section>
<section class="cv-section">
<h2>希望領域</h2>
<p>
ソフトウェアエンジニアリング、アーキテクチャ、プロジェクトリード、社内システム、
インフラ、技術調査に関わる職種に関心があります。リモートワークおよび出社での対面コミュニケーションの
どちらにも対応可能です。
</p>
</section>
</div>
Views/Home/CvJa.cshtml.css
+142
View File
@@ -0,0 +1,142 @@
.cv-page {
max-width: 920px;
margin: 0 auto;
padding: 3rem 0 4rem;
color: #111827;
}
.cv-header {
display: flex;
justify-content: space-between;
gap: 2rem;
padding-bottom: 2rem;
border-bottom: 2px solid #111827;
}
.cv-eyebrow {
margin: 0 0 0.6rem;
color: #5b6472;
font-size: 0.85rem;
text-transform: uppercase;
}
.cv-header h1 {
margin: 0;
font-size: 3rem;
line-height: 1;
}
.cv-role {
margin: 0.75rem 0 0;
color: #374151;
font-size: 1.2rem;
}
.cv-contact {
display: grid;
align-content: start;
gap: 0.35rem;
margin: 0;
font-style: normal;
text-align: right;
}
.cv-contact a {
color: #111827;
text-decoration: none;
}
.cv-contact a:hover {
text-decoration: underline;
}
.cv-section {
padding: 2rem 0;
border-bottom: 1px solid #d1d5db;
}
.cv-section h2 {
margin: 0 0 1rem;
color: #111827;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
}
.cv-section p,
.cv-section li {
color: #374151;
line-height: 1.65;
}
.cv-entry {
display: grid;
gap: 0.75rem;
}
.cv-entry__header {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.cv-entry h3 {
margin: 0;
font-size: 1.1rem;
}
.cv-entry__header p {
margin: 0.25rem 0 0;
}
.cv-entry__header span {
flex: 0 0 auto;
color: #5b6472;
}
.cv-section ul {
margin: 0;
padding-left: 1.2rem;
}
.cv-details {
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 1rem;
background: #ffffff;
}
.cv-details summary {
cursor: pointer;
color: #111827;
font-weight: 700;
}
.cv-details__body {
margin-top: 1rem;
}
.cv-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
@media (max-width: 760px) {
.cv-header,
.cv-entry__header {
display: grid;
}
.cv-contact {
text-align: left;
}
.cv-header h1 {
font-size: 2.35rem;
}
.cv-columns {
grid-template-columns: 1fr;
}
}
Views/Home/Index.cshtml
+12 -150
View File
@@ -1,157 +1,19 @@
@{
ViewData["Title"] = "Joshua Ferrer — Backend Engineer";
ViewData["Title"] = "Joshua Ferrer";
}
<header class="cv-hero">
<div class="cv-hero__inner">
<div class="cv-hero__main">
<p class="cv-kicker">Backend · Low-level · Architecture</p>
<h1 class="cv-title">Joshua Ferrer</h1>
<p class="cv-subtitle">Backend Engineer | IT Architecture</p>
<p class="cv-summary">
I love low-level programming and building systems from scratch. For me, this is the best way to learn:
understanding memory, performance, and execution flow directly instead of relying on abstractions.
My main focus is backend engineering with a strong performance mindset.
</p>
<div class="cv-actions">
<a class="btn btn-primary cv-btn" href="#contact">Contact</a>
<a class="btn btn-outline-secondary cv-btn" href="#skills">Skills</a>
<a class="btn btn-outline-secondary cv-btn" href="#experience">Experience</a>
</div>
<ul class="cv-meta">
<li><span class="cv-meta__label">Location</span><span class="cv-meta__value">Tokyo</span></li>
<li><span class="cv-meta__label">Domain</span><span class="cv-meta__value">low-level-guy.com</span></li>
<li><span class="cv-meta__label">Focus</span><span class="cv-meta__value">Backend · Performance · Architecture</span></li>
</ul>
</div>
<aside class="cv-hero__side">
<div class="cv-card">
<h2 class="cv-card__title">Core strengths</h2>
<ul class="cv-list">
<li>Software engineering (low-level & backend)</li>
<li>Performance-oriented design</li>
<li>Japanese business communication</li>
</ul>
</div>
<div class="cv-card">
<h2 class="cv-card__title">Links</h2>
<div class="cv-links">
<a class="cv-link" href="https://low-level-guy.com">Website</a>
<a class="cv-link" href="https://github.com/josufh">GitHub</a>
</div>
</div>
</aside>
</div>
</header>
<main class="cv-content">
<section class="cv-section" id="about">
<h2 class="cv-h2">About me</h2>
<div class="cv-card">
<p class="cv-muted">
I specialize in backend systems and low-level programming. I enjoy avoiding unnecessary dependencies and
building core functionality myself, as it gives a deeper understanding of how software actually works.
<section class="landing">
<div class="landing__content">
<p class="landing__eyebrow">Software Engineer / Technical Lead based in Tokyo</p>
<h1>Joshua Ferrer</h1>
<p class="landing__summary">
Software engineering, backend systems, infrastructure, requirements definition, and technical leadership
for internal business systems.
</p>
<p class="cv-muted">
My daily work involves backend development, architecture design, and cloud-based systems, with a strong
focus on reliability and maintainability.
</p>
</div>
</section>
<section class="cv-section" id="experience">
<h2 class="cv-h2">Experience</h2>
<div class="cv-stack">
<article class="cv-item">
<div class="cv-item__top">
<h3 class="cv-h3">株式会社日本教育クリエイト — ITソリューション事業部</h3>
<span class="cv-date">2024/09 — Present</span>
</div>
<p class="cv-muted">
Backend Engineer. Internal business systems, infrastructure integration, and architectural design.
</p>
<ul class="cv-bullets">
<li>Design and implementation of backend services using .NET / ASP.NET.</li>
<li>Cloud integrations across Azure, AWS, Google Cloud, and Oracle Cloud.</li>
<li>Ownership of deployment workflows using Docker and Linux-based environments.</li>
<li>System-level problem solving with performance and reliability as primary goals.</li>
</ul>
<div class="cv-tags">
<span class="cv-tag">C#</span>
<span class="cv-tag">ASP.NET</span>
<span class="cv-tag">Docker</span>
<span class="cv-tag">Linux</span>
</div>
</article>
</div>
</section>
<section class="cv-section" id="skills">
<h2 class="cv-h2">Skills</h2>
<div class="cv-grid2">
<div class="cv-card">
<h3 class="cv-h3">Technical</h3>
<ul class="cv-list">
<li><strong>Languages:</strong> C, C# (main), others as needed</li>
<li><strong>Frameworks:</strong> .NET, ASP.NET</li>
<li><strong>Cloud:</strong> Google Cloud, AWS, Azure, Oracle</li>
<li><strong>OS:</strong> Arch Linux, Ubuntu, Debian (Windows via WSL)</li>
<li><strong>Tools:</strong> VS Code, Vim</li>
</ul>
</div>
<div class="cv-card">
<h3 class="cv-h3">Languages</h3>
<ul class="cv-list">
<li>English — native</li>
<li>Spanish — native</li>
<li>Catalan — native</li>
<li>Japanese — fluent / business (JLPT N1)</li>
<li>Chinese — beginner (HSK3)</li>
</ul>
<div class="landing__actions">
<a class="btn btn-dark" href="/cv">View CV</a>
<a class="btn btn-outline-dark" href="/?lang=ja">日本語</a>
<a class="btn btn-outline-dark" href="https://git.low-level-guy.com/josufh" target="_blank" rel="noopener noreferrer">Git profile</a>
</div>
</div>
</section>
<section class="cv-section" id="education">
<h2 class="cv-h2">Education</h2>
<div class="cv-card">
<strong>IT Business</strong><br />
東京ビジネス外語カレッジ（池袋）<br />
<span class="cv-muted">Senmon Gakkou</span>
</div>
</section>
<section class="cv-section" id="contact">
<h2 class="cv-h2">Contact</h2>
<div class="cv-card">
<div class="cv-contact">
<div>
<div class="cv-muted small">Email</div>
<div><a class="cv-link" href="mailto:josuferrer@outlook.com">josuferrer@outlook.com</a></div>
</div>
<div>
<div class="cv-muted small">Website</div>
<div><a class="cv-link" href="https://low-level-guy.com">low-level-guy.com</a></div>
</div>
<div>
<div class="cv-muted small">GitHub</div>
<div><a class="cv-link" href="https://github.com/josufh">github.com/josufh</a></div>
</div>
</div>
</div>
</section>
</main>
Views/Home/Index.cshtml.css
+24 -301
View File
@@ -1,317 +1,40 @@
:root {
/* Light theme defaults */
--cv-bg: #0b1220;
--cv-bg2: #060a13;
--cv-accent: #4f7cff;
--cv-accent2: #00ffd1;
--cv-text: rgba(255, 255, 255, 0.92);
--cv-muted: rgba(255, 255, 255, 0.70);
--cv-muted2: rgba(255, 255, 255, 0.55);
--cv-border: rgba(255, 255, 255, 0.12);
/* “Paper” surfaces (used in light mode content area) */
--cv-paper: #ffffff;
--cv-paper-text: rgba(0, 0, 0, 0.88);
--cv-paper-muted: rgba(0, 0, 0, 0.62);
--cv-paper-border: rgba(0, 0, 0, 0.10);
--cv-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
--cv-radius: 18px;
.landing {
min-height: calc(100vh - 180px);
display: flex;
align-items: center;
padding: 5rem 0;
}
/* Make anchor jumps feel better */
html {
scroll-behavior: smooth;
.landing__content {
max-width: 760px;
}
/* ---------------- Hero ---------------- */
.cv-hero {
background:
radial-gradient(1200px 600px at 10% 10%, rgba(79,124,255,.30), transparent 60%),
radial-gradient(900px 500px at 80% 20%, rgba(0,255,209,.12), transparent 60%),
linear-gradient(180deg, var(--cv-bg), var(--cv-bg2));
border-bottom: 1px solid var(--cv-border);
padding: 3.75rem 0 2.75rem 0;
}
.cv-hero__inner {
max-width: 1140px;
margin: 0 auto;
padding: 0 1rem;
display: grid;
grid-template-columns: 1.35fr 0.95fr;
gap: 1.25rem;
align-items: start;
}
.cv-hero__main {
min-width: 0;
}
.cv-kicker {
margin: 0 0 0.85rem 0;
color: var(--cv-muted2);
font-size: 0.85rem;
letter-spacing: 0.10em;
.landing__eyebrow {
margin: 0 0 1rem;
color: #5b6472;
font-size: 0.95rem;
text-transform: uppercase;
}
.cv-title {
.landing h1 {
margin: 0;
color: var(--cv-text);
font-weight: 750;
line-height: 1.05;
letter-spacing: -0.02em;
color: #111827;
font-size: clamp(2.75rem, 7vw, 5.5rem);
font-weight: 700;
line-height: 1;
}
.cv-subtitle {
margin: 0.75rem 0 1.25rem 0;
color: var(--cv-muted);
font-size: 1.1rem;
.landing__summary {
max-width: 620px;
margin: 1.5rem 0 0;
color: #374151;
font-size: 1.2rem;
line-height: 1.6;
}
.cv-summary {
margin: 0 0 1.5rem 0;
color: var(--cv-muted);
max-width: 70ch;
/* Technical feel without being gimmicky */
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.95rem;
line-height: 1.55;
}
.cv-actions {
.landing__actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: 1.25rem;
}
.cv-btn {
border-radius: 999px;
padding: 0.65rem 1.1rem;
}
.cv-meta {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.5rem;
}
.cv-meta li {
display: flex;
gap: 0.75rem;
align-items: baseline;
margin-top: 2rem;
}
.cv-meta__label {
min-width: 86px;
color: var(--cv-muted2);
font-size: 0.9rem;
}
.cv-meta__value {
color: var(--cv-text);
font-size: 0.95rem;
}
/* ---------------- Side cards (hero) ---------------- */
.cv-hero__side {
display: grid;
gap: 1rem;
}
.cv-card {
background: var(--cv-paper);
color: var(--cv-paper-text);
border: 1px solid var(--cv-paper-border);
border-radius: var(--cv-radius);
padding: 1.25rem;
box-shadow: var(--cv-shadow);
}
.cv-card__title {
margin: 0 0 0.5rem 0;
font-size: 1rem;
font-weight: 600;
}
.cv-links {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.cv-link {
color: var(--cv-accent);
text-decoration: none;
}
.cv-link:hover {
text-decoration: underline;
}
/* ---------------- Main content ---------------- */
.cv-content {
max-width: 1140px;
margin: 0 auto;
padding: 2.25rem 1rem 3.5rem 1rem;
}
.cv-section {
margin: 0 0 2.25rem 0;
}
.cv-h2 {
margin: 0 0 0.75rem 0;
font-weight: 650;
letter-spacing: -0.01em;
}
.cv-h3 {
margin: 0 0 0.25rem 0;
font-weight: 600;
}
.cv-muted {
color: var(--cv-paper-muted);
}
/* ---------------- Layout helpers ---------------- */
.cv-grid2 {
display: grid;
gap: 1rem;
grid-template-columns: repeat(2, 1fr);
}
.cv-grid3 {
display: grid;
gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}
.cv-stack {
display: grid;
gap: 1rem;
}
/* ---------------- Items (experience/projects blocks) ---------------- */
.cv-item {
background: var(--cv-paper);
border: 1px solid var(--cv-paper-border);
border-radius: var(--cv-radius);
padding: 1.25rem;
box-shadow: var(--cv-shadow);
color: var(--cv-paper-text);
}
.cv-item__top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.75rem;
flex-wrap: wrap;
}
.cv-date {
color: rgba(0, 0, 0, 0.55);
font-size: 0.95rem;
}
/* Lists */
.cv-list {
margin: 0.5rem 0 0 0;
padding-left: 1.2rem;
}
.cv-list li {
margin-bottom: 0.25rem;
}
.cv-bullets {
margin: 0.6rem 0 0 0;
padding-left: 1.15rem;
}
.cv-bullets li {
margin-bottom: 0.35rem;
}
/* Tags */
.cv-tags {
margin-top: 0.75rem;
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.cv-tag {
display: inline-flex;
align-items: center;
border: 1px solid rgba(0, 0, 0, 0.12);
background: rgba(0, 0, 0, 0.03);
padding: 0.25rem 0.6rem;
border-radius: 999px;
font-size: 0.85rem;
color: rgba(0, 0, 0, 0.70);
}
/* ---------------- Contact grid ---------------- */
.cv-contact {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
/* ---------------- Responsive ---------------- */
@media (max-width: 992px) {
.cv-hero__inner {
grid-template-columns: 1fr;
}
.cv-grid2 {
grid-template-columns: 1fr;
}
.cv-grid3 {
grid-template-columns: 1fr;
}
.cv-contact {
grid-template-columns: 1fr;
}
}
/* ---------------- Dark mode for main content ----------------
The hero is already dark; this flips the “paper cards” to dark surfaces.
*/
@media (prefers-color-scheme: dark) {
:root {
--cv-paper: #0f1a30;
--cv-paper-text: rgba(255, 255, 255, 0.92);
--cv-paper-muted: rgba(255, 255, 255, 0.72);
--cv-paper-border: rgba(255, 255, 255, 0.12);
--cv-shadow: none;
}
.cv-date {
color: rgba(255, 255, 255, 0.55);
}
.cv-tag {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.72);
}
}
Views/Home/IndexJa.cshtml
+18
View File
@@ -0,0 +1,18 @@
@{
ViewData["Title"] = "Joshua Ferrer";
}
<section class="landing">
<div class="landing__content">
<p class="landing__eyebrow">東京を拠点とするソフトウェアエンジニア / テクニカルリード</p>
<h1>Joshua Ferrer</h1>
<p class="landing__summary">
社内業務システムにおけるソフトウェア開発、バックエンド、インフラ、要件定義、技術リードを担当しています。
</p>
<div class="landing__actions">
<a class="btn btn-dark" href="/cv?lang=ja">履歴書を見る</a>
<a class="btn btn-outline-dark" href="/?lang=en">English</a>
<a class="btn btn-outline-dark" href="https://git.low-level-guy.com/josufh" target="_blank" rel="noopener noreferrer">Git profile</a>
</div>
</div>
</section>
Views/Home/IndexJa.cshtml.css
+40
View File
@@ -0,0 +1,40 @@
.landing {
min-height: calc(100vh - 180px);
display: flex;
align-items: center;
padding: 5rem 0;
}
.landing__content {
max-width: 760px;
}
.landing__eyebrow {
margin: 0 0 1rem;
color: #5b6472;
font-size: 0.95rem;
text-transform: uppercase;
}
.landing h1 {
margin: 0;
color: #111827;
font-size: clamp(2.75rem, 7vw, 5.5rem);
font-weight: 700;
line-height: 1;
}
.landing__summary {
max-width: 620px;
margin: 1.5rem 0 0;
color: #374151;
font-size: 1.2rem;
line-height: 1.6;
}
.landing__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 2rem;
}