Skip to content

Commit fff572d

Browse files
committed
improve style and text
1 parent 47e5ea3 commit fff572d

File tree

2 files changed

+175
-124
lines changed

2 files changed

+175
-124
lines changed

index.html

Lines changed: 99 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,111 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
43
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<title>Amir Nourinia – Software Engineer & AI Specialist</title>
8-
<link rel="stylesheet" href="src/styles.css">
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta name="description" content="Amir Nourinia – Software Engineer & AI Specialist. Explore projects, experiences, and connect for innovative software solutions." />
7+
<title>Amir Nourinia – Software Engineer & AI Specialist</title>
8+
<!-- Google Fonts -->
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet" />
12+
<!-- External CSS -->
13+
<link rel="stylesheet" href="src/styles.css" />
914
</head>
10-
1115
<body>
12-
<header>
13-
<h1>Amir Nourinia</h1>
14-
<p>Systems & Graphics Software Engineer | Medical Imaging & AI Specialist</p>
15-
</header>
16-
<nav>
17-
<a href="#about">About</a>
18-
<a href="#interests">Interests</a>
19-
<a href="#projects">Projects</a>
20-
<a href="#experience">Experience</a>
21-
<a href="#cv">CV</a>
22-
<a href="#contact">Contact</a>
23-
</nav>
24-
<main>
25-
<section id="about">
26-
<h2>About Me</h2>
27-
<p>I am an innovative software engineer with deep expertise in systems and graphics programming.
28-
Passionate about advancing medical imaging through AI-driven solutions, I excel at designing
29-
high-performance, scalable software architectures that bridge cutting-edge technology
30-
with healthcare innovation. I am currently based in Munich, Germany.</p>
31-
</section>
16+
<header>
17+
<div class="container">
18+
<h1>Amir Nourinia</h1>
19+
<p>Systems &amp; Graphics Software Engineer | Medical Imaging &amp; AI Specialist</p>
20+
</div>
21+
</header>
22+
23+
<nav>
24+
<div class="container">
25+
<ul>
26+
<li><a href="#about">About</a></li>
27+
<li><a href="#interests">Interests</a></li>
28+
<li><a href="#projects">Projects</a></li>
29+
<li><a href="#experience">Experience</a></li>
30+
<li><a href="#cv">CV</a></li>
31+
<li><a href="#contact">Contact</a></li>
32+
</ul>
33+
</div>
34+
</nav>
35+
36+
<main>
37+
<div class="container">
38+
<section id="about">
39+
<h2>About Me</h2>
40+
<p>
41+
I am an innovative software engineer with deep expertise in systems and graphics programming. Passionate about advancing medical imaging through AI-driven solutions, I excel at designing high-performance, scalable software architectures that bridge cutting-edge technology with healthcare innovation. Currently based in Munich, Germany, my main development language is C++, and I have extensive experience in Java, Kotlin, Swift, Rust, Python, and TypeScript.
42+
</p>
43+
</section>
3244

33-
<section id="interests">
34-
<h2>Interests</h2>
35-
<ul>
36-
<li>Computational Modeling & Numerical Programming</li>
37-
<li>Graphics Programming & Computer Vision</li>
38-
<li>Systems Programming and Design</li>
39-
<li>Algorithms Analysis and Design</li>
40-
<li>Augmented and Mixed Reality</li>
41-
<li>Low Latency Data Streaming & Computer Networks</li>
42-
</ul>
43-
</section>
45+
<section id="interests">
46+
<h2>Interests</h2>
47+
<ul>
48+
<li>Data-Driven Modeling and Scientific Computation</li>
49+
<li>Numerical Programming and Algorithms</li>
50+
<li>Graphics Programming &amp; Computer Vision</li>
51+
<li>Systems Programming and Design</li>
52+
<li>Algorithms Analysis and Design</li>
53+
<li>Augmented and Mixed Reality</li>
54+
<li>Low Latency Data Streaming &amp; Computer Networks</li>
55+
</ul>
56+
</section>
4457

