Portfolio/index.html at master · nirooshhhh/Portfolio · GitHub

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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Nirosh Rai | Full Stack Developer</title>

  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css" />
  <link rel="stylesheet" href="css/animations.css">
</head>
<body>

  <!-- NAVBAR -->
  <header class="navbar">
    <h2 class="logo">Nirosh.dev</h2>
    <nav>
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#skills">Skills</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <!-- HERO -->
  <section id="home" class="hero">
    <div class="hero-container">

      <div class="hero-text">
        <h1>Hi, I'm <span>Nirosh Rai</span></h1>
        <h3>Full Stack Developer | 2nd Year Engineering Student</h3>
        <p>
          I am a passionate Computer Engineering student currently in my 2nd year.
          I enjoy building responsive web applications and learning modern
          full stack technologies.
        </p>

        <div class="hero-buttons">
          <a href="#projects" class="btn">View Projects</a>
          <a href="#contact" class="btn btn-outline">Contact Me</a>
        </div>
      </div>

      <div class="hero-img">
        <img src="assets/profile.jpeg" alt="Nirosh Profile">
      </div>

    </div>
  </section>

  <!-- ABOUT -->
  <section id="about" class="about section">
    <h2>About Me</h2>
    <p>
      I am a second-year engineering student with strong interest in web development.
      I have experience building projects using HTML, CSS, JavaScript, and backend
      technologies like Node.js and Express. I am constantly learning and improving
      my skills by building real-world projects.
    </p>
  </section>

  <!-- SKILLS -->
  <section id="skills" class="skills section">
    <h2>Technical Skills</h2>

    <div class="skills-grid">
      <div class="skill-card">
        <h3>Frontend</h3>
        <p>HTML, CSS, JavaScript, React</p>
      </div>

      <div class="skill-card">
        <h3>Backend</h3>
        <p>Node.js, Express.js</p>
      </div>

      <div class="skill-card">
        <h3>Database</h3>
        <p>MongoDB, MySQL</p>
      </div>

      <div class="skill-card">
        <h3>Tools</h3>
        <p>Git, GitHub, Vercel, Postman</p>
      </div>
    </div>
  </section>

  <!-- PROJECTS -->
  <section id="projects" class="projects section">
    <h2>My Projects</h2>

    <div class="project-grid">

      <div class="project-card">
        <img src="assets/projects/movieverse.png" alt="MovieVerse">
        <h3>MovieVerse</h3>
        <p>Movie search application using TMDB API with trailer support.</p>
        <a href="https://movie-app-six-pi-15.vercel.app" target="_blank">Live Demo</a>
        <a href="#">|</a>
        <a href="https://github.com/nirooshhhh/Movie-app" target="_blank">GitHub</a>
      </div>

      <div class="project-card">
        <img src="assets/projects/stackvisualizer (1).png" alt="Stack Visualizer">
        <h3>Stack Visualizer</h3>
        <p>Tool to visualize stack operations and expression evaluation.</p>
        <a href="https://stack-conversion-and-evaluation-ktm.vercel.app" target="_blank">Live Demo</a>
        <a href="#">|</a>
        <a href="https://github.com/nirooshhhh/Stack-Conversion-and-Evaluation" target="_blank">GitHub</a>
      </div>

      <div class="project-card">
        <img src="assets/projects/aistudyplanner.png" alt="AI-Study Planner">
        <h3>AI Study Planner</h3>
        <p>AI-powered study planner that helps students organize their study schedule.</p>
        <a href="https://study-planner-8gqr.vercel.app" target="_blank">Live Demo</a>
        <a href="#">|</a>
        <a href="https://github.com/nirooshhhh/Study-planner" target="_blank">GitHub</a>
      </div>

      <div class="project-card">
        <img src="assets/projects/aicrop.png" alt="AI Crop">
        <h3>AI Crop Recommendation</h3>
        <p>Machine learning-based system recommending crops based on data.</p>
        <p><strong>Currently in progress...</strong></p>
      </div>

    </div>
  </section>

  <!-- CONTACT -->
  <section id="contact" class="contact section">
    <h2>Contact Me</h2>

    <form id="contact-form">
      <input type="text" name="name" placeholder="Your Name" required />
      <input type="email" name="email" placeholder="Your Email" required />
      <textarea name="message" placeholder="Your Message" required></textarea>
      <button type="submit" class="btn">Send Message</button>
    </form>

    <p id="form-status"></p>
  </section>

  <footer>
    <p>© 2026 Nirosh Rai | Engineering Student</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>