Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
133 lines (127 loc) · 6.64 KB
/
Copy pathindex.html
File metadata and controls
133 lines (127 loc) · 6.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Nayan Sharma - B.Tech Student and aspiring software developer portfolio.">
<title>Nayan Sharma | Aspiring Software Developer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-shell">
<header class="site-header">
<a class="brand" href="#home" aria-label="Nayan Sharma home">
<span class="brand-mark">NS</span>
<span>Nayan Sharma</span>
</a>
<nav class="site-nav" aria-label="Primary navigation">
<a href="#about">About</a>
<a href="#education">Education</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section class="hero" id="home" aria-labelledby="hero-title">
<div class="hero-copy">
<p class="eyebrow reveal">Hello, I am</p>
<h1 id="hero-title" class="reveal reveal-delay-1">Nayan<br><span>Sharma.</span></h1>
<p class="hero-role reveal reveal-delay-2">B.Tech Student <span class="role-divider">|</span> Aspiring Software Developer</p>
<p class="hero-intro reveal reveal-delay-3">Turning curious ideas into thoughtful, scalable digital experiences.</p>
<a class="button reveal reveal-delay-3" href="#projects">Explore my work <span aria-hidden="true">→</span></a>
</div>
<div class="hero-visual" aria-hidden="true">
<div class="orbit orbit-one"></div>
<div class="orbit orbit-two"></div>
<div class="code-window">
<div class="window-bar"><i></i><i></i><i></i><span>developer.java</span></div>
<div class="code-lines">
<span><b>01</b> <em>public class</em> Developer {</span>
<span><b>02</b> String <strong>passion</strong> = <mark>"build"</mark>;</span>
<span><b>03</b> while (learning) {</span>
<span><b>04</b> solveProblems();</span>
<span><b>05</b> }</span>
<span><b>06</b> }</span>
</div>
</div>
<span class="visual-label">01 / portfolio</span>
</div>
</section>
<section class="content-section about-section" id="about" aria-labelledby="about-title">
<div class="section-label"><span>01</span> About me</div>
<div class="section-content split-content">
<h2 id="about-title">Curiosity<br><span>meets code.</span></h2>
<p class="large-copy">I am an aspiring software developer with strong interest in Java and Full Stack Web Development. Passionate about building scalable web applications and solving real-world problems.</p>
</div>
</section>
<section class="content-section education-section" id="education" aria-labelledby="education-title">
<div class="section-label"><span>02</span> Education</div>
<div class="education-card">
<div class="education-year">Present<br><span>2026</span></div>
<div class="education-details">
<p class="card-kicker">Bachelor of Technology</p>
<h2 id="education-title">Computer Science<br>and Engineering</h2>
<p>Mahakal Institute of Technology, Ujjain</p>
</div>
<div class="status-pill"><span></span> Currently Pursuing</div>
</div>
</section>
<section class="content-section projects-section" id="projects" aria-labelledby="projects-title">
<div class="section-label"><span>03</span> Selected work</div>
<div class="projects-heading">
<h2 id="projects-title">Things I have<br><span>been building.</span></h2>
<p>Projects are where ideas become useful. Here are a few explorations in web development and problem solving.</p>
</div>
<div class="project-grid">
<article class="project-card project-weather">
<div class="project-number">01</div>
<div class="project-icon" aria-hidden="true">☀</div>
<div>
<p class="card-kicker">Web application</p>
<h3>Weather App</h3>
<p>Simple, clear weather information designed for quick everyday decisions.</p>
</div>
<a class="project-link" href="#contact" aria-label="Ask about Weather App">View project <span aria-hidden="true">↗</span></a>
</article>
<article class="project-card project-todo">
<div class="project-number">02</div>
<div class="project-icon" aria-hidden="true">✓</div>
<div>
<p class="card-kicker">Productivity tool</p>
<h3>To-Do List App</h3>
<p>A focused task companion that keeps priorities visible and manageable.</p>
</div>
<a class="project-link" href="#contact" aria-label="Ask about To-Do List App">View project <span aria-hidden="true">↗</span></a>
</article>
<article class="project-card project-disaster">
<div class="project-number">03</div>
<div class="project-icon" aria-hidden="true">⚠</div>
<div>
<p class="card-kicker">Social impact system</p>
<h3>Smart Disaster<br>Management System</h3>
<p>A technology-led concept for faster coordination during critical moments.</p>
</div>
<a class="project-link" href="#contact" aria-label="Ask about Smart Disaster Management System">View project <span aria-hidden="true">↗</span></a>
</article>
</div>
</section>
<section class="contact-section" id="contact" aria-labelledby="contact-title">
<div class="contact-intro">
<div class="section-label"><span>04</span> Get in touch</div>
<h2 id="contact-title">Let's make<br><em>something useful.</em></h2>
</div>
<div class="contact-details">
<a href="mailto:sharmanayan68@gmail.com"><span>Email</span>sharmanayan68@gmail.com</a>
<a href="https://www.linkedin.com/in/nayan-sharma-a27871319" target="_blank" rel="noreferrer"><span>LinkedIn</span>linkedin.com/in/nayan-sharma-a27871319</a>
<a href="https://github.com/sharmanayan668-code" target="_blank" rel="noreferrer"><span>GitHub</span>github.com/sharmanayan668-code</a>
<a href="tel:+918965050925"><span>Phone</span>+91 8965050925</a>
</div>
</section>
</main>
<footer class="site-footer">
<span>© 2026 Nayan Sharma</span>
<span>Built with intent and CSS</span>
</footer>
</div>
</body>
</html>