45-
<section id="projects">
46-
<h2>Projects</h2>
47-
<p>My current open-source projects include custom implementations of algorithms and data structures using
48-
Modern C++ (23), Java, Kotlin, Swift and Python. These projects are developed from the ground up to provide a deeper
49-
understanding of fundamental concepts.</p>
50-
</section>
58+
<section id="projects">
59+
<h2>Projects</h2>
60+
<p>
61+
You can find all my open-source projects in my personal
62+
<a href="https://github.com/amirnn" target="_blank" rel="noopener noreferrer">GitHub repository</a>.
63+
</p>
64+
<p>
65+
My current open-source projects include custom implementations of <strong>Algorithms and Data Structures</strong> using Modern C++ (23), Java, Kotlin, Swift, and Python. These projects are developed from the ground up to provide a deeper understanding of fundamental concepts.
66+
</p>
67+
<p>
68+
Additionally, I maintain my own library for <strong>Computational Geometry and Numerical Linear Algebra</strong>, developed entirely in Modern C++ (23).
69+
</p>
70+
</section>
5171

52-
<section id="experience">
53-
<h2>Education & Experience</h2>
54-
<p>I hold a B.Sc. in Electrical Engineering - Bioelectrics from Amirkabir University of Technology and
55-
pursued an M.Sc. in Computer Science – Biomedical Computing at the Technical University of Munich. My
56-
professional experience includes serving as a Senior Software Engineer at Holo-Light GmbH in Munich,
57-
where I led the design and development of low-latency XR systems and cross-platform libraries. I have
58-
also worked in various software development roles focused on systems programming, graphics, and
59-
AI-driven medical imaging solutions.</p>
60-
</section>
72+
<section id="experience">
73+
<h2>Education &amp; Experience</h2>
74+
<p>
75+
I hold a B.Sc. in Electrical Engineering - Bioelectrics from Amirkabir University of Technology and pursued an M.Sc. in Computer Science – Biomedical Computing at the Technical University of Munich. My professional experience includes serving as a Senior Software Engineer at Holo-Light GmbH in Munich, where I led the design and development of low-latency XR systems and cross-platform libraries. I have also worked in various software development roles focused on systems programming, graphics, and AI-driven medical imaging solutions.
76+
</p>
77+
</section>
6178

62-
<section id="cv">
63-
<h2>Curriculum Vitae</h2>
64-
<p>You can view my public CV for detailed information on my education, work experience, publications, and
65-
skills.
66-
Download it <a href="resources/amirnn-public-cv.pdf" target="_blank" rel="noopener noreferrer">here</a>.
67-
</p>
68-
</section>
79+
<section id="cv">
80+
<h2>Curriculum Vitae</h2>
81+
<p>
82+
You can view my public CV for detailed information on my education, work experience, publications, and skills.
83+
Download it
84+
<a href="resources/amirnn-public-cv.pdf" target="_blank" rel="noopener noreferrer">here</a>.
85+
</p>
86+
</section>
6987

70-
<section id="contact">
71-
<h2>Contact</h2>
72-
<p>If you have any questions, or would like to connect, feel free to reach out:</p>
73-
<ul>
74-
<li><a href="mailto:amir[dot]nouri[dot]nia[at]gmail[dot]com">E-mail</a></li>
75-
<li><a href="https://www.linkedin.com/in/amirnn"> LinkedIn </a></li>
76-
<li><a href="https://github.com/amirnn">GitHub</a></li>
77-
</ul>
78-
</section>
88+
<section id="contact">
89+
<h2>Contact</h2>
90+
<p>If you have any questions or would like to connect, feel free to reach out:</p>
91+
<ul>
92+
<li><a href="mailto:amir[dot]nouri[dot]nia[at]gmail[dot]com">E-mail</a></li>
93+
<li><a href="https://www.linkedin.com/in/amirnn" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
94+
<li><a href="https://github.com/amirnn" target="_blank" rel="noopener noreferrer">GitHub</a></li>
95+
</ul>
96+
</section>
7997

80-
<section id="epilogue">
81-
<h2>Epilogue</h2>
82-
<p>Thank you for visiting my personal landing page. I look forward to connecting with you!</p>
83-
</section>
84-
</main>
85-
<footer>
86-
<p>&copy; 2025 Amir Nourinia. All rights reserved.</p>
87-
</footer>
98+
<section id="epilogue">
99+
<h2>Epilogue</h2>
100+
<p>Thank you for visiting my personal landing page. I look forward to connecting with you!</p>
101+
</section>
102+
</div>
103+
</main>
104+
105+
<footer>
106+
<div class="container">
107+
<p>&copy; 2025 Amir Nourinia. All rights reserved.</p>
108+
</div>
109+
</footer>
88110
</body>
89-
90-
</html>
111+
</html>

src/styles.css

Lines changed: 76 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,119 @@
1+
/* Basic reset */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
/* Base styling */
19
body {
2-
font-family: Arial, sans-serif;
10+
font-family: 'Roboto', sans-serif;
311
line-height: 1.6;
4-
margin: 0;
5-
background-color: #f4f4f4;
612
color: #333;
13+
background-color: #f9f9f9;
14+
}
15+
16+
/* Centering content and responsive container */
17+
.container {
18+
width: 90%;
19+
max-width: 1200px;
20+
margin: auto;
21+
padding: 20px;
722
}
823

24+
/* Header styling */
925
header {
10-
background: #333;
26+
background: linear-gradient(135deg, #1e3c72, #2a5298);
1127
color: #fff;
12-
padding: 2rem 1rem;
28+
padding: 60px 0;
1329
text-align: center;
1430
}
1531

1632
header h1 {
17-
margin: 0.2rem;
18-
font-size: 2.5rem;
33+
font-size: 3em;
34+
margin-bottom: 10px;
1935
}
2036

2137
header p {
22-
margin: 0.5rem 0 0;
23-
font-size: 1.2rem;
24-
font-weight: bold;
38+
font-size: 1.2em;
2539
}
2640

41+
/* Navigation styling */
2742
nav {
28-
background: #444;
29-
padding: 0.5rem;
30-
text-align: center;
43+
background-color: #fff;
44+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
3145
}
3246

33-
nav a {
34-
color: #fff;
35-
margin: 0 1rem;
47+
nav .container {
48+
display: flex;
49+
justify-content: center;
50+
}
51+
52+
nav ul {
53+
list-style: none;
54+
display: flex;
55+
}
56+
57+
nav ul li {
58+
margin: 0 15px;
59+
}
60+
61+
nav ul li a {
3662
text-decoration: none;
37-
font-weight: bold;
63+
color: #333;
64+
font-weight: 500;
65+
padding: 15px 0;
66+
transition: color 0.3s ease;
67+
}
68+
69+
nav ul li a:hover {
70+
color: #2a5298;
3871
}
3972

73+
/* Main content styling */
4074
main {
41-
max-width: 900px;
42-
margin: 2rem auto;
43-
padding: 1rem;
44-
background: #fff;
45-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
75+
padding: 40px 0;
4676
}
4777

48-
section {
49-
margin-bottom: 2rem;
78+
main section {
79+
margin-bottom: 60px;
5080
}
5181

52-
section h2 {
53-
border-bottom: 2px solid #ccc;
54-
padding-bottom: 0.5rem;
55-
margin-bottom: 1rem;
82+
main section h2 {
83+
font-size: 2em;
84+
margin-bottom: 20px;
85+
color: #1e3c72;
86+
border-bottom: 2px solid #2a5298;
87+
display: inline-block;
88+
padding-bottom: 5px;
5689
}
5790

58-
ul {
59-
list-style-type: disc;
60-
margin-left: 2rem;
91+
main section p,
92+
main section ul {
93+
font-size: 1.1em;
94+
margin-bottom: 20px;
6195
}
6296

97+
main section ul li {
98+
margin-bottom: 10px;
99+
}
100+
101+
/* Link styling */
63102
a {
64-
color: #0066cc;
103+
color: #2a5298;
65104
text-decoration: none;
105+
transition: color 0.3s ease;
66106
}
67107

68108
a:hover {
69109
text-decoration: underline;
70110
}
71111

112+
/* Footer styling */
72113
footer {
73-
background: #333;
114+
background-color: #333;
74115
color: #fff;
75116
text-align: center;
76-
padding: 1rem;
77-
font-size: 0.9rem;
78-
}
79-
80-
@media (max-width: 600px) {
81-
header h1 {
82-
font-size: 2rem;
83-
}
84-
85-
nav a {
86-
margin: 0 0.5rem;
87-
font-size: 0.9rem;
88-
}
117+
padding: 20px 0;
118+
font-size: 0.9em;
89119
}

0 commit comments

Comments
 (0)